// mocks.jsx — Product UI mocks used as visual content within marketing sections.

function HeroProductMock() {
  return (
    <div className="app-chrome">
      <aside className="app-sidebar">
        <div className="brand">
          <img src="assets/logo.png" alt="Passu" style={{ height: 18, width: 'auto', display: 'block' }} />
        </div>
        <div className="nav-item active"><I.Home /> Overview</div>
        <div className="nav-item"><I.Building /> Companies</div>
        <div className="nav-item"><I.Layers /> Sectors</div>
        <div className="nav-item"><I.Book /> Reports</div>

        <div className="group">Coverage</div>
        <div className="ticker"><div className="t"><span className="tk">URI</span><span className="sec">Industrials</span></div><span className="rating">BB+</span></div>
        <div className="ticker"><div className="t"><span className="tk">APA</span><span className="sec">Energy</span></div><span className="rating">BB+</span></div>
        <div className="ticker"><div className="t"><span className="tk">KHC</span><span className="sec">Consumer</span></div><span className="rating">BBB</span></div>
        <div className="ticker"><div className="t"><span className="tk">CHTR</span><span className="sec">Telecom</span></div><span className="rating">BB+</span></div>
        <div className="ticker"><div className="t"><span className="tk">HCA</span><span className="sec">Healthcare</span></div><span className="rating">BBB-</span></div>
        <div className="ticker"><div className="t"><span className="tk">CLF</span><span className="sec">Materials</span></div><span className="rating">BB-</span></div>
        <div className="ticker"><div className="t"><span className="tk">CDLX</span><span className="sec">Industrials</span></div><span className="rating">BB-</span></div>
      </aside>

      <main className="app-main">
        <div className="app-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>CREDIT EVENTS CALENDAR</div>
            <h1>Overview</h1>
            <p className="sub">News and events across your coverage universe.</p>
          </div>
          <div className="actions">
            <button className="btn btn-outline" style={{ height: 32, fontSize: 12 }}><I.Filter style={{ width: 13, height: 13 }} /> Filter</button>
            <button className="btn btn-primary" style={{ height: 32, fontSize: 12 }}><I.Plus style={{ width: 13, height: 13 }} /> Add company</button>
          </div>
        </div>

        <div className="app-tabs">
          <span className="app-tab active"><I.Layers /> All <span className="count">9</span></span>
          <span className="app-tab"><I.BarChart /> Earnings <span className="count">5</span></span>
          <span className="app-tab"><I.Pres /> Conference <span className="count">2</span></span>
          <span className="app-tab"><I.News /> News <span className="count">2</span></span>
        </div>

        <div className="timeline-card">
          <div className="timeline-section-head">TODAY · NOV 14 <span className="sun-icon" style={{ marginLeft: 6, verticalAlign: 'middle' }}><I.Sun style={{ width: 12, height: 12 }} /></span></div>
          <div className="timeline-row today">
            <div className="timeline-date">07:30<span className="big">14</span><span className="mo">NOV</span></div>
            <div className="timeline-title"><span className="ticker">KHC</span>Q3 2025 Earnings Call<div className="meta">The Kraft Heinz Company</div></div>
            <span className="timeline-tag tag-earnings">Earnings</span>
          </div>
          <div className="timeline-row today">
            <div className="timeline-date">10:00<span className="big">14</span><span className="mo">NOV</span></div>
            <div className="timeline-title"><span className="ticker">CLF</span>JPM Materials Day<div className="meta">Cleveland-Cliffs Inc.</div></div>
            <span className="timeline-tag tag-conference">Conference</span>
          </div>
          <div className="timeline-row today">
            <div className="timeline-date">13:30<span className="big">14</span><span className="mo">NOV</span></div>
            <div className="timeline-title"><span className="ticker">CHTR</span>Senior notes tender offer announcement<div className="meta">Charter Communications</div></div>
            <span className="timeline-tag tag-news">News</span>
          </div>

          <div className="timeline-section-head" style={{ paddingTop: 18 }}>UPCOMING</div>
          <div className="timeline-row">
            <div className="timeline-date">08:30<span className="big">15</span><span className="mo">NOV</span></div>
            <div className="timeline-title"><span className="ticker">HCA</span>Q3 2025 Earnings Call<div className="meta">HCA Healthcare</div></div>
            <span className="timeline-tag tag-earnings">Earnings</span>
          </div>
          <div className="timeline-row">
            <div className="timeline-date">11:00<span className="big">15</span><span className="mo">NOV</span></div>
            <div className="timeline-title"><span className="ticker">URI</span>Citi Industrials Conference · Fireside<div className="meta">United Rentals, Inc.</div></div>
            <span className="timeline-tag tag-conference">Conference</span>
          </div>
        </div>
      </main>
    </div>);

}

function TranscriptMock() {
  // Continuous, single-belt scroll. One ambient spotlight box sits
  // in the center of the card — pills scroll behind it on a CSS
  // keyframe loop. No per-pill active border (the spotlight IS the
  // highlight), no pauses, no JS animation.
  const docs = [
  { type: '10-K Annual Report', meta: 'APA · Mar 12' },
  { type: '10-Q Quarterly Filing', meta: 'URI · Nov 4' },
  { type: '8-K Material Event', meta: 'CHTR · Today' },
  { type: 'Earnings Call Transcript', meta: 'KHC · Today' },
  { type: 'Investor Presentation', meta: 'CLF · Today' },
  { type: 'Sell-Side Research', meta: 'JPM · Nov 12' },
  { type: 'News Article', meta: 'HCA · Yesterday' },
  { type: 'Private Filing · 144A', meta: 'CDLX · Nov 10' }];

  const loop = [...docs, ...docs];
  return (
    <div className="feat-square ingest-mock">
      <div className="ingest-spotlight" aria-hidden="true" />
      <div className="ingest-belt">
        <div className="ingest-track">
          {loop.map((d, i) =>
          <div key={i} className="ingest-pill">
              <span className="ingest-name">{d.type}</span>
              <span className="ingest-meta">{d.meta}</span>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function ChatMock() {
  // Metric-extraction with animated cursor. Cursor moves to the
  // "Net Leverage" KPI → hover shows a citation tooltip → click on
  // the citation badge slides a source-document drawer in from
  // the right. Loops indefinitely.
  //
  // Animation strategy: CSS transitions on `top/left/opacity` are
  // wedged in this iframe (verified). So the cursor moves via a
  // rAF tween writing inline `left/top` percentages directly, the
  // tooltip is conditionally rendered (no opacity transition), and
  // only transform-based transitions (the drawer) use CSS.
  const [phase, setPhase] = React.useState('idle');
  const cursorRef = React.useRef(null);
  const drawerRef = React.useRef(null);

  // Drive phase cycle
  React.useEffect(() => {
    const seq = [
    ['idle', 900],
    ['moving', 900],
    ['hover', 1700],
    ['click', 350],
    ['drawer', 3200],
    ['closing', 700]];

    let i = 0,alive = true,t = 0;
    function next() {
      if (!alive) return;
      const [p, dur] = seq[i % seq.length];
      setPhase(p);
      t = setTimeout(() => {i++;next();}, dur);
    }
    next();
    return () => {alive = false;clearTimeout(t);};
  }, []);

  // Tween cursor position with rAF — bypasses the broken CSS
  // top/left transitions. Pose lookup is keyed off the current
  // phase state; we read it via a ref so the tween loop doesn't
  // need to re-mount on each phase change.
  const phaseRef = React.useRef(phase);
  phaseRef.current = phase;
  React.useEffect(() => {
    const poses = {
      idle: { x: 8, y: 78, s: 1 },
      moving: { x: 32, y: 36, s: 1 },
      hover: { x: 32, y: 36, s: 1 },
      click: { x: 32, y: 36, s: 0.88 },
      drawer: { x: 72, y: 50, s: 1 },
      closing: { x: 72, y: 50, s: 1 }
    };
    let alive = true;
    let rafId = 0;
    const cur = { ...poses.idle };
    const tick = () => {
      if (!alive) return;
      const target = poses[phaseRef.current] || poses.idle;
      const ease = 0.10;
      ['x', 'y', 's'].forEach((k) => {
        const diff = target[k] - cur[k];
        if (Math.abs(diff) < 0.04) cur[k] = target[k];else
        cur[k] += diff * ease;
      });
      const el = cursorRef.current;
      if (el) {
        el.style.left = cur.x + '%';
        el.style.top = cur.y + '%';
        el.style.transform = 'scale(' + cur.s + ')';
      }
      rafId = requestAnimationFrame(tick);
    };
    rafId = requestAnimationFrame(tick);
    return () => {alive = false;cancelAnimationFrame(rafId);};
  }, []);

  // Slide the document drawer with a rAF tween writing inline
  // transform directly — CSS transform transitions are wedged in
  // this iframe (same workaround as the cursor). Open during the
  // 'drawer' phase, slide back out otherwise.
  React.useEffect(() => {
    let alive = true,rafId = 0;
    let cur = 105; // translateX percent (105 = fully off-screen right)
    const tick = () => {
      if (!alive) return;
      const target = phaseRef.current === 'drawer' ? 0 : 105;
      const diff = target - cur;
      if (Math.abs(diff) < 0.3) cur = target;else cur += diff * 0.16;
      const el = drawerRef.current;
      if (el) el.style.transform = 'translateX(' + cur + '%)';
      rafId = requestAnimationFrame(tick);
    };
    rafId = requestAnimationFrame(tick);
    return () => {alive = false;cancelAnimationFrame(rafId);};
  }, []);
  const tooltipOpen = phase === 'hover' || phase === 'click';
  const drawerOpen = phase === 'drawer' || phase === 'closing';
  return (
    <div className="feat-square metric-mock">
      <div className={"metric-stage " + (drawerOpen ? 'drawer-open ' : '') + 'phase-' + phase}>
        <div className="metric-grid">
          <div className="kpi-card kpi-target" data-key="leverage">
            <div className="kpi-label">Net Leverage</div>
            <div className="kpi-value" style={{ position: 'relative' }}>2.7<span className="kpi-unit">x</span>
              <span className={"cite " + (tooltipOpen ? 'is-target' : '')}>1</span>
              {tooltipOpen &&
              <div className="cite-tooltip">
                  <span className="t-meta">URI · 10-Q Q3 2025 · p.4</span>
                  <span className="t-quote">&ldquo;…net leverage closed the quarter at <mark>2.7x</mark>, down from 3.1x at June 30.&rdquo;</span>
                </div>
              }
            </div>
            <div className="kpi-sub kpi-down">▼ from 3.1x last qtr</div>
          </div>
          <div className="kpi-card">
            <div className="kpi-label">Leverage Target</div>
            <div className="kpi-value">&le; 3.0<span className="kpi-unit">x</span></div>
            <div className="kpi-sub">reaffirmed Q3 2025</div>
          </div>
          <div className="kpi-card">
            <div className="kpi-label">Liquidity</div>
            <div className="kpi-value">$1.2<span className="kpi-unit">B</span></div>
            <div className="kpi-sub">$342M cash</div>
          </div>
          <div className="kpi-card">
            <div className="kpi-label">Cap. Allocation</div>
            <div className="kpi-value kpi-val-text">Balanced</div>
            <div className="kpi-sub">debt paydown · buyback</div>
          </div>
        </div>

        <div className={"doc-drawer " + (drawerOpen ? 'open ' : '') + (phase === 'closing' ? 'closing' : '')} ref={drawerRef}>
          <div className="dd-head">
            <span className="dd-title">URI · 10-Q Q3 2025</span>
            <span className="dd-page">p. 4</span>
          </div>
          <div className="dd-body">
            <p>Cash and cash equivalents at September 30, 2025 totaled $342M, with $850M available under our undrawn revolving credit facility.</p>
            <p>We are <mark>reaffirming our long-term net leverage target of 3.0x or below</mark>. <mark>Net leverage closed the quarter at 2.7x</mark>, down from 3.1x at June 30, 2025.</p>
            <p>Capital allocation remains balanced between organic investment, opportunistic tuck-in M&amp;A, and consistent return of capital to shareholders.</p>
          </div>
        </div>

        <div className="fake-cursor" ref={cursorRef}>
          <svg viewBox="0 0 24 24" width="22" height="22"><path d="M3 2l7 18 2.5-7.5L20 10z" fill="#0a0d12" stroke="#fff" strokeWidth="1.4" strokeLinejoin="round" /></svg>
          {phase === 'click' && <span className="click-ring" />}
        </div>
      </div>
    </div>);

}

function CommandCenterMock() {
  // "Coverage command center": a tidy grid of coverage tiles that
  // light up one at a time as new filings are ingested. Each pass
  // increments that name's document count and flashes a "just
  // filed" chip — conveying continuous ingestion + organization in
  // one place. Cycle is driven by a timer; highlight uses a
  // transform-free color transition (CSS top/left transitions are
  // wedged in this iframe, but border/background color is fine).
  const tiles = [
  { tk: 'URI', sec: 'Industrials', ev: '10-Q filed' },
  { tk: 'APA', sec: 'Energy', ev: '8-K · material event' },
  { tk: 'KHC', sec: 'Consumer', ev: 'Earnings transcript' },
  { tk: 'CHTR', sec: 'Telecom', ev: 'Tender offer news' },
  { tk: 'HCA', sec: 'Healthcare', ev: 'Investor deck' },
  { tk: 'CLF', sec: 'Materials', ev: 'Sell-side note' }];

  const [active, setActive] = React.useState(2);
  const [counts, setCounts] = React.useState([128, 94, 212, 76, 143, 88]);
  React.useEffect(() => {
    let i = 2,alive = true,timer = 0;
    function step() {
      if (!alive) return;
      i = (i + 1) % tiles.length;
      setActive(i);
      setCounts((c) => c.map((v, idx) => idx === i ? v + 1 : v));
      timer = setTimeout(step, 1900);
    }
    timer = setTimeout(step, 1500);
    return () => {alive = false;clearTimeout(timer);};
  }, []);
  return (
    <div className="feat-square command-mock">
      <div className="cmd-head">
        <span className="cmd-title">Coverage Command Center</span>
        <span className="cmd-live"><span className="cmd-dot" />Syncing</span>
      </div>
      <div className="cmd-grid">
        {tiles.map((t, i) =>
        <div key={t.tk} className={"cmd-tile " + (i === active ? 'active' : '')}>
            <div className="cmd-tk-row">
              <span className="cmd-tk">{t.tk}</span>
              <span className="cmd-sec">{t.sec}</span>
            </div>
            {i === active &&
          <div className="cmd-flash" key={counts[i]}>
                <span className="cmd-fdot" />{t.ev}
              </div>
          }
            <div className="cmd-meta">
              <span className="cmd-count">{counts[i]} docs</span>
              <span className="cmd-synced">{i === active ? 'just now' : 'synced'}</span>
            </div>
          </div>
        )}
      </div>
    </div>);

}

function ReportMock() {
  // Natural-language alert composer. Reuses the V2CityBand typing
  // animation pattern: types each alert prompt out, holds, deletes,
  // types the next. "Create Alert" button on the right of the input.
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const prompts = [
    "Alert me when net leverage exceeds 3.5x on any name in my coverage",
    "Flag any covenant test due in the next 90 days",
    "Ping me on tender offers or refinancings across HY industrials",
    "Notify me if a downgrade is announced for any IG name I cover"];

    let i = 0,j = 0,deleting = false,alive = true,timer = 0;
    function tick() {
      if (!alive) return;
      const word = prompts[i];
      el.firstChild.textContent = word.slice(0, j);
      if (!deleting && j < word.length) {j++;timer = setTimeout(tick, 38);} else
      if (!deleting && j === word.length) {deleting = true;timer = setTimeout(tick, 1800);} else
      if (deleting && j > 0) {j--;timer = setTimeout(tick, 18);} else
      {deleting = false;i = (i + 1) % prompts.length;timer = setTimeout(tick, 500);}
    }
    timer = setTimeout(tick, 600);
    return () => {alive = false;clearTimeout(timer);};
  }, []);
  return (
    <div className="feat-square alerts-mock">
      <div className="alert-composer">
        <div className="ac-hint">Describe an alert in plain English</div>
        <div className="ac-input">
          <span className="ac-text" ref={ref}>{''}<span className="ac-caret" /></span>
        </div>
        <div className="ac-actions">
          <span className="ac-help"><I.Spark style={{ width: 12, height: 12 }} /> Passu will listen across your entire coverage</span>
          <button className="ac-create">Create Alert <I.Arrow style={{ width: 12, height: 12 }} /></button>
        </div>
      </div>
    </div>);

}

window.HeroProductMock = HeroProductMock;
window.TranscriptMock = TranscriptMock;
window.CommandCenterMock = CommandCenterMock;
window.ChatMock = ChatMock;
window.ReportMock = ReportMock;