// Hi-fi audience pages — /data-owners (paper hero) + /data-buyers (ink hero)
// These reuse HFNav, HFFooter, HFTicker, plus their own hero + journey + faq + cta.

// ─── Shared mini components for audience pages ─────────────────

// Compact trust band — visitors saw the full ethical stack on home;
// here we surface the three points most relevant to their side, with
// a link out to the full breakdown.
function MiniTrust({ items, dark = false }) {
  const ruleC = dark ? "rgba(242,239,232,0.18)" : HF.rule;
  const ink   = dark ? HF.paper : HF.ink;
  const soft  = dark ? "rgba(242,239,232,0.7)" : HF.inkSoft;
  const accent= dark ? HF.brass : HF.brassD;
  return (
    <section style={{ background: dark ? HF.ink : HF.cream, padding: "80px 0", color: ink }}>
      <Container>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 28 }}>
          <div>
            <Kicker color={accent}>BACKED BY SEVEN GATES</Kicker>
            <h2 className="serif" style={{ fontSize: 32, lineHeight: 1.1, fontWeight: 500, letterSpacing: "-0.018em", margin: "10px 0 0", color: ink }}>
              The verifications that matter most to your side.
            </h2>
          </div>
          <a href="/#trust" style={{ color: accent, fontWeight: 500, fontSize: 13, cursor: "pointer", fontFamily: "Inter, sans-serif", textDecoration: "none" }}>See all seven gates →</a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, borderTop: `1px solid ${ruleC}`, borderBottom: `1px solid ${ruleC}` }}>
          {items.map((it, i) => (
            <div key={it.n} style={{ padding: "28px 28px 28px 0", paddingLeft: i === 0 ? 0 : 28, borderRight: i < 2 ? `1px solid ${ruleC}` : "none" }}>
              <div className="mono" style={{ fontSize: 12, color: accent, fontWeight: 600, letterSpacing: "0.04em" }}>{it.n}</div>
              <div style={{ fontSize: 17, fontWeight: 600, marginTop: 8, color: ink, fontFamily: "'Source Serif 4', serif", letterSpacing: "-0.005em" }}>{it.k}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: soft, marginTop: 8 }}>{it.d}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ═════════════════════════════════════════════════════════════════
// /data-owners — paper hero, owner-focused
// ═════════════════════════════════════════════════════════════════
function HiFiOwners({ wordmark = "A" }) {
  return (
    <div className="lf" style={{ width: "100%", background: HF.paper }}>
      <HFNav wordmark={wordmark} />

      {/* Hero · paper, single-pane, big italic "yours." */}
      <section style={{ background: HF.paper, padding: "120px 0 96px", position: "relative", overflow: "hidden" }}>
        <div className="serif" style={{
          position: "absolute", right: -60, bottom: -120, fontSize: 460, fontStyle: "italic", fontWeight: 400,
          color: HF.brass, opacity: 0.06, letterSpacing: "-0.04em", pointerEvents: "none", lineHeight: 1,
        }}>yours.</div>
        <Container style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "end" }}>
            <div>
              <Kicker color={HF.brassD}>FOR DATA OWNERS</Kicker>
              <h1 className="serif" style={{ fontSize: 96, lineHeight: 0.98, fontWeight: 500, letterSpacing: "-0.03em", margin: "20px 0 0", color: HF.ink }}>
                Sell what's<br/>
                already <em style={{ fontStyle: "italic", color: HF.brassD }}>yours</em>.
              </h1>
              <p style={{ marginTop: 28, fontSize: 20, lineHeight: 1.5, color: HF.inkSoft, maxWidth: "44ch" }}>
                Send us a description of your data. If it qualifies, we verify it, represent it, and transact on your behalf — while you keep ownership and final approval on every deal.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 40 }}>
                <a href="/sign-in" className="btn btn-pri" style={{ textDecoration: "none" }}>Start owner intake <span style={{ fontWeight: 400 }}>→</span></a>
                <a href="/sign-in" className="btn btn-ghost-paper" style={{ textDecoration: "none" }}>Book a 20-min call</a>
              </div>
            </div>
            {/* Editorial side card — a stylized "what we list" tag */}
            <div style={{ background: HF.surface, border: `1px solid ${HF.rule}`, padding: 28, boxShadow: "0 30px 60px -20px rgba(28,26,23,0.10)" }}>
              <Kicker color={HF.brassD} style={{ fontSize: 9 }}>OWNER PROFILE · INTAKE PREVIEW</Kicker>
              <div style={{ marginTop: 16, paddingTop: 16, borderTop: `1px solid ${HF.rule}` }}>
                {[
                  ["Firm",         "[Your firm]"],
                  ["Domain",       "Consumer & Retail · Logistics"],
                  ["Data shape",   "Card-spend panels · 24mo history"],
                  ["Refresh",      "Daily · MCC-tagged"],
                  ["Consent",      "First-party · documented"],
                ].map(([k, v], i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr", gap: 16, padding: "10px 0", borderBottom: i < 4 ? `1px solid ${HF.rule}` : "none" }}>
                    <div className="mono" style={{ fontSize: 10, color: HF.inkSoft, letterSpacing: "0.12em", textTransform: "uppercase" }}>{k}</div>
                    <div style={{ fontSize: 13, color: HF.ink, fontWeight: 500 }}>{v}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 16, padding: "10px 12px", background: "#EAF1E3", color: "#3F5B2E", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", fontWeight: 600 }}>✓ QUALIFIES · ESTIMATED VALUE</span>
                <span className="serif" style={{ fontSize: 18, fontWeight: 600 }}>$420K–$680K / yr</span>
              </div>
            </div>
          </div>
        </Container>
      </section>

      <HFTicker />

      {/* What you get */}
      <section style={{ background: HF.cream, padding: "120px 0" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, marginBottom: 56 }}>
            <div>
              <Kicker>WHAT YOU GET</Kicker>
              <h2 className="serif" style={{ fontSize: 56, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.025em", margin: "16px 0 0" }}>
                No sales team.<br/>
                No new tooling.<br/>
                <em style={{ fontStyle: "italic", color: HF.brassD }}>No new risk.</em>
              </h2>
            </div>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: HF.inkSoft, margin: 0, alignSelf: "end" }}>
              We do the operational and commercial work. You keep title, custody, and the final say on every deal — and pull a listing whenever you want.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: `1px solid ${HF.rule}`, borderBottom: `1px solid ${HF.rule}` }}>
            {[
              { k: "Keep ownership", d: "You retain title, custody, and final say. We never resell, sublicense, or aggregate your data with anyone else's without explicit consent." },
              { k: "We do the work", d: "Verification, schema documentation, buyer outreach, NDA, sample delivery, terms negotiation, payment — handled. You review and approve." },
              { k: "Audit trail per deal", d: "Every transaction generates a portable audit record. Defensible to regulators, auditors, and your board. Exportable on demand." },
            ].map((p, i) => (
              <div key={i} style={{ padding: "40px 32px", borderRight: i < 2 ? `1px solid ${HF.rule}` : "none", paddingLeft: i === 0 ? 0 : 32, paddingRight: i === 2 ? 0 : 32 }}>
                <div style={{ width: 32, height: 32, background: HF.ink, color: HF.brass, display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono', monospace", fontWeight: 600, fontSize: 13 }}>0{i+1}</div>
                <h3 className="serif" style={{ fontSize: 24, lineHeight: 1.15, fontWeight: 500, letterSpacing: "-0.015em", margin: "20px 0 12px" }}>{p.k}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: HF.inkSoft, margin: 0 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* Owner journey · 5 step */}
      <section style={{ background: HF.paper, padding: "120px 0" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, marginBottom: 48 }}>
            <div>
              <Kicker>HOW SELLING WORKS</Kicker>
              <h2 className="serif" style={{ fontSize: 56, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.025em", margin: "16px 0 0" }}>
                Five steps,<br/>
                <em style={{ fontStyle: "italic", color: HF.brassD }}>intake to royalty.</em>
              </h2>
            </div>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: HF.inkSoft, margin: 0, alignSelf: "end" }}>
              First step takes ~5 minutes. Verification takes a median of 6 days. Time to first signed deal averages 11 days. You can pause or pull a listing at any point.
            </p>
          </div>
          <div>
            {[
              { n: "01", k: "Describe your data",      d: "Five-minute intake. Sector, scale, refresh cadence, consent shape. Free-form is fine — we structure it.",                       t: "5 min" },
              { n: "02", k: "Verification",            d: "We inspect a sample, confirm consent and provenance at source, clear jurisdictional rights. ~6 days median.",                     t: "6 days" },
              { n: "03", k: "Listing",                 d: "Goes live to verified buyers in matching sectors. You set scope, scope-out competitors, set minimum deal size.",                  t: "Instant" },
              { n: "04", k: "Inquiry & negotiation",   d: "Verified buyers inquire; we represent you. Sample, NDA, terms — all on platform. You approve every deal.",                        t: "Variable" },
              { n: "05", k: "Delivery & royalty",      d: "Delivery on platform. Payment clears. If data has individual contributors, royalty distribution kicks off automatically.",        t: "Recurring" },
            ].map((s, i) => (
              <div key={s.n} style={{
                display: "grid", gridTemplateColumns: "80px 1.1fr 1.8fr 120px", gap: 32, alignItems: "baseline",
                padding: "32px 0", borderTop: `1px solid ${HF.rule}`,
                ...(i === 4 ? { borderBottom: `1px solid ${HF.rule}` } : {}),
              }}>
                <div className="mono" style={{ fontSize: 14, color: HF.brassD, fontWeight: 500, letterSpacing: "0.04em" }}>{s.n}</div>
                <h3 className="serif" style={{ fontSize: 26, lineHeight: 1.15, fontWeight: 500, letterSpacing: "-0.015em", margin: 0 }}>{s.k}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: HF.inkSoft, margin: 0 }}>{s.d}</p>
                <div className="mono" style={{ fontSize: 11, color: HF.inkSoft, letterSpacing: "0.14em", textTransform: "uppercase", textAlign: "right" }}>{s.t}</div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* What we list / what we won't · dark split */}
      <section style={{ background: HF.ink, color: HF.paper, padding: "120px 0" }}>
        <Container>
          <Kicker color={HF.brass}>QUALIFICATION</Kicker>
          <h2 className="serif" style={{ fontSize: 56, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.025em", margin: "16px 0 48px", color: HF.paper }}>
            What we list — and<br/>
            <em style={{ fontStyle: "italic", color: HF.brass }}>what we won't.</em>
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid rgba(242,239,232,0.18)" }}>
            <div style={{ padding: 40, borderRight: "1px solid rgba(242,239,232,0.18)" }}>
              <div className="kicker" style={{ color: "#A8C18D" }}>✓ WE LIST</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 16 }}>
                {[
                  "First-party data collected by the owner",
                  "Data with documented consent at source",
                  "De-identified, aggregated, or PII-cleared records",
                  "Synthetic data with source-distribution provenance",
                  "Telemetry, panel, and observational data with rights cleared",
                ].map((t, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "24px 1fr", gap: 14, fontSize: 15, lineHeight: 1.55, color: "rgba(242,239,232,0.85)", paddingBottom: 16, borderBottom: i < 4 ? "1px solid rgba(242,239,232,0.06)" : "none" }}>
                    <span style={{ color: "#A8C18D", fontWeight: 700, fontSize: 16 }}>✓</span><span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ padding: 40 }}>
              <div className="kicker" style={{ color: "#D89E92" }}>✗ WE WON'T LIST</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 16 }}>
                {[
                  "Scraped data — even from public sources",
                  "Third-party-resold data without original-owner consent",
                  "Data with ambiguous or undocumented consent chain",
                  "PII without explicit, granular individual consent",
                  "Data subject to active regulatory or legal dispute",
                ].map((t, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "24px 1fr", gap: 14, fontSize: 15, lineHeight: 1.55, color: "rgba(242,239,232,0.85)", paddingBottom: 16, borderBottom: i < 4 ? "1px solid rgba(242,239,232,0.06)" : "none" }}>
                    <span style={{ color: "#D89E92", fontWeight: 700, fontSize: 16 }}>✗</span><span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </Container>
      </section>

      <MiniTrust items={[
        { n: "03", k: "No scraped or resold data",         d: "First-party only. We reject roughly a third of intakes at this gate alone." },
        { n: "05", k: "Royalties to contributors",         d: "Where the underlying data has individual contributors, a documented share returns to them." },
        { n: "04", k: "Jurisdictional rights cleared",      d: "GDPR, CCPA, HIPAA, sector-specific. Cleared before listing — not after a buyer signs." },
      ]} />

      {/* FAQ */}
      <section style={{ background: HF.paper, padding: "120px 0" }}>
        <Container>
          <Kicker>OWNER FAQ</Kicker>
          <h2 className="serif" style={{ fontSize: 48, lineHeight: 1.05, fontWeight: 500, letterSpacing: "-0.022em", margin: "16px 0 56px" }}>
            Questions we get.
          </h2>
          <div>
            {[
              { q: "Who actually owns the data once it lists?",       a: "You do. Always. We license access for specific deals; we don't take ownership. Pull a listing any time." },
              { q: "Can I exclude specific buyers or sectors?",        a: "Yes — at intake. Block competitors by name, exclude entire sectors, or require pre-approval per deal." },
              { q: "What if my data fails verification?",              a: "We tell you why, in detail, and what would need to change to qualify. Roughly a third of intakes fail on first review; most pass on second." },
              { q: "Do you ever take possession of the raw data?",     a: "Only the sample needed for verification, and only under your existing NDA terms. Production delivery is direct to the buyer." },
              { q: "Do I have to commit to exclusivity?",              a: "No. The platform is non-exclusive by default. You can list elsewhere — we just won't list data already represented on competing platforms with overlapping buyers." },
              { q: "What happens to a contributor's data if they revoke consent?", a: "Their records are pulled from future deliveries and flagged in the buyer's audit trail. Already-delivered data is governed by the deal-specific terms." },
            ].map((f, i) => (
              <div key={i} style={{ padding: "32px 0", borderTop: `1px solid ${HF.rule}`, display: "grid", gridTemplateColumns: "1fr 1.8fr", gap: 64, ...(i === 5 ? { borderBottom: `1px solid ${HF.rule}` } : {}) }}>
                <h3 className="serif" style={{ fontSize: 22, lineHeight: 1.2, fontWeight: 500, letterSpacing: "-0.012em", margin: 0 }}>{f.q}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: HF.inkSoft, margin: 0 }}>{f.a}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* Owner CTA · single-direction, paper */}
      <section style={{ background: HF.cream, padding: "120px 0", position: "relative", overflow: "hidden" }}>
        <div className="serif" style={{ position: "absolute", right: -40, top: -60, fontSize: 320, fontStyle: "italic", fontWeight: 400, color: HF.brass, opacity: 0.05, letterSpacing: "-0.04em", pointerEvents: "none", lineHeight: 1 }}>list.</div>
        <Container style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
            <div>
              <Kicker color={HF.brassD}>READY?</Kicker>
              <h1 className="serif" style={{ fontSize: 76, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.028em", margin: "20px 0 24px" }}>
                Five minutes<br/>
                to find <em style={{ fontStyle: "italic", color: HF.brassD }}>out.</em>
              </h1>
              <p style={{ fontSize: 19, lineHeight: 1.5, color: HF.inkSoft, margin: 0, maxWidth: "44ch" }}>
                Describe your data. We come back the same day with whether it qualifies — and what it's likely worth.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <a href="/sign-in" className="btn btn-pri" style={{ justifyContent: "space-between", padding: "20px 24px", fontSize: 15, textDecoration: "none" }}>Start owner intake <span style={{ fontWeight: 400 }}>→</span></a>
              <a href="/sign-in" className="btn btn-ghost-paper" style={{ justifyContent: "space-between", padding: "20px 24px", fontSize: 15, textDecoration: "none" }}>Book a 20-min call <span style={{ fontWeight: 400, opacity: 0.5 }}>↗</span></a>
            </div>
          </div>
        </Container>
      </section>

      <HFFooter wordmark={wordmark} />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// /data-buyers — ink hero, buyer-focused
// ═════════════════════════════════════════════════════════════════
function HiFiBuyers({ wordmark = "A" }) {
  return (
    <div className="lf" style={{ width: "100%", background: HF.paper }}>
      <HFNav wordmark={wordmark} />

      {/* Hero · INK, single-pane, big italic "needed." */}
      <section style={{ background: HF.ink, color: HF.paper, padding: "120px 0 96px", position: "relative", overflow: "hidden" }}>
        <div className="serif" style={{
          position: "absolute", right: -60, bottom: -120, fontSize: 460, fontStyle: "italic", fontWeight: 400,
          color: HF.brass, opacity: 0.10, letterSpacing: "-0.04em", pointerEvents: "none", lineHeight: 1,
        }}>needed.</div>
        {/* Grid */}
        <div style={{
          position: "absolute", inset: 0, opacity: 0.04, pointerEvents: "none",
          backgroundImage: "linear-gradient(rgba(242,239,232,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(242,239,232,0.5) 1px, transparent 1px)",
          backgroundSize: "40px 40px",
        }}/>
        <Container style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "end" }}>
            <div>
              <Kicker color={HF.brass}>FOR DATA BUYERS</Kicker>
              <h1 className="serif" style={{ fontSize: 96, lineHeight: 0.98, fontWeight: 500, letterSpacing: "-0.03em", margin: "20px 0 0", color: HF.paper }}>
                Source data<br/>
                with <em style={{ fontStyle: "italic", color: HF.brass }}>receipts</em>.
              </h1>
              <p style={{ marginTop: 28, fontSize: 20, lineHeight: 1.5, color: "rgba(242,239,232,0.72)", maxWidth: "46ch" }}>
                Verified first-party datasets, sourced from consenting owners, with consent, provenance, and audit trail attached to every record. Paste a brief; we'll match in under a day.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 40 }}>
                <a href="/sign-in" className="btn btn-pri-accent" style={{ textDecoration: "none" }}>Start buyer intake <span style={{ fontWeight: 400 }}>→</span></a>
                <a href="/sign-in" className="btn btn-ghost-ink" style={{ textDecoration: "none" }}>See a sample match</a>
              </div>
            </div>
            {/* Editorial side card — sample match preview */}
            <div style={{ background: "rgba(242,239,232,0.04)", border: "1px solid rgba(242,239,232,0.22)", padding: 0, boxShadow: "0 30px 60px -20px rgba(0,0,0,0.45)" }}>
              <div style={{ padding: "14px 20px", borderBottom: "1px solid rgba(242,239,232,0.12)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="mono" style={{ fontSize: 9, color: HF.brass, letterSpacing: "0.16em", fontWeight: 600 }}>● SAMPLE MATCH · BUYER VIEW</span>
                <span className="mono" style={{ fontSize: 9, color: "rgba(242,239,232,0.4)", letterSpacing: "0.1em" }}>1 OF 42</span>
              </div>
              <div style={{ padding: 24 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <div className="mono" style={{ fontSize: 9.5, color: "rgba(242,239,232,0.5)", letterSpacing: "0.14em" }}>FIT SCORE</div>
                  <div className="serif" style={{ fontSize: 40, fontWeight: 500, color: HF.brass, letterSpacing: "-0.02em", lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>96</div>
                </div>
                <div style={{ fontSize: 17, fontWeight: 600, color: HF.paper, marginTop: 18, letterSpacing: "-0.005em" }}>Northeast Card Panel · Tier-A</div>
                <div style={{ fontSize: 12, color: "rgba(242,239,232,0.55)", marginTop: 4 }}>Bank-of-record syndicate · Verified</div>
                <div style={{ display: "flex", gap: 4, marginTop: 14, flexWrap: "wrap" }}>
                  {["NY-NJ", "24MO", "MCC-TAGGED", "DAILY"].map(c => (
                    <span key={c} className="mono" style={{ fontSize: 9, padding: "3px 7px", background: "rgba(242,239,232,0.08)", color: "rgba(242,239,232,0.8)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{c}</span>
                  ))}
                </div>
                <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid rgba(242,239,232,0.1)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                  <div>
                    <div className="mono" style={{ fontSize: 9, color: "rgba(242,239,232,0.4)", letterSpacing: "0.14em" }}>RECORDS / MO</div>
                    <div style={{ fontSize: 13, color: HF.paper, marginTop: 2, fontVariantNumeric: "tabular-nums" }}>840,000</div>
                  </div>
                  <div>
                    <div className="mono" style={{ fontSize: 9, color: "rgba(242,239,232,0.4)", letterSpacing: "0.14em" }}>AUDIT</div>
                    <div style={{ fontSize: 13, color: "#A8C18D", marginTop: 2 }}>✓ Defensible</div>
                  </div>
                </div>
              </div>
              <div style={{ borderTop: "1px solid rgba(242,239,232,0.1)", padding: "12px 20px", background: "rgba(242,239,232,0.02)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontSize: 11, color: "rgba(242,239,232,0.6)" }}>Sample available under NDA</span>
                <a href="/sign-in" style={{ color: HF.brass, fontSize: 12, fontWeight: 500, textDecoration: "none" }}>Request sample →</a>
              </div>
            </div>
          </div>
        </Container>
      </section>

      <HFTicker />

      {/* What you get */}
      <section style={{ background: HF.cream, padding: "120px 0" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, marginBottom: 56 }}>
            <div>
              <Kicker>WHAT YOU GET</Kicker>
              <h2 className="serif" style={{ fontSize: 56, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.025em", margin: "16px 0 0" }}>
                Better matches.<br/>
                Defensible terms.<br/>
                <em style={{ fontStyle: "italic", color: HF.brassD }}>Faster legal.</em>
              </h2>
            </div>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: HF.inkSoft, margin: 0, alignSelf: "end" }}>
              We turn unstructured briefs into machine-matchable specs, match against verified inventory, and standardize the documents your privacy officer expects to see.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: `1px solid ${HF.rule}`, borderBottom: `1px solid ${HF.rule}` }}>
            {[
              { k: "Verified provenance", d: "Every dataset carries a documented origin chain. Where it came from, how it was collected, what rights cleared, by which jurisdictions." },
              { k: "Structured matching", d: "Paste a brief in any form. We turn it into machine-matchable requirements; match against verified inventory; rank by fit, geography, freshness." },
              { k: "Defensible terms",     d: "Standardized Master Buyer Agreement. NDA + sample + final terms all on platform. Audit trail your privacy officer can hand to a regulator." },
            ].map((p, i) => (
              <div key={i} style={{ padding: "40px 32px", borderRight: i < 2 ? `1px solid ${HF.rule}` : "none", paddingLeft: i === 0 ? 0 : 32, paddingRight: i === 2 ? 0 : 32 }}>
                <div style={{ width: 32, height: 32, background: HF.ink, color: HF.brass, display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono', monospace", fontWeight: 600, fontSize: 13 }}>0{i+1}</div>
                <h3 className="serif" style={{ fontSize: 24, lineHeight: 1.15, fontWeight: 500, letterSpacing: "-0.015em", margin: "20px 0 12px" }}>{p.k}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: HF.inkSoft, margin: 0 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* Buyer journey · 5 step */}
      <section style={{ background: HF.paper, padding: "120px 0" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, marginBottom: 48 }}>
            <div>
              <Kicker>HOW BUYING WORKS</Kicker>
              <h2 className="serif" style={{ fontSize: 56, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.025em", margin: "16px 0 0" }}>
                Five steps,<br/>
                <em style={{ fontStyle: "italic", color: HF.brassD }}>brief to delivery.</em>
              </h2>
            </div>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: HF.inkSoft, margin: 0, alignSelf: "end" }}>
              Intake takes 5–10 minutes. Paste briefs, emails, memos, or analyst worksheets — we structure them. First matches typically arrive within the same business day.
            </p>
          </div>
          <div>
            {[
              { n: "01", k: "Brief",     d: "Paste any number of briefs, emails, memos, or rough notes. We structure them into matchable requirements you can review and edit.",          t: "5–10 min" },
              { n: "02", k: "Match",     d: "Fit-scored against verified inventory in real time. Filter by sector, geography, freshness, refresh cadence, ethical constraints.",            t: "Same day" },
              { n: "03", k: "Sample",    d: "Request a sample under NDA. We broker delivery, route through your privacy officer for review, surface schema gaps before you commit.",        t: "1–3 days" },
              { n: "04", k: "Terms",     d: "Master Buyer Agreement + per-deal scope. Standardized so your legal team has seen the language before — countersign or send to counsel.",      t: "Async" },
              { n: "05", k: "Delivery",  d: "Production data delivered direct from owner. Audit trail generated per record. Refresh cadence runs on schedule until terms expire.",          t: "Ongoing" },
            ].map((s, i) => (
              <div key={s.n} style={{
                display: "grid", gridTemplateColumns: "80px 1.1fr 1.8fr 120px", gap: 32, alignItems: "baseline",
                padding: "32px 0", borderTop: `1px solid ${HF.rule}`,
                ...(i === 4 ? { borderBottom: `1px solid ${HF.rule}` } : {}),
              }}>
                <div className="mono" style={{ fontSize: 14, color: HF.brassD, fontWeight: 500, letterSpacing: "0.04em" }}>{s.n}</div>
                <h3 className="serif" style={{ fontSize: 26, lineHeight: 1.15, fontWeight: 500, letterSpacing: "-0.015em", margin: 0 }}>{s.k}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: HF.inkSoft, margin: 0 }}>{s.d}</p>
                <div className="mono" style={{ fontSize: 11, color: HF.inkSoft, letterSpacing: "0.14em", textTransform: "uppercase", textAlign: "right" }}>{s.t}</div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* Sample inventory · dark grid */}
      <section style={{ background: HF.ink, color: HF.paper, padding: "120px 0", position: "relative", overflow: "hidden" }}>
        <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: "1.2fr 1fr", gap: 64, alignItems: "baseline", marginBottom: 48 }}>
            <div>
              <Kicker color={HF.brass}>SAMPLE INVENTORY</Kicker>
              <h2 className="serif" style={{ fontSize: 52, lineHeight: 1.04, fontWeight: 500, letterSpacing: "-0.022em", margin: "16px 0 0", color: HF.paper }}>
                A taste of what<br/>
                <em style={{ fontStyle: "italic", color: HF.brass }}>verified buyers see.</em>
              </h2>
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "rgba(242,239,232,0.7)", margin: 0 }}>
              The full catalog is only visible after buyer verification. These are anonymized examples to show what a dataset card looks like in the buyer dashboard.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {[
              { fit: 96, name: "Northeast Card Panel · Tier-A",     seller: "Bank-of-record syndicate",   chips: ["NY-NJ","24MO","DAILY","MCC-TAGGED"], rec: "840K / mo" },
              { fit: 91, name: "DeliveryAgg Basket Index",          seller: "Aggregator coalition",       chips: ["TIER-2","9MO","HOURLY","ANON-OK"],    rec: "540K / mo" },
              { fit: 88, name: "Off-Mall Footfall · Convenience",    seller: "Mobility platform",          chips: ["OFF-MALL","18MO","PER-STORE"],         rec: "310K / mo" },
            ].map((d, i) => (
              <div key={i} style={{ background: "rgba(242,239,232,0.04)", border: "1px solid rgba(242,239,232,0.18)" }}>
                <div style={{ padding: 24 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <span className="mono" style={{ fontSize: 9.5, color: "rgba(242,239,232,0.5)", letterSpacing: "0.14em" }}>FIT</span>
                    <span className="serif" style={{ fontSize: 32, fontWeight: 500, color: HF.brass, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums", lineHeight: 1 }}>{d.fit}</span>
                  </div>
                  <div style={{ fontSize: 16, fontWeight: 600, color: HF.paper, marginTop: 22 }}>{d.name}</div>
                  <div style={{ fontSize: 12, color: "rgba(242,239,232,0.55)", marginTop: 4 }}>{d.seller} · Verified</div>
                  <div style={{ display: "flex", gap: 4, marginTop: 14, flexWrap: "wrap" }}>
                    {d.chips.map(c => (
                      <span key={c} className="mono" style={{ fontSize: 9, padding: "3px 7px", background: "rgba(242,239,232,0.08)", color: "rgba(242,239,232,0.8)", letterSpacing: "0.08em" }}>{c}</span>
                    ))}
                  </div>
                </div>
                <div style={{ borderTop: "1px solid rgba(242,239,232,0.08)", padding: "12px 24px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="mono" style={{ fontSize: 10, color: "rgba(242,239,232,0.5)", letterSpacing: "0.1em" }}>{d.rec}</span>
                  <a href="/sign-in" style={{ color: HF.brass, fontSize: 12, fontWeight: 500, textDecoration: "none" }}>Sample →</a>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      <MiniTrust dark items={[
        { n: "02", k: "Provenance documented",         d: "Every dataset ships with a verifiable origin chain — collection method, jurisdictions, processing." },
        { n: "06", k: "Sample-verified before listing", d: "Our team inspects content, schema, and consent artifacts on every dataset before it goes live to buyers." },
        { n: "07", k: "Buyer-accessible audit trail",   d: "Every transaction generates a portable audit record. Defensible to your privacy officer and regulators." },
      ]} />

      {/* FAQ */}
      <section style={{ background: HF.paper, padding: "120px 0" }}>
        <Container>
          <Kicker>BUYER FAQ</Kicker>
          <h2 className="serif" style={{ fontSize: 48, lineHeight: 1.05, fontWeight: 500, letterSpacing: "-0.022em", margin: "16px 0 56px" }}>
            Questions we get.
          </h2>
          <div>
            {[
              { q: "How do I know provenance claims are real?",              a: "Every dataset is sample-verified by our team — we inspect content and consent artifacts before listing. The audit record is exportable to your privacy officer." },
              { q: "Can I see the catalog without onboarding?",              a: "No. We don't run a public catalog — sellers are confidential until both sides sign deal-specific NDAs. Onboarding verifies you as a buyer first." },
              { q: "What's the legal exposure if a dataset is later contested?", a: "The platform-issued audit trail documents what was cleared, when, and by which jurisdiction. It's designed to be defensible — though we never claim it eliminates exposure entirely." },
              { q: "Do you support custom data requests?",                    a: "Yes. If nothing in the catalog fits, our brokers can put your structured brief in front of qualified owners who aren't currently listing." },
              { q: "How do we pay?",                                         a: "Per deal, invoiced through the platform, against standardized payment terms. Wire or ACH. Multi-tranche schedules supported for large deals." },
              { q: "Can I share access with my analyst team?",                a: "Yes — verified buyer firms get seat-based access. Each user inherits the firm's verification status and audit trail." },
            ].map((f, i) => (
              <div key={i} style={{ padding: "32px 0", borderTop: `1px solid ${HF.rule}`, display: "grid", gridTemplateColumns: "1fr 1.8fr", gap: 64, ...(i === 5 ? { borderBottom: `1px solid ${HF.rule}` } : {}) }}>
                <h3 className="serif" style={{ fontSize: 22, lineHeight: 1.2, fontWeight: 500, letterSpacing: "-0.012em", margin: 0 }}>{f.q}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: HF.inkSoft, margin: 0 }}>{f.a}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* Buyer CTA · ink, single-direction */}
      <section style={{ background: HF.ink, color: HF.paper, padding: "120px 0", position: "relative", overflow: "hidden" }}>
        <div className="serif" style={{ position: "absolute", right: -40, top: -60, fontSize: 320, fontStyle: "italic", fontWeight: 400, color: HF.brass, opacity: 0.10, letterSpacing: "-0.04em", pointerEvents: "none", lineHeight: 1 }}>match.</div>
        <Container style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
            <div>
              <Kicker color={HF.brass}>READY?</Kicker>
              <h1 className="serif" style={{ fontSize: 76, lineHeight: 1.0, fontWeight: 500, letterSpacing: "-0.028em", margin: "20px 0 24px", color: HF.paper }}>
                Paste a brief.<br/>
                We'll <em style={{ fontStyle: "italic", color: HF.brass }}>match.</em>
              </h1>
              <p style={{ fontSize: 19, lineHeight: 1.5, color: "rgba(242,239,232,0.7)", margin: 0, maxWidth: "44ch" }}>
                Bring whatever you have — emails, memos, rough notes. We structure, match, and surface fit-scored options the same day.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <a href="/sign-in" className="btn btn-pri-accent" style={{ justifyContent: "space-between", padding: "20px 24px", fontSize: 15, textDecoration: "none" }}>Start buyer intake <span style={{ fontWeight: 400 }}>→</span></a>
              <a href="/sign-in" className="btn btn-ghost-ink" style={{ justifyContent: "space-between", padding: "20px 24px", fontSize: 15, textDecoration: "none" }}>See a sample match <span style={{ fontWeight: 400, opacity: 0.5 }}>↗</span></a>
            </div>
          </div>
        </Container>
      </section>

      <HFFooter wordmark={wordmark} />
    </div>
  );
}