/* Marketing landing page — Stripe/Linear precision, no fluff */

const LandingPage = () => (
  <div style={{
    width: 1440, background: 'var(--paper)', color: 'var(--ink)',
    fontFamily: 'var(--font-sans)',
  }}>
    {/* Nav */}
    <nav style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 56px', borderBottom: '1px solid var(--rule)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 48 }}>
        <a href="index.html" aria-label="TitleVerifi home" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none', color: 'inherit' }}>
          <Wordmark size={28} />
        </a>
        <div style={{ display: 'flex', gap: 28, fontSize: 14, color: 'var(--ink-2)' }}>
          <a style={navLinkStyle} href="signin.html?return=product.html">Product</a>
          <a style={navLinkStyle} href="#how-it-works">How it works</a>
          <a style={navLinkStyle} href="pricing.html">Pricing</a>
          <a style={navLinkStyle} href="#customers">Customers</a>
          <a style={navLinkStyle} href="#docs">Docs</a>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20, fontSize: 14 }}>
        <a style={navLinkStyle} href="signin.html?return=product.html">Sign in</a>
        <a style={btnPrimary} href="signin.html?return=product.html">Request access →</a>
      </div>
    </nav>

    {/* Hero */}
    <section id="product" style={{ padding: '72px 56px 88px', borderBottom: '1px solid var(--rule)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 28 }}>
            <span className="stamp">◆ Now in private beta</span>
            <span className="meta" style={{ alignSelf: 'center' }}>SOC 2 Type I readiness · planned</span>
          </div>
          <h1 style={{
            fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 84,
            lineHeight: 0.96, letterSpacing: '-0.025em', margin: '0 0 28px',
          }}>
            Read the title<br/>
            before you<br/>
            <em style={{ color: 'var(--accent)' }}>read the title.</em>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: 540, margin: '0 0 36px' }}>
            TitleVerifi turns the full search package into a source-cited chain, mortgage,
            encumbrance, and curative summary — before the examiner touches the file.
          </p>
          <div style={{ display: 'flex', gap: 12, marginBottom: 32 }}>
            <a style={{...btnPrimary, padding: '12px 20px', fontSize: 15}} href="signin.html?return=product.html">Request access →</a>
            <a style={btnGhost} href="#how-it-works">Watch a 90s walkthrough</a>
          </div>
          <div style={{ display: 'flex', gap: 32, fontSize: 13, color: 'var(--ink-3)' }}>
            <Stat n="6.4×" l="faster first pass" />
            <Stat n="100%" l="source-cited" />
            <Stat n="0" l="structured input required" />
          </div>
        </div>

        {/* Hero artifact — a redacted preview of the report */}
        <HeroPreview />
      </div>
    </section>

    {/* Logo strip */}
    <section style={{ padding: '32px 56px', borderBottom: '1px solid var(--rule)', display: 'flex', alignItems: 'center', gap: 48, color: 'var(--ink-3)', fontSize: 13 }}>
      <span className="meta">USED BY EXAMINERS AT</span>
      <div style={{ display: 'flex', gap: 56, flex: 1, fontFamily: 'var(--font-serif)', fontSize: 22, opacity: 0.55, letterSpacing: '-0.02em' }}>
        <span>Cardinal Title Co.</span>
        <span>Meridian Land Services</span>
        <span>Hawthorne &amp; Pike</span>
        <span>Northstar Underwriters</span>
        <span>Old Sycamore Title</span>
      </div>
    </section>

    {/* Section: trust */}
    <section style={{ padding: '64px 56px', borderBottom: '1px solid var(--rule)', background: 'var(--paper-2)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 48 }}>
        <div style={{ display: 'flex', gap: 40 }}>
          <TrustBadge label="SOC 2 Type I" status="Planned Q3" />
          <TrustBadge label="Encryption" status="AES-256 + TLS 1.3" />
          <TrustBadge label="Data use" status="No model training" />
          <TrustBadge label="Access" status="Session-gated" />
        </div>
        <a href="security.html" style={{ fontSize: 14, color: 'var(--accent)', textDecoration: 'none', fontWeight: 500, whiteSpace: 'nowrap' }}>Security details →</a>
      </div>
    </section>

    {/* Section: the problem */}
    <section id="problem" style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)' }}>
      <div className="meta" style={{ marginBottom: 16 }}>§ 01 — THE PROBLEM</div>
      <h2 style={{
        fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 56,
        letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 56px', maxWidth: 920,
      }}>
        A typical search package is 200 pages of scanned PDFs. <em style={{ color: 'var(--ink-3)' }}>Examiners still read every one.</em>
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
        <ProblemCard
          n="01"
          title="The chain is buried in scans"
          body="Grantor → grantee, 60 years, hand-typed indexes, sometimes hand-written. The chain has to be reconstructed manually before anything else can happen."
        />
        <ProblemCard
          n="02"
          title="Releases go missing quietly"
          body="A 2018 mortgage with no recorded satisfaction looks identical to one that's paid off. Miss it and you've cleared a file with a live lien on it."
        />
        <ProblemCard
          n="03"
          title="Curative work has no template"
          body="Each examiner writes their action list from scratch. Junior reviewers miss requirements; senior reviewers spend their time correcting."
        />
      </div>
    </section>

    {/* Section: the output */}
    <section id="output" style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)', background: 'var(--paper-2)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'flex-start' }}>
        <div style={{ position: 'sticky', top: 32 }}>
          <div className="meta" style={{ marginBottom: 16 }}>§ 02 — THE OUTPUT</div>
          <h2 style={{
            fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 48,
            letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 24px',
          }}>
            One document.<br/>
            <em style={{ color: 'var(--accent)' }}>Nine sections.</em><br/>
            Every claim cited.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>
            Delivered as an examiner-ready PDF and an interactive web view. Click any
            assertion to jump to the exact page in the source document.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: 'var(--rule-strong)', border: '1px solid var(--rule-strong)' }}>
          <SectionRow n="01" name="Property Snapshot" desc="Address · APN · current owner · vesting · search effective date" />
          <SectionRow n="02" name="Executive Summary" desc="CLEAR / REVIEW / BLOCKED · key issues · review priority" highlight />
          <SectionRow n="03" name="Chain of Title" desc="Grantor → grantee, every link, every citation" highlight />
          <SectionRow n="04" name="Mortgages & Liens" desc="Active · likely satisfied · missing release · MERS flags" />
          <SectionRow n="05" name="Encumbrances & Exceptions" desc="Easements · restrictions · court orders · severity" />
          <SectionRow n="06" name="Curative Actions" desc="Problem → why it matters → what to do" highlight />
          <SectionRow n="07" name="Name Search Requirements" desc="Who · time period · jurisdiction" />
          <SectionRow n="08" name="Document Inventory" desc="Type · pages · parties · file location" />
          <SectionRow n="09" name="Source Review" desc="Click any cite — opens the exact PDF page" />
        </div>
      </div>
    </section>

    {/* Section: how it works — input → output */}
    <section id="how-it-works" style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)' }}>
      <div className="meta" style={{ marginBottom: 16 }}>§ 03 — HOW IT WORKS</div>
      <h2 style={{
        fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 56,
        letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 56px', maxWidth: 880,
      }}>
        Upload your messy search package.<br/>
        <em style={{ color: 'var(--ink-3)' }}>We handle the rest.</em>
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--rule-strong)', border: '1px solid var(--rule-strong)' }}>
        <Step
          n="01" t="Upload"
          body="Drop a search-package PDF or a zip of deeds, mortgages, plats, probate, court orders. No structuring required."
          chip="≤ 500 pages · accepted"
        />
        <Step
          n="02" t="Extract"
          body="Every doc is OCR'd, classified, and parsed. Parties, dates, considerations, recording references — all pulled to structured fields."
          chip="37 docs · 14 types"
        />
        <Step
          n="03" t="Reason"
          body="The chain is reconstructed. Releases matched to mortgages. Wild deeds flagged. Curative requirements assembled."
          chip="4 issues found"
        />
        <Step
          n="04" t="Cite"
          body="Every line in the report links to its source page. Nothing is asserted without a citation an examiner can verify in one click."
          chip="100% sourced"
        />
      </div>
    </section>

    {/* Section: not workflow */}
    <section id="positioning" style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div className="meta" style={{ marginBottom: 16 }}>§ 04 — POSITIONING</div>
          <h2 style={{
            fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 56,
            letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 24px',
          }}>
            Not workflow software.<br/>
            <em style={{ color: 'var(--accent)' }}>An intelligence layer.</em>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0, maxWidth: 520 }}>
            Other tools manage the file. They store, route, and produce. They don't
            <em> understand </em> what's inside the documents. TitleVerifi does, and only that.
            Pair it with whatever production system you already run.
          </p>
        </div>
        <div style={{ border: '1px solid var(--rule-strong)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderBottom: '1px solid var(--rule-strong)', background: 'var(--paper-2)' }}>
            <Th>&nbsp;</Th><Th>Workflow tools</Th><Th accent>TitleVerifi</Th>
          </div>
          <Row label="Stores files" a="●" b="○" />
          <Row label="Routes orders" a="●" b="○" />
          <Row label="Reads documents" a="○" b="●" />
          <Row label="Builds chain of title" a="○" b="●" />
          <Row label="Detects logical issues" a="○" b="●" />
          <Row label="Drafts curative" a="○" b="●" last />
        </div>
      </div>
    </section>

    {/* Section: FAQ */}
    <section style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)' }}>
      <div className="meta" style={{ marginBottom: 16 }}>§ 05 — FAQ</div>
      <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 56, letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 56px', maxWidth: 920 }}>
        Questions examiners <em style={{ color: 'var(--ink-3)' }}>actually ask.</em>
      </h2>
      <div style={{ maxWidth: 840, display: 'flex', flexDirection: 'column', gap: 1, background: 'var(--rule-strong)', border: '1px solid var(--rule-strong)' }}>
        <FaqRow q="Do you replace the examiner?" a="No. TitleVerifi automates the first pass — chain reconstruction, mortgage matching, and curative drafting. The examiner reviews every assertion before it reaches a commitment." />
        <FaqRow q="What file types can I upload?" a="PDF search packages, zip archives of scanned documents, or individual deed/mortgage/plat images. No structuring or indexing required." />
        <FaqRow q="Is my data used to train AI models?" a="Not without explicit written consent. Your search packages are processed solely to generate your report. See our Privacy Policy for full details." />
        <FaqRow q="Which states are supported?" a="Our state engine covers all 51 US jurisdictions with jurisdiction-specific rules for recording acts, lien periods, TBE, and community property. Coverage depth varies by state." />
        <FaqRow q="How long does it take?" a="A typical 200-page search package is processed in under 10 minutes. The interactive report is available immediately after completion." last />
      </div>
    </section>

    {/* Quote */}
    <section id="customers" style={{ padding: '120px 56px', borderBottom: '1px solid var(--rule)', background: 'var(--ink)', color: 'var(--paper)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--accent)', marginBottom: 24 }}>
          ◆ FROM A BETA EXAMINER
        </div>
        <p style={{
          fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 56,
          letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 32px',
        }}>
          <em>"I don't have to read 200 pages to understand the title anymore.
          I read TitleVerifi's summary, and then I check the three things it flagged."</em>
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, color: 'var(--paper-3)' }}>
          <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--paper-3)' }}/>
          <div>
            <div style={{ fontWeight: 500, color: 'var(--paper)' }}>K. Hartwell</div>
            <div style={{ fontSize: 13, opacity: 0.7 }}>Senior examiner · Cardinal Title Co.</div>
          </div>
        </div>
      </div>
    </section>

    {/* CTA */}
    <section id="pricing" style={{ padding: '120px 56px', borderBottom: '1px solid var(--rule)' }}>
      <div style={{ maxWidth: 880 }}>
        <h2 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 84,
          letterSpacing: '-0.03em', lineHeight: 0.96, margin: '0 0 32px',
        }}>
          Read the title<br/>
          <em style={{ color: 'var(--accent)' }}>before you read the title.</em>
        </h2>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <input placeholder="you@title-agency.com" style={{
            padding: '14px 16px', fontSize: 15, fontFamily: 'inherit',
            border: '1px solid var(--rule-strong)', background: 'var(--paper)',
            borderRadius: 'var(--r-2)', width: 320, color: 'var(--ink)',
          }} />
          <a style={{...btnPrimary, padding: '14px 20px', fontSize: 15}} href="signin.html?return=product.html">Request access →</a>
          <span className="meta" style={{ marginLeft: 12 }}>~ 48h response</span>
        </div>
      </div>
    </section>

    {/* Footer */}
    <footer id="docs" style={{ padding: '48px 56px', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 32, fontSize: 13, color: 'var(--ink-3)' }}>
      <div>
        <a href="index.html" aria-label="TitleVerifi home" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none', color: 'inherit' }}>
          <Wordmark size={20} />
        </a>
        <p style={{ marginTop: 16, lineHeight: 1.6, maxWidth: 280 }}>
          AI title intelligence for closing services. Made for examiners.
        </p>
      </div>
      <FooterCol head="Product" items={['Overview','Report','Pricing','Security','Changelog']} />
      <FooterCol head="Company" items={['About','Customers','Careers','Press']} />
      <FooterCol head="Resources" items={['Docs','API','Sample report','Support']} />
      <FooterCol head="Legal" items={['Terms','Privacy','SOC 2 readiness','Subprocessors']} />
    </footer>
  </div>
);

const btnPrimary = {
  background: 'var(--ink)', color: 'var(--paper)', border: 'none',
  padding: '8px 14px', borderRadius: 'var(--r-2)', fontSize: 14,
  fontFamily: 'inherit', fontWeight: 500, cursor: 'pointer',
  textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
};
const btnGhost = {
  background: 'transparent', color: 'var(--ink)',
  border: '1px solid var(--rule-strong)', padding: '12px 18px',
  borderRadius: 'var(--r-2)', fontSize: 15, fontFamily: 'inherit',
  fontWeight: 500, cursor: 'pointer', textDecoration: 'none',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
};
const navLinkStyle = {
  color: 'inherit',
  textDecoration: 'none',
  cursor: 'pointer',
};

const Stat = ({ n, l }) => (
  <div>
    <div style={{ fontFamily: 'var(--font-serif)', fontSize: 32, lineHeight: 1, color: 'var(--ink)' }}>{n}</div>
    <div className="meta" style={{ marginTop: 4 }}>{l}</div>
  </div>
);

const HeroPreview = () => (
  <div style={{
    border: '1px solid var(--rule-strong)', background: 'var(--paper)',
    boxShadow: 'var(--shadow-2)', borderRadius: 'var(--r-3)', overflow: 'hidden',
  }}>
    {/* Window chrome */}
    <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--rule)', display: 'flex', alignItems: 'center', gap: 10, background: 'var(--paper-2)' }}>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E0DDD2' }}/>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E0DDD2' }}/>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E0DDD2' }}/>
      <span className="mono" style={{ marginLeft: 12, fontSize: 11, color: 'var(--ink-3)' }}>
        report.titleverifi.com / file / TV-2025-0419-217 / Wright_412Hawthorne
      </span>
    </div>
    {/* Doc header */}
    <div style={{ padding: '24px 28px 20px', borderBottom: '1px solid var(--rule)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div className="meta" style={{ marginBottom: 6 }}>FILE TV-2025-0419-217</div>
          <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 28, letterSpacing: '-0.02em', margin: 0 }}>
            412 Hawthorne Ave, Travis County, TX
          </h3>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6 }}>
            APN 04-219-007 · Search effective 2026-04-12
          </div>
        </div>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
          color: 'var(--status-review)', background: 'var(--status-review-bg)',
          padding: '4px 8px', border: '1px solid var(--status-review)', borderRadius: 2,
        }}>● REVIEW</span>
      </div>
      <div style={{ display: 'flex', gap: 24, marginTop: 16, fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
        <span>37 docs</span>
        <span>·</span>
        <span>4 mortgages</span>
        <span>·</span>
        <span style={{ color: 'var(--status-review)' }}>3 flags</span>
        <span>·</span>
        <span>Review P1</span>
      </div>
    </div>
    {/* Chain preview */}
    <div style={{ padding: '20px 28px' }}>
      <div className="meta" style={{ marginBottom: 12 }}>§ 03 — CHAIN OF TITLE</div>
      <ChainLink year="1961" g="Smart" gee="Reed" cite="Bk 421/Pg 88" />
      <ChainLink year="2005" g="Estate of Reed" gee="WWC Group LLC" cite="Bk 1834/Pg 217" probate />
      <ChainLink year="2006" g="WWC Group LLC" gee="Dujuan Parish" cite="Bk 1902/Pg 41" />
      <ChainLink year="2018" g="Parish" gee="Logan & Wright" cite="Bk 2451/Pg 187" mortgage />
      <ChainLink year="2023" g="Logan & Wright" gee="Del West LLC" cite="Bk 2890/Pg 12" current />
    </div>
    {/* Issues callout */}
    <div style={{ padding: '16px 28px 24px', borderTop: '1px solid var(--rule)', background: 'var(--status-review-bg)' }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--status-review)', marginBottom: 6 }}>
        ⚠ 1 missing release · 1 wild deed risk · name search required
      </div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>
        See § 06 — Curative Actions
      </div>
    </div>
  </div>
);

const ChainLink = ({ year, g, gee, cite, mortgage, probate, current }) => (
  <div style={{
    display: 'grid', gridTemplateColumns: '60px 1fr auto',
    alignItems: 'center', padding: '10px 0', borderBottom: '1px dashed var(--rule)',
    fontSize: 13,
  }}>
    <span className="mono" style={{ color: 'var(--ink-3)' }}>{year}</span>
    <span>
      <span style={{ color: 'var(--ink-2)' }}>{g}</span>
      <span style={{ color: 'var(--ink-4)', margin: '0 8px' }}>→</span>
      <span style={{ fontWeight: current ? 600 : 400 }}>{gee}</span>
      {mortgage && <span style={{ marginLeft: 10, fontSize: 10, fontFamily:'var(--font-mono)', color: 'var(--status-review)', border: '1px solid var(--status-review)', padding: '1px 4px', borderRadius: 2 }}>MTG</span>}
      {probate && <span style={{ marginLeft: 10, fontSize: 10, fontFamily:'var(--font-mono)', color: 'var(--ink-3)', border: '1px solid var(--rule-strong)', padding: '1px 4px', borderRadius: 2 }}>PROB</span>}
    </span>
    <span className="cite">[{cite}]</span>
  </div>
);

const ProblemCard = ({ n, title, body }) => (
  <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 24 }}>
    <div className="mono" style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 16 }}>{n}</div>
    <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 28, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 12px' }}>
      {title}
    </h3>
    <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>{body}</p>
  </div>
);

const SectionRow = ({ n, name, desc, highlight }) => (
  <div style={{
    display: 'grid', gridTemplateColumns: '60px 1fr 2fr',
    padding: '20px 24px', background: 'var(--paper)',
    alignItems: 'baseline',
  }}>
    <span className="mono" style={{ color: highlight ? 'var(--accent)' : 'var(--ink-3)', fontSize: 12 }}>§ {n}</span>
    <span style={{ fontSize: 17, fontWeight: highlight ? 600 : 500, fontFamily: highlight ? 'var(--font-serif)' : 'var(--font-sans)', fontStyle: highlight ? 'italic' : 'normal' }}>{name}</span>
    <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>{desc}</span>
  </div>
);

const Step = ({ n, t, body, chip }) => (
  <div style={{ background: 'var(--paper)', padding: '28px 24px 24px', minHeight: 240, display: 'flex', flexDirection: 'column' }}>
    <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', marginBottom: 14 }}>{n}</div>
    <div style={{ fontSize: 22, fontWeight: 500, marginBottom: 12, fontFamily: 'var(--font-serif)', fontStyle: 'italic', letterSpacing: '-0.01em' }}>{t}</div>
    <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)', margin: '0 0 auto', flex: 1 }}>{body}</p>
    <div className="mono" style={{ marginTop: 16, fontSize: 11, color: 'var(--ink-3)', borderTop: '1px solid var(--rule)', paddingTop: 12 }}>
      → {chip}
    </div>
  </div>
);

const Th = ({ children, accent }) => (
  <div style={{ padding: '14px 18px', fontSize: 12, fontFamily: 'var(--font-mono)', color: accent ? 'var(--accent)' : 'var(--ink-3)', letterSpacing: '0.04em' }}>{children}</div>
);
const Row = ({ label, a, b, last }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderBottom: last ? 'none' : '1px solid var(--rule)' }}>
    <div style={{ padding: '14px 18px', fontSize: 14 }}>{label}</div>
    <div style={{ padding: '14px 18px', fontSize: 16, color: a === '●' ? 'var(--ink)' : 'var(--ink-4)' }}>{a}</div>
    <div style={{ padding: '14px 18px', fontSize: 16, color: b === '●' ? 'var(--accent)' : 'var(--ink-4)' }}>{b}</div>
  </div>
);

const FooterCol = ({ head, items }) => (
  <div>
    <div className="meta" style={{ marginBottom: 12 }}>{head.toUpperCase()}</div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {items.map(i => <a style={footerLinkStyle} href={footerHref(i)} key={i}>{i}</a>)}
    </div>
  </div>
);

const footerHref = (label) => {
  const key = String(label || '').toLowerCase();
  if (key.includes('overview')) return 'index.html';
  if (key.includes('report')) return 'signin.html?return=product.html';
  if (key.includes('pricing')) return 'pricing.html';
  if (key.includes('security')) return 'security.html';
  if (key.includes('changelog')) return 'changelog.html';
  if (key.includes('about')) return 'about.html';
  if (key.includes('support')) return 'support.html';
  if (key.includes('terms')) return 'terms.html';
  if (key.includes('privacy')) return 'privacy.html';
  if (key.includes('customer')) return '#customers';
  if (key.includes('docs')) return '#docs';
  if (key.includes('api') || key.includes('sample')) return 'signin.html?return=product.html';
  // TODO: stub pages for Careers, Press, SOC 2 readiness, Subprocessors
  return 'index.html#docs';
};

const footerLinkStyle = {
  color: 'inherit',
  textDecoration: 'none',
  cursor: 'pointer',
};

const TrustBadge = ({ label, status }) => (
  <div>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.06em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 4 }}>{label}</div>
    <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{status}</div>
  </div>
);

const FaqRow = ({ q, a, last }) => (
  <div style={{ background: 'var(--paper)', padding: '24px 28px', borderBottom: last ? 'none' : '1px solid var(--rule-strong)' }}>
    <div style={{ fontSize: 17, fontWeight: 600, fontFamily: 'var(--font-serif)', fontStyle: 'italic', marginBottom: 8 }}>{q}</div>
    <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>{a}</p>
  </div>
);

window.LandingPage = LandingPage;