/* The thesis, broken into headline-driven beats, then Samsung's reality.
   POV → two half-truths → the metric → the challenge. */

function Pov() {
  return (
    <section className="section full warm" id="pov" data-rail="Our POV" data-tone="light">
      <div className="wrap">
        <p className="kicker" style={{ marginBottom: 'clamp(20px,3.5vh,36px)' }}><Reveal as="span">Our point of view</Reveal></p>
        <Split tag="h2" className="display" delay={80} text={'AI does the volume.'} style={{ color: 'var(--ink)' }} />
        <Reveal delay={320} style={{ marginTop: 'clamp(4px,1vh,10px)' }}>
          <p className="display" style={{ color: 'var(--ink)', margin: 0 }}>
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', background: 'var(--lime)', color: 'var(--ink)', padding: '0.02em 0.26em', borderRadius: 4, boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' }}>Humans hold the brand.</span>
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function HalfTruthAI() {
  return (
    <section className="section full ink" id="half-ai" data-rail="Half-truths" data-tone="dark">
      <div className="wrap">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 'clamp(24px,5vh,52px)' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--lime)' }}>We&rsquo;ve lived through two half-truths</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.4)' }}>01 / 02</span>
          </div>
        </Reveal>
        <Split tag="h2" className="display" text={'\u201CAI should be able to do it all.\u201D'} style={{ color: '#fff', fontStyle: 'italic', maxWidth: '14ch' }} />
        <Reveal delay={280} style={{ marginTop: 'clamp(26px,4.5vh,46px)', maxWidth: 700 }}>
          <p className="lead" style={{ color: 'rgba(255,255,255,0.86)' }}>Impossible. Push AI alone and it breaks the brand on half the tasks, it gobbles the copy and blows the layout.</p>
        </Reveal>
      </div>
    </section>
  );
}

function HalfTruthProducers() {
  return (
    <section className="section full warm" id="half-producers" data-rail="Half-truths" data-tone="light">
      <div className="wrap">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 'clamp(24px,5vh,52px)' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--tan-deep)' }}>The other half-truth</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em', color: 'var(--tan-border)' }}>02 / 02</span>
          </div>
        </Reveal>
        <Split tag="h2" className="display" text={'\u201CAnyone can just prompt it.\u201D'} style={{ color: 'var(--ink)', fontStyle: 'italic', maxWidth: '15ch' }} />
        <Reveal delay={280} style={{ marginTop: 'clamp(26px,4.5vh,46px)', maxWidth: 760 }}>
          <p className="lead" style={{ color: 'var(--tan-deep)' }}>Not even close. A prompt has no taste. Holding the brand at volume takes <span className="hl">real craft</span>, art direction, design and editing, the judgment a machine can&rsquo;t fake.</p>
        </Reveal>
      </div>
    </section>
  );
}

function Metric() {
  return (
    <section className="section full ink" id="metric" data-rail="The metric" 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.3, 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">The metric that matters</Reveal></p>
        <Split tag="h2" className="display" text={'Assets per human hour.'} style={{ color: '#fff', maxWidth: '16ch' }} />
        <Reveal delay={280} style={{ marginTop: 'clamp(26px,4.5vh,46px)', maxWidth: 740 }}>
          <p className="lead" style={{ color: 'rgba(255,255,255,0.86)' }}>AI does the volume. Humans hold the brand. That combination is what <span style={{ color: 'var(--lime)', fontWeight: 600 }}>bends cost per asset down</span> cycle after cycle, while the brand bar holds. The ratio is the whole game.</p>
        </Reveal>
      </div>
    </section>
  );
}

function Problem() {
  const stats = [
    { v: 19875, dec: 0, label: 'assets a year', sub: 'paid · POP · video · social' },
    { v: 375, dec: 0, label: 'emails', sub: 'before a single variation' },
    { v: 500, dec: 0, label: 'videos a year', sub: 'cuts, captions, aspect ratios' },
  ];
  return (
    <section className="section warm" id="problem" data-rail="The problem" data-tone="light">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">Before the solution, the challenge</Reveal></p>
        <Split tag="h2" className="head" text={'Samsung\u2019s reality, today.'} style={{ maxWidth: '16ch' }} />

        <div className="grid problemstats" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(20px,4vw,56px)', marginTop: 'clamp(28px,5vh,52px)', alignItems: 'start' }}>
          {stats.map((s, i) => (
            <Reveal key={i} variant="rise" delay={i * 120}>
              <div style={{ borderTop: '1px solid var(--tan-border)', paddingTop: 18 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: 'var(--ink)', fontSize: 'clamp(46px,6.5vw,94px)', lineHeight: 0.96, letterSpacing: '-0.01em' }}>
                  <CountUp to={s.v} decimals={s.dec} />
                </div>
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontSize: 'clamp(15px,1.3vw,18px)', fontWeight: 600, color: 'var(--ink)' }}>{s.label}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--tan-deep)', marginTop: 6 }}>{s.sub}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={200} style={{ marginTop: 'clamp(34px,5vh,52px)', maxWidth: 720 }}>
          <p className="body" style={{ fontSize: 'clamp(17px,1.5vw,21px)', color: 'var(--text-body)' }}>
            Every global asset arrives needing retooling: local pricing, products, disclaimers. And all of it is run over <span className="hl">email</span>. One team, thousands of threads, no single source of truth. The volume has outgrown the process.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- The 20-is-not-80 ceiling chart ---------- */
function CeilingChart() {
  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.32 });
    io.observe(el); return () => io.disconnect();
  }, []);
  // geometry (viewBox 0 0 128 88) — y grows downward
  const x0 = 12, x1 = 96, y0 = 74, yTop = 10;
  const yFor = (p) => y0 - p * (y0 - yTop);
  const y20 = yFor(0.20), y80 = yFor(0.80);
  const bolt = `M${x0},${y0} C 44,62 62,${y20} 80,${y20} S ${x1},${y20} ${x1},${y20}`;
  const native = `M${x0},${y0} C 56,74 78,50 ${x1},${y80}`;
  return (
    <div className="ceilwrap" ref={ref} style={{ transform: 'translateY(-60px)' }}>
      <svg viewBox="0 0 128 88" aria-hidden="true">
        {/* frame */}
        <line x1={x0} y1={y0} x2={x1} y2={y0} stroke="rgba(255,255,255,0.18)" strokeWidth="0.5" />
        <line x1={x0} y1={yTop} x2={x0} y2={y0} stroke="rgba(255,255,255,0.12)" strokeWidth="0.5" />
        {/* guide lines */}
        <line className="guide" x1={x0} y1={y20} x2={x1} y2={y20} stroke="rgba(255,255,255,0.28)" strokeWidth="0.4" strokeDasharray="1.6 2" />
        <line className="guide" x1={x0} y1={y80} x2={x1} y2={y80} stroke="rgba(145,209,11,0.42)" strokeWidth="0.4" strokeDasharray="1.6 2" />
        {/* curves */}
        <g className="cv">
          <path className="c-bolt" d={bolt} pathLength="1" stroke="rgba(255,255,255,0.5)" strokeWidth="1.3" strokeDasharray="3 2.4" />
          <path className="c-native" d={native} pathLength="1" stroke="var(--lime)" strokeWidth="1.8" />
        </g>
        {/* endpoints */}
        <circle className="dot d-bolt" cx={x1} cy={y20} r="2" fill="rgba(255,255,255,0.7)" />
        <circle className="dot d-native" cx={x1} cy={y80} r="2.6" fill="var(--lime)" />
      </svg>

      <div className="clab clab-80"><span className="cnum">80%</span><span className="ccap">AI-native</span></div>
      <div className="clab clab-20"><span className="cnum mut">20%</span><span className="ccap">bolt-on</span></div>
      <div className="cyaxis">Efficiency &rarr;</div>
      <div className="caxis">cycles &middot; effort &rarr;</div>

      <style>{`
        .ceilwrap{position:relative;width:100%}
        .ceilwrap svg{display:block;width:100%;height:auto;overflow:visible}
        .ceilwrap .cv path{stroke-linecap:round;fill:none}
        .ceilwrap .c-native{stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.22,.61,.36,1) .15s}
        .ceilwrap.in .c-native{stroke-dashoffset:0}
        .ceilwrap .c-bolt{opacity:0;transition:opacity .9s ease .1s}
        .ceilwrap.in .c-bolt{opacity:1}
        .ceilwrap .dot{opacity:0;transition:opacity .5s ease}
        .ceilwrap.in .d-bolt{opacity:1;transition-delay:.9s}
        .ceilwrap.in .d-native{opacity:1;transition-delay:1.6s}
        .ceilwrap.in .d-native{filter:drop-shadow(0 0 3px rgba(145,209,11,0.8))}
        .ceilwrap .clab{position:absolute;display:flex;flex-direction:column;gap:3px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
        .ceilwrap.in .clab{opacity:1;transform:none}
        .ceilwrap.in .clab-80{transition-delay:1.7s}
        .ceilwrap.in .clab-20{transition-delay:1s}
        .ceilwrap .clab-80{left:78%;top:19%}
        .ceilwrap .clab-20{left:78%;top:60%}
        .ceilwrap .cnum{font-family:var(--font-serif);font-weight:500;font-size:clamp(30px,3.4vw,50px);line-height:.9;letter-spacing:-0.02em;color:var(--lime)}
        .ceilwrap .cnum.mut{color:rgba(255,255,255,0.72)}
        .ceilwrap .ccap{font-family:var(--font-mono);font-size:clamp(9px,0.82vw,11px);letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.55)}
        .ceilwrap .cyaxis{position:absolute;left:6%;top:47%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.4);white-space:nowrap}
        .ceilwrap .caxis{position:absolute;left:9%;top:88%;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.4);white-space:nowrap}
      `}</style>
    </div>
  );
}

function Ceiling() {
  return (
    <section className="section full ink" id="ceiling" data-rail="20 is not 80" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div className="wrap">
        <p className="kicker"><Reveal as="span">The line no one else will draw</Reveal></p>
        <Split tag="h2" className="display" text={'20% is not 80%'} style={{ color: '#fff' }} />
        <div className="splitgrid ceilgrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.92fr) minmax(0,1.08fr)', gap: 'clamp(30px,5vw,72px)', alignItems: 'center', marginTop: 'clamp(30px,5vh,56px)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(16px,2.6vh,26px)' }}>
            <Reveal delay={140}>
              <p className="body" style={{ fontSize: 'clamp(16px,1.4vw,20px)', color: 'rgba(255,255,255,0.86)' }}>Bolt AI onto a traditional agency and you can grind toward <span className="hl">20%</span>. We know the ceiling first-hand: we bolted it onto our own 130-person shop and called it Bionic Diamond. It moved the needle. It never moved past 20.</p>
            </Reveal>
            <Reveal delay={260}>
              <p className="body" style={{ fontSize: 'clamp(16px,1.4vw,20px)', color: 'rgba(255,255,255,0.86)' }}>80% is not more of the same effort. It is a different machine:<br /><span style={{ background: 'var(--lime)', color: 'var(--ink)', fontWeight: 600, padding: '0.02em 0.3em', borderRadius: 4, boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' }}>AI-native</span><br />people compounding, tools compounding, every cycle.</p>
            </Reveal>
            <Reveal delay={380}>
              <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(22px,2.5vw,34px)', lineHeight: 1.08, letterSpacing: '-0.015em', color: '#fff', margin: 0, whiteSpace: 'nowrap' }}>Only AI-native <span className="hl">closes this gap.</span></p>
            </Reveal>
            <Reveal delay={480}>
              <p style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(11px,1vw,13px)', letterSpacing: '0.04em', color: 'rgba(255,255,255,0.55)', margin: 0 }}>The distance between a <span style={{ color: '#fff' }}>20% mandate</span> and an <span style={{ color: 'var(--lime)' }}>80% ambition</span>.</p>
            </Reveal>
          </div>
          <Reveal variant="scale" delay={200}>
            <CeilingChart />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pov, HalfTruthAI, HalfTruthProducers, Metric, Problem, Ceiling });