benjamin.harris
/
tasplanning_report


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945
							<?php
  $apiBase = getenv('API_BASE') ?: 'https://api.modulos.com.au/ask';
  $demoBearer = getenv('DEMO_TOKEN') ?: '';
  
?>

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Primary SEO -->
        <title>AI Planning Scheme Assistant for Tasmania — SPPs, LPS & Overlay Lookup</title>
        <meta name="description" content="Get instant, clause-cited answers from the Tasmanian Planning Scheme — zones, overlays, setbacks and acceptable solutions. Free to try, no signup needed.">
        <link rel="canonical" href="https://tasplanning.report/">
        <meta name="robots" content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1">

        <!-- Helpful resource hints -->
        <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
        <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
        <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
        <link rel="dns-prefetch" href="//www.googletagmanager.com">

        <!-- (Optional) Legacy keywords -->
        <meta name="keywords" content="Tasmania's AI Planning Scheme, TPS, State Planning Provisions, SPPs, Local Provisions Schedule, LPS, planning overlays, planning codes, acceptable solutions, performance criteria, Tasmania planning, property report, development standards, council planning Tasmania, building design Tasmania, planning assessment Tasmania">

        <!-- Open Graph -->
        <meta property="og:type" content="website">
        <meta property="og:locale" content="en_AU">
        <meta property="og:site_name" content="Tasmania's Planning Scheme Assistant">
        <meta property="og:url" content="https://tasplanning.report/">
        <meta property="og:title" content="Tasmania's AI Planning Scheme Assistant — Faster Property Assessments">
        <meta property="og:description" content="Get instant, clause-cited answers from the Tasmanian Planning Scheme — zones, overlays, setbacks and acceptable solutions. Free to try, no signup needed.">
        <meta property="og:image" content="https://tasplanning.report/image/og-image.jpg">
        <meta property="og:image:alt" content="Tasmania's AI Planning Scheme Assistant interface preview">
        <meta property="og:image:width" content="1200">
        <meta property="og:image:height" content="630">

        <!-- Hreflang -->
        <link rel="alternate" hreflang="en-au" href="https://tasplanning.report/">
        <link rel="alternate" hreflang="x-default" href="https://tasplanning.report/">

        <!-- Theming / PWA -->
        <meta name="theme-color" content="#000000">
        <meta name="color-scheme" content="dark light">
        <link rel="manifest" href="/site.webmanifest">

        <!-- Twitter -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:domain" content="tasplanning.report">
        <meta name="twitter:site" content="@tasplanningreport">
        <meta name="twitter:creator" content="@tasplanningreport">
        <meta name="twitter:title" content="Tasmania's AI Planning Scheme Assistant — Faster Property Assessments">
        <meta name="twitter:description" content="Look up SPPs and LPS rules, overlays, and codes in seconds. Built for Tasmanian architects, building designers and homeowners to simplify planning assessments with clear, cited sources.">
        <meta name="twitter:image" content="https://tasplanning.report/image/og-image.jpg">
        <meta name="twitter:image:alt" content="Tasmania's AI Planning Scheme Assistant interface preview">

        <!-- Favicons -->
        <link rel="icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/image/apple-touch-icon.png">

        <!-- OpenSearch (optional but nice) -->
        <link rel="search" type="application/opensearchdescription+xml" title="Tas Planning Search" href="/opensearch.xml">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet" >
        <link href="css/report.css?cache=1" rel="stylesheet" />
        <script src="/js/api-status.js" data-api="https://api.modulos.com.au"></script>
        
        <!-- Google tag (gtag.js) -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-LWEHQVCWEZ"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-LWEHQVCWEZ');
        </script>
        
        <!-- Google Tag Manager -->
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-M5PFLGZT');</script>
        <!-- End Google Tag Manager -->
</head>
<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M5PFLGZT"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

<!-- ============================================================
     NAV
     ============================================================ -->
<nav class="site-nav" id="top">
  <div class="container">
    <div class="nav-inner">
      <a class="nav-brand" href="#top">
        <!-- Replace src with your actual logo -->
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="28" height="28" rx="6" fill="var(--accent-dim)" stroke="rgba(45,220,138,0.25)" stroke-width="1"/>
          <path d="M8 20 L14 8 L20 20" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M10.5 16 L17.5 16" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        Tasmanian Planning Scheme
      </a>
      <div class="nav-links" id="navLinks">
        <a href="#how">How it works</a>
        <a href="#benefits">Features</a>
        <a href="#ncc">NCC</a>
        <a href="#pro">Pro</a>
        <a href="/faq">FAQ</a>
      </div>
      <div style="display:flex;align-items:center;gap:14px;">
        <div class="nav-status">
          <span class="status-dot"></span>
          <span class="nav-status-text">API live</span>
        </div>
        <button class="nav-toggle" id="navToggle" aria-label="Menu">&#9776;</button>
      </div>
    </div>
  </div>
</nav>

<!-- ============================================================
     HERO
     ============================================================ -->
<section class="hero" id="hero">
  <div class="container">
    <div class="hero-content">
      <div class="hero-badge">
        <span class="status-dot"></span>
        Free to try — no signup required
      </div>
      <h1 class="display">
        The AI assistant built for<br>
        <em>Tasmanian planning</em> assessments.
      </h1>
      <p class="lead" style="margin-top:20px; max-width: 560px;">
        Get zone summaries, setback tables, and cited assessment notes in minutes — not hours.
        Every answer traces back to the exact SPP or LPS clause.
      </p>

      <!-- Quick action pills -->
      <div class="pill-bar" style="margin-top:28px;">
        <button class="qa-pill" data-qa="Summarise the Village Zone acceptable solutions table."><i class="bi bi-map"></i> Zone summary</button>
        <button class="qa-pill" data-qa="List overlays for 19 Main Street, Hobart and the clauses to check."><i class="bi bi-layers"></i> Overlay check</button>
        <button class="qa-pill" data-qa="What is the parking rate for a commercial office? Cite the clause."><i class="bi bi-p-circle"></i> Car parking</button>
        <button class="qa-pill" data-qa="Create a setbacks table (front/side/rear) for the Village Zone with A vs P and sources."><i class="bi bi-table"></i> Setbacks table</button>
      </div>

      <!-- Active property context indicator (shows when arriving from site-report.php) -->
      <div id="heroCtxBar" style="display:none;margin-bottom:12px;padding:8px 14px;background:rgba(45,220,138,0.07);border:1px solid rgba(45,220,138,0.2);border-radius:8px;font-size:0.8rem;color:var(--text-secondary);align-items:center;gap:8px;flex-wrap:wrap;">
        <i class="bi bi-geo-alt" style="color:var(--accent);flex-shrink:0;"></i>
        <span id="heroCtxText"></span>
        <a href="#" id="heroCtxClear" style="margin-left:auto;color:var(--text-muted);font-size:0.72rem;">clear</a>
      </div>

      <!-- Search form -->
      <form id="heroAskForm" class="search-wrap">
        <i class="bi bi-search search-icon"></i>
        <input id="heroQuery" class="search-input" type="text"
               placeholder='Try: "What are the acceptable solutions for setbacks in the Village Zone?"'
               autocomplete="off" />
        <button class="search-btn" type="submit">Ask</button>
      </form>

      <!-- Address detection hint -->
      <div id="heroAddressBar" style="display:none;margin-top:8px;padding:6px 14px;background:rgba(45,220,138,0.06);border:1px solid rgba(45,220,138,0.15);border-radius:6px;font-size:0.78rem;color:var(--text-secondary);align-items:center;gap:8px;">
        <i class="bi bi-geo-alt" style="color:var(--accent);flex-shrink:0;"></i>
        Looks like an address — <a href="/site-report.php" style="color:var(--accent);">look up property data</a> first for zone &amp; overlay context.
      </div>

      <p class="search-hint">
        Press ⏎ or ⌘/Ctrl+⏎ to search. Or
        <a href="#" id="openDemoLink">open the interactive demo</a>.
        Cites clause numbers, links to SPPs/LPS viewer, supports follow-up questions.
      </p>

      <!-- Trust signals -->
      <div class="trust-line">
        <div class="trust-item"><i class="bi bi-shield-check"></i> Private by default</div>
        <div class="trust-item"><i class="bi bi-link-45deg"></i> Live clause links</div>
        <div class="trust-item"><i class="bi bi-file-earmark-text"></i> Google Docs export</div>
        <div class="trust-item"><i class="bi bi-key"></i> Bring your own API key</div>
      </div>

      <!-- Coming soon rail -->
      <div class="coming-rail">
        <span class="coming-chip"><i class="bi bi-cone"></i> Coming soon: <a href="#ncc">National Construction Code</a></span>
        <span class="coming-chip"><i class="bi bi-cone"></i> Coming soon: <a href="#as">Australian Standards</a></span>
        <span class="coming-chip new"><i class="bi bi-stars"></i> New: <a href="#pro">Pro report (waitlist)</a></span>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     INLINE RESULTS
     ============================================================ -->
<section class="results-section" id="results" style="display:none;">
  <div class="container">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
      <h2 style="font-size:1.5rem;">Answer</h2>
      <button class="btn btn-ghost btn-sm" id="resultsReset"><i class="bi bi-x-circle"></i> Clear</button>
    </div>
    <div id="heroStatus" class="status-bar" style="display:none;" aria-live="polite">
      <div class="spinner"></div>
      <span>Thinking…</span>
    </div>
    <div class="results-grid">
      <div class="result-card">
        <div class="answer-label">Answer</div>
        <div id="answerText">Ask a question above to see the answer here.</div>
      </div>
      <div class="sources-card">
        <div class="answer-label">Sources</div>
        <div id="answerSources" style="font-size:0.85rem;color:var(--text-secondary);">When available, sources will appear here.</div>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     HOW IT WORKS
     ============================================================ -->
<section class="section" id="how">
  <div class="container">
    <div class="section-label">Process</div>
    <h2>How it works</h2>
    <p class="lead" style="margin-top:12px; max-width:500px;">Three steps from site query to cited assessment notes.</p>

    <div class="steps-grid">
      <div class="step-card fade-up">
        <div class="step-num">1</div>
        <div class="step-icon"><i class="bi bi-pin-map"></i></div>
        <h3>Ask</h3>
        <p>Describe the site and what you need — setbacks, overlays, acceptable solutions. Paste an address or PID.</p>
      </div>
      <div class="step-card fade-up">
        <div class="step-num">2</div>
        <div class="step-icon"><i class="bi bi-table"></i></div>
        <h3>Generate</h3>
        <p>The assistant drafts sections with tables mapping use and works to correct clauses, including performance criteria and links.</p>
      </div>
      <div class="step-card fade-up">
        <div class="step-num">3</div>
        <div class="step-icon"><i class="bi bi-check2-square"></i></div>
        <h3>Export</h3>
        <p>Send to Google Docs or copy as Markdown. Continue refining — every update keeps sources intact.</p>
      </div>
    </div>

    <div style="display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;">
      <button class="btn btn-primary" id="openDemoBtn"><i class="bi bi-eye"></i> Try a demo</button>
      <a href="/local_state-planning-scheme" class="btn btn-outline"><i class="bi bi-arrow-right"></i> Open full assistant</a>
    </div>
  </div>
</section>

<!-- ============================================================
     BENEFITS
     ============================================================ -->
<section class="section" id="benefits" style="border-top:1px solid var(--border);">
  <div class="container">
    <div class="section-label">Why teams use it</div>
    <h2>Built for speed <em style="font-style:italic;color:var(--accent);">and</em> accuracy</h2>
    <p class="lead" style="margin-top:12px;max-width:520px;">For Tasmanian planners, building designers, and consultants.</p>

    <div class="benefits-grid">
      <div class="benefit-card fade-up">
        <div class="benefit-icon"><i class="bi bi-journal-check"></i></div>
        <h3>Source-backed answers</h3>
        <p>Every statement is traceable to SPPs or your council's LPS, ready for copy-paste into reports.</p>
      </div>
      <div class="benefit-card fade-up">
        <div class="benefit-icon"><i class="bi bi-speedometer2"></i></div>
        <h3>Faster drafting</h3>
        <p>Generate zone summaries, acceptable solutions tables, and assessment notes in minutes.</p>
      </div>
      <div class="benefit-card fade-up">
        <div class="benefit-icon"><i class="bi bi-shield-check"></i></div>
        <h3>Tas-specific guardrails</h3>
        <p>Built for the Tasmanian Planning Scheme — no generic fluff, just compliant outputs.</p>
      </div>
      <div class="benefit-card fade-up">
        <div class="benefit-icon"><i class="bi bi-diagram-2"></i></div>
        <h3>Fits your workflow</h3>
        <p>Export to Google Docs, keep editable tables, and refine via short follow-ups.</p>
      </div>
      <div class="benefit-card fade-up">
        <div class="benefit-icon"><i class="bi bi-link-45deg"></i></div>
        <h3>Live clause links</h3>
        <p>One-click back to the online viewer for the exact clause, schedule, or overlay.</p>
      </div>
      <div class="benefit-card fade-up">
        <div class="benefit-icon"><i class="bi bi-lock"></i></div>
        <h3>Private by default</h3>
        <p>Your prompts and drafts stay in your workspace. Bring your own API if required.</p>
      </div>
    </div>

    <!-- Testimonial -->
    <div class="testimonial fade-up">
      <div class="avatar">JP</div>
      <div>
        <blockquote>"Knocked an hour off my zone summary workflow. The clause links are the killer feature — I can verify the exact wording in two clicks."</blockquote>
        <cite>James P. — Planning consultant, Hobart</cite>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     NCC
     ============================================================ -->
<section class="coming-section" id="ncc">
  <div class="container">
    <div style="display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;">
      <span class="coming-chip"><i class="bi bi-cone"></i> Coming soon</span>
      <span class="coming-chip">Building controls</span>
    </div>
    <h2>National Construction Code</h2>
    <p class="lead" style="margin-top:12px;max-width:520px;">Bring NCC context into planning summaries where it's relevant — without mixing it up with SPP/LPS rules. Clean separation; clear citations.</p>

    <div class="coming-grid">
      <div class="glow-card fade-up">
        <h3>Relevant parts & clauses</h3>
        <p>Surface applicable NCC parts by building class and proposal.</p>
        <span class="coming-chip"><i class="bi bi-diagram-3"></i> Structured refs</span>
      </div>
      <div class="glow-card fade-up">
        <h3>Clear separation</h3>
        <p>NCC shown alongside planning outputs but never conflated with SPP/LPS.</p>
        <span class="coming-chip"><i class="bi bi-shield-check"></i> Guardrails</span>
      </div>
      <div class="glow-card fade-up" style="display:flex;flex-direction:column;justify-content:space-between;">
        <h3>Be first to try it</h3>
        <a href="#pro" class="btn btn-outline" style="align-self:flex-start;margin-top:16px;"><i class="bi bi-envelope"></i> Join waitlist</a>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     AS
     ============================================================ -->
<section class="coming-section" id="as">
  <div class="container">
    <div style="display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;">
      <span class="coming-chip"><i class="bi bi-cone"></i> Coming soon</span>
      <span class="coming-chip">Referenced standards</span>
    </div>
    <h2>Australian Standards</h2>
    <p class="lead" style="margin-top:12px;max-width:520px;">Surface standards where they're referenced by clause — not generic dumps, just what matters.</p>

    <div class="coming-grid">
      <div class="glow-card fade-up">
        <h3>Clause-linked</h3>
        <p>Only show standards cited by the relevant controls.</p>
      </div>
      <div class="glow-card fade-up">
        <h3>Short summaries</h3>
        <p>Plain-English notes to decide if deeper reading is needed.</p>
      </div>
      <div class="glow-card fade-up" style="display:flex;flex-direction:column;justify-content:space-between;">
        <h3>Want early access?</h3>
        <a href="#pro" class="btn btn-outline" style="align-self:flex-start;margin-top:16px;"><i class="bi bi-envelope"></i> Join waitlist</a>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     BUILT FOR TASMANIA
     ============================================================ -->
<section class="section" style="border-top:1px solid var(--border);">
  <div class="container">
    <div class="built-card">
      <div>
        <div class="section-label">Under the hood</div>
        <h2>Built for Tasmania</h2>
        <p style="color:var(--text-secondary);margin-top:14px;font-size:0.93rem;line-height:1.7;">
          Understands the structure of the Tasmanian Planning Scheme: State Planning Provisions (SPPs),
          Local Provisions Schedules (LPS), zones, codes, overlays, and terms.
          Outputs mirror how councils expect reports to read.
        </p>
      </div>
      <ul>
        <li>Zone summaries with Acceptable Solutions / Performance Criteria</li>
        <li>Use tables, works tables, and overlay checks</li>
        <li>Clause numbers and viewer links included</li>
        <li>Follows Tasmanian council report conventions</li>
        <li>Supports follow-up questions without losing context</li>
      </ul>
    </div>
  </div>
</section>

<!-- ============================================================
     PRO
     ============================================================ -->
<section class="pro-section" id="pro">
  <div class="container">
    <div style="max-width:620px;position:relative;z-index:1;">
      <div style="display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;">
        <span class="coming-chip new"><i class="bi bi-stars"></i> Pro</span>
        <span class="coming-chip"><i class="bi bi-cone"></i> Coming soon</span>
      </div>
      <h2>Full planning report —<br>from one detailed brief</h2>
      <p class="lead" style="margin-top:14px;">
        Give the site and proposal once. Get a structured report: zone summary, overlays,
        A vs P tables, assessment notes, and export-ready sections — each clause cited.
      </p>

      <div class="pro-features">
        <div class="pro-feature"><i class="bi bi-check2"></i> Zone + codes tables with A/P</div>
        <div class="pro-feature"><i class="bi bi-check2"></i> Clause-linked sources throughout</div>
        <div class="pro-feature"><i class="bi bi-check2"></i> Google Docs export</div>
        <div class="pro-feature"><i class="bi bi-check2"></i> NCC/AS hooks (when released)</div>
      </div>

      <form id="waitlistForm" class="waitlist-form">
        <input type="email" id="waitlistEmail" placeholder="you@studio.com" required>
        <button class="btn btn-primary" type="submit"><i class="bi bi-envelope"></i> Join waitlist</button>
      </form>
      <p class="waitlist-hint">No spam. We'll email when Pro is available with early-access pricing.</p>
    </div>
  </div>
</section>

<!-- ============================================================
     CTA
     ============================================================ -->
<section class="cta-section">
  <div class="container">
    <div class="section-label" style="justify-content:center;">Get started</div>
    <h2>Ready to try it on your next site?</h2>
    <p class="lead">Start with a zone, clause, or quick question. Refine with follow-ups, then export.</p>
    <div class="cta-buttons">
      <button class="btn btn-primary btn-lg" onclick="window.open('/site-report','_blank')"><i class="bi bi-rocket"></i> Launch assistant</button>
      <a href="#how" class="btn btn-outline btn-lg"><i class="bi bi-play-circle"></i> See how it works</a>
    </div>
    <p class="cta-note">No setup required. Bring your own API key if you prefer.</p>
  </div>
</section>

<!-- ============================================================
     DEMO MODAL
     ============================================================ -->
<div class="modal-overlay" id="demoModal">
  <div class="modal-box">
    <div class="modal-header">
      <h5><i class="bi bi-terminal" style="color:var(--accent);margin-right:8px;"></i>Try a demo query</h5>
      <button class="modal-close" id="modalClose" aria-label="Close">&#x2715;</button>
    </div>
    <div class="modal-body">
      <div class="modal-sidebar">
        <div class="sample-label">Sample queries</div>
        <div class="sample-list" id="demoSamples">
          <button class="sample-btn active" type="button">What are the acceptable solutions for front and side setbacks in the Village Zone?</button>
          <button class="sample-btn" type="button">List the car parking rate for a medical centre and show the clause reference.</button>
          <button class="sample-btn" type="button">Do overlays apply to 19 Main Street, Hobart (example)? Which clauses should be checked?</button>
        </div>
        <div style="margin-top:20px;">
          <div style="margin-bottom:10px;">
            <div class="sample-label" style="margin-bottom:5px;">Council (optional)</div>
            <select id="demoCouncil" style="width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:inherit;font-size:0.82rem;padding:7px 10px;outline:none;">
              <option value="">SPP only</option>
            </select>
          </div>
          <div id="demoCtxBar" style="display:none;padding:8px 10px;background:rgba(45,220,138,0.07);border:1px solid rgba(45,220,138,0.2);border-radius:6px;font-size:0.75rem;color:var(--text-secondary);margin-bottom:10px;">
            <i class="bi bi-geo-alt" style="color:var(--accent);margin-right:5px;"></i><span id="demoCtxText"></span>
          </div>
          <div class="tps-toggle">
            <label class="toggle-track">
              <input type="checkbox" id="demoAllowTPS" checked>
              <span class="toggle-knob"></span>
            </label>
            <span class="toggle-label">Include State Planning Provisions (SPP)</span>
          </div>
          <button id="demoRunBtn" class="btn btn-primary" style="width:100%;justify-content:center;"><i class="bi bi-play"></i> Run demo</button>
          <p class="api-note">API: <code id="demoApiBase"></code></p>
        </div>
      </div>
      <div class="modal-main">
        <div class="modal-form-label">Your question</div>
        <textarea id="demoQuery" class="modal-textarea" rows="3" placeholder="Type or click a sample…">What are the acceptable solutions for front and side setbacks in the Village Zone?</textarea>
        <div id="demoStatus" class="status-bar" style="display:none;">
          <div class="spinner"></div>
          <span>Asking the assistant…</span>
        </div>
        <div class="modal-form-label">Response</div>
        <div id="demoResults" class="modal-results">Results will appear here…</div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost btn-sm" id="modalCloseFooter">Close</button>
    </div>
  </div>
</div>

<!-- ============================================================
     FOOTER
     ============================================================ -->
<footer class="site-footer">
  <div class="container">
    <div class="footer-inner">
      <div class="footer-copy">© <span id="year"></span> Tas Planning Assistant</div>
      <div class="footer-links">
        <a href="/privacy">Privacy</a>
        <a href="/terms">Terms</a>
        <a href="/faq">FAQ</a>
        <a href="#top"><i class="bi bi-arrow-up"></i> Back to top</a>
      </div>
    </div>
  </div>
</footer>

<!-- ============================================================
     JAVASCRIPT
     ============================================================ -->
     
     <!-- JS (load once, matching CSS version 5.3.8) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
    <!-- jQuery only if you need it; Bootstrap 5 itself doesn't require jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        
    <script>
        (function () {
          'use strict';
        
          // ── Config ──────────────────────────────────────────────────
          window.APP_API_BASE = <?= json_encode($apiBase) ?>;   // ← ADD THIS
          window.DEMO_BEARER  = <?= json_encode($demoBearer) ?>; // ← ADD THIS
        
          const API_BASE   = window.APP_API_BASE || (location.origin + '/ask');
          const DEMO_TOKEN = window.DEMO_BEARER  || '';
         
          // ── Helpers ─────────────────────────────────────────────────
          function $(id) { return document.getElementById(id); }
         
          function authHeaders() {
            const h = { 'Content-Type': 'application/json' };
            if (DEMO_TOKEN) h['Authorization'] = 'Bearer ' + DEMO_TOKEN;
            return h;
          }
         
          // Fetch from /ask with proper field names matching the backend
          async function askAPI(question, scope = 'state_only', council = null) {
            const body = { query: question, top_k: 8, scope };
            if (council) body.council = council;
            const res  = await fetch(API_BASE, {
              method: 'POST',
              headers: authHeaders(),
              credentials: 'omit',
              body: JSON.stringify(body)
            });
            const text = await res.text();
            if (!res.ok) throw new Error(text || 'HTTP ' + res.status);
            try { return JSON.parse(text); }
            catch (_) { return { answer: text, sources: [] }; }
          }
         
          // Render source chips into a container element
          function renderSources(container, sources) {
            if (!sources || !sources.length) {
              container.textContent = 'No sources returned.';
              return;
            }
            container.innerHTML = sources.map((s, i) => {
              const label = s.title || s.clause || s.source_file || ('Source ' + (i + 1));
              const url   = s.url || s.href || null;
              const citeId = s.id || (i + 1);
              if (url) return `<a class="btn btn-ghost btn-sm" style="margin:0 6px 6px 0;font-size:0.78rem;" target="_blank" href="${url}" data-cite-id="${citeId}">${label} <i class="bi bi-arrow-up-right-square"></i></a>`;
              return `<span style="display:inline-block;padding:4px 10px;border:1px solid var(--border);border-radius:6px;font-size:0.78rem;color:var(--text-secondary);margin:0 6px 6px 0;">${label}${s.page != null ? ' p.' + s.page : ''}</span>`;
            }).join('');
          }
         
          // ── Hero form ────────────────────────────────────────────────
          const heroForm   = $('heroAskForm');
          const heroInput  = $('heroQuery');
          const resultsEl  = $('results');
          const heroStatus = $('heroStatus');
          const answerEl   = $('answerText');
          const sourcesEl  = $('answerSources');
          const resetBtn   = $('resultsReset');
         
          function showResults() {
            resultsEl.style.display = '';
            resultsEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }
         
          function setHeroLoading(on) {
            heroStatus.style.display = on ? 'flex' : 'none';
          }
         
          // ── Property context (from site-report.php via localStorage) ────
          let heroCtx = null;
          const ADDRESS_RE = /\b\d+[a-z]?\s+[a-z][a-z\s'-]{2,35}\b(?:\s+(?:street|st|road|rd|avenue|ave|drive|dr|court|ct|place|pl|crescent|cr|lane|ln|way|close|cl|circuit|grove|gr|terrace|tce|boulevard|blvd|highway|hwy))?/i;

          function loadHeroCtx() {
            try {
              const raw = localStorage.getItem('tpr_builder_ctx');
              if (!raw) return;
              const { ctx, written_at } = JSON.parse(raw);
              if (!ctx || (Date.now() - written_at > 30 * 60 * 1000)) return;
              heroCtx = ctx;
              // Hero context bar
              const bar  = $('heroCtxBar');
              const text = $('heroCtxText');
              if (bar && text) {
                const zones = Array.isArray(ctx.planning_zones) ? ctx.planning_zones.join(', ') : (ctx.planning_zones || '');
                text.textContent = [ctx.address, ctx.council ? `Council: ${ctx.council}` : '', zones ? `Zone: ${zones}` : ''].filter(Boolean).join(' · ');
                bar.style.display = 'flex';
              }
              // Demo modal context bar
              const demoBar  = $('demoCtxBar');
              const demoText = $('demoCtxText');
              if (demoBar && demoText) {
                demoText.textContent = ctx.address || '';
                demoBar.style.display = '';
              }
            } catch(e) {}
          }

          function clearHeroCtx() {
            heroCtx = null;
            localStorage.removeItem('tpr_builder_ctx');
            const bar = $('heroCtxBar');
            if (bar) bar.style.display = 'none';
            const demoBar = $('demoCtxBar');
            if (demoBar) demoBar.style.display = 'none';
          }

          function buildHeroQuery(question) {
            if (!heroCtx) return { query: question, scope: 'state_only', council: null };
            const zones = Array.isArray(heroCtx.planning_zones) ? heroCtx.planning_zones.join(', ') : (heroCtx.planning_zones || '');
            const codes = Array.isArray(heroCtx.planning_codes) ? heroCtx.planning_codes.join(', ') : (heroCtx.planning_codes || '');
            const parts = [
              heroCtx.address  ? `Address: ${heroCtx.address}`   : '',
              heroCtx.council  ? `Council: ${heroCtx.council}`   : '',
              zones            ? `Zone(s): ${zones}`              : '',
              codes            ? `Codes/overlays: ${codes}`       : '',
              heroCtx.area_sqm ? `Site area: ${heroCtx.area_sqm} m²` : '',
            ].filter(Boolean).join('; ');
            const council = heroCtx.council || null;
            const scope   = council ? 'state_plus_local' : 'state_only';
            return { query: `[Site context — ${parts}]\n\n${question}`, scope, council };
          }

          async function runHeroQuery(question) {
            if (!question) { heroInput.focus(); return; }
            showResults();
            setHeroLoading(true);
            answerEl.textContent = '';
            sourcesEl.innerHTML  = '';
            const { query, scope, council } = buildHeroQuery(question);
            try {
              const data    = await askAPI(query, scope, council);
              answerEl.textContent = data.answer || data.text || 'No answer received.';
              const sources = Array.isArray(data.sources) ? data.sources : (Array.isArray(data.citations) ? data.citations : []);
              renderSources(sourcesEl, sources);
              telemetry('search_result', { ok: true });
            } catch (e) {
              answerEl.innerHTML = `<span style="color:#f08080;">Error: ${e.message || e}</span>`;
            } finally {
              setHeroLoading(false);
            }
          }
         
          heroForm?.addEventListener('submit', e => {
            e.preventDefault();
            const q = (heroInput?.value || '').trim();
            telemetry('search_performed', { query: q, source: 'hero' });
            runHeroQuery(q);
          });
         
          heroInput?.addEventListener('keydown', e => {
            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
              e.preventDefault();
              runHeroQuery((heroInput.value || '').trim());
            }
          });
         
          resetBtn?.addEventListener('click', () => {
            answerEl.textContent  = 'Ask a question above to see the answer here.';
            sourcesEl.textContent = 'When available, sources will appear here.';
            resultsEl.style.display = 'none';
          });
         
          // ── Quick-action pills ───────────────────────────────────────
          document.querySelectorAll('[data-qa]').forEach(btn => {
            btn.addEventListener('click', () => {
              const q = btn.getAttribute('data-qa');
              if (heroInput) heroInput.value = q;
              heroForm?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
            });
          });
         
          // ── Demo modal ───────────────────────────────────────────────
          const demoModal   = $('demoModal');
          const demoQuery   = $('demoQuery');
          const demoResults = $('demoResults');
          const demoStatus  = $('demoStatus');
          const demoRunBtn  = $('demoRunBtn');
          const samplesEl   = $('demoSamples');
          const allowEl     = $('demoAllowTPS');
          const apiBaseEl   = $('demoApiBase');
         
          if (apiBaseEl) apiBaseEl.textContent = API_BASE;
         
          function openModal() {
            demoModal.classList.add('open');
            document.body.style.overflow = 'hidden';
            demoQuery?.focus({ preventScroll: true });
          }
         
          function closeModal() {
            demoModal.classList.remove('open');
            document.body.style.overflow = '';
          }
         
          document.querySelectorAll('#openDemoBtn, #openDemoLink, #ctaDemoBtn').forEach(el => {
            el.addEventListener('click', e => { e.preventDefault(); openModal(); });
          });
         
          $('modalClose')?.addEventListener('click', closeModal);
          $('modalCloseFooter')?.addEventListener('click', closeModal);
          demoModal?.addEventListener('click', e => { if (e.target === demoModal) closeModal(); });
          document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
         
          // Sample query click
          samplesEl?.addEventListener('click', e => {
            const btn = e.target.closest('button');
            if (!btn) return;
            samplesEl.querySelectorAll('button').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            if (demoQuery) demoQuery.value = btn.textContent.trim();
            demoQuery?.focus();
          });
         
          function setDemoLoading(on) {
            demoStatus.style.display = on ? 'flex' : 'none';
            if (demoRunBtn) demoRunBtn.disabled = on;
          }
         
          async function runDemo() {
            const question = (demoQuery?.value || '').trim();
            if (!question) { demoQuery?.focus(); return; }
            demoResults.textContent = '';
            setDemoLoading(true);
            telemetry('search_performed', { query: question, source: 'demo' });
            const demoCouncilEl = $('demoCouncil');
            const council = (demoCouncilEl?.value || heroCtx?.council || '').trim() || null;
            const allowTPS = !!allowEl?.checked;
            const scope = allowTPS ? (council ? 'state_plus_local' : 'state_only') : (council ? 'local_only' : 'any');
            // Build query with site context if available
            let demoQuestion = question;
            if (heroCtx) {
              const zones = Array.isArray(heroCtx.planning_zones) ? heroCtx.planning_zones.join(', ') : (heroCtx.planning_zones || '');
              const parts = [
                heroCtx.address  ? `Address: ${heroCtx.address}`  : '',
                heroCtx.council  ? `Council: ${heroCtx.council}`  : '',
                zones            ? `Zone(s): ${zones}`             : '',
              ].filter(Boolean).join('; ');
              demoQuestion = `[Site context — ${parts}]\n\n${question}`;
            }
            try {
              const data    = await askAPI(demoQuestion, scope, council);
              const msg     = data.answer || data.output || data.markdown || data.result || data.text || '';
              const sources = Array.isArray(data.sources) ? data.sources : (Array.isArray(data.citations) ? data.citations : []);
              demoResults.textContent = msg || JSON.stringify(data);
              if (sources.length) {
                const frag = document.createElement('div');
                frag.style.cssText = 'margin-top:14px;';
                frag.innerHTML = '<div style="font-size:0.72rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;">Sources</div>' +
                  sources.map((s, i) => {
                    const label = s.title || s.clause || s.url || ('Source ' + (i + 1));
                    const url   = s.url || s.href || '#';
                    return `<a target="_blank" href="${url}" class="btn btn-ghost btn-sm" style="margin:0 6px 6px 0;">${label} <i class="bi bi-arrow-up-right-square"></i></a>`;
                  }).join('');
                demoResults.appendChild(frag);
              }
            } catch (e) {
              demoResults.innerHTML = `<div style="color:#f08080;">Demo failed: ${e.message || e}</div><div style="font-size:0.78rem;color:var(--text-muted);margin-top:8px;">Tip: set <code style="color:var(--accent);">window.APP_API_BASE</code> or create an <code style="color:var(--accent);">/ask</code> endpoint accepting <code style="color:var(--accent);">{"question":"..."}</code>.</div>`;
            } finally {
              setDemoLoading(false);
            }
          }
         
          demoRunBtn?.addEventListener('click', runDemo);
          demoQuery?.addEventListener('keydown', e => {
            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) runDemo();
          });
         
          // ── Waitlist ─────────────────────────────────────────────────
          $('waitlistForm')?.addEventListener('submit', async e => {
            e.preventDefault();
            const form    = $('waitlistForm');
            const emailEl = $('waitlistEmail');
            const btn     = form.querySelector('button[type=submit]');
            const email   = (emailEl?.value || '').trim();
            if (!email) { emailEl?.focus(); return; }

            // Show loading state
            const origBtnHtml = btn.innerHTML;
            btn.disabled  = true;
            btn.innerHTML = '<span style="display:inline-flex;align-items:center;gap:6px;"><span style="width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .65s linear infinite;display:inline-block;"></span> Joining…</span>';

            try {
              const res  = await fetch('/waitlist.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, source: 'pro_waitlist' })
              });
              const data = await res.json().catch(() => ({}));

              if (res.ok && data.ok) {
                // Replace form with success message
                const wrap = form.closest('.waitlist-form') || form.parentElement;
                form.innerHTML = '';
                const msg = document.createElement('div');
                msg.style.cssText = 'display:flex;align-items:center;gap:10px;padding:12px 0;';
                msg.innerHTML = '<i class="bi bi-check-circle-fill" style="color:var(--accent);font-size:1.2rem;flex-shrink:0;"></i>'
                  + '<span style="font-size:0.88rem;color:var(--text-secondary);">'
                  + (data.message || "You\'re on the list! We\'ll email when Pro launches.")
                  + '</span>';
                form.appendChild(msg);
                telemetry('waitlist_join', { email, source: 'pro_waitlist' });
              } else {
                throw new Error(data.error || 'Signup failed');
              }
            } catch (err) {
              // Graceful fallback — don\'t show raw errors
              btn.disabled  = false;
              btn.innerHTML = origBtnHtml;
              const hint = form.nextElementSibling;
              if (hint) {
                hint.style.color = 'var(--danger)';
                hint.textContent = err.message.includes('valid email')
                  ? 'Please enter a valid email address.'
                  : 'Something went wrong — please try again shortly.';
                setTimeout(() => {
                  hint.style.color = '';
                  hint.textContent = "No spam. We\'ll email when Pro is available with early-access pricing.";
                }, 4000);
              }
            }
          });
         
          // ── Nav toggle (mobile) ──────────────────────────────────────
          $('navToggle')?.addEventListener('click', () => {
            $('navLinks')?.classList.toggle('open');
          });
         
          // ── Footer year ──────────────────────────────────────────────
          const yearEl = $('year');
          if (yearEl) yearEl.textContent = new Date().getFullYear();

          // ── Load councils into demo dropdown ─────────────────────────
          (async () => {
            try {
              const apiRoot = API_BASE.replace(/\/ask\/?$/, '');
              const res     = await fetch(`${apiRoot}/councils`, { cache: 'no-store' });
              const items   = await res.json();
              const sel     = $('demoCouncil');
              if (sel && Array.isArray(items)) {
                items.forEach(c => {
                  const opt = document.createElement('option');
                  opt.value = c; opt.textContent = c;
                  sel.appendChild(opt);
                });
              }
              // Auto-select council from property context if present
              if (heroCtx?.council && sel) {
                const opt = [...sel.options].find(o => o.value.toLowerCase() === heroCtx.council.toLowerCase());
                if (opt) opt.selected = true;
              }
            } catch(e) {}
          })();

          // ── Property context init ────────────────────────────────────
          loadHeroCtx();
          $('heroCtxClear')?.addEventListener('click', e => { e.preventDefault(); clearHeroCtx(); });

          // ── Address detection on hero input ──────────────────────────
          heroInput?.addEventListener('input', () => {
            const val = heroInput.value || '';
            const bar = $('heroAddressBar');
            if (!bar) return;
            if (!heroCtx && val.length > 8 && ADDRESS_RE.test(val)) {
              bar.style.display = 'flex';
            } else {
              bar.style.display = 'none';
            }
          });
         
          // ── Telemetry ────────────────────────────────────────────────
          const sid = localStorage.getItem('tpr_sid') || (() => {
            const v = (crypto?.randomUUID?.() || String(Math.random()).slice(2) + Date.now());
            localStorage.setItem('tpr_sid', v);
            return v;
          })();
         
          function telemetry(type, data = {}) {
            const payload = { type, ts: new Date().toISOString(), sid, ua: navigator.userAgent, data };
            const url     = API_BASE.replace(/\/ask\/?$/, '') + '/telemetry';
            const blob    = new Blob([JSON.stringify(payload)], { type: 'application/json' });
            
            if (navigator.sendBeacon?.(url, blob)) return;  // sendBeacon never sends credentials
            
            fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload),
                credentials: 'omit',   // ← telemetry needs no auth
                mode: 'cors'
            }).catch(() => {});        // ← silently swallow — analytics must never break UX
        }
         
          // Citation click tracking (only fires when data-cite-id is actually set)
          document.addEventListener('click', e => {
            const a = e.target.closest('a[data-cite-id]');
            if (a) telemetry('interaction', { action: 'clicked_citation', cite_id: a.dataset.citeId });
          });
         
          // ── Scroll fade-in ───────────────────────────────────────────
          const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
              if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
              }
            });
          }, { threshold: 0.1 });
         
          document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
         
        })();
        </script>

</body>
</html>