// passu-v2.jsx — Editorial / Rogo-inspired layout for Passu.
// Reuses icons.jsx (I.*). Below-the-hero sections redesigned:
// pillars trio → Stripe-style capability carousel → security →
// reviews conveyor → CTA → footer.

function V2Logo() {
  const top = (e) => {e.preventDefault();window.scrollTo({ top: 0, behavior: 'smooth' });};
  return (
    <a href="#top" onClick={top} className="nav-brand" aria-label="Passu, back to top">
      <img src="assets/logo.png" alt="Passu" className="logo-wordmark" />
    </a>);

}

/* Opens the contact modal from any CTA on the page. `intent` tags what
   the visitor asked for ('demo' default, or 'newsletter') so the
   submission records which button they clicked. */
function openContact(e, intent) {
  if (e) e.preventDefault();
  window.dispatchEvent(new CustomEvent('passu:contact', { detail: { intent: intent || 'demo' } }));
}

/* Contact modal, modeled on Rogo's demo-request dialog: white form pane
   left (logo, serif heading, filled inputs), photo pane right (hero
   frame + navy wash). All four fields required. */
function V2ContactModal() {
  const [open, setOpen] = React.useState(false);
  const [done, setDone] = React.useState(false);
  const [intent, setIntent] = React.useState('demo');
  React.useEffect(() => {
    const show = (e) => {setDone(false);setIntent(e.detail && e.detail.intent || 'demo');setOpen(true);};
    const esc = (e) => {if (e.key === 'Escape') setOpen(false);};
    window.addEventListener('passu:contact', show);
    window.addEventListener('keydown', esc);
    return () => {
      window.removeEventListener('passu:contact', show);
      window.removeEventListener('keydown', esc);
    };
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => {document.body.style.overflow = '';};
  }, [open]);
  if (!open) return null;
  const submit = (e) => {
    e.preventDefault();
    /* TODO: wire to Loops / backend before production — submissions
       currently go nowhere. Include the `intent` field so the
       results sheet shows demo request vs newsletter subscription. */
    setDone(true);
  };
  const isNews = intent === 'newsletter';
  const isQ = intent === 'question';
  return (
    <div className="cm-overlay" onMouseDown={(e) => {if (e.target === e.currentTarget) setOpen(false);}}>
      <div className="cm-card" role="dialog" aria-modal="true" aria-label="Request early access">
        <div className="cm-form-pane">
          <img src="assets/logo.png" alt="Passu" className="cm-logo" />
          {done ?
          <div className="cm-done">
              <h3>{isNews ? <>You&rsquo;re subscribed.</> : isQ ? <>Thank you for your inquiry.</> : <>You&rsquo;re on the list.</>}</h3>
              <p>{isNews ? 'Thank you for subscribing to the newsletter.' : isQ ? <>We&rsquo;ll get back to you shortly.</> : <>Thanks. We&rsquo;ll reach out soon to schedule a walkthrough or demo.</>}</p>
              <button className="btn btn-primary btn-lg cm-submit" onClick={() => setOpen(false)}>Done</button>
            </div> :
          <>
              <h3>{isNews ? 'Subscribe to the newsletter.' : isQ ? 'Email us.' : 'See Passu in action.'}</h3>
              <p className="cm-sub">{isNews ? 'Tell us where to send it.' : isQ ? <>Send us a question and we&rsquo;ll get back to you.</> : <>Tell us where to reach you and we&rsquo;ll be in touch about early access.</>}</p>
              <form className="cm-form" onSubmit={submit}>
                <div className="cm-row">
                  <input type="text" name="firstName" placeholder="First name*" required aria-label="First name" />
                  <input type="text" name="lastName" placeholder="Last name*" required aria-label="Last name" />
                </div>
                <input type="text" name="firm" placeholder="Firm*" required aria-label="Firm" />
                <input type="email" name="email" placeholder="Work email*" required aria-label="Work email" />
                {isQ && <textarea name="message" placeholder="Your question*" required aria-label="Your question" rows={4} />}
                <input type="hidden" name="intent" value={intent} />
                <button type="submit" className="btn btn-primary btn-lg cm-submit">{isNews ? 'Subscribe' : isQ ? 'Send' : 'Request Early Access'}</button>
              </form>
            </>}
        </div>
        <div className="cm-photo" aria-hidden="true"></div>
        <button className="cm-close" onClick={() => setOpen(false)} aria-label="Close">&times;</button>
      </div>
    </div>);

}

function V2Announce() {
  return (
    <div className="announce-bar">
      <div className="announce-inner">
        <span>Now in private beta for buy-side credit teams.</span>
        <a href="#" onClick={openContact} className="announce-link">Join the Waitlist</a>
      </div>
    </div>);

}

function V2Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => {
      const hero = document.getElementById('top');
      if (!hero) return;
      const navEl = document.querySelector('.nav-wrap');
      const navH = navEl ? navEl.offsetHeight : 68;
      // Turn white only once the hero has completely scrolled past the nav bar
      setScrolled(hero.getBoundingClientRect().bottom <= navH);
    };
    fn();
    window.addEventListener('scroll', fn, { passive: true });
    window.addEventListener('resize', fn);
    return () => {
      window.removeEventListener('scroll', fn);
      window.removeEventListener('resize', fn);
    };
  }, []);
  return (
    <div className={"nav-wrap " + (scrolled ? "scrolled" : "")}>
      <div className="container nav" style={{ fontSize: "12px", height: "64px" }}>
        <V2Logo />
        <nav className="nav-links" style={{ fontSize: "12px" }} aria-hidden="true"></nav>
        <div className="nav-right" style={{ gap: "4px" }}>
          {/* TODO: point Log in at the Passu app login URL (Kelly to provide) */}
          <a href="#" className="btn btn-ghost" style={{ width: "73px", gap: "8px" }}>Log in</a>
          <a href="#" onClick={openContact} className="btn btn-primary" style={{ height: "30px" }}>Get Started</a>
        </div>
      </div>
    </div>);

}

function V2Hero() {
  // Hero video/poster can be overridden per-page via body data attributes
  // (used for comparing candidate videos); defaults to the daytime skyscrapers.
  const heroVideo = document.body.dataset.heroVideo || "assets/hero-bg-day.mp4";
  const heroPoster = document.body.dataset.heroPoster || "assets/hero-poster-day.jpg";
  const heroRate = parseFloat(document.body.dataset.heroRate) || 1;
  const draggable = document.body.dataset.heroDraggable === "true";
  const initX = parseFloat(document.body.dataset.heroPosX);
  const initY = parseFloat(document.body.dataset.heroPosY);
  const vidRef = React.useRef(null);
  const dragRef = React.useRef(null);
  const [pos, setPos] = React.useState({
    x: isNaN(initX) ? 50 : initX,
    y: isNaN(initY) ? 50 : initY });

  React.useEffect(() => {
    if (vidRef.current) vidRef.current.playbackRate = heroRate;
  }, [heroRate]);

  const onDown = (e) => {
    if (!draggable) return;
    if (e.target.closest("a, button")) return;
    const pt = e.touches ? e.touches[0] : e;
    dragRef.current = { sx: pt.clientX, sy: pt.clientY, px: pos.x, py: pos.y };
    e.preventDefault();
  };
  React.useEffect(() => {
    if (!draggable) return;
    const move = (e) => {
      if (!dragRef.current) return;
      const pt = e.touches ? e.touches[0] : e;
      const dx = (pt.clientX - dragRef.current.sx) / window.innerWidth * 100;
      const dy = (pt.clientY - dragRef.current.sy) / window.innerHeight * 100;
      const clamp = (n) => Math.max(0, Math.min(100, n));
      setPos({ x: clamp(dragRef.current.px - dx), y: clamp(dragRef.current.py - dy) });
    };
    const up = () => { dragRef.current = null; };
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", move, { passive: false });
    window.addEventListener("touchend", up);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseup", up);
      window.removeEventListener("touchmove", move);
      window.removeEventListener("touchend", up);
    };
  }, [draggable]);

  return (
    <section
      className="hero hero--video"
      id="top"
      style={{ padding: "340px 0px", cursor: draggable ? "grab" : undefined }}
      onMouseDown={onDown}
      onTouchStart={onDown}>
      <video
        ref={vidRef}
        className="hero-video"
        autoPlay
        muted
        loop
        playsInline
        poster={heroPoster}
        style={{ objectPosition: pos.x + "% " + pos.y + "%" }}>
        <source src={heroVideo} type="video/mp4" />
      </video>
      <div className="hero-video-overlay" aria-hidden="true"></div>
      {draggable &&
        <div className="hero-drag-readout">
          drag to reposition · object-position: {Math.round(pos.x)}% {Math.round(pos.y)}%
        </div>}
      <div className="hero-inner">
        <h1 className="display" style={{ fontWeight: "500", fontSize: "58px" }}>
          Credit research, <span className="gloss" style={{ fontWeight: "500", fontSize: "58px" }}>supercharged</span> <em></em>
        </h1>
        <p className="lede">Never miss a move in the credits you cover.

        </p>
        <a href="#" onClick={openContact} className="btn btn-primary btn-lg" style={{ height: "36px" }}>Request Early Access</a>
      </div>
    </section>);

}

/* ─── 0 · Platform overview rows (lifted from baseline commit) ───
   Wide Rogo-style feature rows with the animated product mocks:
   command center / grounded answers + citations / plain-English
   alerts. Sits directly under the dark video hero. */
function V2Features() {
  return (
    <section className="feat" id="features">
      <div className="container" style={{ textAlign: "left" }}>
        <div className="feat-block">
          <div className="copy">
            <h3>One command center for all your coverage.</h3>
            <p>Passu ingests every new filing the moment it drops, so your coverage is always current. Add your names and we handle the rest.</p>
          </div>
          <div className="feat-visual"><CommandCenterMock /></div>
        </div>

        <div className="feat-block flip">
          <div className="copy">
            <h3>Grounded answers, auditable citations.</h3>
            <p>Every answer is anchored to a source document, with one-click citations that open the exact page and paragraph. No hallucinations, just analysis you can defend to your IC.</p>
          </div>
          <div className="feat-visual"><ChatMock /></div>
        </div>

        <div className="feat-block">
          <div className="copy">
            <h3>Custom Alerts, Described in Plain English.</h3>
            <p>Tell Passu what matters in plain English, whether that's a leverage threshold, a covenant test, or a refinancing window. It watches your whole universe and pings you the moment something breaks, source attached.</p>
          </div>
          <div className="feat-visual"><ReportMock /></div>
        </div>
      </div>
    </section>);

}

/* ─── 0b · Broome-style platform overview (preview-broome.html) ──
   Mirrors broome.ai's "One platform for your entire deal flow"
   section: big sans headline + one supporting sentence, a row of
   three click-through tabs, and one large framed product render
   that swaps per tab. Graphics are the live animated product mocks. */
function BroomeAgentsMock() {
  // Looping agent run: checklist steps complete one by one, output
  // lines land on the right with citation chips, then it restarts.
  const steps = [
  "Pull latest 10-Q and earnings transcript",
  "Extract leverage, liquidity, covenant headroom",
  "Compare vs. prior-quarter guidance",
  "Draft new-issue brief with citations"];

  const [done, setDone] = React.useState(0);
  React.useEffect(() => {
    let alive = true,timer = 0;
    function step() {
      if (!alive) return;
      setDone((d) => d >= steps.length ? 0 : d + 1);
      timer = setTimeout(step, 1400);
    }
    timer = setTimeout(step, 900);
    return () => {alive = false;clearTimeout(timer);};
  }, []);
  const outLines = Math.max(0, done - 1);
  return (
    <div className="bag">
      <div className="bag-left">
        <div className="bag-agent">
          <div className="bag-agent-head">
            <span className="bag-name">New Issue Brief</span>
            <span className={"bag-status " + (done >= steps.length ? 'done' : '')}>
              {done >= steps.length ? 'Complete' : 'Running'}
            </span>
          </div>
          <div className="bag-target">Allegiant Travel · 8.50% Sr Notes 2030</div>
          <div className="bag-steps">
            {steps.map((s, i) =>
            <div key={i} className={"bag-step " + (i < done ? 'done' : i === done ? 'active' : '')}>
                <span className="bag-check">{i < done ? '✓' : ''}</span>{s}
              </div>
            )}
          </div>
        </div>
        <div className="bag-others">
          <div className="bag-other"><span className="bag-odot" />Data Center Agent<span className="bag-otime">daily · 6:00 AM</span></div>
          <div className="bag-other"><span className="bag-odot" />M&amp;A Analysis Agent<span className="bag-otime">on filing</span></div>
        </div>
      </div>
      <div className="bag-right">
        <div className="bag-doc-head">
          <span>DRAFT · NEW ISSUE BRIEF</span>
          <span className="bag-cite-count">{outLines * 3} citations</span>
        </div>
        <div className="bag-doc">
          {Array.from({ length: 4 }).map((_, i) =>
          <div key={i} className={"bag-para " + (i < outLines ? 'in' : '')}>
              <span className="bag-line" style={{ width: '96%' }} />
              <span className="bag-line" style={{ width: '82%' }} />
              <span className="bag-line short" style={{ width: '58%' }} />
              <span className="bag-cite">10-Q p.{4 + i * 3}</span>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function V2BroomeOverview() {
  const tabs = [
  { k: 'command', label: 'Command Center', cap: 'Every filing, call, and headline across your coverage on one screen.', mock: () => <HeroProductMock /> },
  { k: 'citations', label: 'Auditable Citations', cap: 'Every claim traces to the exact line in the source document.', mock: () => <ChatMock /> },
  { k: 'agents', label: 'Agents', cap: 'Describe the workflow once, in plain English. Passu runs it.', mock: () => <BroomeAgentsMock /> }];

  const [active, setActive] = React.useState(0);
  const T = tabs[active];
  return (
    <section className="bro-overview" id="product">
      <div className="container">
        <div className="bro-head">
          <h2><strong>One platform for your entire credit workflow.</strong> <span>Connect your coverage, capture every filing automatically, and let AI handle the busywork so you can focus on the credit call.</span></h2>
        </div>
        <div className="bro-tabs" role="tablist">
          {tabs.map((t, i) =>
          <button
            key={t.k}
            role="tab"
            aria-selected={i === active}
            className={"bro-tab " + (i === active ? 'active' : '')}
            onClick={() => setActive(i)}>
              <span className="bro-tab-label">{t.label}</span>
            </button>
          )}
        </div>
        <div className="bro-frame" key={T.k}>
          <div className="bro-body">{T.mock()}</div>
        </div>
      </div>
    </section>);

}

/* ─── 1 · Three pillars (Rogo-style) ─────────────────────────────
   Serif section headline, then three dark-navy graphic cards,
   each holding a small, clean UI vignette, with serif titles and
   one sentence below. Mirrors rogo.ai's "Streamline & Automate
   Your Workflows" trio. */
function V2Pillars() {
  const pillars = [
  {
    t: "Unified platform",
    d: "Every filing, transcript, alert, and model consolidated in a single platform and always up to date.",
    vis:
    <div className="pv">
        <div className="pv-chip">Monday · 8:30 AM</div>
        <div className="pv-card">
          <div className="pv-card-head">Across your coverage</div>
          <div className="pv-row"><span className="pv-tick">URI</span>Earnings call<span className="pv-tag">10:00 AM</span></div>
          <div className="pv-row"><span className="pv-tick">APA</span>8-K filed<span className="pv-tag hl">Material</span></div>
          <div className="pv-row"><span className="pv-tick">CHTR</span>10-Q<span className="pv-tag">Processed</span></div>
          <div className="pv-row"><span className="pv-tick">CHTR</span>Model updated<span className="pv-tag">Synced</span></div>
        </div>
      </div> },

  {
    t: "Auditable citations",
    d: "Every claim traces back to the exact page and paragraph, so you can defend the analysis to your IC.",
    vis:
    <div className="pv pv-citescene">
        <div className="pv-panel">
          <div className="pv-panel-head">10-Q FY25 &middot; p.41</div>
          <div className="pv-panel-body">
            <span className="pv-text pv-mid">Total liquidity was $1.2B at quarter end, including the undrawn revolver.</span>
            <span className="pv-text"><mark className="pv-mark">Net leverage closed the quarter at 2.7x</mark>, down from 3.1x at June 30.</span>
            <span className="pv-text pv-dim">Capital expenditures were $118M for the quarter, in line with plan.</span>
          </div>
        </div>
        <div className="pv-callout"><span className="pvm-label">Net leverage</span><span className="pvm-val">2.7x</span></div>
      </div> },

  {
    t: "Institutional context",
    d: "Answers grounded in real documents and your firm's own research, notes, and context.",
    vis:
    <div className="pv">
        <div className="pv-chip">Where is CHTR leverage trending?</div>
        <div className="pv-card">
          <div className="pv-src"><span className="pv-srcdot" />Found 12 sources</div>
          <span className="pv-text">Leverage has stepped down three straight quarters, from 3.4x to 3.1x to 2.7x.</span>
          <span className="pv-text">Management reaffirmed its 3.0x ceiling on the Q3 call.</span>
        </div>
      </div> }];

  return (
    <section className="pillars" id="product">
      <div className="container">
        <div className="pillars-head">
          <h2><strong>Meet your AI junior credit analyst.</strong> <span>Passu takes care of the busywork so you can focus on what matters.</span></h2>
        </div>
        <div className="pillars-grid">
          {pillars.map((p) =>
          <div className="pillar" key={p.t}>
              <div className="pillar-card">{p.vis}</div>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ─── 2 · Capability carousel (Stripe-style) ─────────────────────
   Floating cards with soft shadows on a native scroll-snap rail.
   Copy is placeholder-short and slot-in-able; each card carries a
   small static visual built from CSS only. */
function V2Carousel() {
  const railRef = React.useRef(null);
  const [atStart, setAtStart] = React.useState(true);
  const [atEnd, setAtEnd] = React.useState(false);
  React.useEffect(() => {
    const el = railRef.current;
    if (!el) return;
    const fn = () => {
      setAtStart(el.scrollLeft <= 4);
      setAtEnd(el.scrollLeft >= el.scrollWidth - el.clientWidth - 4);
    };
    fn();
    el.addEventListener('scroll', fn, { passive: true });
    window.addEventListener('resize', fn);
    return () => {
      el.removeEventListener('scroll', fn);
      window.removeEventListener('resize', fn);
    };
  }, []);
  const nudge = (dir) => {
    const el = railRef.current;
    if (!el) return;
    const card = el.querySelector('.pcard');
    const step = (card ? card.offsetWidth : 360) + 20;
    el.scrollBy({ left: dir * step, behavior: 'smooth' });
  };

  const cards = [
  {
    k: "Earnings",
    t: "Earnings Analysis",
    d: "10-Qs and 10-Ks are automatically analyzed upon release, with the metrics you track updated straight from the filings.",
    vis:
    <div className="sym sym-report" aria-hidden="true">
        <div className="rep-doc"><span /><span className="hl" /><span /><span /></div>
        <div className="rep-flow"><span /><span /><span /></div>
        <div className="rep-out"><span /><span /><span /></div>
      </div> },

  {
    k: "Transcripts",
    t: "Transcript Analysis",
    d: "Earnings calls, expert calls, and everything in between, summarized through a credit lens with searchable transcripts.",
    vis:
    <div className="sym sym-wave" aria-hidden="true">
        {[18, 30, 22, 44, 64, 36, 52, 26, 40, 20].map((h, i) =>
      <span key={i} className={h === 64 ? 'hi' : ''} style={{ height: h }} />
      )}
      </div> },

  {
    k: "Filings",
    t: "8-K Filtering",
    d: "Every filing screened for credit materiality. Only the ones that matter get flagged, already summarized.",
    vis:
    <div className="sym sym-filter" aria-hidden="true">
        <div className="sf-top">{[0, 1, 0, 0, 1, 0, 0, 1].map((d, i) => <span key={i} className={d ? 'dim' : ''} />)}</div>
        <div className="sf-flow"><span /><span /><span /></div>
        <div className="sf-out" />
      </div> },

  {
    k: "Thesis",
    t: "Thesis Tracking",
    d: "Every thesis and its drivers, tracked. Each new filing, event, and headline gets checked against your view.",
    vis:
    <div className="sym sym-thesis" aria-hidden="true">
        <div className="st-row"><span className="st-bar" /><span className="st-dot ok" /></div>
        <div className="st-row"><span className="st-bar" /><span className="st-dot watch" /></div>
        <div className="st-row"><span className="st-bar" /><span className="st-dot risk" /></div>
      </div> },

  {
    k: "Models",
    t: "Excel Model Updates",
    d: "New metrics flow into your existing models the moment filings drop, with version control and natural-language edits.",
    vis:
    <div className="sym sym-grid" aria-hidden="true">
        {Array.from({ length: 12 }).map((_, i) => <span key={i} className={i % 4 === 3 ? 'new' : ''} />)}
      </div> },

  {
    k: "Agents",
    t: "Customizable AI Agents",
    d: "Stand up natural-language agents for the workflows you repeat every quarter.",
    vis:
    <div className="sym sym-chat" aria-hidden="true">
        <span className="cu" />
        <div className="cb"><span /><span /></div>
      </div> },

  {
    k: "Alerts",
    t: "Custom Alerts",
    d: "Create custom alerts in plain English. Describe what you want tracked. Passu watches your whole book and pings you, source attached.",
    vis:
    <div className="sym sym-pulse" aria-hidden="true">
        <span className="ring r2" /><span className="ring r1" /><span className="core" />
      </div> },

  {
    k: "Sectors",
    t: "Sector Research & Analysis",
    d: "Live sector pages: key themes, peer comps, and who's leveraging versus de-leveraging.",
    vis:
    <div className="sym sym-tiles" aria-hidden="true">
        {['', 'tint', '', 'hi', '', '', '', 'tint', ''].map((c, i) => <span key={i} className={c} />)}
      </div> },

  {
    k: "Metrics",
    t: "Sector-Specific Credit Metrics",
    d: "The measures each sector trades on: telecom ARPU, utility FFO / debt, BDC markdowns, extracted and graphable.",
    vis:
    <div className="sym sym-spark" aria-hidden="true">
        <svg width="150" height="72" viewBox="0 0 150 72" fill="none">
          <polyline points="4,56 28,46 52,50 78,34 104,40 130,18" stroke="#c9cdd4" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          <polyline points="78,34 104,40 130,18" stroke="#27405c" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          <circle cx="130" cy="18" r="4" fill="#27405c" />
        </svg>
      </div> },

  {
    k: "BDC",
    t: "BDC Markdowns",
    d: "Quarterly marks across BDC portfolios, extracted and compared, with the biggest markdowns flagged name by name.",
    vis:
    <div className="sym sym-marks" aria-hidden="true">
        <div className="sm-row"><span className="sm-bar" /><span className="sm-val" style={{ width: 44 }} /></div>
        <div className="sm-row"><span className="sm-bar" /><span className="sm-val" style={{ width: 32 }} /></div>
        <div className="sm-row"><span className="sm-bar" /><span className="sm-val hi" style={{ width: 20 }} /></div>
      </div> },

  {
    k: "Integrations",
    t: "VDR & Private Filer Docs",
    d: "Intralinks and SyndTrak documents pull in automatically the moment they post.",
    vis:
    <div className="sym sym-docs" aria-hidden="true">
        <span className="doc back" /><span className="doc front" /><span className="sync" />
      </div> }];


  return (
    <section className="prod-carousel" id="capabilities">
      <div className="container carousel-head">
        <div>
          <h2><strong>Everything the job demands.</strong> <span>It reads every filing and listens to every call so you don&rsquo;t have to.</span></h2>
        </div>
        <div className="carousel-nav">
          <button className="cnav-btn" onClick={() => nudge(-1)} disabled={atStart} aria-label="Scroll left">
            <I.Arrow style={{ width: 15, height: 15, transform: 'rotate(180deg)' }} />
          </button>
          <button className="cnav-btn" onClick={() => nudge(1)} disabled={atEnd} aria-label="Scroll right">
            <I.Arrow style={{ width: 15, height: 15 }} />
          </button>
        </div>
      </div>
      <div className="carousel-rail" ref={railRef}>
        {cards.map((c) =>
        <article className="pcard" key={c.t}>
            <div className="pcard-visual">{c.vis}</div>
            <div className="pcard-body">
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          </article>
        )}
      </div>
    </section>);

}

/* ─── 3 · Security ──────────────────────────────────────────────── */
function V2Security(props) {
  const items = [
  { icon: I.Shield, t: "SOC 2 certified", d: "Independently audited controls across security, availability, and confidentiality." },
  { icon: I.Lock, t: "Encrypted end to end", d: "AES-256 at rest and TLS 1.2+ in transit. Protected at every step." },
  { icon: I.Settings, t: "Siloed by design", d: "Every firm and user fully isolated. Private link or VPC deployment available." },
  { icon: I.Globe, t: "Never trains on your data", d: "Your documents and models are never used to train shared models." }];

  const variant = props && props.variant ||
  document.body.dataset.securityVariant || "light";

  /* Variant B — Rogo: contained rounded dark panel inside the light page */
  if (variant === "rogo") {
    return (
      <section className="security-rogo" id="security">
        <div className="container">
          <div className="secr-panel">
            <div className="secr-head">
              <h2>Enterprise-grade <em>security.</em></h2>
              <p className="secr-sub">Your research never leaves your walls.</p>
            </div>
            <div className="secr-badges">
              <span className="secr-badge">SOC 2</span>
              <span className="secr-badge">Pen tested</span>
              <span className="secr-badge">SSO / SAML</span>
              <span className="secr-badge">VPC deploy</span>
            </div>
            <div className="secr-grid">
              {items.map((it, idx) =>
              <div className="secr-cell" key={idx}>
                  <it.icon className="secr-ic" style={{ width: 18, height: 18 }} />
                  <div className="t">{it.t}</div>
                  <div className="l">{it.d}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>);

  }

  /* Variant A — Broome: full-bleed dark navy band, typography-driven */
  if (variant === "broome") {
    return (
      <section className="security-broome" id="security">
        <div className="container">
          <div className="secb-head">
            <h2>Enterprise-grade <em>security.</em></h2>
            <p className="secb-sub">Your research never leaves your walls.</p>
          </div>
          <div className="secb-grid">
            {items.map((it, idx) =>
            <div className="secb-cell" key={idx}>
                <div className="t">{it.t}</div>
                <div className="l">{it.d}</div>
              </div>
            )}
          </div>
        </div>
      </section>);

  }

  /* Default — Rogo-style dark band: eyebrow + two-tone serif headline +
     checklist on the left, 2x2 dashed badge grid on the right */
  return (
    <section className="security-section" id="security">
      <div className="container">
        <div className="secx-panel">
          <div className="secx-left">
            <h2 className="secx-h"><strong>Enterprise-grade security.</strong> <span>Your research never leaves your walls.</span></h2>
            <ul className="secx-list">
              <li><I.Globe style={{ width: 15, height: 15 }} />No training on your data</li>
              <li><I.Settings style={{ width: 15, height: 15 }} />Single-tenant deployment</li>
              <li><I.Shield style={{ width: 15, height: 15 }} />Audited and pen tested</li>
              <li><I.Lock style={{ width: 15, height: 15 }} />Encrypted at rest and in transit</li>
            </ul>
            <a href="#" onClick={openContact} className="secx-more">Talk to us about security <I.Arrow style={{ width: 13, height: 13 }} /></a>
          </div>
          <div className="secx-grid">
            <div className="secx-cell"><div className="secx-mark secx-seal">SOC 2</div><span className="secx-lbl">SOC 2</span></div>
            <div className="secx-cell"><div className="secx-mark"><I.Shield style={{ width: 46, height: 46, strokeWidth: 1.5 }} /></div><span className="secx-lbl">Pen tested</span></div>
            <div className="secx-cell"><div className="secx-mark"><I.Lock style={{ width: 46, height: 46, strokeWidth: 1.5 }} /></div><span className="secx-lbl">SSO / SAML</span></div>
            <div className="secx-cell"><div className="secx-mark"><I.Layers style={{ width: 46, height: 46, strokeWidth: 1.5 }} /></div><span className="secx-lbl">VPC deployment</span></div>
          </div>
        </div>
      </div>
    </section>);

}

/* ─── 4 · Reviews conveyor ──────────────────────────────────────── */
function V2Reviews() {
  const reviews = [
  { q: "Wow. You'd be almost stupid not to use this.", role: "Former Head of Fixed Income", org: "$100B Asset Manager" },
  { q: "I went from covering 12 names well to 40 names well. It's great that Passu gets all the busywork out of the way so I can spend more time on the actual analysis.", role: "Senior Analyst", org: "$14B Fixed Income Manager" },
  { q: "Every answer comes with a quote and a page. That's what got it past my IC.", role: "Distressed Credit Analyst", org: "$80B Asset Manager" },
  { q: "Earnings review used to take me 2 to 3 hours for one company. Now it takes me 15 minutes.", role: "Senior Credit Analyst", org: "$110B Fixed Income Manager" },
  { q: "The 10-Q hits EDGAR, and by the time I open it, Passu has the leverage walk built with every number sourced to the page.", role: "Senior Credit Analyst", org: "$45B Asset Manager" },
  { q: "We onboarded all 60 names in our coverage in one afternoon. Compliance signed off because every answer carries its citation.", role: "Director of Credit Research", org: "$40B Credit Asset Manager" },
  { q: "Like having a junior who actually read every filing and never forgets a covenant.", role: "Head of Credit Research", org: "Distressed Credit Fund" },
  { q: "Every morning it shows me what changed across my names overnight: filings, ratings actions, headlines. Nothing slips through anymore.", role: "Credit Analyst", org: "Large Asset Manager" }];

  // Stepped conveyor ("musical chairs"): every few seconds the track
  // slides left by exactly one card, pauses, then the front card is
  // rotated to the back and the transform resets invisibly.
  const [items, setItems] = React.useState(reviews);
  const trackRef = React.useRef(null);
  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    let resetTimer;
    const step = () => {
      const card = track.querySelector('.review-card');
      if (!card) return;
      const dist = card.getBoundingClientRect().width + 20;
      track.style.transition = 'transform 1s cubic-bezier(0.66, 0, 0.34, 1)';
      track.style.transform = 'translateX(-' + dist + 'px)';
      resetTimer = setTimeout(() => {
        track.style.transition = 'none';
        track.style.transform = 'translateX(0)';
        setItems((prev) => [...prev.slice(1), prev[0]]);
      }, 1050);
    };
    const timer = setInterval(step, 4400);
    return () => {clearInterval(timer);clearTimeout(resetTimer);};
  }, []);
  const row = items;
  return (
    <section id="customers" className="reviews-section">
      <div className="container reviews-head">
        <h2>Straight from the credit desk.</h2>
      </div>
      <div className="reviews-rows">
        <div className="reviews-belt">
          <div className="reviews-track" ref={trackRef}>
            {row.map((r) =>
            <figure key={r.q} className="review-card">
                <blockquote className="rq">&ldquo;{r.q}&rdquo;</blockquote>
                <figcaption className="rc">
                  <span className="rc-role">{r.role}</span>
                  <span className="rc-org">{r.org}</span>
                </figcaption>
              </figure>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ─── 5 · CTA + footer ──────────────────────────────────────────── */
function V2CTA() {
  return (
    <section className="cta-section" id="cta">
      <div className="container">
        <div className="v2cta">
          <h2>Cover more credits, <em>more comprehensively.</em></h2>
          <p className="v2cta-sub">Now onboarding buy-side credit teams.</p>
          <a href="#" className="btn btn-primary btn-lg">Request a Demo <I.Arrow style={{ width: 14, height: 14 }} className="arrow" /></a>
        </div>
      </div>
    </section>);

}

function V2Footer() {
  return (
    <footer id="company">
      <div className="container">
        <div className="footer-cta">
          <h2>Built for credit analysts,<br />by credit analysts.</h2>
          <div className="footer-cta-btns">
            <a href="#" onClick={(e) => openContact(e, 'newsletter')} className="btn btn-lg footer-btn-ghost">Subscribe to Newsletter</a>
            <a href="#" onClick={(e) => openContact(e, 'demo')} className="btn btn-primary btn-lg">Request Demo</a>
          </div>
        </div>
        <div className="footer-rule" />
        <div className="footer-grid">
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#product">Product</a></li>
              <li><a href="#capabilities">Features</a></li>
              <li><a href="#security">Security</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="terms.html">Terms of Use</a></li>
              <li><a href="privacy.html">Privacy Policy</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contact</h5>
            <ul>
              <li><a href="#" onClick={(e) => openContact(e, 'question')}>Email Us</a></li>
              {/* TODO: swap in Passu's real LinkedIn company URL */}
              <li><a href="#">LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Passu Inc.</div>
        </div>
      </div>
    </footer>);

}

function V2App() {
  // Mock-up aid: data-security-compare="true" on <body> renders both dark
  // security variants stacked with labels (preview-security.html only).
  const compareSecurity = document.body.dataset.securityCompare === "true";
  // Mock-up aid: data-overview-variant="broome" swaps the feature rows +
  // pillars for the Broome-style tabbed overview (preview-broome.html).
  const broomeOverview = document.body.dataset.overviewVariant === "broome";
  // Mock-up aid: data-show-features="true" renders the lifted baseline
  // feature rows under the hero (preview-lifted.html). Default: pre-lift.
  const showFeatures = document.body.dataset.showFeatures === "true";
  return (
    <>
      <V2Announce />
      <V2Nav />
      <V2Hero />
      {broomeOverview ?
      <V2BroomeOverview /> :
      <>
          {showFeatures && <V2Features />}
          <V2Pillars />
        </>}
      <V2Carousel />
      {compareSecurity ?
      <>
          <div className="variant-label container">Option A &middot; Broome-style, full-width dark navy band</div>
          <V2Security variant="broome" />
          <div className="variant-label container">Option B &middot; Rogo-style, contained dark panel</div>
          <V2Security variant="rogo" />
        </> :
      <V2Security />}
      <V2Reviews />
      <V2Footer />
      <V2ContactModal />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<V2App />);