/* Chapter dividers + the two main chapters: Brand intelligence, Brand-safe Tools */

function ChapterDivider({ n, title, dek, id, rail }) {
  return (
    <section className="section full ink" id={id} data-rail={rail} 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.45, pointerEvents: 'none' }}>
        <OrbitSVG />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <p className="kicker"><Reveal as="span">Chapter {n}</Reveal></p>
        <Reveal variant="clip"><span className="bignum solid" style={{ display: 'block', fontSize: 'clamp(90px,18vw,260px)' }}>{n}</span></Reveal>
        <Split tag="h2" className="display sm" text={title} style={{ color: '#fff', marginTop: 10 }} />
        <Reveal delay={200} style={{ marginTop: 24, maxWidth: 600 }}>
          <p className="lead">{dek}</p>
        </Reveal>
      </div>
    </section>
  );
}

function ChBrand() {
  return (
    <React.Fragment>
      <ChapterDivider n="02" id="ch-brand" rail="02 · Brand intelligence" title={'Brand intelligence.'}
        dek="Everything starts with the brand. Get it exactly right, once, then let every asset inherit it automatically." />
      <section className="section" data-rail="Brand intelligence" data-tone="light">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.85fr) minmax(0,1.15fr)', gap: 'clamp(28px,5vw,72px)', alignItems: 'center' }} className="splitgrid">
            <div>
              <p className="kicker"><Reveal as="span">Brand Analyzer + Brand Kit</Reveal></p>
              <Split tag="h2" className="head" text={'Brand, captured autonomously.'} />
              <Reveal delay={140} style={{ marginTop: 22 }}>
                <p className="body" style={{ fontSize: 'clamp(16px,1.4vw,19px)' }}>Point Flywheel at a URL. The Brand Analyzer ingests it and extracts font, logo, palette and persona fragments on its own. You confirm or pin them in the Brand Kit, and from that moment, it's the single source of truth every generation obeys.</p>
              </Reveal>
              <Reveal delay={260} style={{ marginTop: 24 }}>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                  {['Font', 'Logo', 'Palette', 'Persona', 'Tone of voice'].map((t) => <span key={t} className="chip-pill">{t}</span>)}
                </div>
              </Reveal>
            </div>
            <Reveal variant="scale" delay={120}><BrandAnalyzerMock /></Reveal>
          </div>

          <div style={{ marginTop: 'clamp(48px,9vh,110px)' }}>
            <Reveal>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 22, flexWrap: 'wrap', gap: 12 }}>
                <h3 className="sub">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.__VIDEO01) || 'assets/video_01.mp4'} label="Brand Analyzer + Brand Kit" duration="0:30" light />
            </Reveal>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function UpscalerSim() {
  return (
    <div className="usim">
      <div className="usim-head">
        <span className="usim-dot" />
        <span className="usim-title">Upscaler</span>
        <span className="usim-sub">shown live later</span>
      </div>
      <div className="usim-stage">
        <div className="usim-half usim-before"><img src="assets/nff-collage/upscale-before.png" alt="" /></div>
        <div className="usim-half usim-after"><img src="assets/nff-collage/upscale-after.jpg" alt="" /></div>
        <span className="usim-tag usim-tag-l">Input</span>
        <span className="usim-tag usim-tag-r">Rebuilt</span>
        <span className="usim-arrow">&rarr;</span>
      </div>
      <p className="body" style={{ marginTop: 12, fontSize: 14 }}>Rebuilds real skin, hair and fabric detail, so AI imagery survives a zoom at any size.</p>
      <style>{`
        .usim{ margin-top: 22px; border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:16px; background:rgba(255,255,255,0.02); }
        .usim-head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
        .usim-dot{ width:7px;height:7px;border-radius:999px;background:var(--lime); flex:0 0 auto; }
        .usim-title{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--lime); }
        .usim-sub{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-left:auto; }
        .usim-stage{ position:relative; width:100%; aspect-ratio: 16/7; border-radius:10px; overflow:hidden; background:#0c0c0c; display:flex; }
        .usim-half{ flex:1; position:relative; overflow:hidden; }
        .usim-half img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
        .usim-before img{ filter:blur(0.6px) saturate(0.9) contrast(0.95); }
        .usim-after{ border-left:1px solid rgba(255,255,255,0.3); }
        .usim-arrow{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:999px; background:var(--lime); color:#101010; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; z-index:2; box-shadow:0 4px 14px rgba(0,0,0,0.35); }
        .usim-tag{ position:absolute; bottom:8px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,0.5); padding:3px 7px; border-radius:5px; }
        .usim-tag-l{ left:8px; } .usim-tag-r{ right:8px; color:var(--lime); }
      `}</style>
    </div>
  );
}

function ChTools() {
  return (
    <React.Fragment>
      <ChapterDivider n="03" id="ch-tools" rail="03 · Brand-safe" title={'Brand-compliant by default.'}
        dek="For a brand like Samsung, off-brand is not an option. Two agents make sure nothing slips through." />
      <section className="section dark" data-rail="Brand-safe Tools" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">Persona Lens + Pixel Fix</Reveal></p>
          <Split tag="h2" className="head" text={'Brand-safe, before it ships.'} style={{ color: '#fff', maxWidth: '16ch' }} />
          <Reveal delay={140} style={{ marginTop: 22, maxWidth: 640 }}>
            <p className="lead">One agent reads the content the way your audience and your brand would. The other hunts for the tell-tale flaws of AI. Together, they're the guardrail.</p>
          </Reveal>

          <div className="grid toolsgrid" style={{ gridTemplateColumns: '1fr 1fr', marginTop: 'clamp(34px,6vh,60px)', alignItems: 'stretch' }}>
            <Reveal variant="scale">
              <h3 className="sub" style={{ color: '#fff', fontSize: 'clamp(22px,2vw,30px)', marginBottom: 16 }}>Persona Lens</h3>
              <PersonaLensMock />
              <p className="body" style={{ marginTop: 16, fontSize: 15 }}>Is it on-brand for the target persona, and will it actually perform on social? Two honest, directional reads before anything ships.</p>
              <UpscalerSim />
            </Reveal>
            <Reveal variant="scale" delay={120} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
              <h3 className="sub" style={{ color: '#fff', fontSize: 'clamp(22px,2vw,30px)', marginBottom: 16 }}>Pixel Fix</h3>
              <PixelFixMock stretch />
              <p className="body" style={{ marginTop: 16, fontSize: 15 }}>Detects AI artifacts, garbled text, broken anatomy, melted backgrounds, and suggests the fix. The quality gate clients never see, because it works.</p>
            </Reveal>
          </div>

          <div style={{ marginTop: 'clamp(48px,9vh,110px)' }}>
            <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.__VIDEO03) || 'assets/video_03.mp4'} label="Persona Lens + Pixel Fix" fitVideo />
            </Reveal>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function ChHumanRoles() {
  const roles = [
    ['Creative Oversight', 'Holds the brand bar and owns final creative sign-off.'],
    ['Art Direction', 'Composition, layout and craft the machine can’t fake.'],
    ['Copywriting', 'Message, tone and nuance, on-brand every time.'],
    ['Production Management', 'Keeps the pod moving: intake, versions, delivery.'],
  ];
  return (
    <React.Fragment>
      <ChapterDivider n="04" id="ch-human" rail="04 · Human roles" title={'Human roles that matter.'}
        dek="Models come and go. The constant is a pod of people, working with AI, holding the brand at every step." />
      <section className="section ink" data-rail="Human roles" data-tone="dark">
        <div className="wrap">
          <p className="kicker"><Reveal as="span">A typical pod</Reveal></p>
          <Split tag="h2" className="head" text={'Humans and AI, in one pod.'} style={{ color: '#fff', maxWidth: '16ch' }} />
          <div className="splitgrid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.92fr) minmax(0,1.08fr)', gap: 'clamp(32px,5vw,72px)', alignItems: 'center', marginTop: 'clamp(32px,5vh,56px)' }}>
            <div>
              <Reveal delay={120}>
                <p className="lead">Every project leverages the AI-native pod. AI orchestrates the volume; humans hold the roles that matter, and a person stays in the loop at every step.</p>
              </Reveal>
              <div style={{ marginTop: 'clamp(26px,4vh,40px)', display: 'flex', flexDirection: 'column', gap: 'clamp(14px,2vh,20px)' }}>
                {roles.map((r, i) => (
                  <Reveal key={i} variant="rise" delay={140 + i * 90}>
                    <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'start', borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 14 }}>
                      <span style={{ width: 9, height: 9, borderRadius: 999, background: 'var(--lime)', marginTop: 7 }} />
                      <div>
                        <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, color: '#fff', fontSize: 'clamp(17px,1.5vw,22px)', lineHeight: 1.1 }}>{r[0]}</div>
                        <p className="body" style={{ fontSize: 14.5, margin: '5px 0 0' }}>{r[1]}</p>
                      </div>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
            <Reveal variant="scale" delay={180}>
              <div className="podwrap">
                <div className="pod">
                  <svg className="pod-links" viewBox="0 0 100 100" aria-hidden="true"><g stroke="rgba(145,209,11,0.4)" strokeWidth="0.5" strokeDasharray="2 2"><line x1="50" y1="42" x2="50" y2="27" /><line x1="50" y1="50" x2="37" y2="62" /><line x1="50" y1="50" x2="63" y2="62" /></g></svg>
                  <div className="pod-core"><OrbitSVG ring="rgba(255,255,255,0.18)" dot="rgba(145,209,11,0.7)" dark="rgba(255,255,255,0.28)" /></div>
                  <span className="pod-core-lbl">AI orchestration</span>
                  <div className="pod-node pn-top"><span className="pn-dot" />Copywriting</div>
                  <div className="pod-node pn-bl"><span className="pn-dot" />Art Direction / Design</div>
                  <div className="pod-node pn-br"><span className="pn-dot" />Photo / Video Editing</div>
                </div>
                <div className="pod-lead">
                  <div className="pl-role"><span className="pl-dot" />Producer</div>
                  <div className="pl-mid">Human in the loop<span>shared across pods</span></div>
                  <div className="pl-role"><span className="pl-dot" />Creative Director</div>
                </div>
                <style>{`
                  .podwrap{ width:100%; max-width:460px; margin:0 auto; }
                  .pod{ position:relative; width:100%; aspect-ratio:1; border:1px solid var(--lime); border-radius:999px; background:radial-gradient(circle at 50% 46%, rgba(145,209,11,0.08), rgba(145,209,11,0) 62%); }
                  .pod-links{ position:absolute; inset:0; width:100%; height:100%; }
                  .pod-core{ position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); width:22%; height:22%; }
                  .pod-core svg{ width:100%; height:100%; display:block; }
                  .pod-core-lbl{ position:absolute; top:60%; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.55); white-space:nowrap; }
                  .pod-node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:7px; font-family:var(--font-mono); font-size:clamp(10px,1vw,12.5px); letter-spacing:0.04em; text-transform:uppercase; color:#fff; text-align:center; width:34%; }
                  .pn-dot{ width:11px; height:11px; border-radius:999px; background:var(--lime); box-shadow:0 0 12px rgba(145,209,11,0.5); }
                  .pn-top{ top:15%; left:50%; flex-direction:column-reverse; }
                  .pn-bl{ top:72%; left:24%; }
                  .pn-br{ top:72%; left:76%; }
                  .pod-lead{ margin-top:clamp(18px,2.6vh,26px); border:1px solid rgba(255,255,255,0.16); border-radius:14px; padding:clamp(14px,1.8vw,20px); display:flex; align-items:center; justify-content:space-between; gap:12px; }
                  .pl-role{ display:flex; align-items:center; gap:9px; font-family:var(--font-serif); font-weight:500; color:#fff; font-size:clamp(14px,1.2vw,17px); }
                  .pl-dot{ width:8px; height:8px; border-radius:999px; background:var(--lime); }
                  .pl-mid{ display:flex; flex-direction:column; align-items:center; text-align:center; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--lime); line-height:1.5; }
                  .pl-mid span{ color:rgba(255,255,255,0.4); letter-spacing:0.05em; }
                `}</style>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { ChapterDivider, ChBrand, ChTools, ChHumanRoles });