/* Collections "paper trail" · Case studies · Close */

function EmailMess() {
  const mails = [
    { s: 'RE: RE: Samsung_real_FINAL_v3_USE-THIS-ONE.png', f: 'agency@…', t: 'Mon 09:14', r: -2.5 },
    { s: 'FWD: feedback (see attached??)', f: 'brand.team@…', t: 'Mon 11:48', r: 1.8 },
    { s: 'RE: which version is approved?', f: 'legal@…', t: 'Tue 16:02', r: -1.2 },
    { s: 'RE: RE: RE: small tweak', f: 'producer@…', t: 'Wed 08:31', r: 2.3 },
    { s: 'Re: FINAL final (use this one)', f: 'agency@…', t: 'Thu 19:55', r: -1.6 },
  ];
  return (
    <div style={{ position: 'relative', padding: '8px 4px' }}>
      {mails.map((m, i) => (
        <Reveal key={i} delay={i * 90} style={{ display: 'block' }}>
          <div style={{ background: 'var(--card-bg)', border: '1px solid var(--tan-border)', borderRadius: 10,
            padding: '13px 16px', marginBottom: 10, transform: `rotate(${m.r}deg)`, boxShadow: '0 6px 18px rgba(115,96,66,0.10)',
            display: 'flex', alignItems: 'center', gap: 12 }}>
            <Ico name="mail" size={16} color="var(--tan-deep)" />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.s}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--tan-deep)' }}>{m.f} · {m.t}</div>
            </div>
          </div>
        </Reveal>
      ))}
      <Reveal delay={500}>
        <div style={{ marginTop: 6, fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--tan-deep)', display: 'flex', alignItems: 'center', gap: 8 }}>
          14 messages · 5 people · 0 source of truth
        </div>
      </Reveal>
    </div>
  );
}

function FlywheelThread() {
  const steps = [
    { t: 'Request', who: 'Sarah · Client', when: 'Jun 18 · 10:02', body: '"Make this edit, tighten the logo safe area on the hero frame."', tone: 'draft', icon: 'spark' },
    { t: 'Revision uploaded', who: 'Marco · Flywheel', when: 'Jun 18 · 14:20', body: 'v2 attached. Logo clear space corrected to brand spec.', tone: 'medium', icon: 'arrowRight' },
    { t: 'Approved', who: 'Sarah · Client', when: 'Jun 19 · 09:15', body: 'Looks perfect, approved for publish.', tone: 'confirmed', icon: 'check' },
  ];
  const toneCol = { draft: ['#fcfcfc', '#141414', '#121212'], medium: ['#f5f5f7', 'var(--gray-text)', 'var(--gray-300)'], confirmed: ['var(--status-confirmed-bg)', 'var(--status-confirmed-fg)', 'var(--status-confirmed-bd)'] };
  return (
    <div className="fcard" style={{ padding: 'clamp(18px,2vw,26px)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--gray-text)' }}>Collection · Samsung_Reel_Spring</span>
      </div>
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', left: 15, top: 10, bottom: 10, width: 2, background: 'var(--gray-200)' }} />
        {steps.map((s, i) => {
          const [bg, fg, bd] = toneCol[s.tone];
          return (
            <Reveal key={i} delay={i * 160} style={{ display: 'block' }}>
              <div style={{ display: 'flex', gap: 16, marginBottom: i < steps.length - 1 ? 22 : 0, position: 'relative' }}>
                <div style={{ width: 32, height: 32, borderRadius: 999, background: bg, border: `1.5px solid ${bd}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, zIndex: 1 }}>
                  <Ico name={s.icon} size={15} color={fg} />
                </div>
                <div style={{ flex: 1, paddingTop: 2 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                    <span style={{ fontWeight: 700, fontSize: 16 }}>{s.t}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 999, background: bg, color: fg, border: `1px solid ${bd}` }}>{s.when}</span>
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--lime-deep)', margin: '5px 0 7px', letterSpacing: '0.04em' }}>{s.who}</div>
                  <p className="body" style={{ fontSize: 14, margin: 0 }}>{s.body}</p>
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>
    </div>
  );
}

function PaperTrail() {
  return (
    <React.Fragment>
      <ChapterDivider n="01" id="ch-thread" rail="01 · Source of truth" title={'Total visibility, end to end.'}
        dek="Before a single asset is made, everyone sees the same thing. Every brief, version and approval lives in one tracked place, start to finish." />
      <section className="section warm" id="collections" data-rail="Source of truth" data-tone="light">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">You’ve lived this. It’s painful.</Reveal></p>
          <Split tag="h2" className="head" text={'Every step in one thread, traceable.'} style={{ maxWidth: '18ch' }} />
          <Reveal delay={140} style={{ marginTop: 22, maxWidth: 640 }}>
            <p className="lead" style={{ color: 'var(--tan-deep)' }}>Think of the email chains, different people, different versions, impossible to follow. Now picture all of it in one tracked collection. Who asked, who changed it, who approved, every step timestamped.</p>
          </Reveal>

          <div className="grid trailgrid" style={{ gridTemplateColumns: '1fr 1fr', marginTop: 'clamp(36px,7vh,72px)', alignItems: 'start', gap: 'clamp(24px,4vw,56px)' }}>
            <div>
              <Reveal><p className="trail-h" style={{ color: 'var(--tan-deep)' }}>The email way</p></Reveal>
              <EmailMess />
            </div>
            <div>
              <Reveal><p className="trail-h" style={{ color: 'var(--lime-deep)' }}>The Flywheel Way: A Single Source of Truth</p></Reveal>
              <FlywheelThread />
            </div>
          </div>
        </div>
        <style>{`.trail-h{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0 0 18px;display:flex;align-items:center;gap:10px}.trail-h::before{content:"";width:24px;height:1px;background:currentColor;opacity:.5}`}</style>
      </section>

      <section className="section dark" data-rail="Efficiency" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">Organization & efficiency</Reveal></p>
          <Split tag="h2" className="head" text={'One place. Total clarity.'} style={{ color: '#fff' }} />
          <Reveal delay={140} style={{ marginTop: 22, maxWidth: 640 }}>
            <p className="lead">The full picture of how Flywheel keeps clients organized, sample assets, real requests, a clean approval trail end to end.</p>
          </Reveal>

          <div style={{ marginTop: 'clamp(40px,7vh,80px)' }}>
            <Reveal>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 22, flexWrap: 'wrap', gap: 12 }}>
                <h3 className="sub" style={{ color: '#fff' }}>See it in motion.</h3>
                <span className="dim" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Walkthrough video</span>
              </div>
            </Reveal>
            <Reveal variant="scale" delay={120}>
              <VideoFrame src={(typeof window!=='undefined' && window.__VIDEO02) || 'assets/video_02.mp4'} label="Organization & efficiency" duration="0:60" fitVideo />
            </Reveal>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function TDLearned() {
  const human = ['Strategic thinking', 'Creative judgement', 'Brand stewardship'];
  const auto = ['Versioning', 'Captioning', 'Adaptations'];
  const findings = [
    'Workflows that run themselves.',
    'A metric that measures what actually costs money: assets per human hour worked.',
    'Governance that protects the brand while you move faster.',
  ];
  return (
    <section className="section dark" id="td-learned" data-rail="What we’ve learned" data-tone="dark">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">What we’ve learned</Reveal></p>
        <Split tag="h2" className="head" text={'The tools were never the hard part.'} style={{ color: '#fff', maxWidth: '20ch' }} />
        <Reveal delay={140} style={{ marginTop: 22, maxWidth: 680 }}>
          <p className="lead">We put AI into our own production workflows, into the time-intensive, repetitive work, and kept the judgement human.</p>
        </Reveal>

        <div className="grid learnedgrid" style={{ gridTemplateColumns: 'minmax(0,1.08fr) minmax(0,0.92fr)', gap: 'clamp(28px,4.5vw,64px)', marginTop: 'clamp(40px,6vh,72px)', alignItems: 'center' }}>
          {/* Op model: the human layer builds on top of the automated layer */}
          <div>
            <Reveal variant="rise" delay={560}>
              <div className="opband op-human">
                <div className="opband-side">
                  <span className="opband-tag" style={{ color: 'var(--lime)' }}>We kept human</span>
                </div>
                <div className="opband-cells">
                  {human.map((h) => <div key={h} className="opcell oc-human">{h}</div>)}
                </div>
              </div>
            </Reveal>
            <Reveal delay={760}>
              <div className="opjoin">
                <span className="opjoin-line"></span>
                <span className="opjoin-label">layered on top of</span>
                <span className="opjoin-line"></span>
              </div>
            </Reveal>
            <Reveal variant="rise" delay={120}>
              <div className="opband op-ai">
                <div className="opband-side">
                  <span className="opband-tag" style={{ color: 'rgba(255,255,255,0.6)' }}>Automated with AI</span>
                  <span className="opband-sub">time-intensive, repetitive tasks</span>
                </div>
                <div className="opband-cells">
                  {auto.map((a) => <div key={a} className="opcell oc-ai">{a}</div>)}
                </div>
              </div>
            </Reveal>
          </div>

          {/* Findings */}
          <Reveal variant="scale" delay={300}>
            <div className="fcard" style={{ padding: 'clamp(22px,2.4vw,34px)', display: 'flex', flexDirection: 'column', gap: 16, borderColor: 'rgba(145,209,11,0.35)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--lime)' }}></span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--lime)' }}>Findings</span>
              </div>
              <p className="body" style={{ fontSize: 'clamp(16px,1.35vw,19px)', color: '#fff', margin: 0 }}>Everyone will have the tools. Efficiency and volume gains don’t come from AI alone, they come from:</p>
              {findings.map((f, i) => (
                <div key={i} style={{ borderTop: '1px solid rgba(255,255,255,0.14)', paddingTop: 14, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'start' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--lime)' }}>0{i + 1}</span>
                  <p className="body" style={{ fontSize: 15.5, margin: 0 }}>{f}</p>
                </div>
              ))}
              <p className="body" style={{ fontSize: 'clamp(15px,1.25vw,17.5px)', margin: 0, color: 'var(--lime)', borderTop: '1px solid rgba(255,255,255,0.14)', paddingTop: 14 }}>The savings aren’t a tool you buy. They’re a system you build, and we’ve already built it.</p>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        .opband{ display:grid; grid-template-columns: clamp(120px,11vw,160px) 1fr; gap:clamp(12px,1.4vw,18px); align-items:center; border-radius:16px; padding:clamp(14px,1.6vw,20px); }
        .op-human{ border:1px solid rgba(145,209,11,0.45); background:rgba(145,209,11,0.07); }
        .op-ai{ border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03); }
        .opband-side{ display:flex; flex-direction:column; gap:5px; justify-content:center; }
        .opband-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
        .opband-sub{ font-size:12.5px; line-height:1.35; color:rgba(255,255,255,0.45); }
        .opband-cells{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
        .opcell{ border-radius:11px; padding:clamp(14px,1.6vw,20px) clamp(10px,1.2vw,16px); font-family:var(--font-serif); font-weight:500; letter-spacing:-0.01em; font-size:clamp(15px,1.3vw,20px); line-height:1.2; display:flex; align-items:center; justify-content:center; text-align:center; min-height:clamp(56px,6vw,84px); }
        .oc-human{ background:rgba(145,209,11,0.13); color:#fff; border:1px solid rgba(145,209,11,0.35); }
        .oc-ai{ background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.85); border:1px solid rgba(255,255,255,0.10); }
        .opjoin{ display:flex; align-items:center; gap:12px; padding:12px clamp(14px,1.6vw,20px); }
        .opjoin-line{ flex:1; height:1px; background:rgba(255,255,255,0.16); }
        .opjoin-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,0.45); }
        @media (max-width: 960px){
          .learnedgrid{ grid-template-columns:1fr !important; }
          .opband{ grid-template-columns:1fr; }
          .opband-cells{ grid-template-columns:1fr; }
        }
      `}</style>
    </section>
  );
}

function TDUnlock() {
  return (
    <section className="section dark" id="td-unlock" data-rail="The upside" data-tone="dark">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">What this unlocks for Samsung</Reveal></p>
        <Split tag="h2" className="display sm" text={'TD earns the discipline. Samsung earns the upside.'} style={{ color: '#fff', maxWidth: '17ch' }} />

        <div className="grid unlockgrid" style={{ gridTemplateColumns: '1fr 1fr', gap: 'clamp(18px,2.4vw,32px)', marginTop: 'clamp(40px,6vh,72px)', alignItems: 'stretch' }}>
          <Reveal variant="rise" delay={120}>
            <div className="fcard" style={{ padding: 'clamp(22px,2.4vw,34px)', height: '100%', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ background: '#fff', borderRadius: 8, padding: '6px 10px' }}><img src="assets/logo-td.png" alt="TD" style={{ height: 18, width: 'auto', display: 'block' }} /></div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>The discipline</span>
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(52px,6vw,96px)', lineHeight: 1, letterSpacing: '-0.02em', color: 'rgba(255,255,255,0.85)' }}>20%</div>
              <p className="body" style={{ fontSize: 'clamp(14.5px,1.2vw,17px)', margin: 0 }}>TD’s ask of its agency partners: take 20% out of production, carried inside a regulated bank’s guardrails.</p>
            </div>
          </Reveal>
          <Reveal variant="rise" delay={280}>
            <div style={{ border: '1px solid rgba(145,209,11,0.5)', background: 'rgba(145,209,11,0.07)', borderRadius: 18, padding: 'clamp(22px,2.4vw,34px)', height: '100%', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <img src="assets/samsung-logo-white.png" alt="Samsung" style={{ height: 16, width: 'auto', display: 'block' }} />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--lime)' }}>The upside</span>
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(52px,6vw,96px)', lineHeight: 1, letterSpacing: '-0.02em', color: 'var(--lime)' }}>80%</div>
              <p className="body" style={{ fontSize: 'clamp(14.5px,1.2vw,17px)', margin: 0, color: 'rgba(255,255,255,0.88)' }}>Samsung isn’t carrying what TD carries. You’re able to go AI-first, and that’s the difference between 20% and 80%.</p>
            </div>
          </Reveal>
        </div>

        <Reveal delay={440} style={{ marginTop: 'clamp(32px,5vh,52px)', maxWidth: 820 }}>
          <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(22px,2.4vw,34px)', lineHeight: 1.18, letterSpacing: '-0.015em', color: '#fff', margin: 0 }}>It’s not about who has the tools. It’s about the operating system, <span className="hl">built agentic and AI-first.</span></p>
        </Reveal>
        <Reveal delay={560} style={{ marginTop: 'clamp(18px,3vh,28px)' }}>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(11px,1vw,13px)', letterSpacing: '0.04em', color: 'rgba(255,255,255,0.55)', margin: 0, display: 'flex', alignItems: 'center', gap: 10 }}>This isn’t a false promise, it’s what we achieve today <span style={{ display: 'inline-flex' }}><Ico name="arrowRight" size={16} color="var(--lime)" /></span> <span style={{ color: '#fff' }}>what Flywheel delivered for Nature Fresh</span></p>
        </Reveal>
      </div>
      <style>{`@media (max-width: 860px){ .unlockgrid{ grid-template-columns:1fr !important; } }`}</style>
    </section>
  );
}

function CaseDivider() {
  return (
    <section className="section full ink" id="cases" data-rail="Case studies" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <p className="kicker"><Reveal as="span">Case studies &middot; both ends of the spectrum</Reveal></p>
        <Split tag="h2" className="display" text={'Opposite ends. One partner.'} style={{ color: '#fff', maxWidth: '18ch' }} />
        <Reveal delay={220} style={{ marginTop: 'clamp(48px,9vh,96px)' }}>
          <div className="poles" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(240px,340px) minmax(0,1fr)', columnGap: 'clamp(24px,4vw,64px)', alignItems: 'start' }}>
            {/* TD pole — measured */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(20px,3.4vh,34px)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ background: '#fff', borderRadius: 9, padding: '7px 12px' }}><img src="assets/logo-td.png" alt="TD" style={{ height: 22, width: 'auto', display: 'block' }} /></div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>20 years &middot; regulated</span>
              </div>
              <div>
                {['Measured', 'Risk-averse', 'Regulated'].map((w) => (
                  <div key={w} style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(22px,2.7vw,40px)', lineHeight: 1.16, letterSpacing: '-0.02em', color: 'rgba(255,255,255,0.8)' }}>{w}</div>
                ))}
              </div>
            </div>
            <Reveal variant="rise" delay={5000} style={{ alignSelf: 'center' }}>
            <div style={{ position: 'relative', border: '1px solid var(--lime)', borderRadius: 14, background: 'rgba(145,209,11,0.06)', padding: 'clamp(18px,1.9vw,28px)', textAlign: 'center' }}>
              <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(16px,1.5vw,22px)', lineHeight: 1.3, letterSpacing: '-0.01em', color: '#fff', margin: 0 }}>Samsung will leverage our experience with enterprise matrix orgs, coupled with these challengers who are <span className="hl">unencumbered and disruptive.</span></p>
              <span style={{ position: 'absolute', top: '50%', left: 0, transform: 'translate(-100%,-50%)', paddingRight: 'clamp(6px,1vw,14px)' }}><span style={{ display: 'flex', transform: 'rotate(180deg)' }}><Ico name="arrowRight" size={20} color="var(--lime)" /></span></span>
              <span style={{ position: 'absolute', top: '50%', right: 0, transform: 'translate(100%,-50%)', paddingLeft: 'clamp(6px,1vw,14px)', display: 'flex' }}><Ico name="arrowRight" size={20} color="var(--lime)" /></span>
            </div>
            </Reveal>
            {/* Nature Fresh pole — scrappy */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(20px,3.4vh,34px)', alignItems: 'flex-end', textAlign: 'right' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--lime)' }}>$1B &middot; challenger</span>
                <div style={{ background: '#fff', borderRadius: 9, padding: '7px 12px' }}><img src="assets/logo-naturefresh.png" alt="Nature Fresh Farms" style={{ height: 22, width: 'auto', display: 'block' }} /></div>
              </div>
              <div>
                {['Unencumbered', 'Disruptive', 'Early-adopting'].map((w) => (
                  <div key={w} style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(22px,2.7vw,40px)', lineHeight: 1.16, letterSpacing: '-0.02em', color: 'var(--lime)' }}>{w}</div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Closed-loop diagram (Slide 2) ---------- */
function LoopDiagram() {
  const nodes = [
    { k: 'Standards', d: 'brand · legal · tone', lead: true },
    { k: 'Create', d: 'production at volume' },
    { k: 'Brand & legal', d: 'review gates' },
    { k: 'Approve', d: 'compliant, on-brand' },
    { k: 'Refine', d: 'learnings back in' },
  ];
  const R = 35; // ring radius in viewBox %
  const pos = (i) => { const a = (-90 + i * 72) * Math.PI / 180; return { x: 50 + R * Math.cos(a), y: 50 + R * Math.sin(a) }; };
  const arrows = nodes.map((_, i) => {
    const a = (-90 + i * 72 + 36) * Math.PI / 180;
    const x = 50 + R * Math.cos(a), y = 50 + R * Math.sin(a);
    const rot = (-90 + i * 72 + 36) + 90; // tangent, clockwise
    return { x, y, rot };
  });
  return (
    <Reveal variant="scale" delay={120}>
      <div className="loopwrap">
        <svg viewBox="0 0 100 100" aria-hidden="true">
          <circle cx="50" cy="50" r={R} fill="none" stroke="rgba(255,255,255,0.16)" strokeWidth="0.5" />
          {arrows.map((ar, i) => (
            <g key={i} transform={`translate(${ar.x} ${ar.y}) rotate(${ar.rot})`}>
              <polygon points="-2.1,-2.1 2.7,0 -2.1,2.1" fill="var(--lime)" />
            </g>
          ))}
        </svg>
        <div className="loop-center"><OrbitSVG /></div>
        {nodes.map((n, i) => {
          const p = pos(i);
          const above = Math.sin((-90 + i * 72) * Math.PI / 180) < -0.01;
          return (
            <div key={i} className={`loopnode${n.lead ? ' lead' : ''}${above ? ' above' : ''}`} style={{ left: `${p.x}%`, top: `${p.y}%` }}>
              {above
                ? <React.Fragment><div className="lbl"><div className="nk">{n.k}</div><div className="nd">{n.d}</div></div><div className="dot" /></React.Fragment>
                : <React.Fragment><div className="dot" /><div className="lbl"><div className="nk">{n.k}</div><div className="nd">{n.d}</div></div></React.Fragment>}
            </div>
          );
        })}
        <div className="loop-handoff" style={{ right: '-1%', top: '-2.5%' }}>Governed every cycle</div>
      </div>
    </Reveal>
  );
}

/* ---------- AI-journey meter (Slide 3) ---------- */
function JourneyMeter() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) el.classList.add('in'); }), { threshold: 0.4 });
    io.observe(el); return () => io.disconnect();
  }, []);
  const stages = ['Traditional', 'AI-assisted', 'Governed AI', 'AI-native'];
  const gates = [
    { k: 'Brand governance', d: 'the bar holds at every step' },
    { k: 'Legal & compliance', d: 'regulated sign-off, built in' },
    { k: 'Model governance', d: 'AI adopted safely, on their terms' },
  ];
  return (
    <Reveal variant="scale" delay={100}>
      <div className="vmeter" style={{ paddingTop: 'clamp(54px,4vw,70px)', paddingBottom: 'clamp(54px,4vw,70px)' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 22, gap: 16, flexWrap: 'wrap' }}>
          <span className="td-eyebrow">Where TD is on the curve</span>
          <span className="td-eyebrow" style={{ color: 'var(--lime)' }}>Advising the journey</span>
        </div>
        <div style={{ position: 'relative', height: 32 }}>
          <img src="assets/td-mark.png" alt="TD" style={{ position: 'absolute', left: '40%', bottom: 8, transform: 'translateX(-50%)', height: 24, width: 'auto', display: 'block', borderRadius: 4 }} />
        </div>
        <div ref={ref} className="jtrack">
          <div className="jfill" />
          <span className="jmark" style={{ left: '40%' }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12, gap: 8 }}>
          {stages.map((s, i) => (
            <span key={i} style={{ flex: 1, fontFamily: 'var(--font-mono)', fontSize: 'clamp(9px,0.85vw,11px)', letterSpacing: '0.05em', textTransform: 'uppercase', color: i <= 1 ? 'var(--lime)' : 'rgba(255,255,255,0.4)', textAlign: i === 0 ? 'left' : i === stages.length - 1 ? 'right' : 'center' }}>{s}</span>
          ))}
        </div>
        <p className="body" style={{ fontSize: 14, margin: '28px 0 0' }}>TD is early on the curve. Samsung is already pushing the bleeding edge. We advise TD toward it, one governed step at a time.</p>

        <div className="grid vgates" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(16px,2vw,26px)', marginTop: 'clamp(34px,4.4vh,52px)' }}>
          {gates.map((g, i) => (
            <Reveal key={i} variant="rise" delay={i * 90}>
              <div className="gate">
                <span className="gicon"><Ico name="check" size={14} color="var(--lime)" /></span>
                <div><div className="gk">{g.k}</div><div className="gd">{g.d}</div></div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

/* ---------- TD work wall (film strips, Slide 1) ---------- */
const TD_WALL = Array.from({ length: 15 }, (_, i) => `assets/td-wall/td-${String(i + 1).padStart(2, '0')}.png`);
function WorkWall() {
  const cols = [
    { cls: 'up', items: [0, 3, 6, 9, 12, 1, 4] },
    { cls: 'down', items: [7, 10, 13, 2, 5, 8, 11] },
    { cls: 'up2', items: [14, 4, 9, 0, 6, 12, 3] },
  ];
  return (
    <div className="workwall" aria-hidden="true">
      {cols.map((c, ci) => (
        <div key={ci} className={`wwcol ${c.cls}`}>
          {[...c.items, ...c.items].map((n, i) => (
            <div key={i} className="wwcard"><img src={TD_WALL[n]} alt="" loading="lazy" /></div>
          ))}
        </div>
      ))}
    </div>
  );
}

/* ---------- The work: article / FAQ / schema + machine view (Slide 4) ---------- */
function WorkPanels() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: 'How does TFSA contribution room carry forward?', a: 'Any unused room rolls forward indefinitely and is added to your limit each January, on top of the new annual amount.' },
    { q: 'What happens if I over-contribute?', a: 'Amounts above your available room are taxed at 1% per month until withdrawn, so track your room before depositing.' },
    { q: 'Can I re-contribute after a withdrawal?', a: 'Yes. Withdrawn amounts are added back to your room, but only in the following calendar year.' },
  ];
  return (
    <div className="grid workgrid" style={{ gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 'clamp(16px,2vw,24px)', alignItems: 'start' }}>
      {/* Article */}
      <Reveal variant="scale">
        <div className="workpanel">
          <div className="wp-head"><span>Article · td.com</span><span style={{ color: 'var(--lime-deep)' }}>Published</span></div>
          <div style={{ padding: 18 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--gray-text)', marginBottom: 10 }}>Personal Banking · Investing</div>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 21, lineHeight: 1.12, color: 'var(--ink)', marginBottom: 12 }}>How TFSA contribution room actually works</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {[100, 96, 88, 100, 72].map((w, i) => <div key={i} className="skline" style={{ width: `${w}%` }} />)}
              <div style={{ height: 10 }} />
              {[100, 92, 100, 64].map((w, i) => <div key={i} className="skline" style={{ width: `${w}%` }} />)}
            </div>
          </div>
        </div>
      </Reveal>

      {/* FAQ accordion */}
      <Reveal variant="scale" delay={100}>
        <div className="workpanel">
          <div className="wp-head"><span>FAQ · structured Q&amp;A</span><span style={{ color: 'var(--gray-text)' }}>3 answers</span></div>
          <div style={{ padding: '4px 18px 14px' }}>
            {faqs.map((f, i) => (
              <div key={i} className="faq-item" style={{ borderBottom: i === faqs.length - 1 ? 'none' : undefined }}>
                <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} style={{ cursor: 'pointer' }}>
                  <span>{f.q}</span>
                  <span style={{ color: 'var(--lime-deep)', fontSize: 18, lineHeight: 1, flexShrink: 0 }}>{open === i ? '–' : '+'}</span>
                </div>
                {open === i && <div className="faq-a">{f.a}</div>}
              </div>
            ))}
          </div>
        </div>
      </Reveal>

      {/* Schema */}
      <Reveal variant="scale" delay={200}>
        <div className="workpanel">
          <div className="wp-head"><span>Schema · JSON-LD</span><span style={{ color: 'var(--lime-deep)' }}>FAQPage</span></div>
          <div className="codeblk">{`{
  `}<span className="p">"@context"</span>{`: `}<span className="s">"schema.org"</span>{`,
  `}<span className="p">"@type"</span>{`: `}<span className="k">"FAQPage"</span>{`,
  `}<span className="p">"mainEntity"</span>{`: [{
    `}<span className="p">"@type"</span>{`: `}<span className="k">"Question"</span>{`,
    `}<span className="p">"name"</span>{`: `}<span className="s">"TFSA room?"</span>{`,
    `}<span className="p">"acceptedAnswer"</span>{`: {
      `}<span className="p">"@type"</span>{`: `}<span className="k">"Answer"</span>{`,
      `}<span className="p">"text"</span>{`: `}<span className="s">"Unused room…"</span>{`
    }
  }]
}`}</div>
        </div>
      </Reveal>

      {/* Machine view, spans full width below */}
      <Reveal delay={120} style={{ gridColumn: '1 / -1', marginTop: 'clamp(8px,1.4vh,16px)' }}>
        <div className="aicard">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <Ico name="spark" size={16} color="var(--lime)" />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--lime)' }}>Machine view · AI overview</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 'clamp(16px,3vw,40px)', alignItems: 'center' }} className="tdsplit">
            <p style={{ margin: 0, fontFamily: 'var(--font-serif)', fontSize: 'clamp(17px,1.7vw,22px)', lineHeight: 1.4, color: '#fff' }}>
              “Unused TFSA contribution room carries forward indefinitely and is added to your limit each January.”
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
              <span className="cite-chip"><span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--lime)' }} />Cited from td.com</span>
              <span className="td-eyebrow">Surfaced &amp; quoted by the engine</span>
            </div>
          </div>
        </div>
      </Reveal>
    </div>
  );
}

function EmailCreative() {
  // Native inline render of the Nature Fresh Farms email creative (window.NFFEmail,
  // ported from the original Design Component, no iframe, no scroll override).
  return (
    <div style={{ borderRadius: 18, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.12)', boxShadow: '0 40px 90px rgba(0,0,0,0.42)', background: 'var(--panel-2)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '13px 18px', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--lime)', flexShrink: 0 }} />
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.62)' }}>Email campaign · produced through Flywheel</span>
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: 'rgba(255,255,255,0.32)' }}>Live creative</span>
      </div>
      <div style={{ padding: 'clamp(14px,1.8vw,26px)', background: '#d9dadf' }}>
        <div style={{ width: '62%', margin: '0 auto' }}>
          {window.NFFEmail ? React.createElement(window.NFFEmail) : null}
        </div>
      </div>
    </div>
  );
}

function VersioningCreative() {
  // Native inline render of the adaptive creative engine animation
  // (window.VersioningScene, merged from the original animation source).
  const ref = React.useRef(null);
  const [mountKey, setMountKey] = React.useState(0);
  const wasVisible = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      const e = entries[0];
      if (e.isIntersecting && e.intersectionRatio >= 0.4) {
        if (!wasVisible.current) {
          wasVisible.current = true;
          try { localStorage.setItem('animstage:t', '0'); } catch (err) {}
          setMountKey((k) => k + 1); // remount so the loop restarts from the beginning on focus
        }
      } else if (e.intersectionRatio <= 0.05) {
        wasVisible.current = false;
      }
    }, { threshold: [0, 0.05, 0.4] });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div style={{ borderRadius: 18, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.12)', boxShadow: '0 40px 90px rgba(0,0,0,0.42)', background: 'var(--panel-2)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '13px 18px', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--lime)', flexShrink: 0 }} />
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.62)' }}>Adaptive creative engine · one master, every format</span>
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: 'rgba(255,255,255,0.32)' }}>Scrub · play · pause</span>
      </div>
      <div ref={ref} style={{ position: 'relative', width: '100%', aspectRatio: '1920 / 1150', background: '#0a0a0a', overflow: 'hidden' }}>
        {window.VersioningScene ? React.createElement(window.VersioningScene, { key: mountKey }) : null}
      </div>
    </div>
  );
}

function UpscaleCompare() {
  const { useState, useRef, useEffect, useCallback } = React;
  const [pos, setPos] = useState(50);
  const [manual, setManual] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (manual) return undefined;
    let id; const t0 = performance.now();
    const loop = (t) => { setPos(50 + 48 * Math.sin((t - t0) / 2400)); id = requestAnimationFrame(loop); };
    id = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(id);
  }, [manual]);
  const onMove = useCallback((e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const p = ((e.clientX - r.left) / r.width) * 100;
    setManual(true); setPos(Math.max(0, Math.min(100, p)));
  }, []);
  const onLeave = useCallback(() => setManual(false), []);
  return (
    <div className="upscale-compare" ref={ref} onPointerMove={onMove} onPointerLeave={onLeave} style={{ cursor: 'ew-resize', touchAction: 'none' }}>
      <img className="uc-before" src="assets/nff-collage/upscale-before.png" alt="Before upscaling" />
      <img className="uc-after" src="assets/nff-collage/upscale-after.jpg" alt="After upscaling" style={{ clipPath: `inset(0 ${100 - pos}% 0 0)` }} />
      <span className="uc-tag uc-tag-l">Post-upscale</span>
      <span className="uc-tag uc-tag-r">Pre-upscale</span>
      <div className="uc-divider" style={{ left: pos + '%' }}>
        <div className="uc-handle"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6 3 12l6 6M15 6l6 6-6 6" /></svg></div>
        {!manual && <svg className="uc-cursor" width="22" height="22" viewBox="0 0 24 24"><path d="M5 3l14 7-6 2-2 6z" fill="#fff" stroke="#111" strokeWidth="1.3" strokeLinejoin="round" /></svg>}
      </div>
    </div>
  );
}

function CaseStudies() {
  const cases = window.PITCH.cases;
  const solutionPts = [
    ['Standards live in the system', 'Brand, product knowledge, tone and compliance rules encoded once, so scale never means drift.'],
    ['Review is built in, not bolted on', 'Every asset clears brand and legal gates inside the workflow, never after the fact.'],
    ['Frameworks we built together', 'The guardrails and review loops are shared, and maintained with TD over years.'],
    ['Trust compounds', 'Two decades of clean, on-brand delivery is why TD hands us the volume, and now the advice.'],
  ];
  return (
    <React.Fragment>
      {/* ===== Slide 1, The relationship + work wall ===== */}
      <section className="section full ink" id="cases-detail" data-tone="dark" style={{ overflow: 'hidden' }}>
        <div className="wrap">
          <div className="grid tdsplit" style={{ gridTemplateColumns: 'minmax(0,1fr) minmax(0,0.92fr)', gap: 'clamp(28px,5vw,72px)', alignItems: 'center' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(16px,2.4vh,24px)' }}>
              <p className="kicker"><Reveal as="span">TD · The relationship</Reveal></p>
              <Split tag="h2" className="display sm" text={'Twenty years. Thousands of assets a year.'} style={{ color: '#fff', maxWidth: '15ch' }} />
              <Reveal delay={160}><p className="lead">We have been TD’s production partner for two decades, running 350+ projects a year, tens of thousands of brand-true, compliance-cleared assets across web, campaigns, social and email.</p></Reveal>
              <Reveal delay={260}><p className="body" style={{ fontSize: 'clamp(16px,1.35vw,19px)', color: 'var(--lime)' }}>But the volume is not the point today. It is the trust that volume earned.</p></Reveal>
              <Reveal delay={340} style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 4 }}>
                {['Web', 'Campaigns', 'Social', 'Email', 'Print'].map((c) => <span key={c} className="chip-pill">{c}</span>)}
              </Reveal>
            </div>
            <Reveal variant="scale" delay={160}>
              <WorkWall />
            </Reveal>
          </div>
        </div>
      </section>

      {/* ===== Slide 2, The AI journey ===== */}
      <section className="section ink" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">TD · The AI journey</Reveal></p>
          <Split tag="h2" className="display sm" text={'Now we are guiding their move to AI.'} style={{ color: '#fff', maxWidth: '16ch' }} />
          <div className="grid tdsplit" style={{ gridTemplateColumns: 'minmax(0,0.9fr) minmax(0,1.1fr)', gap: 'clamp(32px,5vw,72px)', marginTop: 'clamp(40px,6vh,72px)', alignItems: 'center' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(16px,2.4vh,24px)' }}>
              <Reveal delay={120}><p className="lead">TD is navigating the use of AI in a very measured way. In a regulated bank, adopting AI is a governance question before it is a creative one.</p></Reveal>
              <Reveal delay={220}><p className="body" style={{ fontSize: 'clamp(16px,1.35vw,19px)' }}>We have become TD’s AI trusted advisor in marketing.</p></Reveal>
            </div>
            <JourneyMeter />
          </div>
        </div>
      </section>

      <TDLearned />

      <Ceiling />

      {/* ===== Nature Fresh, case title ===== */}
      <section className="section ink" id="cases-nf-title" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">Case study · Nature Fresh Farms</Reveal></p>
          <div className="splitgrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.15fr) minmax(0,0.85fr)', gap: 'clamp(28px,5vw,72px)', alignItems: 'start', marginTop: 4 }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(16px,2vw,30px)' }}>
                <img src="assets/nff-collage/nff-barn.png" alt="Nature Fresh Farms" style={{ height: 'clamp(50px,6vw,88px)', width: 'auto', display: 'block', flexShrink: 0 }} />
                <div style={{ flex: '1 1 auto', minWidth: 0 }}>
                  <Split tag="h2" className="display" text={'Nature Fresh Farms.'} style={{ color: '#fff', margin: 0, fontSize: 'clamp(26px,3.6vw,52px)', whiteSpace: 'nowrap' }} />
                </div>
              </div>
              <Reveal delay={160} style={{ marginTop: 22, maxWidth: 560 }}>
                <p className="lead" style={{ color: 'rgba(255,255,255,0.84)' }}>A billion-dollar greenhouse produce brand, one most Canadians have never heard of, and most American households buy every week.</p>
              </Reveal>
              <Reveal delay={260} style={{ marginTop: 26, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                {['Digital', 'Social', 'Email', 'Web', 'Blog'].map((c) => <span key={c} className="chip-pill">{c}</span>)}
              </Reveal>
            </div>
            <Reveal variant="scale" delay={200}>
              <div className="fcard" style={{ padding: 'clamp(20px,2.4vw,32px)' }}>
                {[['$1B+', 'produce brand'], ['U.S.-wide', 'retail distribution'], ['365 days', 'greenhouse-grown supply']].map(([n, l], i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, padding: '16px 0', borderTop: i ? '1px solid rgba(255,255,255,0.1)' : 'none' }}>
                    <span style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(28px,3vw,42px)', color: 'var(--lime)', fontWeight: 500, lineHeight: 1 }}>{n}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', textAlign: 'right', maxWidth: 130 }}>{l}</span>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
          <Reveal delay={300} style={{ marginTop: 'clamp(40px,6vh,72px)' }}>
            <p className="td-eyebrow" style={{ marginBottom: 18 }}>On shelf at the largest US retailers</p>
            <div className="retailwall" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 'clamp(10px,1.2vw,16px)' }}>
              {[
                ['Kroger', 'kroger'], ['Target', 'target'], ['Sam\u2019s Club', 'sams-club'], ['Costco', 'costco'],
                ['Whole Foods Market', 'whole-foods'], ['Giant Eagle', 'giant-eagle'], ['H-E-B', 'heb'], ['Trader Joe\u2019s', 'trader-joes'],
                ['Wegmans', 'wegmans'], ['Giant', 'giant'], ['King Soopers', 'king-soopers'], ['Sysco', 'sysco'],
                ['Heinen\u2019s', 'heinens'], ['Walmart', 'walmart'],
              ].map(([name, slug]) => (
                <div key={slug} style={{ background: '#fff', borderRadius: 12, height: 'clamp(62px,7.6vh,82px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 clamp(14px,1.6vw,22px)' }}>
                  <img src={'assets/nff-collage/logos/' + slug + '.png'} alt={name} style={{ maxHeight: 'clamp(26px,3.2vh,38px)', maxWidth: '100%', width: 'auto', height: 'auto', objectFit: 'contain', display: 'block' }} />
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* ===== Nature Fresh, the challenge ===== */}
      <section className="section ink" id="cases-nf-challenge" data-tone="dark">
        <div className="wrap">
          <div className="splitgrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.9fr) minmax(0,1.1fr)', gap: 'clamp(28px,5vw,72px)', alignItems: 'center' }}>
            <div>
              <p className="kicker"><Reveal as="span">Nature Fresh Farms · the challenge</Reveal></p>
              <Split tag="h2" className="head" text={'Scale, or fall behind.'} style={{ color: '#fff', maxWidth: '12ch' }} />
            </div>
            <div>
              <Reveal delay={140}>
                <p className="lead" style={{ color: 'rgba(255,255,255,0.84)' }}>The digital ecosystem now demands content at a pace and volume no traditional team can match, across every channel and retailer.</p>
              </Reveal>
              <Reveal delay={240} style={{ marginTop: 18 }}>
                <p className="body" style={{ fontSize: 16 }}>Hiring and outsourcing couldn&rsquo;t keep up, or keep costs in check. <span style={{ background: 'var(--lime)', color: 'var(--ink)', fontWeight: 600, padding: '1px 8px', borderRadius: 3, boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' }}>Nature Fresh realized AI was the only way to scale</span> output and manage cost at the same time.</p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Nature Fresh, the solution ===== */}
      <section className="section ink" id="cases-nf-solution" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">The solution</Reveal></p>
          <Split tag="h2" className="head" text={'The Flywheel closed-loop operating model.'} style={{ color: '#fff', maxWidth: '18ch' }} />
          <Reveal delay={140} style={{ marginTop: 20, maxWidth: 660 }}>
            <p className="lead">One operating model that turns a single brief into on-brand assets for every channel, with brand and compliance built into every step, and performance feeding straight back into the next cycle.</p>
          </Reveal>
          <Reveal delay={240} style={{ marginTop: 'clamp(30px,5vh,52px)' }}>
            <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 'clamp(10px,1.4vw,16px)' }}>
              {['Create', 'Brand & compliance', 'Publish', 'Learn'].map((s, i) => (
                <React.Fragment key={s}>
                  <span className="chip-pill">{s}</span>
                  <span style={{ color: 'var(--lime)', fontSize: 18 }}>{i < 3 ? '→' : '↺'}</span>
                </React.Fragment>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* ===== Nature Fresh, creative collage ===== */}
      <section className="section ink" id="cases-nf-collage" data-tone="dark" style={{ overflow: 'hidden' }}>
        <div className="wrap">
          <p className="kicker"><Reveal as="span">Deployed across every channel</Reveal></p>
          <Split tag="h2" className="head" text={'Built once. Everywhere they sell.'} style={{ color: '#fff', maxWidth: '20ch' }} />
          <Reveal delay={140} style={{ marginTop: 20, maxWidth: 620 }}>
            <p className="lead">The same master creative, versioned into a living stream of channel work, email, paid social, web and blog, all on brand.</p>
          </Reveal>
          <Reveal delay={220} variant="scale" style={{ marginTop: 'clamp(48px,8vh,84px)' }}>
            <div className="collstage">
              <div className="colldevice cd-monitor">
                <div className="collmonitor">
                  <div className="collmon-screen">
                    <img src="assets/nff-collage/blog-hiiros.png" alt="Blog creative" style={{ objectPosition: 'top' }} />
                    <img className="collmon-nav" src="assets/nff-collage/nff-nav.png" alt="" />
                  </div>
                  <div className="collmon-stand"></div>
                  <div className="collmon-base"></div>
                </div>
                <span className="colllabel">Blog &middot; web</span>
              </div>
              <div className="colldevice cd-phone cd-left-top">
                <div className="collphone">
                  <div className="collphone-frame">
                    <div className="collphone-screen">
                      <img className="emailimg" src="assets/nff-collage/email-organic-evolved.png" alt="Email creative" />
                    </div>
                  </div>
                </div>
                <span className="colllabel">Email</span>
              </div>
              <div className="colldevice cd-phone cd-left-bot">
                <div className="collphone">
                  <div className="collphone-frame">
                    <div className="collphone-screen">
                      <img className="collscreenfill" src="assets/nff-collage/ig-cooler-cut.png" alt="Organic social creative" />
                    </div>
                  </div>
                </div>
                <span className="colllabel">Organic social</span>
              </div>
              <div className="colldevice cd-phone cd-right">
                <div className="collphone">
                  <div className="collphone-frame">
                    <div className="collphone-screen" style={{ background: '#fff' }}>
                      <div className="igpost">
                        <div className="ig-head">
                          <span className="ig-av"></span>
                          <span className="ig-name">nature_fresh</span>
                        </div>
                        <div className="ig-media">
                          <div className="ig-track">
                            <img src="assets/nff-collage/carousel-1.png" alt="" />
                            <img src="assets/nff-collage/carousel-2.png" alt="" />
                            <img src="assets/nff-collage/carousel-3.png" alt="" />
                            <img src="assets/nff-collage/carousel-4.png" alt="" />
                          </div>
                          <svg className="ig-multi" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><rect x="8" y="3" width="13" height="13" rx="2" /><path d="M3 8v11a2 2 0 0 0 2 2h11" /></svg>
                        </div>
                        <div className="ig-actions">
                          <svg width="17" height="17" viewBox="0 0 24 24" fill="#ed4956" stroke="#ed4956" strokeWidth="1.5"><path d="M12 21s-7-4.5-9.5-9C1 9 2.5 5.5 6 5.5c2 0 3.2 1.2 4 2.3.8-1.1 2-2.3 4-2.3 3.5 0 5 3.5 3.5 6.5C19 16.5 12 21 12 21z" /></svg>
                          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="1.6"><path d="M21 11.5a8.5 8.5 0 0 1-12 7.7L3 21l1.8-6A8.5 8.5 0 1 1 21 11.5z" /></svg>
                          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="1.6"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z" /></svg>
                          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="1.6" style={{ marginLeft: 'auto' }}><path d="M6 3h12v18l-6-4-6 4V3z" /></svg>
                        </div>
                        <div className="ig-dots"><i></i><i></i><i></i><i></i><i className="on"></i></div>
                        <div className="ig-cap"><strong>nature_fresh</strong> The little pepper with big benefits.</div>
                      </div>
                    </div>
                  </div>
                </div>
                <span className="colllabel">Paid social</span>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ===== Nature Fresh, adaptive creative engine ===== */}
      <section className="section ink" id="cases-nf-versioning" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">Flywheel adaptive creative engine</Reveal></p>
          <Reveal delay={120} style={{ marginTop: 18, maxWidth: 640 }}>
            <p className="lead">One master creative, versioned into every format and locale automatically, on brand at every size.</p>
          </Reveal>
          <Reveal variant="scale" delay={200} style={{ marginTop: 'clamp(34px,5vh,56px)' }}>
            <VersioningCreative />
          </Reveal>
        </div>
      </section>

      {/* ===== Nature Fresh, the creative ===== */}
      <section className="section ink" id="cases-nf-work" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">The creative · email</Reveal></p>
          <Reveal delay={120} style={{ marginTop: 18, maxWidth: 640 }}>
            <p className="lead">A complete email campaign, adapted and produced through the Flywheel loop, packshot-true and on brand.</p>
          </Reveal>
          <Reveal variant="scale" delay={200} style={{ marginTop: 'clamp(34px,5vh,56px)' }}>
            <EmailCreative />
          </Reveal>
        </div>
      </section>

      {/* ===== Nature Fresh, the upscaler ===== */}
      <section className="section ink" id="cases-nf-upscale" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">Flywheel · the upscaler</Reveal></p>
          <div className="splitgrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'clamp(28px,5vw,72px)', alignItems: 'center', marginTop: 'clamp(20px,3vh,32px)' }}>
            <div>
              <Split tag="h2" className="head" text={'Zoom in. The illusion has to hold.'} style={{ color: '#fff', maxWidth: '15ch' }} />
              <Reveal delay={160} style={{ marginTop: 'clamp(20px,3.2vh,32px)' }}>
                <p className="lead">AI lifestyle imagery is painted in through inpainting. At a glance it looks flawless. But zoom in and the tell shows: rubbery hands, hair with no strands, fabric with no weave.</p>
              </Reveal>
              <Reveal delay={260} style={{ marginTop: 18 }}>
                <p className="body" style={{ fontSize: 'clamp(15px,1.2vw,17px)' }}>For a brand like Samsung, people <em>will</em> zoom in. The upscaler rebuilds real texture across skin, hair and garments, so the image survives scrutiny at any size.</p>
              </Reveal>
              <Reveal delay={340} style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                {['Skin texture', 'Hair detail', 'Fabric weave', 'Edge repair'].map((c) => <span key={c} className="chip-pill">{c}</span>)}
              </Reveal>
            </div>
            <Reveal variant="scale" delay={200}>
              <UpscaleCompare />
            </Reveal>
          </div>
        </div>
      </section>

      {/* ===== Nature Fresh, the outcomes ===== */}
      <section className="section ink" id="cases-nf" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">The outcomes</Reveal></p>
          <Split tag="h2" className="head" text={'Volume up. Cost down.'} style={{ color: '#fff' }} />
          <Reveal delay={120} style={{ marginTop: 18, maxWidth: 600 }}>
            <p className="lead">More than 100 publish-ready assets a month, on brand, at a fraction of the cost, and only just getting started.</p>
          </Reveal>
          <div className="grid benegrid" style={{ gridTemplateColumns: 'repeat(2, minmax(0,1fr))', gap: 'clamp(20px,3vw,48px)', marginTop: 'clamp(28px,4.5vh,52px)' }}>
            {[
              { big: '6,000+', unit: 'assets per year', note: 'Up from a standing start, now scaling beyond 500 a month post-pilot.' },
              { big: '~73%', unit: 'lower cost per asset', note: 'A 3.7\u00d7 efficiency gain, with the brand bar holding at every step.' },
            ].map((m, i) => (
              <Reveal key={i} variant="scale" delay={i * 120}>
                <div className="fcard" style={{ padding: 'clamp(22px,2.8vw,38px)', height: '100%' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: 'var(--lime)', fontSize: m.big.length > 5 ? 'clamp(28px,3.2vw,46px)' : 'clamp(44px,5vw,72px)', lineHeight: 1, letterSpacing: '-0.01em' }}>{m.big}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginTop: 14 }}>{m.unit}</div>
                  <p className="body" style={{ fontSize: 14.5, marginTop: 14 }}>{m.note}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={200} style={{ marginTop: 28 }}>
            <p className="dim" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em' }}>* Drawn from live Flywheel engagements.</p>
          </Reveal>
        </div>
      </section>
    </React.Fragment>
  );
}

function WinningCombination() {
  return (
    <section className="section full ink" id="winning" data-rail="Why we win" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div className="wrap">
        <p className="kicker"><Reveal as="span">Why we win this</Reveal></p>
        <Split tag="h2" className="display" text={'Both ends. One winning solution.'} style={{ color: '#fff', maxWidth: '18ch' }} />
        <Reveal delay={200} style={{ marginTop: 'clamp(44px,8vh,88px)' }}>
          <div className="poles" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(240px,360px) minmax(0,1fr)', columnGap: 'clamp(24px,4vw,64px)', alignItems: 'center' }}>
            {/* Left source — enterprise */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(12px,1.6vh,18px)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ background: '#fff', borderRadius: 8, padding: '6px 11px' }}><img src="assets/logo-td.png" alt="TD" style={{ height: 18, width: 'auto', display: 'block' }} /></div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>enterprise depth</span>
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(23px,2.9vw,42px)', lineHeight: 1.12, letterSpacing: '-0.02em', color: 'rgba(255,255,255,0.85)' }}>Enterprise matrix experience</div>
              <p className="body" style={{ fontSize: 'clamp(14px,1.15vw,16px)', margin: 0 }}>Twenty years inside regulated, matrixed organizations. We know how the big machine actually works.</p>
            </div>
            {/* Center — Samsung result */}
            <div style={{ position: 'relative', border: '1px solid var(--lime)', borderRadius: 14, background: 'rgba(145,209,11,0.08)', padding: 'clamp(20px,2.2vw,32px)', textAlign: 'center' }}>
              <img src="assets/samsung-logo-white.png" alt="Samsung" style={{ height: 18, width: 'auto', margin: '0 auto clamp(12px,1.6vh,18px)', display: 'block' }} />
              <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(18px,1.7vw,26px)', lineHeight: 1.24, letterSpacing: '-0.01em', color: '#fff', margin: 0 }}>The winning solution for Samsung.</p>
              <span style={{ position: 'absolute', top: '50%', left: 0, transform: 'translate(-100%,-50%)', paddingRight: 'clamp(6px,1vw,14px)', display: 'flex' }}><Ico name="arrowRight" size={20} color="var(--lime)" /></span>
              <span style={{ position: 'absolute', top: '50%', right: 0, transform: 'translate(100%,-50%)', paddingLeft: 'clamp(6px,1vw,14px)' }}><span style={{ display: 'flex', transform: 'rotate(180deg)' }}><Ico name="arrowRight" size={20} color="var(--lime)" /></span></span>
            </div>
            {/* Right source — unencumbered */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(12px,1.6vh,18px)', alignItems: 'flex-end', textAlign: 'right' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--lime)' }}>challenger</span>
                <div style={{ background: '#fff', borderRadius: 8, padding: '6px 11px' }}><img src="assets/logo-naturefresh.png" alt="Nature Fresh Farms" style={{ height: 18, width: 'auto', display: 'block' }} /></div>
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(23px,2.9vw,42px)', lineHeight: 1.12, letterSpacing: '-0.02em', color: 'var(--lime)' }}>Unencumbered. Disruptive.<br />Early-adopting.</div>
              <p className="body" style={{ fontSize: 'clamp(14px,1.15vw,16px)', margin: 0 }}>Companies that move at startup speed and reach for every new tool the moment it lands.</p>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Offer() {
  const get = [
    { kind: 'fcsc' },
    { big: '375', sub: 'Emails including copy & imagery' },
    { big: '~19,000', sub: 'Localized assets for digital, POP, etc.' },
    { big: 'Performance', sub: 'Reporting & optimization built in' },
    { big: '500', sub: 'Localized video assets for digital' },
    { big: '< $80 / asset', sub: 'Economies of scale and AI-content creation efficiencies*' },
  ];
  const provides = [
    'Point of content to manage approvals and feedback cycles',
    'Approved disclaimer copy',
    'Approved English & French copy',
    'Video, product, and logos provided by Samsung are production ready',
    'Complete brand guidelines',
  ];
  const scope = [
    { size: 'XS', bg: '#9fd61a', fg: '#101400', desc: ['Minor copy update (price, offer, disclaimer)', 'OR Resizing', 'OR logo update'], pct: '50%', assets: ['9,500'] },
    { size: 'S', bg: '#5f8f1f', fg: '#ffffff', desc: ['Minor copy update. Plus one of:', 'Resizing', 'Logo Update'], pct: '30%', assets: ['5,700'] },
    { size: 'M', bg: '#41691b', fg: '#ffffff', desc: ['Product removal affecting layout logic', 'OR three minor updates (ex. logo, copy, multiple disclaimers)'], pct: '10%', assets: ['1,900'] },
    { size: 'L', bg: '#33501a', fg: '#cfe0b0', desc: ['1 Product removal / insertion', 'OR video with minor change (ex. logo, copy, disclaimer)'], pct: '5%', assets: ['950 static', '250 video'] },
    { size: 'XL', bg: '#2b3f1c', fg: '#cfe0b0', desc: ['Multiple product removals / insertions', 'OR video with transformation (adding or removing products, scenes, logos)'], pct: '5%', assets: ['950 static', '250 video'] },
    { size: 'email', bg: '#9fd61a', fg: '#101400', desc: ['Copywriting subject line, email, and up to 4 images adapted from global.'], pct: '', assets: ['375'] },
  ];
  return (
    <React.Fragment>
      {/* ===== Samsung, transition ===== */}
      <section className="section full ink" id="samsung-intro" data-rail="For Samsung" data-tone="dark" style={{ overflow: 'hidden' }}>
        <div style={{ position: 'absolute', right: '-12%', top: '50%', transform: 'translateY(-50%)', width: 'min(52vw,620px)', height: 'min(52vw,620px)', opacity: 0.4, pointerEvents: 'none' }}>
          <OrbitSVG ring="rgba(255,255,255,0.12)" dot="rgba(145,209,11,0.5)" dark="rgba(255,255,255,0.22)" />
        </div>
        <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
          <p className="kicker"><Reveal as="span">From proof to practice</Reveal></p>
          <Split tag="h2" className="display" text={'So, how do we get Flywheel working for you?'} style={{ color: '#fff', maxWidth: '15ch' }} />
          <Reveal delay={200} style={{ marginTop: 24, maxWidth: 640 }}>
            <p className="lead">Nature Fresh proves the model. Here is what it looks like for Samsung Canada: what you get, what you provide, and what it takes to run at scale.</p>
          </Reveal>
        </div>
      </section>

      {/* ===== Samsung, the offer ===== */}
      <section className="section ink" id="samsung-offer" data-rail="The offer" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">The offer</Reveal></p>
          <Split tag="h2" className="head" text={'An offer built to compound.'} style={{ color: '#fff', maxWidth: '18ch' }} />
          <Reveal delay={140} style={{ marginTop: 'clamp(16px,2.6vh,24px)', maxWidth: 680 }}>
            <p className="lead">Every $500K invested results in a 5% credit back to SECA, along with the 5% training and thought leadership credit.</p>
          </Reveal>

          <div className="splitgrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.2fr) minmax(0,0.8fr)', gap: 'clamp(28px,4vw,64px)', alignItems: 'stretch', marginTop: 'clamp(36px,6vh,64px)' }}>
            {/* Incentive ladder */}
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--lime)' }}>Credit back to SECA &middot; for every $500K invested</div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 'clamp(12px,1.6vw,24px)', marginTop: 'clamp(20px,3vh,30px)', height: 'clamp(190px,30vh,280px)' }}>
                {[{ inv: '$500K', c: '5%', h: '100%' }, { inv: '$1M', c: '5%', h: '100%' }, { inv: '$1.5M', c: '5%', h: '100%' }].map((t, i) => (
                  <Reveal key={i} variant="rise" delay={i * 120} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', height: '100%' }}>
                    <div style={{ height: t.h, borderRadius: '8px 8px 0 0', background: 'linear-gradient(rgba(145,209,11,0.9), rgba(145,209,11,0.22))', borderTop: '1px solid var(--lime)', borderLeft: '1px solid rgba(145,209,11,0.35)', borderRight: '1px solid rgba(145,209,11,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: '#fff', fontSize: 'clamp(26px,3vw,44px)', lineHeight: 1 }}>{t.c}</span>
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginTop: 12, textAlign: 'center' }}>{t.inv} invested</div>
                  </Reveal>
                ))}
              </div>
            </div>
            {/* SECA training credit */}
            <Reveal variant="scale" delay={200}>
              <div style={{ height: '100%', border: '1px solid var(--lime)', borderRadius: 16, background: 'rgba(145,209,11,0.06)', padding: 'clamp(24px,2.6vw,38px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 14 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>Accessible any time</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: 'var(--lime)', fontSize: 'clamp(52px,6.5vw,96px)', lineHeight: 0.88, letterSpacing: '-0.02em' }}>5%</div>
                <div style={{ fontSize: 'clamp(15px,1.3vw,19px)', color: '#fff', lineHeight: 1.4 }}>Training &amp; thought-leadership credit back to <span className="hl">SECA</span>, reinvested in your team through Bold ai.</div>
              </div>
            </Reveal>
          </div>

          <Reveal delay={360}><p style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'rgba(255,255,255,0.4)', marginTop: 'clamp(20px,3vh,28px)' }}>* Credit tiers illustrative, to be firmed up. &middot; 3-year term commitment.</p></Reveal>
        </div>
      </section>

    </React.Fragment>
  );
}

function Appendix() {
  const scope = [
    { size: 'XS', bg: '#9fd61a', fg: '#101400', desc: ['Minor copy update (price, offer, disclaimer)', 'OR Resizing', 'OR logo update'], pct: '50%', assets: ['9,500'] },
    { size: 'S', bg: '#5f8f1f', fg: '#ffffff', desc: ['Minor copy update. Plus one of:', 'Resizing', 'Logo Update'], pct: '30%', assets: ['5,700'] },
    { size: 'M', bg: '#41691b', fg: '#ffffff', desc: ['Product removal affecting layout logic', 'OR three minor updates (ex. logo, copy, multiple disclaimers)'], pct: '10%', assets: ['1,900'] },
    { size: 'L', bg: '#33501a', fg: '#cfe0b0', desc: ['1 Product removal / insertion', 'OR video with minor change (ex. logo, copy, disclaimer)'], pct: '5%', assets: ['950 static', '250 video'] },
    { size: 'XL', bg: '#2b3f1c', fg: '#cfe0b0', desc: ['Multiple product removals / insertions', 'OR video with transformation (adding or removing products, scenes, logos)'], pct: '5%', assets: ['950 static', '250 video'] },
    { size: 'email', bg: '#9fd61a', fg: '#101400', desc: ['Copywriting subject line, email, and up to 4 images adapted from global.'], pct: '', assets: ['375'] },
  ];
  return (
    <React.Fragment>
      {/* ===== Appendix divider ===== */}
      <section className="section full ink" id="appendix" data-rail="Appendix" data-tone="dark" style={{ overflow: 'hidden' }}>
        <div style={{ position: 'absolute', right: '-12%', top: '50%', transform: 'translateY(-50%)', width: 'min(48vw,560px)', height: 'min(48vw,560px)', opacity: 0.4, pointerEvents: 'none' }}>
          <OrbitSVG ring="rgba(255,255,255,0.12)" dot="rgba(145,209,11,0.5)" dark="rgba(255,255,255,0.22)" />
        </div>
        <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
          <p className="kicker"><Reveal as="span">For reference</Reveal></p>
          <Split tag="h2" className="display" text={'Appendix.'} style={{ color: '#fff' }} />
          <Reveal delay={200} style={{ marginTop: 24, maxWidth: 640 }}>
            <p className="lead">The commercial detail behind the offer: what you get, and how we ramp it into a stable state.</p>
          </Reveal>
        </div>
      </section>

      {/* ===== Appendix, what you get ===== */}
      <section className="section ink" id="samsung-scope" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">The offer</Reveal></p>
          <Reveal><h2 className="head" style={{ color: '#fff', margin: 'clamp(14px,2vh,20px) 0 clamp(26px,4.5vh,48px)' }}>What you get</h2></Reveal>
          <div className="bento" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoRows: 'minmax(clamp(118px,15vh,158px), auto)', gap: 'clamp(12px,1.4vw,20px)' }}>
            <Reveal style={{ gridColumn: '1', gridRow: 'span 2' }}>
              <div className="fcard" style={{ height: '100%', padding: 'clamp(24px,2.6vw,38px)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 24 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--lime)' }}>The engine</span>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(30px,3.6vw,52px)', lineHeight: 1.04, letterSpacing: '-0.01em' }}><span style={{ color: '#fff' }}>Flywheel </span><span style={{ color: 'var(--lime)' }}>Content Supply Chain</span></div>
              </div>
            </Reveal>
            <Reveal delay={80}>
              <div className="fcard" style={{ height: '100%', padding: 'clamp(20px,2.2vw,30px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: 'var(--lime)', fontSize: 'clamp(28px,3.2vw,46px)', lineHeight: 1, letterSpacing: '-0.01em' }}>375</div>
                <div style={{ fontSize: 'clamp(13px,1.05vw,15.5px)', color: 'rgba(255,255,255,0.85)', lineHeight: 1.35 }}>Emails including copy & imagery</div>
              </div>
            </Reveal>
            <Reveal delay={140}>
              <div className="fcard" style={{ height: '100%', padding: 'clamp(20px,2.2vw,30px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: 'var(--lime)', fontSize: 'clamp(28px,3.2vw,46px)', lineHeight: 1, letterSpacing: '-0.01em' }}>~19,000</div>
                <div style={{ fontSize: 'clamp(13px,1.05vw,15.5px)', color: 'rgba(255,255,255,0.85)', lineHeight: 1.35 }}>Localized assets for digital, POP, etc.</div>
              </div>
            </Reveal>
            <Reveal delay={200}>
              <div className="fcard" style={{ height: '100%', padding: 'clamp(20px,2.2vw,30px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: 'var(--lime)', fontSize: 'clamp(28px,3.2vw,46px)', lineHeight: 1, letterSpacing: '-0.01em' }}>Performance</div>
                <div style={{ fontSize: 'clamp(13px,1.05vw,15.5px)', color: 'rgba(255,255,255,0.85)', lineHeight: 1.35 }}>Reporting & optimization built in</div>
              </div>
            </Reveal>
            <Reveal delay={260}>
              <div className="fcard" style={{ height: '100%', padding: 'clamp(20px,2.2vw,30px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: 'var(--lime)', fontSize: 'clamp(28px,3.2vw,46px)', lineHeight: 1, letterSpacing: '-0.01em' }}>500</div>
                <div style={{ fontSize: 'clamp(13px,1.05vw,15.5px)', color: 'rgba(255,255,255,0.85)', lineHeight: 1.35 }}>Localized video assets for digital</div>
              </div>
            </Reveal>
            <Reveal delay={320} style={{ gridColumn: '1 / -1' }}>
              <div className="fcard" style={{ padding: 'clamp(20px,2.4vw,32px)', display: 'flex', alignItems: 'center', gap: 'clamp(18px,3vw,48px)', flexWrap: 'wrap' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: 'var(--lime)', fontSize: 'clamp(34px,4.2vw,60px)', lineHeight: 1, letterSpacing: '-0.01em', flexShrink: 0 }}>&lt; $80 <span style={{ fontSize: '0.42em', color: 'rgba(255,255,255,0.6)' }}>/ asset</span></div>
                <div style={{ fontSize: 'clamp(14px,1.2vw,18px)', color: 'rgba(255,255,255,0.85)', flex: '1 1 300px', lineHeight: 1.45 }}>Economies of scale and AI-content creation efficiencies*</div>
              </div>
            </Reveal>
          </div>
          <Reveal delay={420}><p style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'rgba(255,255,255,0.4)', marginTop: 16 }}>* based on assumptions made, needs to be firmed up</p></Reveal>
        </div>
      </section>

      {/* ===== Appendix, what it looks like in motion ===== */}
      <section className="section ink" id="samsung-motion" data-tone="dark">
        <div className="wrap">
          <Reveal><h2 className="head" style={{ color: '#fff', maxWidth: '24ch' }}><span style={{ color: 'var(--lime)' }}>What it looks like</span> in motion for Samsung</h2></Reveal>
          <div className="splitgrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.85fr) minmax(0,1.25fr)', gap: 'clamp(28px,4vw,56px)', alignItems: 'start', marginTop: 'clamp(28px,5vh,52px)' }}>
            <div>
              <Reveal delay={140}>
                <p className="body" style={{ fontSize: 'clamp(14px,1.15vw,16px)', marginBottom: 14 }}>We don&rsquo;t get there by dropping the full scope on the system at once. We start in a ramp state with a single business unit (or channel), prove the model against a known baseline, then scale iteratively. Each business unit or channel comes onto the system once the one before it is running clean.</p>
                <p className="body" style={{ fontSize: 'clamp(14px,1.15vw,16px)', marginBottom: 14 }}>The scope on the right is the stable state we build toward. The ramp is how we get there without breaking cadence.</p>
                <p className="body" style={{ fontSize: 'clamp(14px,1.15vw,16px)' }}>Each cycle compounds. As volume moves from one business unit to many, throughput rises and unit cost falls.</p>
              </Reveal>
              <Reveal delay={260} style={{ marginTop: 'clamp(18px,3vh,26px)' }}>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(255,255,255,0.55)', lineHeight: 1.7 }}>* 3-year term commitment<br />* 5% innovation and training credit can be used towards leveraging Bold ai resources for AI-related training and thought leadership.</p>
              </Reveal>
            </div>
            <Reveal variant="rise" delay={160}>
              <div style={{ display: 'grid', gridTemplateColumns: '52px 1fr 70px 92px', columnGap: 'clamp(8px,1vw,16px)', alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', paddingBottom: 12, borderBottom: '1px solid rgba(255,255,255,0.18)' }}>
                <span>Size</span><span>Description</span><span style={{ textAlign: 'right' }}>% of Scope</span><span style={{ textAlign: 'right' }}>Est. Assets</span>
              </div>
              {scope.map((r) => (
                <div key={r.size} style={{ display: 'grid', gridTemplateColumns: '52px 1fr 70px 92px', columnGap: 'clamp(8px,1vw,16px)', alignItems: 'center', padding: '13px 0', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
                  <span style={{ background: r.bg, color: r.fg, fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: r.size.length > 2 ? 10 : 13, textTransform: 'uppercase', borderRadius: 6, padding: '6px 0', textAlign: 'center', letterSpacing: '0.02em' }}>{r.size}</span>
                  <span style={{ fontSize: 'clamp(11.5px,0.95vw,13px)', color: 'rgba(255,255,255,0.85)', lineHeight: 1.4 }}>{r.desc.map((l, j) => <span key={j} style={{ display: 'block' }}>{l}</span>)}</span>
                  <span style={{ textAlign: 'right', color: 'var(--lime)', fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600 }}>{r.pct}</span>
                  <span style={{ textAlign: 'right', color: '#fff', fontSize: 13, lineHeight: 1.3 }}>{r.assets.map((l, j) => <span key={j} style={{ display: 'block' }}>{l}</span>)}</span>
                </div>
              ))}
              <div style={{ marginTop: 'clamp(16px,2.4vh,24px)', border: '1px solid rgba(255,255,255,0.16)', borderRadius: 16, padding: 'clamp(16px,2vw,22px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
                <div style={{ border: '1px solid var(--lime)', borderRadius: 8, padding: '10px 16px' }}>
                  <span style={{ color: 'var(--lime)', fontWeight: 700, fontSize: 'clamp(15px,1.4vw,19px)' }}>$1,000,000 to $1,500,000</span>
                  <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13, marginLeft: 8 }}>(excluding taxes)</span>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: '#fff', fontSize: 'clamp(22px,2.4vw,32px)', lineHeight: 1 }}>~19,875</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginTop: 4 }}>assets</div>
                </div>
                <div style={{ flexBasis: '100%', color: 'var(--lime)', fontWeight: 600, fontSize: 'clamp(13px,1.1vw,15px)' }}>* +5% training and thought leadership credit back to SECA</div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function Close() {
  return (
    <section className="section full ink" id="close" data-rail="Questions" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: '-12%', top: '-14%', width: 'min(56vw,680px)', height: 'min(56vw,680px)', opacity: 0.5, pointerEvents: 'none' }}>
        <OrbitSVG ring="rgba(255,255,255,0.14)" dot="rgba(145,209,11,0.55)" dark="rgba(255,255,255,0.28)" />
      </div>
      <div className="wrap center" style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <Reveal><div style={{ width: 90, height: 90, marginBottom: 36 }}><OrbitSVG ring="rgba(255,255,255,0.32)" /></div></Reveal>
        <Split tag="h2" className="display" text={'Let\u2019s crank the flywheel.'} style={{ color: '#fff' }} />
        <Reveal delay={250} style={{ marginTop: 28, maxWidth: 560 }}>
          <p className="lead" style={{ textAlign: 'center' }}>Thank you, Samsung Canada. We'd love to take your questions, and <span style={{ background: 'var(--lime)', color: '#000', padding: '0.05em 0.28em', borderRadius: 3, boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' }}>mobilize your flywheel.</span></p>
        </Reveal>
        <Reveal delay={420} style={{ marginTop: 44 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 26, flexWrap: 'wrap', justifyContent: 'center' }}>
            <img src="assets/flywheel-logo-white.png" alt="Flywheel" style={{ height: 34 }} />
            <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: 22 }}>×</span>
            <img src="assets/samsung-logo-white.png" alt="Samsung" style={{ height: 26 }} />
          </div>
        </Reveal>
        <Reveal delay={560} style={{ marginTop: 40 }}>
          <a href="#cover" className="btn btn-lime">Back to top <Ico name="arrowRight" size={16} color="#101010" /></a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { PaperTrail, CaseStudies, WinningCombination, Offer, Appendix, Close });
