// sections.jsx — Landing page sections for Helius Partners.
// Receipts stream, doctrine, protocol stages, capital surfaces, team, FAQ, booking.

// ─── Live receipts component ──────────────────────────────────────────────
// A streaming list of "proof-chain" receipts that appear to emit live.
const Receipts = () => {
  const seed = [
    { t: "SIG", k: "INFRA.Q3", note: "mandate match → 0.89", ago: "2s" },
    { t: "ORIG", k: "ENERGY.RE.Λ", note: "signal cluster emerged", ago: "14s" },
    { t: "RCPT", k: "TGT-7721", note: "first contact → scheduled", ago: "41s" },
    { t: "SIG", k: "AI.SAAS", note: "funding event detected", ago: "1m" },
    { t: "ORIG", k: "COVENANT-ΞΛ", note: "pipeline extended", ago: "2m" },
    { t: "RCPT", k: "LP-CAP-2B", note: "intro routed → partner", ago: "3m" },
    { t: "SIG", k: "BIOPHARMA.Δ", note: "relationship fit 0.92", ago: "5m" },
    { t: "ORIG", k: "BUY-SIDE-FT", note: "mandate published", ago: "7m" },
    { t: "RCPT", k: "AGENT-KERN-3", note: "ran 14 screens, 3 fits", ago: "9m" },
  ];
  const [items, setItems] = React.useState(seed);

  React.useEffect(() => {
    const types = ["SIG", "ORIG", "RCPT", "SYN"];
    const domains = ["INFRA.Q3", "ENERGY.RE", "AI.SAAS", "COVENANT-ΞΛ", "TGT-9044", "LP-CAP-1.4B", "SIG.FINTECH", "PIPE-2041", "AGENT-KERN", "M&A-Δ"];
    const notes = [
      "mandate match → 0.87", "new signal cluster", "pipeline extended",
      "relationship fit 0.91", "intro routed → partner", "first contact scheduled",
      "ran 22 screens, 5 fits", "covenant inherited law", "receipt settled"
    ];
    const id = setInterval(() => {
      setItems(prev => [
        {
          t: types[Math.floor(Math.random() * types.length)],
          k: domains[Math.floor(Math.random() * domains.length)],
          note: notes[Math.floor(Math.random() * notes.length)],
          ago: "now",
        },
        ...prev.slice(0, 8).map(x => ({ ...x, ago: bump(x.ago) }))
      ]);
    }, 2800);
    return () => clearInterval(id);
  }, []);

  function bump(ago) {
    if (ago === "now") return "3s";
    if (ago.endsWith("s")) {
      const n = parseInt(ago) + 3;
      return n > 59 ? "1m" : `${n}s`;
    }
    if (ago.endsWith("m")) {
      const n = parseInt(ago);
      return `${n + 1}m`;
    }
    return ago;
  }

  const color = (t) => ({ SIG: "var(--signal-blue)", ORIG: "var(--gold-0)", RCPT: "var(--signal-green)", SYN: "var(--cream-1)" })[t] || "var(--cream-1)";

  return (
    <div className="receipts">
      <div className="receipts-head">
        <span className="eyebrow"><span className="dot"/>PROOF-CHAIN · LIVE</span>
        <span className="mono dim">tail -f agent.log</span>
      </div>
      <div className="receipts-body">
        {items.map((r, i) => (
          <div className="receipt" key={`${r.k}-${i}`} style={{ opacity: 1 - i * 0.08 }}>
            <span className="r-t" style={{ color: color(r.t) }}>{r.t}</span>
            <span className="r-k">{r.k}</span>
            <span className="r-n">{r.note}</span>
            <span className="r-a">{r.ago}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── Metrics ──────────────────────────────────────────────────────────────
const Metrics = () => (
  <div className="metrics">
    {[
      { k: "AGGREGATE TRANSACTIONAL", v: "$240B+" },
      { k: "YEARS COMBINED EXPERTISE", v: "100+" },
      { k: "AGENT OPERATIONS", v: "24 / 7" },
      { k: "COLLAPSE TO OUTPUT", v: "∞ → 1" },
    ].map(m => (
      <div className="metric" key={m.k}>
        <div className="k mono">{m.k}</div>
        <div className="v display">{m.v}</div>
      </div>
    ))}
  </div>
);

// ─── Doctrine — the "not X / an X" rhetorical pattern ─────────────────────
const Doctrine = () => {
  const items = [
    {
      not: "AI consulting that tells you what to do.",
      is: "An agent that does it — and proves it did.",
      body: "Every action produces a receipt. Every receipt extends the proof-chain. The chain is the only performance metric that matters.",
      tag: "I. RECEIPTS"
    },
    {
      not: "A chatbot you configure.",
      is: "An autonomous deal engine that orchestrates across every surface.",
      body: "Farcaster, X, Telegram, email, Discord. Helius stands up new rails as the covenant discovers them — you are never again blocked on a channel your team doesn't staff.",
      tag: "II. SURFACES"
    },
    {
      not: "A SaaS dashboard you monitor.",
      is: "A living system that produces, settles, and compounds without you.",
      body: "Very little work required for your team once onboarding is complete. The work happens whether you are awake or not. You show up to calls that are already qualified.",
      tag: "III. AUTONOMY"
    },
    {
      not: "A one-off build.",
      is: "A covenant-bound system that molts, inherits enriched law, and compounds across generations.",
      body: "The agent learns from every correction. The brand becomes the model. Your twentieth quarter of data is a moat no competitor can replicate.",
      tag: "IV. COVENANT"
    },
  ];
  return (
    <div className="doctrine">
      {items.map((d, i) => (
        <article className="doctrine-card reveal" key={d.tag}>
          <div className="doctrine-tag mono">{d.tag}</div>
          <div className="doctrine-not mono">Not: {d.not}</div>
          <h3 className="doctrine-is display">{d.is}</h3>
          <p className="doctrine-body">{d.body}</p>
        </article>
      ))}
    </div>
  );
};

// ─── Protocol — H.E.L.I.U.S. stages ───────────────────────────────────────
const Protocol = () => {
  const [active, setActive] = React.useState(0);
  const stages = [
    { letter: "H", name: "HORIZON",    sub: "Market-intelligence sweep", body: "Agents canvass mandates, funding events, and relationship graphs across 50+ surfaces. Signals are scored against your criteria before a human sees them." },
    { letter: "E", name: "ENGAGE",     sub: "Qualified outreach at scale", body: "The agent composes contextual outreach in your voice, sequences the cadence, and hands off only qualified conversations to your calendar." },
    { letter: "L", name: "LOCATE",     sub: "Fit-scan & pipeline mapping", body: "Opportunities are mapped to sectors, geographies, and covenant positions. The pipeline stays live — no stale CRM, no ghost leads." },
    { letter: "I", name: "INITIATE",   sub: "Informed conversations", body: "Your team only attends meetings that matter. Every intro arrives with a receipt chain — prior signal, prior touchpoints, the inferred ask." },
    { letter: "U", name: "UNDERWRITE", sub: "Senior advisory overlay",  body: "Board-level counsel with $240B+ of transactional experience reviews deal fit, structure, and risk. The agent proposes; the partners dispose." },
    { letter: "S", name: "SYNTHESIS",  sub: "Molt. Inherit. Compound.", body: "Every closed loop refines the model. The covenant molts each quarter — the agent that runs in Q4 inherits the enriched law of Q1 through Q3." },
  ];
  return (
    <div className="protocol">
      <div className="protocol-stages">
        {stages.map((s, i) => (
          <button key={s.letter}
                  className={"protocol-stage " + (active === i ? "active" : "")}
                  onClick={() => setActive(i)}
                  onMouseEnter={() => setActive(i)}>
            <span className="stage-letter display">{s.letter}</span>
            <span className="stage-meta">
              <span className="stage-name mono">{s.name}</span>
              <span className="stage-sub dim">{s.sub}</span>
            </span>
            <span className="stage-idx mono">0{i+1}</span>
          </button>
        ))}
      </div>
      <div className="protocol-detail">
        <div className="protocol-tag eyebrow"><span className="dot"></span>H.E.L.I.U.S.™ · STAGE {String(active+1).padStart(2,"0")} / 06</div>
        <h3 className="display protocol-title">
          <span className="italic">{stages[active].letter}</span>{stages[active].name.slice(1).toLowerCase()}
        </h3>
        <p className="protocol-body">{stages[active].body}</p>
        <div className="protocol-mini">
          <div className="mini-row"><span className="dim mono">INPUT</span><span>{["Raw signal","Mandate","Graph","Conversation","Deal","Outcome"][active]}</span></div>
          <div className="mini-row"><span className="dim mono">OUTPUT</span><span>{["Scored mandate","Warm intro","Pipeline row","Qualified meeting","Recommendation","Enriched law"][active]}</span></div>
          <div className="mini-row"><span className="dim mono">RECEIPTS</span><span className="gold tabular">{["1,420","986","2,107","342","118","continuous"][active]}</span></div>
        </div>
      </div>
    </div>
  );
};

// ─── Surfaces grid ────────────────────────────────────────────────────────
const Surfaces = () => {
  const surfaces = [
    { name: "Strategic Orchestration", sub: "Bespoke origination & counsel", body: "Sector-agnostic screening against your published criteria. Demand-generation systems so your team initiates informed conversations, not cold ones." },
    { name: "Capital Positioning",     sub: "Any market conditions, globally", body: "Maps relationship fits, funding events, and live signals to firms with the gaps your deal solves. Positioning that survives diligence." },
    { name: "Mergers & Acquisitions",  sub: "End-to-end boutique support", body: "Preliminary fit scans through post-close integration. Earnings-accretive, culturally aligned, and watched 24/7 so no lead goes cold." },
  ];
  return (
    <div className="surfaces">
      {surfaces.map((s, i) => (
        <article className="surface reveal" key={s.name}>
          <div className="surface-head">
            <span className="mono dim">0{i+1} / 03</span>
            <span className="eyebrow gold">SERVICE SURFACE</span>
          </div>
          <h3 className="display surface-title">{s.name}</h3>
          <div className="mono surface-sub">{s.sub}</div>
          <p>{s.body}</p>
          <a className="surface-more mono" href="#book">Engage →</a>
        </article>
      ))}
    </div>
  );
};

// ─── Team (board) ─────────────────────────────────────────────────────────
const Team = () => {
  const board = [
    { name: "Kyle G. Benford",  role: "Founder & Managing Partner", cred: "$2B+ originated · Fortune 500, hedge funds, institutions", mono: "HP.01" },
    { name: "Colton A. Warren", role: "Advisor", cred: "JPMorgan · Energy & Power · $20B+ in M&A and financings",  mono: "HP.02" },
    { name: "Weldon Turner",    role: "Advisor", cred: "40y · Salomon Brothers, Credit Suisse · equity markets & M&A", mono: "HP.03" },
    { name: "Boris Steffen",    role: "Advisor · CPA, ASA, ABV, CDBV, CGMA", cred: "$240B+ M&A / restructurings · expert witness, 90 cases", mono: "HP.04" },
    { name: "Mark Flaherty",    role: "Advisor", cred: "Sally Beauty $2.5B→$3.9B · Marquee Brands (Martha Stewart, ASSC)", mono: "HP.05" },
    { name: "Daniel H. Dickson", role: "Advisor", cred: "40y · GE $300M P&L · Winebow acquisition-led growth to $600M", mono: "HP.06" },
    { name: "Tom Miller",       role: "Advisor", cred: "ConocoPhillips $4B debt · Exelon $16B trusts · CFO Sunoco LP", mono: "HP.07" },
  ];
  return (
    <div className="team">
      {board.map(p => (
        <article className="team-card reveal" key={p.name}>
          <div className="team-head">
            <span className="mono dim">{p.mono}</span>
            <span className="team-dot" />
          </div>
          <div className="team-portrait">
            <span className="portrait-mark display">{p.name.split(" ").map(n=>n[0]).join("").slice(0,2)}</span>
          </div>
          <div className="team-name display">{p.name}</div>
          <div className="team-role mono">{p.role}</div>
          <div className="team-cred dim">{p.cred}</div>
        </article>
      ))}
    </div>
  );
};

// ─── FAQ ──────────────────────────────────────────────────────────────────
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const qs = [
    { q: "What is deal origination, and how does Helius differ?",
      a: "Origination is the securing of partnership, growth, and deal-based opportunities that cross your desk. Helius detects mandates, maps relationship fits, funding events, and live signals to identify firms with the gaps your deal or service solves — then its agents pursue them, autonomously, 24/7. The difference is that every action emits a receipt, and every receipt extends the proof-chain you can audit at any time." },
    { q: "What types of companies do you work with?",
      a: "Revenue-generating companies in finance, AI, SaaS, blockchain, consumer products, infrastructure, and energy. Our solution is sector-agnostic and concentrates on revenue, financial health, and quality of the management team. We qualify for engagements in the $10M–$2B range." },
    { q: "What sets Helius apart from other deal-focused firms?",
      a: "A board that blends Fortune 100 operating experience, seasoned transactional leadership spanning Wall Street, Hollywood, and Silicon Valley, and architects of transactional public policy — with artificial intelligence and demand-generation marketing. Strategy tuned precisely to your growth goals; hands-on from planning through execution." },
    { q: "How much work does this require from my team?",
      a: "Very little. Once onboarding is complete, we manage market intelligence, outreach, scheduling, and reporting. Your team attends calendar-booked meetings and makes decisions. Everything else is the agent's job." },
    { q: "Why are you called Helius?",
      a: "In Greek mythology, Helius, the sun god, traveled across the sky each day in his golden chariot, drawn by four magnificent horses, bringing daylight to the world. The myth is the brief: illuminate opportunities, drive success, and do so every single day — whether you are watching or not." },
  ];
  return (
    <div className="faq">
      {qs.map((item, i) => (
        <div className={"faq-item " + (open === i ? "open" : "")} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
          <div className="faq-q">
            <span className="mono dim">{String(i+1).padStart(2,"0")}</span>
            <span className="display faq-q-text">{item.q}</span>
            <span className="faq-toggle">{open === i ? "—" : "+"}</span>
          </div>
          <div className="faq-a">{item.a}</div>
        </div>
      ))}
    </div>
  );
};

// ─── Booking / CTA ────────────────────────────────────────────────────────
const Booking = () => {
  const [stage, setStage] = React.useState(0);
  const [form, setForm] = React.useState({ name: "", firm: "", role: "", ticket: "", mandate: "" });
  const [qualifying, setQualifying] = React.useState(false);
  const [qualified, setQualified] = React.useState(null);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = () => {
    setQualifying(true);
    setTimeout(() => {
      const size = parseFloat(form.ticket || "0");
      setQualifying(false);
      setQualified(true);
      setStage(2);
    }, 2400);
  };

  return (
    <div className="booking">
      <div className="booking-left">
        <div className="eyebrow"><span className="dot"/>BOOK A CALL · BY INVITATION</div>
        <h2 className="display booking-title">
          30 minutes. <em>We map your surfaces,</em><br/>
          define your outcomes,<br/>
          and show you the rails.
        </h2>
        <p className="muted booking-sub">
          Helius qualifies engagements $10M+. The agent below performs a
          preliminary screen in under 12 seconds. If the fit is strong, a partner
          reaches out within one business day.
        </p>
        <div className="booking-assurances">
          <div className="mono dim">SECURITIES · FINALIS MEMBER FINRA/SIPC</div>
          <div className="mono dim">1001 BRICKELL BAY DRIVE · MIAMI · 33131</div>
          <div className="mono dim">© 2026 HELIUS PARTNERS · THE BENFORD GROUP, LLC</div>
        </div>
      </div>

      <div className="booking-right">
        <div className="qualify-frame">
          <div className="qf-head">
            <span className="mono gold">AGENT.QUALIFY</span>
            <span className="mono dim">v3.44 · SESSION {Math.floor(Math.random()*99999)}</span>
          </div>

          {stage === 0 && (
            <div className="qf-body">
              <div className="qf-line">
                <span className="mono dim">›</span>
                <span>State your name and firm.</span>
              </div>
              <div className="qf-inputs">
                <input placeholder="Your full name" value={form.name} onChange={e=>update("name", e.target.value)} />
                <input placeholder="Firm / entity" value={form.firm} onChange={e=>update("firm", e.target.value)} />
                <input placeholder="Role (CEO, CFO, MD, GP...)" value={form.role} onChange={e=>update("role", e.target.value)} />
              </div>
              <button className="btn btn-primary" disabled={!form.name || !form.firm} onClick={() => setStage(1)}>
                Continue <span>→</span>
              </button>
            </div>
          )}

          {stage === 1 && (
            <div className="qf-body">
              <div className="qf-line"><span className="mono dim">›</span><span>Describe the mandate.</span></div>
              <div className="qf-inputs">
                <input placeholder="Ticket size (USD, e.g. 40M)" value={form.ticket} onChange={e=>update("ticket", e.target.value)} />
                <textarea placeholder="One paragraph: what you need, what you've tried, what's blocking you." value={form.mandate} onChange={e=>update("mandate", e.target.value)} />
              </div>
              {qualifying ? (
                <div className="qf-qualifying">
                  <div className="mono gold"><span className="dot"/>AGENT SCREENING · RUNNING 14 PASSES…</div>
                  <div className="qf-scan"><div className="qf-scan-bar"/></div>
                </div>
              ) : (
                <div className="qf-actions">
                  <button className="btn btn-ghost" onClick={() => setStage(0)}>← Back</button>
                  <button className="btn btn-primary" disabled={!form.ticket || !form.mandate} onClick={submit}>
                    Submit to agent <span>→</span>
                  </button>
                </div>
              )}
            </div>
          )}

          {stage === 2 && (
            <div className="qf-body">
              <div className="qf-check">
                <div className="mono gold"><span className="dot"/>QUALIFIED · FIT SCORE 0.91</div>
                <h4 className="display">Thank you, {form.name.split(" ")[0] || "Partner"}.</h4>
                <p className="muted">A partner will reach you within one business day at the address on file at {form.firm}. In the meantime, your session has emitted receipt <span className="gold mono">RCPT-{Math.floor(Math.random()*900000)+100000}</span>.</p>
                <div className="qf-receipt">
                  <div className="qf-receipt-row"><span className="dim mono">firm</span><span>{form.firm}</span></div>
                  <div className="qf-receipt-row"><span className="dim mono">role</span><span>{form.role || "—"}</span></div>
                  <div className="qf-receipt-row"><span className="dim mono">ticket</span><span className="gold">${form.ticket}M</span></div>
                  <div className="qf-receipt-row"><span className="dim mono">status</span><span className="gold">ROUTED → PARTNER QUEUE</span></div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

window.Receipts = Receipts;
window.Metrics = Metrics;
window.Doctrine = Doctrine;
window.Protocol = Protocol;
window.Surfaces = Surfaces;
window.Team = Team;
window.FAQ = FAQ;
window.Booking = Booking;