// landing-2.jsx — continuation of the TranscriptAgent landing page.
// Features grid, tracked-question differentiator, walkthrough, trust, levels, CTA.

/* ============================================================
   FIVE QUESTIONS — feature grid
   ============================================================ */
function FiveQuestions() {
  const heatmap = [
    { label: 'Semiconductors',  heat: [0.2, 0.3, 0.5, 0.7, 0.9, 0.95, 0.85, 0.8],  delta: 38, tone: 'warm' },
    { label: 'Gold miners',     heat: [0.3, 0.35, 0.4, 0.5, 0.6, 0.7, 0.85, 0.95], delta: 41, tone: 'warm' },
    { label: 'Recession calls', heat: [0.15, 0.2, 0.25, 0.35, 0.5, 0.6, 0.7, 0.8], delta: 33, tone: 'warm' },
    { label: 'Dollar (DXY)',    heat: [0.85, 0.7, 0.55, 0.45, 0.4, 0.35, 0.3, 0.25], delta: -29, tone: 'cool' },
    { label: 'Regional banks',  heat: [0.7, 0.6, 0.4, 0.3, 0.35, 0.45, 0.6, 0.75], delta: 12, tone: 'cool' },
    { label: '10Y yield',       heat: [0.5, 0.55, 0.6, 0.6, 0.55, 0.45, 0.4, 0.35], delta: -18, tone: 'cool' },
  ];

  return (
    <section id="features" className="lp-section" style={{ scrollMarginTop: 80 }}>
      <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--ink-muted)' }}>What the desk shows you</div>
      <h2 className="lp-h2" style={{ maxWidth: 880, marginBottom: 14 }}>
        One dashboard. Six questions you currently cannot answer.
      </h2>
      <p className="lp-lede" style={{ maxWidth: 640, marginBottom: 18 }}>
        Each module is a lens on the same flow of commentary — the things the videos already said, just structured so you can act on them. Card names are the in-product titles you'll see on <span className="mono" style={{ background: 'var(--surface-cool)', padding: '1px 6px', borderRadius: 4, fontSize: 12, color: 'var(--ink-navy)' }}>/insights</span>.
      </p>
      <p className="body-sm" style={{ marginBottom: 48, color: 'var(--ink-muted)' }}>
        Plus seven live strips for <strong style={{ color: 'var(--ink-navy)', fontWeight: 600 }}>Anomalies</strong>, <strong style={{ color: 'var(--ink-navy)', fontWeight: 600 }}>Narrative Velocity</strong>, <strong style={{ color: 'var(--ink-navy)', fontWeight: 600 }}>Narrative Stability</strong>, and tracked-question matches that move with your feed in real time.
      </p>

      <div className="lp-grid-12">
        {/* 1 — themes heating up */}
        <FeatureCard
          span={7}
          q="Which themes are heating up?"
          name="Theme rotation"
          inProduct="What's moving up — what's fading"
          blurb="Eight-week heat across the channels you follow. Spot rotations a single video would never reveal."
        >
          <ThemeHeatmap themes={heatmap} weeks={8} compact />
        </FeatureCard>

        {/* 2 — polarization */}
        <FeatureCard
          span={5}
          q="Where do analysts most disagree?"
          name="Polarization"
          inProduct="Where's consensus — where's the fight"
          blurb="High-conviction, low-consensus topics are where alpha hides — and where you most need to read carefully."
        >
          <PolarizationQuadrant />
        </FeatureCard>

        {/* 3 — regime (NEW) */}
        <FeatureCard
          span={5}
          q="Is the market regime shifting?"
          name="Perceived regime"
          inProduct="Perceived Regime · Actual Market Regime"
          blurb="Twin gauges: what your feed believes the regime is, next to what FRED and Yahoo Finance actually show. Disagreement is the signal."
        >
          <RegimeGauge />
        </FeatureCard>

        {/* 4 — speaker spectrum */}
        <FeatureCard
          span={7}
          q="Where does each speaker actually sit?"
          name="Speaker spectrum"
          inProduct="Who's bull, who's bear — and how loud"
          blurb="Bear-to-bull axis for any asset, dot size = conviction. Movements are tracked — you see when a view actually changes."
        >
          <SpeakerSpectrum
            asset="Semiconductors"
            speakers={[
              { name: 'Bianco', x: 0.18, conviction: 3 },
              { name: 'Johnson', x: 0.32, conviction: 2 },
              { name: 'Alden', x: 0.5, conviction: 2 },
              { name: 'Lee', x: 0.74, conviction: 3, prevX: 0.95 },
              { name: 'Wood', x: 0.92, conviction: 3 },
            ]}
          />
        </FeatureCard>

        {/* 5 — niche assets */}
        <FeatureCard
          span={5}
          q="Which specific assets are quietly gaining attention?"
          name="Niche assets"
          inProduct="Niche Assets strip"
          blurb="Specific tickers with real evidence — not the names already running on hype. Aggregated from claim-level mentions across your feed."
        >
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <AssetPulseRow rank={1} ticker="URNJ" name="Sprott Jr. Uranium ETF" mentions={7}  speakers={3} momentum={42} sentiment="bullish" points={[1,1.2,1.4,1.5,1.7,2.1,2.4,2.6]} />
            <AssetPulseRow rank={2} ticker="CCJ"  name="Cameco · uranium"        mentions={11} speakers={5} momentum={28} sentiment="bullish" points={[1,1.1,1.05,1.2,1.4,1.55,1.6,1.7]} />
            <AssetPulseRow rank={3} ticker="EWZ"  name="iShares MSCI Brazil"    mentions={5}  speakers={3} momentum={-9}  sentiment="mixed"   points={[1.2,1.15,1.1,1.05,1,0.95,0.92,0.9]} />
          </div>
        </FeatureCard>

        {/* 6 — voice independence */}
        <FeatureCard
          span={7}
          q="Are channels independent, or echoing each other?"
          name="Voice independence"
          inProduct="Voices"
          blurb="Six bullish takes on gold means very different things depending on whether the analysts actually disagree on the why. Voices flags echo chambers across your feed."
        >
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginTop: 4 }}>
            {[
              { topic: 'Gold miners',     echo: 0.22, label: 'Independent takes', detail: '4 analysts · distinct rationales' },
              { topic: 'Semis (AI)',      echo: 0.71, label: 'Mostly echoing',     detail: '6 analysts · 3 share core argument' },
              { topic: 'Regional banks',  echo: 0.45, label: 'Some overlap',       detail: '5 analysts · 2 shared sources' },
              { topic: 'Bitcoin',         echo: 0.83, label: 'High echo',          detail: '8 analysts · 1 narrative dominates' },
            ].map((r, i) => (
              <div key={i} style={{
                padding: 14, background: 'var(--surface-paper)',
                border: '1px solid var(--border-warm)', borderRadius: 10,
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-navy)' }}>{r.topic}</span>
                  <span className={`chip ${r.echo > 0.6 ? 'chip--danger' : r.echo > 0.4 ? 'chip--warm' : 'chip--mint'}`} style={{ fontSize: 10, fontWeight: 600, padding: '3px 7px' }}>
                    {r.label}
                  </span>
                </div>
                <div className="bar" style={{ background: 'rgba(122,77,10,0.08)' }}>
                  <i style={{ width: `${r.echo * 100}%`, background: r.echo > 0.6 ? '#a7503e' : r.echo > 0.4 ? 'var(--gold)' : 'var(--brand-deep)' }} />
                </div>
                <span style={{ fontSize: 10.5, color: 'var(--ink-muted)' }}>{r.detail}</span>
              </div>
            ))}
          </div>
        </FeatureCard>
      </div>
    </section>
  );
}

function FeatureCard({ span, q, name, inProduct, blurb, children }) {
  return (
    <div className={`lp-col-${span === 12 ? 12 : span === 7 ? 7 : span === 6 ? 6 : 5}`} style={{
      gridColumn: `span ${span}`,
      background: '#fff', border: '1px solid var(--border-pale)', borderRadius: 18,
      padding: 26, display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap', marginBottom: 10 }}>
          <span className="eyebrow eyebrow--bronze">{name}</span>
          {inProduct && (
            <span style={{ fontSize: 10.5, color: 'var(--ink-muted)', letterSpacing: '0.04em' }}>
              · in product: <em style={{ fontFamily: 'var(--font-serif)', color: 'var(--ink-slate)' }}>{inProduct}</em>
            </span>
          )}
        </div>
        <h3 className="h-card" style={{ fontSize: 22, margin: '0 0 8px', fontFamily: 'var(--font-serif)', fontWeight: 400, letterSpacing: '-0.012em', lineHeight: 1.2 }}>
          {q}
        </h3>
        <p className="body-sm" style={{ margin: 0, maxWidth: 560 }}>{blurb}</p>
      </div>
      <div style={{ marginTop: 6 }}>{children}</div>
    </div>
  );
}

function PolarizationQuadrant() {
  const dots = [
    { topic: 'Gold',  x: 0.8, y: 0.8 },
    { topic: 'Semis', x: 0.2, y: 0.85 },
    { topic: 'USD',   x: 0.45, y: 0.3 },
    { topic: 'Banks', x: 0.25, y: 0.55 },
    { topic: 'BTC',   x: 0.7, y: 0.45 },
  ];
  return (
    <div style={{ position: 'relative', aspectRatio: '1 / 1', background: 'var(--surface-warm)', borderRadius: 12, padding: 18, border: '1px solid var(--border-warmer)' }}>
      <div style={{ position: 'absolute', inset: 18, border: '1px solid var(--border-warmer)', borderRadius: 8 }}>
        <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: 'var(--border-warmer)' }} />
        <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 1, background: 'var(--border-warmer)' }} />
        {dots.map((d, i) => (
          <div key={i} style={{
            position: 'absolute',
            left: `${d.x * 100}%`,
            top: `${(1 - d.y) * 100}%`,
            transform: 'translate(-50%, -50%)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          }}>
            <span style={{
              width: 11, height: 11, borderRadius: '50%',
              background: d.topic === 'Semis' ? '#a7503e' : d.topic === 'Gold' ? 'var(--brand-deep)' : 'var(--gold)',
              border: '2px solid #fff', boxShadow: '0 0 0 1px rgba(28,51,67,0.2)',
            }} />
            <span style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--ink-navy)', whiteSpace: 'nowrap' }}>{d.topic}</span>
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 4, textAlign: 'center', fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-muted)', fontWeight: 600 }}>
        Consensus →
      </div>
      <div style={{ position: 'absolute', top: '50%', left: -8, transform: 'translateY(-50%) rotate(-90deg)', fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-muted)', fontWeight: 600 }}>
        Consensus
      </div>
    </div>
  );
}

/* ---- RegimeGauge: perceived (from feed) vs actual (FRED + Yahoo) ---- */
function RegimeGauge() {
  const regimes = ['Reflation', 'Goldilocks', 'Stagflation', 'Deflation', 'Mixed'];
  const perceivedIdx = 0;   // late-cycle reflation
  const actualIdx = 1;      // goldilocks (slight divergence)
  const Row = ({ label, idx, accent, sub }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <span style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--ink-muted)' }}>{label}</span>
        <span style={{ fontFamily: 'var(--font-serif)', fontSize: 16, color: accent, letterSpacing: '-0.005em' }}>{regimes[idx]}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4, position: 'relative' }}>
        {regimes.map((r, i) => (
          <div key={i} style={{
            height: 10,
            background: i === idx ? accent : 'rgba(28,51,67,0.07)',
            borderRadius: 3,
            transition: 'background .15s',
          }} />
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4, fontSize: 9, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-faint)', fontWeight: 600 }}>
        {regimes.map((r, i) => <span key={i} style={{ textAlign: 'center', color: i === idx ? accent : undefined, fontWeight: i === idx ? 700 : 600 }}>{r}</span>)}
      </div>
      {sub && <div style={{ fontSize: 10.5, color: 'var(--ink-muted)', marginTop: 2 }}>{sub}</div>}
    </div>
  );
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Row label="Perceived \u00b7 from your feed" idx={perceivedIdx} accent="var(--brand-deep)" sub="7 of 12 channels converge on this read." />
      <Row label="Actual \u00b7 FRED + Yahoo Finance" idx={actualIdx} accent="var(--brand-bronze)" sub="Macro data leans one regime warmer." />
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 12px',
        background: 'var(--surface-cream-hl)', border: '1px solid #ecd58a', borderRadius: 10,
      }}>
        <Ico name="spark" size={14} stroke="var(--brand-bronze)" strokeWidth={2} />
        <span style={{ fontSize: 12, color: 'var(--ink-slate)', lineHeight: 1.4 }}>
          <strong style={{ color: 'var(--ink-navy)' }}>Diverges from FRED + Yahoo by +1 step.</strong> Worth a read.
        </span>
      </div>
    </div>
  );
}

/* ============================================================
   TRACKED-QUESTION DIFFERENTIATOR
   ============================================================ */
function DifferentiatorTracked() {
  const questions = [
    'Is anyone turning bearish on semiconductors?',
    'Who is still bullish on the dollar?',
    'Are gold miners getting mentioned with evidence?',
    'Is regional bank stress coming back?',
  ];
  return (
    <section className="lp-section lp-section--warm">
      <div className="lp-grid-2">
        <div>
          <div className="eyebrow eyebrow--bronze" style={{ marginBottom: 16 }}>Tracked questions</div>
          <h2 className="lp-h2" style={{ marginBottom: 18 }}>
            The product does not summarize what happened. It watches for what you care about.
          </h2>
          <p className="lp-lede">
            Type a research question once. TranscriptAgent scans every new video against it and only pings you when someone genuinely answers — and gets sharper with every relevance signal you give it.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {questions.map((q, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 14px', background: '#fff',
                border: '1px solid var(--border-warmer)', borderRadius: 10,
                fontSize: 13.5, color: 'var(--ink-navy)',
              }}>
                <Ico name="search" size={13} stroke="var(--brand-bronze)" />
                <span style={{ flex: 1 }}>{q}</span>
                <span className="chip chip--gold" style={{ fontSize: 10.5, fontWeight: 600 }}>Tracking</span>
              </div>
            ))}
          </div>
        </div>
        <MatchedQuestion />
      </div>
    </section>
  );
}

function MatchedQuestion() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div className="card" style={{ padding: 20, background: '#fff' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
          <span style={{
            width: 28, height: 28, borderRadius: 8,
            background: 'var(--brand-deep)', color: 'var(--gold-bright)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Ico name="bell" size={14} strokeWidth={1.8} />
          </span>
          <div className="eyebrow eyebrow--bronze">New answer · 2 minutes ago</div>
        </div>
        <p style={{
          margin: '0 0 14px',
          fontFamily: 'var(--font-serif)',
          fontSize: 19, lineHeight: 1.25,
          color: 'var(--ink-navy)', letterSpacing: '-0.005em',
        }}>
          “Is anyone turning bearish on semiconductors?”
        </p>
        <ClaimCard
          claim="Semis are priced for perfection on AI capex — every hyperscaler must keep guiding higher."
          speaker="Jim Bianco"
          channel="Forward Guidance"
          stance="bearish"
          conviction={3}
          asset="SOX"
          horizon="3–6 mo"
          evidence={5}
          timestamp="24:18"
        />
        <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--ink-muted)' }}>
            Was this on the mark?
          </span>
          <FeedbackBtn label="Relevant" tone="mint" />
          <FeedbackBtn label="Want more like this" tone="gold" />
          <FeedbackBtn label="Not precise enough" tone="warm" />
        </div>
      </div>
      <FeedbackLoop />
    </div>
  );
}

function FeedbackBtn({ label, tone }) {
  return (
    <button className={`chip chip--${tone}`} style={{
      cursor: 'pointer', border: '1px solid currentColor', borderColor: 'transparent',
      fontSize: 11, fontWeight: 600, padding: '5px 10px',
    }}>
      {label}
    </button>
  );
}

function FeedbackLoop() {
  return (
    <div className="card card--cream" style={{ padding: 20 }}>
      <div className="eyebrow eyebrow--bronze" style={{ marginBottom: 12 }}>How the agent learns</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6, alignItems: 'center' }}>
        {[
          { label: 'You ask',     icon: 'search' },
          { label: 'New video',   icon: 'play' },
          { label: 'Match check', icon: 'flask' },
          { label: 'You rate it', icon: 'check' },
        ].map((n, i) => (
          <React.Fragment key={i}>
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              padding: '12px 6px',
            }}>
              <span style={{
                width: 32, height: 32, borderRadius: 10,
                background: i === 3 ? 'var(--brand-deep)' : 'rgba(122,77,10,0.12)',
                color: i === 3 ? 'var(--gold-bright)' : 'var(--brand-bronze)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Ico name={n.icon} size={14} stroke={i === 3 ? 'var(--gold-bright)' : 'var(--brand-bronze)'} strokeWidth={1.8} />
              </span>
              <span style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ink-navy)' }}>{n.label}</span>
            </div>
          </React.Fragment>
        ))}
      </div>
      <p className="body-sm" style={{ margin: '12px 0 0', textAlign: 'center' }}>
        After ~40 reviews the matcher tunes to your bar. Loops back: every signal tightens the threshold.
      </p>
    </div>
  );
}

/* ============================================================
   REAL-WEEK WALKTHROUGH
   ============================================================ */
function RealWeekWalkthrough() {
  const steps = [
    { num: '01', title: 'You ask',                       body: 'Is anyone turning bearish on semiconductors?' },
    { num: '02', title: 'New Bianco video drops',         body: 'Forward Guidance · 38 min. Indexer pulls the transcript automatically.' },
    { num: '03', title: 'Claims are extracted',           body: '“Semis priced for perfection on AI capex.” Bearish · evidence 5/5 · hype 2/5.' },
    { num: '04', title: 'Matcher routes the relevant one', body: 'Bianco · flagged. Alden mentions semis but stays mixed — still flagged. Wood off-topic — skipped.' },
    { num: '05', title: 'Dashboard flips the theme',      body: 'Semis moves from “consensus bull” to “mixed / more divided.” 3 bull · 3 bear.' },
  ];
  return (
    <section id="how-it-works" className="lp-section lp-section--cool" style={{ scrollMarginTop: 80 }}>
      <div className="eyebrow eyebrow--bronze" style={{ marginBottom: 14 }}>How it plays out</div>
      <h2 className="lp-h2" style={{ maxWidth: 720, marginBottom: 40 }}>
        One real research question, one real week.
      </h2>
      <div className="lp-grid-5">
        {steps.map((s, i) => (
          <div key={i} className="card card--cream" style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--brand-bronze)', letterSpacing: '0.12em' }}>{s.num}</span>
            <h4 className="h-card" style={{ fontSize: 14, margin: 0, lineHeight: 1.3 }}>{s.title}</h4>
            <p className="body-sm" style={{ margin: 0, fontSize: 12.5 }}>{s.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
   GROUNDING / TRUST
   ============================================================ */
function GroundingTrust() {
  return (
    <section className="lp-section lp-section--paper">
      <div className="lp-grid-2">
        <div>
          <div className="eyebrow eyebrow--bronze" style={{ marginBottom: 14 }}>Always grounded</div>
          <h2 className="lp-h2" style={{ marginBottom: 18 }}>
            Every answer points back to the video, speaker, and claim it came from.
          </h2>
          <p className="lp-lede">
            This isn't a model freestyling about markets. TranscriptAgent can only tell you what was actually said — on a channel you chose to follow. Every claim carries an evidence score, a hype score, a speaker, and a one-click path to the exact line in the transcript.
          </p>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              ['Claim text', 'as it appears in the structured layer'],
              ['Speaker + channel', 'attribution is a first-class field'],
              ['Stance + conviction', 'bullish / bearish / mixed · 1–3 dots'],
              ['Evidence score', '0–1 · rated against the claim itself'],
              ['Hype score',     '0–1 · separate from evidence, calibrated to your eye'],
              ['Citation link', 'video title · timestamp · transcript snippet'],
            ].map(([k, v], i) => (
              <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <Ico name="check" size={12} stroke="var(--brand-deep)" strokeWidth={2.4} />
                <span style={{ fontSize: 13.5, color: 'var(--ink-slate)' }}>
                  <strong style={{ color: 'var(--ink-navy)', fontWeight: 600 }}>{k}</strong> — {v}
                </span>
              </li>
            ))}
          </ul>
        </div>
        <EvidenceTrail />
      </div>
    </section>
  );
}

function EvidenceTrail() {
  return (
    <div className="card" style={{ padding: 24, background: '#fff', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div className="eyebrow eyebrow--bronze">Claim → evidence trail</div>
      <ClaimCard
        claim="Reserve diversification continues, but the dollar's near-term floor depends on rate-differential dynamics."
        speaker="Lyn Alden"
        channel="Wealthion"
        stance="bearish"
        conviction={2}
        asset="DXY"
        horizon="12 mo+"
        evidence={4}
        timestamp="14:32"
      />
      {/* paired Evidence + Hype */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
      }}>
        <ScoreRow label="Evidence" score={4} max={5} tone="deep" hint="Strong" />
        <ScoreRow label="Hype"     score={1} max={5} tone="gold" hint="Low" />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink-muted)', fontSize: 11.5 }}>
        <Ico name="arrow-down" size={13} stroke="var(--brand-bronze)" /> traces back to
      </div>
      <Citation video="The dollar's long-run path · Wealthion · Nov 4" speaker="Lyn Alden" timestamp="14:32" />
      <div style={{
        background: 'var(--surface-paper)', border: '1px solid var(--border-warm)',
        borderRadius: 10, padding: '12px 14px',
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        color: 'var(--ink-slate)', fontSize: 14, lineHeight: 1.5,
      }}>
        “…and so when I look at the rate differential I think the floor is closer than people are saying, even if structurally the path is still down…”
      </div>
      <button className="btn btn--ghost" style={{ alignSelf: 'flex-start', fontSize: 12, padding: '8px 14px' }}>
        <Ico name="play" size={11} stroke="var(--ink-navy)" /> Open review
      </button>
    </div>
  );
}

/* ---- ScoreRow: 5-dot Evidence / Hype indicator ---- */
function ScoreRow({ label, score, max = 5, tone = 'deep', hint }) {
  const onColor  = tone === 'gold' ? 'var(--gold)' : 'var(--brand-deep)';
  const offColor = 'rgba(28,51,67,0.12)';
  return (
    <div style={{
      padding: '10px 12px',
      background: tone === 'gold' ? 'var(--surface-cream-hl)' : 'var(--surface-mint)',
      border: `1px solid ${tone === 'gold' ? '#ecd58a' : '#c8e1d2'}`,
      borderRadius: 10,
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <span className="eyebrow" style={{ color: tone === 'gold' ? 'var(--brand-bronze)' : '#2a6149' }}>
          {label}
        </span>
        <span style={{ fontSize: 11.5, fontWeight: 600, color: tone === 'gold' ? 'var(--brand-bronze)' : '#1a4f3b' }}>
          {hint} · {score}/{max}
        </span>
      </div>
      <div style={{ display: 'flex', gap: 5 }}>
        {Array.from({ length: max }).map((_, i) => (
          <span key={i} style={{
            width: 14, height: 14, borderRadius: '50%',
            background: i < score ? onColor : offColor,
            border: '1px solid #fff',
            boxShadow: i < score ? `0 0 0 1px ${onColor}` : 'none',
          }} />
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   LEVELS — 5 tiers matching LEVEL_DEFINITIONS / LEVEL_FEATURE_GATES
   ============================================================ */
function LevelsSection() {
  /* Per-tier visual + copy props (designer-controlled). The tier label,
     name, and threshold are overlaid from window.__landingData.levels
     when present so they track LEVEL_DEFINITIONS in
     training_points_service.py automatically. If the server payload is
     missing (e.g. running the bundle outside the app) the hardcoded
     fallbacks render. */
  const visualByName = {
    Observer:   { bg: '#fff',                       border: 'var(--border-warm)',   dot: 'var(--ink-muted)',     accent: 'var(--ink-slate)',
                  note: 'Paste your first channels, read the global Insights view — and start the loop with your first tracked question.',
                  perks: ['Follow channels', 'Neutral video reads', 'Your first tracked question', 'Custom Reports', 'Research Lab shell'] },
    Apprentice: { bg: 'var(--surface-warm)',        border: 'var(--border-warmer)', dot: 'var(--gold)',          accent: 'var(--brand-bronze)',
                  note: 'The agent learns your read: your feed becomes the dashboard.',
                  perks: ['Personalized Analysis', 'Insights · My Feed + Compare', 'Daily Brief + Question Inbox', 'Track up to 5 questions', '2-source Compare Views'] },
    Analyst:    { bg: 'var(--surface-cream-hl)',    border: '#ecd58a',              dot: 'var(--brand-bronze)',  accent: 'var(--brand-bronze)',
                  note: 'Bring in your own material. Compare three views at once.',
                  perks: ['Build From Material (upload docs)', '3-source Compare Views', 'Longer reports'] },
    Strategist: { bg: 'var(--surface-paper)',       border: 'var(--brand-bronze)',  dot: 'var(--brand-bronze)',  accent: 'var(--brand-bronze)',
                  note: 'Stress-test your theses against the opposite side.',
                  perks: ['Thesis Stress Test (bull vs. bear)', '4-source Compare Views', 'Detailed reports'],
                  bronze: true },
    Architect:  { bg: 'var(--brand-deep)',          border: 'var(--brand-deep)',    dot: 'var(--gold-bright)',   accent: 'var(--gold-bright)',
                  note: 'The full unlock. Community-spanning research opens up.',
                  perks: ['Ask the Network', 'Deep agent memory', 'No depth limits'],
                  dark: true },
  };
  /* Fallback tier list — used when window.__landingData.levels is absent.
     Mirrors LEVEL_DEFINITIONS as of 2026-05-18 so the static bundle and
     the live page stay visually identical. */
  const FALLBACK_LEVELS = [
    { number: 1, tier: 'I',   name: 'Observer',   threshold: 'Free' },
    { number: 2, tier: 'II',  name: 'Apprentice', threshold: '50 pts' },
    { number: 3, tier: 'III', name: 'Analyst',    threshold: '200 pts' },
    { number: 4, tier: 'IV',  name: 'Strategist', threshold: '600 pts' },
    { number: 5, tier: 'V',   name: 'Architect',  threshold: '1,500 pts' },
  ];
  const serverLevels = (typeof window !== 'undefined' && window.__landingData && Array.isArray(window.__landingData.levels))
    ? window.__landingData.levels
    : null;
  const levelSpine = serverLevels && serverLevels.length > 0 ? serverLevels : FALLBACK_LEVELS;
  const fallbackVisual = visualByName.Observer;
  const tiers = levelSpine.map((lvl) => {
    const visual = visualByName[lvl.name] || fallbackVisual;
    return { ...visual, tier: lvl.tier, name: lvl.name, threshold: lvl.threshold };
  });
  return (
    <section id="levels" className="lp-section lp-section--warm" style={{ scrollMarginTop: 80 }}>
      <div className="eyebrow eyebrow--bronze" style={{ marginBottom: 14 }}>Free to start · levels you earn</div>
      <h2 className="lp-h2" style={{ maxWidth: 760, marginBottom: 14 }}>
        Free to start. More depth unlocks as your agent learns.
      </h2>
      <p className="lp-lede" style={{ maxWidth: 660, marginBottom: 8 }}>
        Levels aren't a paywall meter — <strong style={{ color: 'var(--ink-navy)' }}>there is no paid plan</strong>. Each tier is earned through <strong style={{ color: 'var(--ink-navy)' }}>training points</strong>, granted for in-app actions like rating insights, scheduling reports, and reviewing claims. We can't know your read the second you sign up — so the personalized lenses calibrate as you teach it.
      </p>
      <p className="lp-lede" style={{ maxWidth: 660, marginBottom: 8 }}>
        <strong style={{ color: 'var(--ink-navy)' }}>Day one</strong> you get the global desk, a daily brief, catalysts, neutral reads, and your first tracked question. <strong style={{ color: 'var(--ink-navy)' }}>After a few reviews (~50 pts)</strong> the agent flips on My&nbsp;Feed, Compare, more tracked questions, and personalized analysis — tuned to you.
      </p>
      <p className="body-sm" style={{ marginBottom: 24, color: 'var(--ink-muted)' }}>
        Names and gates match <span className="mono" style={{ background: '#fff', padding: '1px 6px', borderRadius: 4, color: 'var(--ink-navy)' }}>LEVEL_DEFINITIONS</span> in the codebase.
      </p>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 12,
        padding: '14px 20px', background: 'var(--surface-cream-hl)',
        border: '1px solid #ecd58a', borderRadius: 12,
        marginBottom: 36, maxWidth: 720,
      }}>
        <span style={{
          width: 28, height: 28, borderRadius: 8,
          background: 'var(--brand-deep)', color: 'var(--gold-bright)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <Ico name="bolt" size={14} stroke="var(--gold-bright)" strokeWidth={2} />
        </span>
        <span style={{ fontSize: 13.5, color: 'var(--ink-navy)', lineHeight: 1.4 }}>
          <strong>Looking for pricing? There isn't one.</strong> Every tier is free — you earn it.
        </span>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(5, 1fr)',
        gap: 14,
      }} className="lp-levels-grid">
        {tiers.map((t, i) => (
          <div key={i} style={{
            background: t.bg, border: `1.5px solid ${t.border}`,
            borderRadius: 16, padding: 20,
            color: t.dark ? 'var(--gold-bright)' : 'var(--ink-navy)',
            display: 'flex', flexDirection: 'column', gap: 14,
            position: 'relative',
            minHeight: 320,
          }}>
            {/* tier circle */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{
                width: 36, height: 36, borderRadius: '50%',
                border: `1.5px solid ${t.dot}`,
                background: t.dark ? 'rgba(231,196,108,0.08)' : t.bronze ? 'rgba(122,77,10,0.08)' : 'transparent',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                color: t.dot, fontSize: 15, fontWeight: 600,
                flexShrink: 0,
              }}>{t.tier}</span>
              <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
                <div style={{ fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600, color: t.dark ? 'rgba(231,196,108,0.7)' : 'var(--ink-muted)' }}>
                  Level {t.tier}
                </div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, letterSpacing: '-0.012em', lineHeight: 1.1, color: t.dark ? 'var(--gold-bright)' : 'var(--ink-navy)' }}>
                  {t.name}
                </div>
              </div>
            </div>

            {/* threshold pill */}
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px',
              background: t.dark ? 'rgba(231,196,108,0.12)' : t.bronze ? 'rgba(122,77,10,0.08)' : 'rgba(28,51,67,0.05)',
              border: `1px solid ${t.dark ? 'rgba(231,196,108,0.3)' : t.bronze ? 'rgba(122,77,10,0.25)' : 'var(--border-cool)'}`,
              borderRadius: 999,
              fontSize: 10.5, fontWeight: 600,
              color: t.accent,
              alignSelf: 'flex-start',
              letterSpacing: '0.04em',
            }}>
              <Ico name="bolt" size={10} stroke={t.accent} strokeWidth={2.2} />
              {t.threshold}
            </div>

            {/* note */}
            <div style={{ fontSize: 12, color: t.dark ? 'rgba(231,196,108,0.75)' : 'var(--ink-muted)', lineHeight: 1.5 }}>
              {t.note}
            </div>

            {/* perks */}
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 7 }}>
              {t.perks.map((p, j) => (
                <li key={j} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, lineHeight: 1.35, color: t.dark ? 'rgba(231,196,108,0.92)' : 'var(--ink-slate)' }}>
                  <span style={{ marginTop: 3, flexShrink: 0 }}>
                    <Ico name="check" size={10} stroke={t.dot} strokeWidth={2.4} />
                  </span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
   FINAL CTA
   ============================================================ */
function FinalCTA() {
  return (
    <section className="lp-section lp-section--ink" style={{ paddingTop: 120, paddingBottom: 120 }}>
      <div style={{ maxWidth: 760 }}>
        <div className="eyebrow" style={{ color: 'rgba(231,196,108,0.7)', marginBottom: 18 }}>
          From the channels you watch to a research desk that works for you
        </div>
        <h2 className="lp-h2" style={{
          fontSize: 'clamp(34px, 4.5vw, 56px)',
          color: 'var(--gold-bright)',
          marginBottom: 32,
          fontFamily: 'var(--font-serif)',
        }}>
          Build your research desk from the channels you already watch.
        </h2>
        <div className="lp-cta-row">
          <a href="/login" className="btn" style={{ background: 'var(--gold-bright)', color: 'var(--brand-deep)', fontWeight: 700, padding: '14px 24px', textDecoration: 'none' }}>
            Try it free →
          </a>
          <a href="#how-it-works" className="btn btn--ghost" style={{ color: 'var(--gold-bright)', borderColor: 'rgba(231,196,108,0.35)', padding: '14px 24px', textDecoration: 'none' }}>
            See how it works
          </a>
        </div>
        <p style={{ marginTop: 32, fontSize: 12, color: 'rgba(231,196,108,0.55)', maxWidth: 540, lineHeight: 1.55 }}>
          TranscriptAgent helps you organize market commentary and research narratives. It does not tell you what to buy.
        </p>
      </div>
    </section>
  );
}

/* ============================================================
   TIME AXIS — Today's Diff (backward) + Catalyst Calendar (forward).
   The feature grid above shows today's STATE; these two read the
   clock: what just changed, and what's coming that the feed cares
   about. Both are real surfaces in the product.
   ============================================================ */
function TimeAxisCard({ name, direction, title, blurb, children }) {
  return (
    <div className="lp-col-6" style={{
      gridColumn: 'span 6', background: '#fff', border: '1px solid var(--border-pale)',
      borderRadius: 18, padding: 26, display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap', marginBottom: 10 }}>
          <span className="eyebrow eyebrow--bronze">{name}</span>
          <span style={{ fontSize: 10.5, color: 'var(--ink-muted)', letterSpacing: '0.04em' }}>· {direction}</span>
        </div>
        <h3 className="h-card" style={{ fontSize: 22, margin: '0 0 8px', fontFamily: 'var(--font-serif)', fontWeight: 400, letterSpacing: '-0.012em', lineHeight: 1.2 }}>
          {title}
        </h3>
        <p className="body-sm" style={{ margin: 0, maxWidth: 560 }}>{blurb}</p>
      </div>
      <div style={{ marginTop: 6 }}>{children}</div>
    </div>
  );
}

function TimeAxisBand() {
  const chip = { fontSize: 11, fontWeight: 600, padding: '4px 9px' };
  const cal = [
    { when: 'Jun 12', what: 'US CPI', note: '3 channels flagged · split on path' },
    { when: 'Jun 18', what: 'FOMC decision', note: 'dot-plot the real event' },
    { when: 'Jun 25', what: 'NVDA — Computex read-through', note: '5 speakers positioned' },
  ];
  return (
    <section id="time-axis" className="lp-section" style={{ scrollMarginTop: 80 }}>
      <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--ink-muted)' }}>The time axis</div>
      <h2 className="lp-h2" style={{ maxWidth: 820, marginBottom: 14 }}>
        Markets move in time. The desk reads both directions.
      </h2>
      <p className="lp-lede" style={{ maxWidth: 660, marginBottom: 36 }}>
        The lenses above show today's state. These two read the clock — what just changed since yesterday, and what's coming that your channels already care about.
      </p>
      <div className="lp-grid-12">
        <TimeAxisCard
          name="Today's Diff"
          direction="looks back"
          title="Yesterday vs today — the shift, decided for you."
          blurb="The desk diffs today's report set against yesterday's and surfaces the non-obvious move: which consensus shifted, what framing flipped, which thesis gained or lost ground — plus the single highest-value thing to watch next. One sharp briefing instead of re-reading everything."
        >
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            <span className="chip chip--mint" style={chip}>New today · semis &ldquo;priced for perfection&rdquo;</span>
            <span className="chip chip--warm" style={chip}>Framing flipped · a rates story, not an AI story</span>
            <span className="chip" style={chip}>Faded · regional-bank stress</span>
          </div>
        </TimeAxisCard>
        <TimeAxisCard
          name="Catalyst Calendar"
          direction="looks ahead"
          title="What's coming — and what your feed expects going in."
          blurb="Dated catalysts — Fed meetings, CPI, earnings, option expiries — extracted from the channels you follow and laid on one calendar. Each opens a one-tap brief: what the analysts you watch expect, where they disagree, and how they're positioned."
        >
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {cal.map((c, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12, padding: '9px 12px',
                background: 'var(--surface-warm)', border: '1px solid var(--border-warmer)', borderRadius: 10,
              }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--brand-deep)', minWidth: 52, fontFamily: 'var(--font-mono, monospace)' }}>{c.when}</span>
                <span style={{ display: 'flex', flexDirection: 'column' }}>
                  <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-navy)' }}>{c.what}</span>
                  <span style={{ fontSize: 10.5, color: 'var(--ink-muted)' }}>{c.note}</span>
                </span>
              </div>
            ))}
          </div>
        </TimeAxisCard>
      </div>
    </section>
  );
}

Object.assign(window, {
  FiveQuestions, DifferentiatorTracked, RealWeekWalkthrough,
  GroundingTrust, LevelsSection, FinalCTA, TimeAxisBand,
});