const { useState, useEffect, useMemo, useRef } = React;

/* Landing — dark deck-style homepage (from design home-v2.html), with copy and
   numbers corrected to what's actually built:
   - Real platform stats (orgs / buildings / people / parcels) as of 2026-06
   - Real Empire State Building tenant roster from the live index (BBL 1008350041)
   - Feature claims limited to shipped features (territories, dossiers, CSV export,
     webhooks); no lease-expiry alerts / CRM integrations / SOC2 claims. */

function LandingPage({ go }) {
  // Real tenants at 350 5th Ave (Empire State Building) from the live index.
  const ROSTER = [
    { floor: "77", name: "KKL LLP",                        sub: "350 5th Ave · Fl 77",   ind: "Legal",        ppl: "13", src: "Attorney reg", emoji: "⚖️" },
    { floor: "61", name: "Clifton Budd & De Maria LLP",    sub: "350 5th Ave · Fl 61",   ind: "Legal",        ppl: "23", src: "Attorney reg", emoji: "⚖️" },
    { floor: "49", name: "Workday, Inc.",                  sub: "350 5th Ave · Ste 4900", ind: "Technology",  ppl: "23", src: "NY DOS",       emoji: "💻" },
    { floor: "38", name: "Elsberg Baker & Maruri PLLC",    sub: "Empire State Bldg · Fl 38", ind: "Legal",    ppl: "30", src: "Attorney reg", emoji: "⚖️", hero: true },
    { floor: "32", name: "Skanska USA Building Inc.",      sub: "350 5th Ave · Fl 32 · 2,498 employees", ind: "Construction", ppl: "30", src: "NY DOS", emoji: "🏗️" },
    { floor: "29", name: "Twenty Four Karat Club of NYC",  sub: "350 5th Ave · Fl 29",   ind: "Nonprofit",    ppl: "29", src: "IRS 990",      emoji: "🤝" },
  ];

  return (
    <div className="lpd">
      {/* ── Nav ─────────────────────────────────────────── */}
      <nav className="mk-nav dark">
        <span className="logo">AI<span className="dot">.</span>CONTACTIQ</span>
        <div className="links">
          <a href="#how" onClick={e => { e.preventDefault(); document.getElementById('lpd-roster').scrollIntoView({behavior:'smooth'}); }}>How it works</a>
          <a href="#teams" onClick={e => { e.preventDefault(); document.getElementById('lpd-teams').scrollIntoView({behavior:'smooth'}); }}>Who it's for</a>
          <a onClick={() => go("map")} style={{cursor:'pointer'}}>Live map</a>
          <a onClick={() => go("extension")} style={{cursor:'pointer'}}>Extension</a>
        </div>
        <div className="spacer"></div>
        <div className="nav-cta">
          <a className="btn ghost" onClick={() => go("login")} style={{cursor:'pointer'}}>Sign in</a>
          <a className="btn primary" onClick={() => go("signup")} style={{cursor:'pointer'}}>Start trial</a>
        </div>
      </nav>

      {/* ── Dark hero ────────────────────────────────────── */}
      <section className="d-hero">
        <div className="d-hero-inner">
          <div className="eyebrow">For B2B sales &amp; commercial real estate</div>
          <h1>Walk into any building. <em>Know everyone inside</em> before the elevator opens.</h1>
          <p className="sub">Type a street address. Get the tenant roster with industry, filings, owners, debt and the people worth a meeting — every field cited to a public source.</p>
          <div className="actions">
            <a className="btn-gold" onClick={() => go("signup")} style={{cursor:'pointer'}}>Get started →</a>
            <a className="btn-outline" onClick={() => go("map")} style={{cursor:'pointer'}}>Explore the live map</a>
          </div>
          <div className="meta">
            <div className="stat">
              <div className="num">17,744,720</div>
              <div className="lbl">Organizations indexed</div>
            </div>
            <div className="stat">
              <div className="num">1.9M</div>
              <div className="lbl">Buildings with mapped tenants</div>
            </div>
            <div className="stat">
              <div className="num">11.2M</div>
              <div className="lbl">People on file</div>
            </div>
            <div className="stat">
              <div className="num">74<span style={{fontSize:18,color:'var(--deck-text-dim)'}}>M</span></div>
              <div className="lbl">Parcels tracked nationwide</div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Tenant roster showcase (REAL data) ───────────── */}
      <section className="quad-sec" id="lpd-roster">
        <div className="quad-head">
          <div className="eyebrow">A real building, straight from the index</div>
          <h2>350 5th Avenue — the Empire State Building.</h2>
          <p className="sub">A live slice of the tenant index for one address. In the app, every row opens the full company record — registrations, filings, people, even who holds the building's mortgage.</p>
        </div>
        <div className="roster">
          <div className="roster-head">
            <div className="rh-floor">Floor</div>
            <div className="rh-name">Tenant</div>
            <div className="rh-ind">Industry</div>
            <div className="rh-size">People on file</div>
            <div className="rh-src">Source</div>
          </div>
          {ROSTER.map((r, i) => (
            <div key={i} className={"roster-row" + (r.hero ? " hero" : "")}>
              <div className="rr-floor">{r.floor}</div>
              <div className="rr-name">
                <span className="chip-emoji">{r.emoji}</span>
                <div>
                  <div className="nm">{r.name}</div>
                  <div className="sub">{r.sub}</div>
                </div>
              </div>
              <div className="rr-ind">{r.ind}</div>
              <div className="rr-size">{r.ppl}</div>
              <div className="rr-src">{r.src}</div>
            </div>
          ))}
        </div>
        <div className="roster-foot">
          <span className="rf-num">129</span> active tenants on file at this address &middot; <span className="rf-link" onClick={() => go("map")}>Open in live map →</span>
        </div>
      </section>

      {/* ── Use cases by team ────────────────────────────── */}
      <section className="cmp-sec" id="lpd-teams">
        <div className="head">
          <div className="eyebrow">Built for the people who knock on doors</div>
          <h2>Four jobs. One map. One company record.</h2>
        </div>
        <table className="cmp-table">
          <thead>
            <tr>
              <th className="row-h">&nbsp;</th>
              <th>Field &amp; vendor sales</th>
              <th>Tenant-rep brokers</th>
              <th>CRE asset managers</th>
              <th className="us">★ Account-based outbound</th>
            </tr>
          </thead>
          <tbody>
            <tr><td className="row-h">Starts with</td><td>A territory</td><td>A client mandate</td><td>A portfolio</td><td className="col-us">An ICP filter</td></tr>
            <tr><td className="row-h">Tenant rosters by building</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td className="col-us"><span className="check">✓</span></td></tr>
            <tr><td className="row-h">Owner, mortgage &amp; debt intel</td><td><span className="partial">context</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td className="col-us"><span className="partial">context</span></td></tr>
            <tr><td className="row-h">Distress signals — liens, WARN, foreclosure</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td className="col-us"><span className="check">✓</span></td></tr>
            <tr><td className="row-h">People &amp; leadership on record</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="partial">owners first</span></td><td className="col-us"><span className="check">✓</span></td></tr>
            <tr><td className="row-h">CSV export &amp; webhooks</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td className="col-us"><span className="check">✓</span></td></tr>
            <tr><td className="row-h">Typical time-to-pipeline</td><td>Same day</td><td>1 week</td><td>Quarterly</td><td className="col-us">Same day</td></tr>
          </tbody>
        </table>
      </section>

      {/* ── Closing thesis ───────────────────────────────── */}
      <section className="thesis">
        <div className="thesis-inner">
          <div className="eyebrow">Three things you'll do in week one</div>
          <div className="pull">Pick a building. <em>See who's inside.</em> Walk in with the right name on the calendar.</div>
          <div className="takeaways">
            <div className="tk">
              <div className="tk-num">01</div>
              <div className="tk-body">Map your territory. Draw a polygon on the live map and get every tenant inside it — filterable by industry, source, and storefront.</div>
            </div>
            <div className="tk">
              <div className="tk-num">02</div>
              <div className="tk-body">Open the record. Each company dossier surfaces registrations, filings, licenses, property ties, and the people on record.</div>
            </div>
            <div className="tk">
              <div className="tk-num">03</div>
              <div className="tk-body">Take it with you. Export orgs and people to CSV, or wire webhooks straight into your own stack.</div>
            </div>
          </div>
          <div className="actions">
            <a className="btn-gold" onClick={() => go("signup")} style={{cursor:'pointer'}}>Get started →</a>
            <a className="btn-outline" onClick={() => go("map")} style={{cursor:'pointer'}}>Explore the live map</a>
          </div>
        </div>
      </section>

      {/* ── Footer ───────────────────────────────────────── */}
      <footer className="mk-foot dark">
        <div className="mk-foot-grid">
          <div>
            <span className="wm" style={{fontSize:18}}>AI<span className="dot">.</span>CONTACTIQ</span>
            <p style={{font:'400 13px/1.55 var(--font-sans)', marginTop:12, maxWidth:320}}>
              Building-first prospecting for sales teams and commercial real estate. 17.7M organizations anchored to physical address, built on public records and cited per field.
            </p>
          </div>
          <div>
            <h5>Product</h5>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:8}}>
              <li><a onClick={() => go("map")} style={{cursor:'pointer'}}>Live map</a></li>
              <li><a onClick={() => go("extension")} style={{cursor:'pointer'}}>Browser extension</a></li>
              <li><a onClick={() => go("signup")} style={{cursor:'pointer'}}>Start trial</a></li>
              <li><a onClick={() => go("login")} style={{cursor:'pointer'}}>Sign in</a></li>
            </ul>
          </div>
          <div>
            <h5>Account</h5>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:8}}>
              <li><a onClick={() => go("dashboard")} style={{cursor:'pointer'}}>Dashboard</a></li>
              <li><a onClick={() => go("billing")} style={{cursor:'pointer'}}>Billing</a></li>
              <li><a href="mailto:support@aicontactiq.com">Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Legal</h5>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:8}}>
              <li><a href="#">Terms</a></li>
              <li><a href="#">Privacy</a></li>
            </ul>
          </div>
        </div>
        <div className="mk-foot-meta">
          <span>© 2026 AI.CONTACTIQ · NEW YORK NY</span>
          <span>BUILT ON PUBLIC RECORDS · CITED PER FIELD</span>
        </div>
      </footer>
    </div>
  );
}

window.LandingPage = LandingPage;