/* Cover · What is Flywheel · Who's in the room */

function Cover() {
  return (
    <section className="section full ink" id="cover" data-rail="Cover" data-tone="dark"
      style={{ overflow: 'hidden', paddingTop: 120, paddingBottom: 90 }}>
      {/* background orbit (crisp vector), dropped back + dissolved into a gradient veil */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', right: '-15%', top: '52%', transform: 'translateY(-50%)', width: 'min(58vw, 660px)', height: 'min(58vw, 660px)', opacity: 0.55, filter: 'blur(0.4px)' }}>
          <OrbitSVG ring="rgba(255,255,255,0.20)" />
        </div>
        {/* veil: radial bloom from the orbit core + left-to-right fade so it melts into the ink */}
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 120% at 88% 52%, rgba(145,209,11,0.10) 0%, rgba(145,209,11,0.03) 24%, rgba(0,0,0,0) 46%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, var(--ink) 0%, rgba(8,8,8,0.62) 34%, rgba(8,8,8,0) 60%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, var(--ink) 0%, rgba(8,8,8,0) 28%, rgba(8,8,8,0) 72%, var(--ink) 100%)' }} />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 2, alignSelf: 'stretch', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 'clamp(40px,8vh,90px)' }}>
        <div>
          <Split tag="h1" className="display" delay={200}
            text={'Content at the'} style={{ color: '#fff' }} />
          <Split tag="h1" className="display" delay={360}
            text={'speed of brand.'} style={{ color: '#fff' }} />
          <Reveal delay={740} style={{ maxWidth: 640, marginTop: 'clamp(14px,2vh,24px)' }}>
            <p className="lead" style={{ margin: 0 }}>Agentic Content Supply Chain</p>
          </Reveal>
        </div>
        <Reveal delay={980}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(18px,2.4vw,34px)' }}>
            <img src="assets/diamond-logo-white.png" alt="Diamond" style={{ height: 'clamp(28px,4vh,46px)', width: 'auto', display: 'block' }} />
            <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 'clamp(24px,2.6vw,38px)', color: 'var(--lime)', lineHeight: 1 }}>+</span>
            <img src="assets/bold-logo-white.png" alt="Bold ai" style={{ height: 'clamp(30px,4.4vh,50px)', width: 'auto', display: 'block' }} />
          </div>
        </Reveal>
      </div>

      <div style={{ position: 'absolute', bottom: 34, left: 0, right: 0, display: 'flex', justifyContent: 'center', zIndex: 2 }}>
        <div className="scrollcue" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
          Scroll
          <span style={{ animation: 'floaty 2s ease-in-out infinite' }}><Ico name="arrowDown" size={18} color="var(--lime)" /></span>
        </div>
      </div>
    </section>
  );
}

function WhatIs() {
  const facts = [
    { k: 'Any platform', v: 'Email · brand.com · Print · Meta · TikTok · YouTube · LinkedIn' },
    { k: 'One workflow', v: 'Brief → generate → review → deliver' },
    { k: 'Agentic', v: 'Brand & persona Q&A, fully automated' },
  ];
  return (
    <section className="section" id="what" data-rail="What is Flywheel" data-tone="light">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">The opportunity</Reveal></p>
        <Split tag="h2" className="head" text={'So, what is it?'} />
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.1fr) minmax(0,0.9fr)', gap: 'clamp(28px,5vw,80px)', marginTop: 'clamp(34px,6vh,64px)', alignItems: 'start' }} className="whatgrid">
          <Reveal delay={120}>
            <p className="body" style={{ fontSize: 'clamp(20px,2vw,28px)', lineHeight: 1.5, color: 'var(--ink)' }}>
              Samsung isn&rsquo;t alone in this. Every brand producing at modern scale hits the same wall, and we kept running into it. So we built Flywheel: a system that turns that split into an <span className="serif-it" style={{ fontFamily: 'var(--font-serif)', background: 'var(--lime)', color: 'var(--ink)', padding: '1px 9px', borderRadius: 3, boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' }}>operating model</span>. It treats content like a supply chain. <span className="hl">AI agents do the volume</span>, <span className="hl">people hold the brand</span>. The workflow itself is the enablement layer that makes that volume possible, and brand safety is built into it, not bolted on after.
            </p>
          </Reveal>
          <div className="grid" style={{ gap: 14 }}>
            {facts.map((f, i) => (
              <Reveal key={f.k} delay={200 + i * 110}>
                <div className="fcard" style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--lime-deep)' }}>{f.k}</span>
                  <span style={{ fontSize: 16, color: 'var(--text-body)' }}>{f.v}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        <div className="threethings" style={{ marginTop: 'clamp(56px,9vh,104px)', borderTop: '1px solid var(--border-subtle)', paddingTop: 'clamp(34px,5vh,56px)' }}>
          <Reveal>
            <p className="kicker" style={{ marginBottom: 18 }}>What it actually is</p>
            <Split tag="h3" className="head" style={{ fontSize: 'clamp(26px,3.4vw,46px)', maxWidth: '32ch' }} text={'Not a tool you learn. A system that gains momentum.'} />
          </Reveal>
          <div className="ttloop" style={{ display: 'flex', alignItems: 'stretch', gap: 'clamp(14px,1.6vw,26px)', marginTop: 'clamp(36px,5.5vh,64px)' }}>
            {[
              { head: 'You watch it work.', body: 'Every brief, asset and approval in one place you can walk through. Total visibility, no black box.',
                icon: (
                  <span style={{ position: 'relative', width: 24, height: 24, borderRadius: 999, border: '1.5px solid rgba(16,16,16,0.22)', display: 'block', flex: '0 0 auto' }}>
                    <span style={{ position: 'absolute', top: '50%', left: '50%', width: 7, height: 7, transform: 'translate(-50%,-50%)', borderRadius: 999, background: 'var(--lime)' }} />
                  </span>
                ) },
              { head: 'A person stays on the wheel.', body: 'A human sits inside the loop, free to step in, correct and approve. The brand bar holds while volume climbs.',
                icon: (
                  <span style={{ width: 24, height: 24, display: 'block', flex: '0 0 auto' }}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style={{ display: 'block' }}>
                      <circle cx="12" cy="12" r="10.25" stroke="rgba(16,16,16,0.22)" strokeWidth="1.5" />
                      <circle cx="12" cy="12" r="2.8" fill="var(--lime)" />
                      <path d="M12 9.2V2.2M9.6 13.4 3.5 17M14.4 13.4 20.5 17" stroke="rgba(16,16,16,0.3)" strokeWidth="1.4" strokeLinecap="round" />
                    </svg>
                  </span>
                ) },
              { head: 'It gets faster every turn.', body: 'The system stewards what it learns, so each pass sharpens the next. That is the flywheel.',
                icon: (
                  <span className="orbit-spin" style={{ position: 'relative', width: 24, height: 24, borderRadius: 999, border: '1.5px solid rgba(16,16,16,0.22)', display: 'block', flex: '0 0 auto' }}>
                    <span style={{ position: 'absolute', top: -4, left: '50%', width: 6.5, height: 6.5, marginLeft: -3.25, borderRadius: 999, background: 'var(--lime)' }} />
                  </span>
                ) },
            ].map((p, i) => (
              <React.Fragment key={i}>
                {i > 0 && (
                  <div className="ttarrow" style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto', color: 'var(--lime-deep)', alignSelf: 'center' }}>
                    <Ico name="arrowRight" size={22} color="var(--lime-deep)" />
                  </div>
                )}
                <Reveal delay={140 + i * 150} variant="rise" style={{ flex: '1 1 0', minWidth: 0 }}>
                  <div className="fcard" style={{ height: '100%', padding: 'clamp(22px,2.4vw,30px)', display: 'flex', flexDirection: 'column', gap: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--lime-deep)' }}>{['Watch', 'Steer', 'Compound'][i]}</span>
                      {p.icon}
                    </div>
                    <h4 style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(19px,1.8vw,25px)', lineHeight: 1.12, letterSpacing: '-0.015em', color: 'var(--ink)', margin: 0 }}>{p.head}</h4>
                    <p className="body" style={{ marginTop: 2 }}>{p.body}</p>
                  </div>
                </Reveal>
              </React.Fragment>
            ))}
          </div>
          <Reveal delay={560}>
            <p style={{ marginTop: 'clamp(30px,4.5vh,52px)', fontFamily: 'var(--font-serif)', fontSize: 'clamp(19px,1.9vw,26px)', lineHeight: 1.4, letterSpacing: '-0.01em', color: 'var(--ink)', maxWidth: '34ch' }}>
              Watch it. Steer it. <span className="hl">It compounds.</span> That is how you reach 20,000 assets a year without the brand ever slipping.
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Room() {
  const people = window.PITCH.people;
  return (
    <section className="section dark" id="room" data-rail="In the room" data-tone="dark">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">Before we dive in</Reveal></p>
        <Split tag="h2" className="head" text={'Who\u2019s in the room.'} style={{ color: '#fff' }} />
        <div className="grid roomgrid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 'clamp(20px,2.6vw,40px)', marginTop: 'clamp(40px,7vh,72px)', maxWidth: 1040 }}>
          {people.map((p, i) => (
            <Reveal key={p.id} delay={i * 110} variant="rise">
              <div>
                <div style={{ position: 'relative', width: '100%', aspectRatio: '1/1', borderRadius: 12, overflow: 'hidden', marginBottom: 12, background: 'rgba(255,255,255,0.05)' }}>
                  <img src={p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%' }} />
                </div>
                <h3 className="sub" style={{ color: '#fff', fontSize: 'clamp(15px,1.3vw,18px)' }}>{p.name}</h3>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--lime)', margin: '6px 0 0', lineHeight: 1.4 }}>{p.role} · {p.org}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Claim() {
  return (
    <section className="section full ink" id="claim" data-rail="The bar" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div style={{ position: 'absolute', left: '-12%', top: '-14%', width: 'min(48vw,540px)', height: 'min(48vw,540px)', 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.2)" />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <p className="kicker"><Reveal as="span">Where this goes</Reveal></p>
        <Split tag="h2" className="display" text={'You\u2019re about to go where few have gone.'} style={{ color: '#fff', maxWidth: '15ch' }} />
        <Reveal delay={360} style={{ marginTop: 'clamp(34px,6vh,64px)', maxWidth: 760 }}>
          <div style={{ border: '1px solid var(--lime)', borderRadius: 14, padding: 'clamp(20px,2.4vw,32px)', background: 'rgba(145,209,11,0.05)' }}>
            <p className="lead" style={{ color: '#fff', margin: 0 }}>That&rsquo;s not a risk. It&rsquo;s a lead, and our job is to help you keep it, with a team and a system built for exactly this.</p>
          </div>
        </Reveal>
        <Reveal delay={480} style={{ marginTop: 'clamp(22px,3.5vh,30px)', maxWidth: 760 }}>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(12px,1.05vw,14px)', letterSpacing: '0.02em', color: 'rgba(255,255,255,0.55)', margin: 0 }}>Anyone who tells you this is a solved, off-the-shelf service hasn&rsquo;t actually been here. <span style={{ color: 'var(--lime)' }}>We have.</span></p>
        </Reveal>
      </div>
    </section>
  );
}

function WhyFlywheel() {
  return (
    <section className="section full ink" id="whyflywheel" data-rail="Why Flywheel" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: '-12%', top: '50%', transform: 'translateY(-50%)', width: 'min(50vw,600px)', height: 'min(50vw,600px)', opacity: 0.35, 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 answer</Reveal></p>
        <Split tag="h2" className="display" text={'It\u2019s why we built Flywheel.'} style={{ color: '#fff', maxWidth: '15ch' }} />
        <div style={{ marginTop: 'clamp(30px,5.5vh,52px)', display: 'flex', flexDirection: 'column', gap: 'clamp(12px,2vh,20px)' }}>
          <Reveal delay={220}><p style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(28px,3.8vw,50px)', lineHeight: 1.05, letterSpacing: '-0.02em', color: '#fff', margin: 0 }}>Flywheel is a <span className="hl">tool</span>.</p></Reveal>
          <Reveal delay={340}><p style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(28px,3.8vw,50px)', lineHeight: 1.05, letterSpacing: '-0.02em', color: '#fff', margin: 0 }}>It&rsquo;s also an <span className="hl">operating model</span>, run by humans.</p></Reveal>
          <Reveal delay={460}><p style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(28px,3.8vw,50px)', lineHeight: 1.05, letterSpacing: '-0.02em', color: '#fff', margin: 0 }}>Every turn <span className="hl">compounds efficiency</span>.</p></Reveal>
        </div>
      </div>
    </section>
  );
}

function TheAsk() {
  const outcomes = [
    { pre: 'Increase', hl: 'efficiency' },
    { pre: 'Accelerate', hl: 'creative production' },
    { pre: 'Unlock significant', hl: 'cost savings' },
  ];
  return (
    <section className="section full" id="ask" data-rail="Your ask" data-tone="light">
      <div className="wrap">
        <div className="whatgrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.82fr) minmax(0,1.18fr)', gap: 'clamp(28px,5vw,80px)', alignItems: 'start' }}>
          <div>
            <p className="kicker"><Reveal as="span">Your ask</Reveal></p>
            <Reveal delay={120}>
              <p style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(11px,1vw,13px)', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--text-muted)', margin: 0 }}>Small</p>
              <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: 'var(--ink)', fontSize: 'clamp(22px,2.6vw,34px)', lineHeight: 1.12, letterSpacing: '-0.015em', margin: '12px 0 0', maxWidth: '16ch' }}>Help us make more content, faster.</p>
            </Reveal>
          </div>
          <div>
            <Reveal>
              <p style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(11px,1vw,13px)', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--lime-deep)', margin: '0 0 20px' }}>Big</p>
            </Reveal>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(12px,2vh,20px)' }}>
              {outcomes.map((o, i) => (
                <Reveal key={i} delay={140 + i * 130}>
                  <h2 className="head" style={{ fontSize: 'clamp(28px,3.6vw,52px)' }}>{o.pre} <span className="hl">{o.hl}</span>.</h2>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Constraints() {
  const stats = [
    { num: <CountUp to={19000} dur={1800} />, label: 'assets a year' },
    { num: '6', label: 'peak weeks' },
    { num: '3', label: 'hard launch cycles' },
    { num: '0', label: 'flexibility', punch: true },
  ];
  return (
    <section className="section ink" id="constraints" data-rail="The reality" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div className="wrap">
        <p className="kicker"><Reveal as="span">The reality</Reveal></p>
        <Split tag="h2" className="head" text={'This is the machine you feed.'} style={{ color: '#fff', maxWidth: '18ch' }} />
        <div className="benegrid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'clamp(18px,2.6vw,44px)', marginTop: 'clamp(40px,7vh,80px)' }}>
          {stats.map((s, i) => (
            <Reveal key={i} variant="rise" delay={i * 130}>
              <div style={{ borderTop: '2px solid rgba(255,255,255,0.16)', paddingTop: 20 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(52px,6.4vw,100px)', lineHeight: 0.9, letterSpacing: '-0.03em', color: s.punch ? '#fff' : 'var(--lime)' }}>{s.num}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(11px,1vw,13px)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginTop: 16 }}>{s.label}</div>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={560} style={{ marginTop: 'clamp(30px,4.5vh,52px)' }}>
          <p className="lead" style={{ maxWidth: '52ch' }}>Six peak weeks. Three hard launch cycles. A calendar with <span className="hl">zero</span> room to slip. Volume like this breaks any workflow built for less.</p>
        </Reveal>
      </div>
    </section>
  );
}

function EmailChaos() {
  const threads = [
    'RE: RE: FWD: Q4 hero - FINAL_v7 (2).psd',
    'RE: which logo is the approved one?? deadline today',
    'FWD: carrier legal copy - pls confirm ASAP',
    'RE: RE: RE: wrong size again - see attached',
  ];
  return (
    <section className="section" id="emailchaos" data-rail="Over email" data-tone="light">
      <div className="wrap">
        <div className="whatgrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'clamp(28px,5vw,72px)', alignItems: 'center' }}>
          <div>
            <p className="kicker"><Reveal as="span">How it works today</Reveal></p>
            <Split tag="h2" className="head" text={'Four agencies. Managed over email.'} style={{ maxWidth: '13ch' }} />
            <Reveal delay={240} style={{ marginTop: 'clamp(22px,3.5vh,34px)' }}>
              <p className="lead">No single source of truth. Every brief, every version, every approval scattered across inboxes, where the brand quietly leaks and the calendar slips.</p>
            </Reveal>
          </div>
          <Reveal delay={200} variant="scale">
            <div style={{ background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 14, boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '13px 16px', borderBottom: '1px solid var(--border-subtle)' }}>
                <span style={{ width: 10, height: 10, borderRadius: 999, background: '#f0603f' }} />
                <span style={{ width: 10, height: 10, borderRadius: 999, background: '#f5b93d' }} />
                <span style={{ width: 10, height: 10, borderRadius: 999, background: '#4fb56a' }} />
                <span style={{ marginLeft: 10, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Inbox &middot; 214 unread</span>
              </div>
              <div>
                {threads.map((t, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '15px 16px', borderBottom: i < threads.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}>
                    <Ico name="mail" size={16} color="var(--text-muted)" />
                    <span style={{ fontSize: 14, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function BoldStoryIntro() {
  return (
    <section className="section full ink" id="boldstory" data-rail="Our Bold story" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div style={{ position: 'absolute', left: '-14%', bottom: '-16%', width: 'min(46vw,520px)', height: 'min(46vw,520px)', opacity: 0.26, pointerEvents: 'none' }}>
        <OrbitSVG />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <p className="kicker"><Reveal as="span">Our Bold ai story</Reveal></p>
        <Split tag="h2" className="display" text={'We saw this coming a year ago.'} style={{ color: '#fff', maxWidth: '16ch' }} />
        <Reveal delay={320} style={{ marginTop: 'clamp(24px,4vh,38px)', maxWidth: 640 }}>
          <p className="lead">We didn&rsquo;t bolt AI onto an agency and hope. We rebuilt the whole company around it, and learned the hard way what that actually takes.</p>
        </Reveal>
      </div>
    </section>
  );
}

function BoldStoryTitle() {
  return (
    <section className="section full ink" id="boldstory" data-rail="Our Bold story" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div style={{ position: 'absolute', left: '-14%', bottom: '-16%', width: 'min(46vw,520px)', height: 'min(46vw,520px)', opacity: 0.26, pointerEvents: 'none' }}>
        <OrbitSVG />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <Split tag="h2" className="display" text={'Our Bold story'} style={{ color: '#fff', maxWidth: '14ch' }} />
      </div>
    </section>
  );
}

function BionicDiamond() {
  const beats = [
    { t: '5 yrs ago', h: 'Before anyone knew ChatGPT' },
    { t: 'The retrofit', h: 'We made the agency “bionic”' },
  ];
  return (
    <section className="section dark" id="bionic" data-rail="Bionic Diamond" data-tone="dark">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">The first attempt</Reveal></p>
        <Split tag="h2" className="head" text={'Introducing Bionic Diamond.'} style={{ color: '#fff', maxWidth: '16ch' }} />
        <div className="benegrid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'clamp(20px,3vw,56px)', marginTop: 'clamp(34px,6vh,64px)' }}>
          {beats.map((b, i) => (
            <Reveal key={i} variant="rise" delay={i * 140}>
              <div style={{ borderTop: '2px solid rgba(255,255,255,0.16)', paddingTop: 18 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--lime)' }}>{b.t}</span>
                <h3 className="sub" style={{ color: '#fff', fontSize: 'clamp(19px,1.8vw,26px)', margin: '14px 0 10px' }}>{b.h}</h3>
                {b.b && <p className="body">{b.b}</p>}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function AiFirstQuote() {
  return (
    <section className="section full ink" id="aifirst" data-rail="AI-first" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: '-12%', top: '50%', transform: 'translateY(-50%)', width: 'min(50vw,600px)', height: 'min(50vw,600px)', opacity: 0.3, pointerEvents: 'none' }}>
        <OrbitSVG />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <p className="kicker"><Reveal as="span">What Bionic taught us</Reveal></p>
        <Split tag="h2" className="display sm" text={'You don\u2019t become AI-first by adding AI. You become AI-first by building the organization around it from day one.'} style={{ color: '#fff', maxWidth: '18ch' }} />
      </div>
    </section>
  );
}

function IntroBoldAi() {
  const focus = [
    { k: 'AI search', n: 'Already in test with Samsung' },
    { k: 'Enterprise transformation', n: 'AI-first operating models' },
    { k: 'Agentic content supply chain', n: 'Our product, Flywheel', on: true },
  ];
  return (
    <section className="section ink" id="boldai" data-rail="Bold ai" data-tone="dark" style={{ overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: '-14%', top: '-16%', width: 'min(46vw,520px)', height: 'min(46vw,520px)', opacity: 0.24, pointerEvents: 'none' }}>
        <OrbitSVG />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <p className="kicker"><Reveal as="span">One year ago today</Reveal></p>
        <Split tag="h2" className="display sm" text={'So we built Bold ai.'} style={{ color: '#fff', maxWidth: '16ch' }} />
        <Reveal delay={220} style={{ marginTop: 'clamp(22px,3.5vh,34px)', maxWidth: 680 }}>
          <p className="lead">A separate, AI-native company.<br />~30 people, no legacy process to protect. Purpose-built AI products, with humans staffed <span className="hl">around the workflow</span>, not the other way around.</p>
        </Reveal>

        <Reveal delay={420} style={{ marginTop: 'clamp(36px,6vh,64px)' }}>
          <p className="kicker" style={{ marginBottom: 16 }}>Bold builds in three areas</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'clamp(10px,1.4vw,16px)' }}>
            {focus.map((f) => (
              <div key={f.k} style={{ flex: '1 1 240px', border: f.on ? '1px solid var(--lime)' : '1px solid rgba(255,255,255,0.16)', background: f.on ? 'rgba(145,209,11,0.06)' : 'transparent', borderRadius: 12, padding: 'clamp(16px,1.8vw,22px)' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(17px,1.6vw,22px)', color: f.on ? 'var(--lime)' : '#fff', lineHeight: 1.1 }}>{f.k}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginTop: 8 }}>{f.n}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Cover, WhatIs, Room, TheAsk, Constraints, EmailChaos, BoldStoryIntro, BoldStoryTitle, BionicDiamond, AiFirstQuote, IntroBoldAi, Claim, WhyFlywheel });