// Hi-fi homepage — Two-Door direction
// Builds on Home A from the lo-fi canvas with these locked-in changes:
//   • New wordmark (variant A by default — interlocking-lozenge mark + serif)
//   • Brand-thesis line ABOVE the split hero (cold traffic ground)
//   • Live activity ticker BELOW the hero (placeholder data; live feed eventual)
//   • Stats section KILLED (no real numbers yet)
//   • Sectors section KILLED (no NAICS taxonomy yet)
//   • Pricing GATED — footer link replaced with "Request access"
//   • Marketplace preview block — styled buyer-dashboard snippet, not a Box

// ─── Tokens (local copy so this file is self-contained) ─────────
const HF = {
  paper:  "#F2EFE8",
  ink:    "#1C1A17",
  inkSoft:"#5A5853",
  rule:   "#D8D3C7",
  brass:  "#D9933F",
  brassD: "#9E6A26",
  cream:  "#FAF8F3",
  surface:"#FFFFFF",
};

// ─── Nav with new wordmark ──────────────────────────────────────
function HFNav({ wordmark = "A", dark = false }) {
  const ink = dark ? HF.paper : HF.ink;
  const soft = dark ? "rgba(242,239,232,0.7)" : HF.inkSoft;
  const ruleC = dark ? "rgba(242,239,232,0.12)" : HF.rule;
  const bg = dark ? HF.ink : "rgba(242,239,232,0.94)";
  return (
    <header style={{ background: bg, borderBottom: `1px solid ${ruleC}`, backdropFilter: "saturate(140%) blur(8px)", position: "sticky", top: 0, zIndex: 5 }}>
      <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 76 }}>
        <a href="/" style={{ display: "inline-flex", textDecoration: "none" }}>
          <Wordmark variant={wordmark} height={26} color={ink} accent={HF.brass} />
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 36 }}>
          {[
            { l: "For Owners", h: "/data-owners" },
            { l: "For Buyers", h: "/data-buyers" },
            { l: "How it works", h: "/#how-it-works" },
            { l: "Trust", h: "/#trust" },
            { l: "About", h: "/" }
          ].map(it => (
            <a key={it.l} href={it.h} style={{ color: soft, fontSize: 14, fontWeight: 500, textDecoration: "none", cursor: "pointer", letterSpacing: "-0.005em" }}>{it.l}</a>
          ))}
          <span style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <a href="/sign-in" style={{ color: ink, fontSize: 14, fontWeight: 500, textDecoration: "none", cursor: "pointer" }}>Sign in</a>
            <a href="/sign-in" className="btn btn-pri-accent" style={{ padding: "10px 18px", fontSize: 13, textDecoration: "none" }}>Get started <span style={{ fontWeight: 400 }}>→</span></a>
          </span>
        </nav>
      </Container>
    </header>
  );
}

// ─── Brand thesis line — above the hero, plants the flag ───────
function HFThesisLine() {
  return (
    <div style={{ background: HF.paper, borderBottom: `1px solid ${HF.rule}`, padding: "20px 0" }}>
      <Container>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 16 }}>
          <span className="kicker" style={{ color: HF.brassD }}>DATAOWNERS · MARKETPLACE</span>
          <span style={{ color: HF.rule }}>·</span>
          <span style={{ fontSize: 14, color: HF.ink, fontFamily: "'Source Serif 4', Georgia, serif", fontStyle: "italic", fontWeight: 500, letterSpacing: "-0.005em" }}>
            For ethically-sourced first-party data.
          </span>
        </div>
      </Container>
    </div>
  );
}

// ─── Two-door hero ──────────────────────────────────────────────
function HFHero() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 640, position: "relative" }}>
      {/* LEFT · paper · owners */}
      <div style={{
        background: HF.paper, padding: "112px 64px", borderRight: `1px solid ${HF.rule}`,
        display: "flex", flexDirection: "column", justifyContent: "center", position: "relative", overflow: "hidden",
      }}>
        {/* Decorative italic — quiet brand element, not imagery */}
        <div className="serif" style={{
          position: "absolute", right: -20, bottom: -40, fontSize: 220, fontStyle: "italic", fontWeight: 400,
          color: HF.brass, opacity: 0.07, letterSpacing: "-0.04em", pointerEvents: "none", lineHeight: 1,
        }}>
          yours.
        </div>
        <div style={{ position: "relative", zIndex: 1, maxWidth: 500 }}>
          <Kicker color={HF.brassD}>FOR DATA OWNERS</Kicker>
          <h1 className="serif" style={{
            fontSize: 76, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.028em", margin: "20px 0 0", color: HF.ink,
          }}>
            You have<br/>
            <em style={{ fontStyle: "italic", color: HF.brassD }}>data.</em>
          </h1>
          <p style={{
            marginTop: 24, fontSize: 18, lineHeight: 1.55, color: HF.inkSoft, maxWidth: "44ch",
          }}>
            Sell what's already yours — without becoming a broker, building a sales team, or expanding your risk surface. We verify, represent, and transact on your behalf.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 36 }}>
            <a href="/sign-in" className="btn btn-pri" style={{ textDecoration: "none" }}>List your data <span style={{ fontWeight: 400 }}>→</span></a>
            <a href="/data-owners" className="btn btn-ghost-paper" style={{ textDecoration: "none" }}>See what qualifies</a>
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 32, flexWrap: "wrap" }}>
            {["SAMPLE-VERIFIED", "ROYALTIES SUPPORTED", "AUDIT TRAIL"].map(c => (
              <span key={c} className="chip">{c}</span>
            ))}
          </div>
        </div>
      </div>

      {/* RIGHT · ink · buyers */}
      <div style={{
        background: HF.ink, color: HF.paper, padding: "112px 64px",
        display: "flex", flexDirection: "column", justifyContent: "center", position: "relative", overflow: "hidden",
      }}>
        {/* Decorative italic */}
        <div className="serif" style={{
          position: "absolute", left: -20, bottom: -40, fontSize: 220, fontStyle: "italic", fontWeight: 400,
          color: HF.brass, opacity: 0.10, letterSpacing: "-0.04em", pointerEvents: "none", lineHeight: 1,
        }}>
          needed.
        </div>
        {/* Subtle grid */}
        <div style={{
          position: "absolute", inset: 0, opacity: 0.04, pointerEvents: "none",
          backgroundImage: "linear-gradient(rgba(242,239,232,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(242,239,232,0.6) 1px, transparent 1px)",
          backgroundSize: "40px 40px",
        }}/>
        <div style={{ position: "relative", zIndex: 1, maxWidth: 500, marginLeft: "auto" }}>
          <Kicker color={HF.brass}>FOR DATA BUYERS</Kicker>
          <h1 className="serif" style={{
            fontSize: 76, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.028em", margin: "20px 0 0", color: HF.paper,
          }}>
            You need<br/>
            <em style={{ fontStyle: "italic", color: HF.brass }}>data.</em>
          </h1>
          <p style={{
            marginTop: 24, fontSize: 18, lineHeight: 1.55, color: "rgba(242,239,232,0.7)", maxWidth: "44ch",
          }}>
            Source first-party, consent-verified datasets from owners you couldn't reach directly. Structured matching, sample previews, defensible terms — end-to-end on platform.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 36 }}>
            <a href="/sign-in" className="btn btn-pri-accent" style={{ textDecoration: "none" }}>Browse the market <span style={{ fontWeight: 400 }}>→</span></a>
            <a href="/data-buyers" className="btn btn-ghost-ink" style={{ textDecoration: "none" }}>See a sample match</a>
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 32, flexWrap: "wrap" }}>
            {["VERIFIED PROVENANCE", "STRUCTURED MATCHING", "ON-PLATFORM TERMS"].map(c => (
              <span key={c} className="chip" style={{ background: "rgba(217,147,63,0.15)", color: HF.brass }}>{c}</span>
            ))}
          </div>
        </div>
      </div>

      {/* Center divider with verified-marketplace seal */}
      <div style={{
        position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)",
        width: 76, height: 76, borderRadius: 999, background: HF.paper,
        boxShadow: "0 8px 24px -4px rgba(28,26,23,0.18), 0 0 0 1px rgba(28,26,23,0.1)",
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", zIndex: 2,
      }}>
        <div className="mono" style={{ fontSize: 8, color: HF.brassD, letterSpacing: "0.16em", fontWeight: 600 }}>BOTH</div>
        <div className="mono" style={{ fontSize: 8, color: HF.brassD, letterSpacing: "0.16em", fontWeight: 600 }}>SIDES</div>
      </div>
    </div>
  );
}

// ─── Activity ticker stripe ─────────────────────────────────────
// Full-bleed, single-row scrolling marquee.  Static here; intended to
// pull from the live activity feed once it exists. Designed to read as
// proof-of-life — "this marketplace transacts."
function HFTicker() {
  const items = [
    { tag: "LISTED",       d: "Northeast Card Panel · Tier-A · sample-verified",       t: "2m ago" },
    { tag: "MATCH",        d: "Mid-market PE buyer · Logistics telemetry · fit 94",     t: "8m ago" },
    { tag: "NDA",          d: "Off-Mall Footfall · counterparty signed",                t: "14m ago" },
    { tag: "DELIVERED",    d: "DeliveryAgg Basket Index · 540K rows · audit logged",    t: "31m ago" },
    { tag: "INTAKE",       d: "Owner intake completed · Energy & Utilities · in review",t: "47m ago" },
    { tag: "LISTED",       d: "Carrier OTP Index · National · sample-verified",         t: "1h ago" },
    { tag: "ROYALTY",      d: "Contributor distribution · $42,318 · 1,407 recipients",  t: "1h ago" },
    { tag: "VERIFIED",     d: "Buyer onboarding completed · AI lab · 12-month plan",    t: "2h ago" },
  ];
  const colorFor = (tag) => ({
    LISTED:    HF.brass,
    MATCH:     "#A8C18D",
    NDA:       "#E2C28C",
    DELIVERED: "#A8C18D",
    INTAKE:    "#99A9C1",
    ROYALTY:   HF.brass,
    VERIFIED:  "#A8C18D",
  }[tag] || HF.brass);
  return (
    <div style={{ background: HF.ink, color: HF.paper, borderTop: "1px solid rgba(242,239,232,0.08)", borderBottom: "1px solid rgba(242,239,232,0.08)", padding: "16px 0", overflow: "hidden", position: "relative" }}>
      {/* Fade masks */}
      <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 120, background: "linear-gradient(90deg, #1C1A17, transparent)", zIndex: 2, pointerEvents: "none" }} />
      <div style={{ position: "absolute", right: 0, top: 0, bottom: 0, width: 120, background: "linear-gradient(-90deg, #1C1A17, transparent)", zIndex: 2, pointerEvents: "none" }} />
      <div style={{ display: "flex", gap: 0, alignItems: "center", whiteSpace: "nowrap", paddingLeft: 56 }}>
        <span className="mono" style={{ fontSize: 10, color: HF.brass, letterSpacing: "0.22em", fontWeight: 600, paddingRight: 24, borderRight: "1px solid rgba(242,239,232,0.18)" }}>
          ● LIVE
        </span>
        {[...items, ...items].map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "0 28px", borderRight: "1px solid rgba(242,239,232,0.08)" }}>
            <span className="mono" style={{ fontSize: 9.5, color: colorFor(it.tag), letterSpacing: "0.16em", fontWeight: 600, padding: "2px 6px", border: `1px solid ${colorFor(it.tag)}`, opacity: 0.85 }}>
              {it.tag}
            </span>
            <span style={{ fontSize: 13, color: "rgba(242,239,232,0.85)" }}>{it.d}</span>
            <span className="mono" style={{ fontSize: 10, color: "rgba(242,239,232,0.4)", letterSpacing: "0.08em" }}>{it.t}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── Thesis band ────────────────────────────────────────────────
function HFThesisBand() {
  return (
    <section style={{ background: HF.cream, padding: "80px 0" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "baseline" }}>
          <h2 className="serif" style={{ fontSize: 44, lineHeight: 1.08, fontWeight: 500, letterSpacing: "-0.022em", margin: 0, maxWidth: "28ch" }}>
            The marketplace for <em style={{ fontStyle: "italic", color: HF.brassD }}>ethically-sourced</em> first-party data.
          </h2>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: HF.inkSoft, margin: 0 }}>
              No scraped data. No third-party resales. Every dataset sample-verified before listing. Every transaction generates a portable audit trail your privacy officer can hand to a regulator.
            </p>
            <div style={{ marginTop: 20, display: "flex", gap: 16, alignItems: "center", fontSize: 12, color: HF.inkSoft }}>
              <span className="mono" style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>SOC 2 Type II</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span className="mono" style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>GDPR</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span className="mono" style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>CCPA</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span className="mono" style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>ISO 27001</span>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─── How it works ───────────────────────────────────────────────
function HFHowItWorks() {
  const steps = [
    { n: "01", k: "Onboard",  d: "Owners describe their data; buyers describe what they need. We structure both sides into machine-matchable specs — no jargon required at intake." },
    { n: "02", k: "Match",    d: "Verified buyers see verified datasets that fit. Fit-scored, ranked, filtered by your domain, geography, freshness, and ethical constraints." },
    { n: "03", k: "Transact", d: "NDA, sample, terms, payment, delivery — all on platform. One audit trail per deal, accessible to both sides forever. No off-platform handshakes." },
  ];
  return (
    <section id="how-it-works" style={{ background: HF.paper, padding: "120px 0" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, marginBottom: 56 }}>
          <div>
            <Kicker>HOW IT WORKS</Kicker>
            <h2 className="serif" style={{ fontSize: 56, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.025em", margin: "16px 0 0" }}>
              One platform.<br/>
              Both sides.<br/>
              <em style={{ fontStyle: "italic", color: HF.brassD }}>Every step.</em>
            </h2>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: HF.inkSoft, margin: 0, alignSelf: "end" }}>
            Every step — from intake through final delivery — happens on platform. One audit trail per deal, accessible to both sides forever. No "we just represent the data" disclaimers.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              padding: i === 0 ? "0 32px 0 0" : i === 2 ? "0 0 0 32px" : "0 32px",
              borderRight: i < 2 ? `1px solid ${HF.rule}` : "none",
            }}>
              <div style={{
                width: 36, height: 36, background: HF.ink, color: HF.brass,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontFamily: "'JetBrains Mono', monospace", fontWeight: 600, fontSize: 14,
              }}>{s.n}</div>
              <h3 className="serif" style={{ fontSize: 30, lineHeight: 1.1, fontWeight: 500, letterSpacing: "-0.015em", margin: "20px 0 14px" }}>{s.k}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: HF.inkSoft, margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── Marketplace preview · gated ────────────────────────────────
function HFMarketPreview() {
  const rows = [
    { fit: 94, name: "Northeast Card Panel · Tier-A",   seller: "Bank-of-record syndicate",  records: "840K / mo", refresh: "Daily",  chips: ["NY-NJ", "24mo", "MCC-tagged"] },
    { fit: 91, name: "Off-Mall Footfall · Convenience", seller: "Mobility platform",          records: "310K / mo", refresh: "Daily",  chips: ["Off-mall", "18mo"] },
    { fit: 88, name: "DeliveryAgg Basket Index",        seller: "Aggregator coalition",       records: "540K / mo", refresh: "Hourly", chips: ["Tier-2 metros", "9mo"] },
  ];
  return (
    <section style={{ background: HF.ink, color: HF.paper, padding: "120px 0", position: "relative", overflow: "hidden" }}>
      {/* Subtle grid */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.04, pointerEvents: "none",
        backgroundImage: "linear-gradient(rgba(242,239,232,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(242,239,232,0.4) 1px, transparent 1px)",
        backgroundSize: "40px 40px",
      }}/>
      <Container style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "center" }}>
          <div>
            <Kicker color={HF.brass}>FOR VERIFIED BUYERS</Kicker>
            <h2 className="serif" style={{ fontSize: 52, lineHeight: 1.04, fontWeight: 500, letterSpacing: "-0.022em", margin: "16px 0 0", color: HF.paper }}>
              The catalog,<br/>
              <em style={{ fontStyle: "italic", color: HF.brass }}>after verification.</em>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "rgba(242,239,232,0.7)", margin: "24px 0 0", maxWidth: "40ch" }}>
              We don't run a public catalog. Sellers stay confidential until both sides sign deal-specific NDAs. This is a glimpse of what verified buyers see in their dashboard — anonymized for the preview.
            </p>
            <div style={{ marginTop: 32 }}>
              <a href="/sign-in" className="btn btn-pri-accent" style={{ textDecoration: "none" }}>Request buyer access <span style={{ fontWeight: 400 }}>→</span></a>
            </div>
          </div>

          {/* Mock dataset table */}
          <div style={{ background: "rgba(242,239,232,0.04)", border: "1px solid rgba(242,239,232,0.18)", padding: 0 }}>
            <div style={{ padding: "16px 24px", borderBottom: "1px solid rgba(242,239,232,0.12)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span className="mono" style={{ fontSize: 10, color: HF.brass, letterSpacing: "0.14em", fontWeight: 600 }}>● TOP MATCHES · LIVE</span>
              <span className="mono" style={{ fontSize: 10, color: "rgba(242,239,232,0.5)", letterSpacing: "0.1em" }}>3 OF 42 · BUYER VIEW</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "60px 1fr 100px 80px", padding: "10px 24px", borderBottom: "1px solid rgba(242,239,232,0.08)", gap: 16 }}>
              {["FIT", "DATASET", "RECORDS", ""].map((h, i) => <div key={i} className="mono" style={{ fontSize: 9.5, color: "rgba(242,239,232,0.5)", letterSpacing: "0.14em", fontWeight: 500 }}>{h}</div>)}
            </div>
            {rows.map((r, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr 100px 80px", padding: "20px 24px", borderBottom: i < rows.length - 1 ? "1px solid rgba(242,239,232,0.06)" : "none", gap: 16, alignItems: "center" }}>
                <div className="serif" style={{ fontSize: 26, fontWeight: 500, color: HF.brass, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{r.fit}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: HF.paper }}>{r.name}</div>
                  <div style={{ fontSize: 11, color: "rgba(242,239,232,0.55)", marginTop: 4 }}>{r.seller} · Verified</div>
                  <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
                    {r.chips.map(c => (
                      <span key={c} className="mono" style={{ fontSize: 9, padding: "2px 6px", background: "rgba(242,239,232,0.06)", color: "rgba(242,239,232,0.7)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{c}</span>
                    ))}
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 13, color: HF.paper, fontVariantNumeric: "tabular-nums" }}>{r.records}</div>
                  <div style={{ fontSize: 11, color: "rgba(242,239,232,0.55)", marginTop: 2 }}>{r.refresh}</div>
                </div>
                <button style={{ background: "transparent", border: "1px solid rgba(242,239,232,0.25)", color: HF.brass, padding: "6px 10px", fontSize: 11, fontWeight: 500, fontFamily: "inherit", cursor: "pointer" }}>Sample →</button>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─── Ethical mechanism stack — the load-bearing claim ──────────
function HFEthicalStack() {
  const items = [
    { n: "01", k: "Consent verified at source",       d: "We confirm rights with the data's original generators — not just the seller. No claim-and-list." },
    { n: "02", k: "Provenance documented per dataset", d: "Every dataset ships with a verifiable origin chain: collection method, jurisdictions, processing." },
    { n: "03", k: "No scraped or resold data",         d: "First-party data only. Third-party-resold or web-scraped datasets are rejected at intake — no exceptions." },
    { n: "04", k: "Jurisdictional rights cleared",      d: "GDPR, CCPA, HIPAA, sector-specific. Cleared before a dataset lists — not after a buyer signs." },
    { n: "05", k: "Royalties flow to contributors",    d: "When the underlying data has individual contributors, a documented share of revenue returns to them." },
    { n: "06", k: "Sample-verified before listing",    d: "Our team inspects a sample of every dataset — content, schema, consent artifacts — before it goes live." },
    { n: "07", k: "Buyer-accessible audit trail",      d: "Every transaction generates a portable audit record. Defensible to regulators, auditors, and your board." },
  ];
  return (
    <section id="trust" style={{ background: HF.paper, padding: "140px 0" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, marginBottom: 56 }}>
          <div>
            <Kicker>WHAT MAKES IT ETHICAL</Kicker>
            <h2 className="serif" style={{ fontSize: 56, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.025em", margin: "16px 0 0" }}>
              Seven gates<br/>
              <em style={{ fontStyle: "italic", color: HF.brassD }}>before market.</em>
            </h2>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: HF.inkSoft, margin: 0, alignSelf: "end" }}>
            Most data marketplaces start with inventory and figure out the rest after the deal closes. We start with the verification — and reject roughly a third of intakes. This is the load-bearing claim of the whole platform, so we're explicit about what it means.
          </p>
        </div>
        <div>
          {items.map((e, i) => (
            <div key={e.n} style={{
              display: "grid", gridTemplateColumns: "80px 1.1fr 1.6fr 60px", gap: 32, alignItems: "baseline",
              padding: "32px 0", borderTop: `1px solid ${HF.rule}`,
              ...(i === items.length - 1 ? { borderBottom: `1px solid ${HF.rule}` } : {}),
            }}>
              <div className="mono" style={{ fontSize: 14, color: HF.brassD, fontWeight: 500, letterSpacing: "0.04em" }}>{e.n}</div>
              <h3 className="serif" style={{ fontSize: 26, lineHeight: 1.15, fontWeight: 500, letterSpacing: "-0.015em", margin: 0 }}>{e.k}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: HF.inkSoft, margin: 0 }}>{e.d}</p>
              <div style={{ display: "flex", justifyContent: "flex-end" }}>
                <span style={{ width: 18, height: 18, borderRadius: 999, background: HF.brassD, color: HF.paper, display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 12 }}>✓</span>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── Quote ──────────────────────────────────────────────────────
function HFQuote() {
  return (
    <section style={{ background: HF.cream, padding: "120px 0" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 3fr 1fr", gap: 48, alignItems: "start" }}>
          <Kicker>QUOTE · PLACEHOLDER</Kicker>
          <div>
            <h2 className="serif" style={{ fontSize: 40, lineHeight: 1.2, fontWeight: 500, letterSpacing: "-0.018em", fontStyle: "italic", margin: 0 }}>
              "We sat on portfolio data we knew was valuable for three years. DataOwners verified it in nine days and had a buyer in fourteen. We didn't need to build a team."
            </h2>
            <div style={{ marginTop: 32, display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{ width: 44, height: 44, background: HF.ink, color: HF.brass, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 14, fontFamily: "'Source Serif 4', serif" }}>—</div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14 }}>[Replace with named contact]</div>
                <div style={{ fontSize: 12, color: HF.inkSoft }}>[Title] · [Firm]</div>
              </div>
            </div>
          </div>
          <div />
        </div>
      </Container>
    </section>
  );
}

// ─── Split CTA band ─────────────────────────────────────────────
function HFCTA() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderTop: `1px solid ${HF.rule}` }}>
      <div style={{ background: HF.paper, padding: "96px 64px", borderRight: `1px solid ${HF.rule}`, position: "relative", overflow: "hidden" }}>
        <div className="serif" style={{ position: "absolute", right: -10, top: -30, fontSize: 180, fontStyle: "italic", fontWeight: 400, color: HF.brass, opacity: 0.06, letterSpacing: "-0.04em", pointerEvents: "none", lineHeight: 1 }}>list.</div>
        <div style={{ position: "relative" }}>
          <Kicker color={HF.brassD}>OWNERS</Kicker>
          <h2 className="serif" style={{ fontSize: 44, lineHeight: 1.05, fontWeight: 500, letterSpacing: "-0.02em", margin: "16px 0 16px" }}>Tell us what you have.</h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: HF.inkSoft, margin: "0 0 32px", maxWidth: "32ch" }}>
            Five minutes to describe your data. We come back the same day with whether it qualifies — and what it's likely worth.
          </p>
          <a href="/sign-in" className="btn btn-pri" style={{ textDecoration: "none" }}>Start owner intake <span style={{ fontWeight: 400 }}>→</span></a>
        </div>
      </div>
      <div style={{ background: HF.ink, color: HF.paper, padding: "96px 64px", position: "relative", overflow: "hidden" }}>
        <div className="serif" style={{ position: "absolute", left: -10, top: -30, fontSize: 180, fontStyle: "italic", fontWeight: 400, color: HF.brass, opacity: 0.10, letterSpacing: "-0.04em", pointerEvents: "none", lineHeight: 1 }}>match.</div>
        <div style={{ position: "relative" }}>
          <Kicker color={HF.brass}>BUYERS</Kicker>
          <h2 className="serif" style={{ fontSize: 44, lineHeight: 1.05, fontWeight: 500, letterSpacing: "-0.02em", margin: "16px 0 16px", color: HF.paper }}>Tell us what you need.</h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "rgba(242,239,232,0.7)", margin: "0 0 32px", maxWidth: "32ch" }}>
            Paste a brief in any form. We structure it, match against verified inventory, and surface fit-scored options in under a day.
          </p>
          <a href="/sign-in" className="btn btn-pri-accent" style={{ textDecoration: "none" }}>Start buyer intake <span style={{ fontWeight: 400 }}>→</span></a>
        </div>
      </div>
    </div>
  );
}

// ─── Footer — pricing gated; sample-datasets removed ────────────
function HFFooter({ wordmark = "A" }) {
  return (
    <footer style={{ background: HF.ink, color: HF.paper, padding: "80px 0 36px" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", gap: 32 }}>
          <div>
            <a href="/" style={{ display: "inline-flex", textDecoration: "none" }}>
              <Wordmark variant={wordmark} height={26} color={HF.paper} accent={HF.brass} />
            </a>
            <p style={{ marginTop: 18, fontSize: 14, color: "rgba(242,239,232,0.55)", maxWidth: "32ch", lineHeight: 1.55 }}>
              The marketplace for ethically-sourced first-party data.
            </p>
          </div>
          {[
            { h: "Platform",  l: ["For Owners","For Buyers","How it works","Trust"] },
            { h: "Resources", l: ["Documentation","Buyer's guide","Owner's playbook","Changelog"] },
            { h: "Company",   l: ["About","Press","Careers","Investors","Contact"] },
            { h: "Legal",     l: ["Privacy","Terms","Data ethics","DPA","Security"] },
          ].map(col => (
            <div key={col.h}>
              <div className="kicker" style={{ color: HF.brass, marginBottom: 16, fontSize: 10 }}>{col.h}</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {col.l.map(item => {
                  let href = "#";
                  if (item === "For Owners") href = "/data-owners";
                  else if (item === "For Buyers") href = "/data-buyers";
                  else if (item === "How it works") href = "/#how-it-works";
                  else if (item === "Trust") href = "/#trust";
                  return (
                    <li key={item}>
                      <a href={href} style={{ fontSize: 13, color: "rgba(242,239,232,0.7)", textDecoration: "none", cursor: "pointer" }}>
                        {item}
                      </a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 64, paddingTop: 24, borderTop: "1px solid rgba(242,239,232,0.1)", display: "flex", justifyContent: "space-between", color: "rgba(242,239,232,0.4)", fontSize: 12 }}>
          <span>© 2026 DataOwners.ai · BZM OpCo., Pvt. LTD</span>
          <span className="mono" style={{ letterSpacing: "0.18em" }}>SOC 2 TYPE II · GDPR · CCPA · ISO 27001</span>
        </div>
      </Container>
    </footer>
  );
}

// ─── Composed page (wordmark-aware so the user can compare) ─────
function HiFiHomepage({ wordmark = "A" }) {
  return (
    <div className="lf" style={{ width: "100%", background: HF.paper }}>
      <HFNav wordmark={wordmark} />
      <HFThesisLine />
      <HFHero />
      <HFTicker />
      <HFThesisBand />
      <HFHowItWorks />
      <HFMarketPreview />
      <HFEthicalStack />
      <HFCTA />
      <HFFooter wordmark={wordmark} />
    </div>
  );
}