/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE */
// AI Influencer solutions page — Off camera · Cast from zero · Identity lock · The roster · Their studio.
const { useState: azS } = React;

const AIBadge = ({ label, ac = '#813CED', bg = CREAM }) =>
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 18, borderRadius: 9999, padding: '7px 14px', background: bg, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
    <span style={{ width: 7, height: 7, borderRadius: '50%', background: ac }} />
    <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>{label}</span>
  </div>;

const AISectionShell = ({ label, ac, h1, h2, sub, note, panel, flip = false, lean = 'right', bg = '#fff' }) => (
  <section style={{ background: bg, padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: flip ? '1.1fr 0.9fr' : '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
      <div style={{ order: flip ? 2 : 1 }}>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px', textWrap: 'balance' }}>{h1}<br /><GradText>{h2}</GradText></h2>
        </Reveal>
        <Reveal delay={170}><p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 28px', maxWidth: 420 }}>{sub}</p></Reveal>
        <Reveal delay={250}><CTAButton>Cast your Character</CTAButton></Reveal>
        {note && <Reveal delay={330}><div style={{ marginTop: 26, fontSize: 13, color: 'var(--text-tertiary)' }}>{note}</div></Reveal>}
      </div>
      <Reveal delay={160} y={28} style={{ order: flip ? 1 : 2 }}>
        <div style={{ transform: lean === 'left' ? 'rotate(-1.3deg) perspective(1400px) rotateY(4deg)' : 'rotate(1.3deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>{panel}</div>
      </Reveal>
    </div>
  </section>
);

const AICard = ({ children, pad = 18 }) =>
  <div style={{ borderRadius: 20, background: '#fff', boxShadow: '0 24px 48px rgba(28,27,27,0.14), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: pad }}>{children}</div>;

// ---------- § 01 Off camera ----------
const OffCameraPanel = () => {
  const [ref, on] = useReveal(0.35);
  return (
    <AICard>
      <div ref={ref} style={{ display: 'grid', gridTemplateColumns: '0.9fr 44px 1.1fr', gap: 10, alignItems: 'center' }}>
        <div style={{ borderRadius: 14, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 14 }}>
          <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', marginBottom: 10 }}>You · the director</div>
          <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'rgb(235,231,231)', display: 'grid', placeItems: 'center', margin: '0 auto 10px' }}>
            <svg width="20" height="20" viewBox="0 0 16 16" fill="none"><path d="M5 7V5.5a3 3 0 016 0V7M4 7h8v6H4z" stroke="rgba(28,27,27,0.5)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </div>
          {[['Your face', 'Never used'], ['Your name', 'Private'], ['Your day job', 'None the wiser']].map(([k, v]) =>
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 8, padding: '6px 0', borderTop: '1px solid rgba(28,27,27,0.06)' }}>
              <span style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>{k}</span>
              <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>{v}</span>
            </div>)}
        </div>
        <svg width="44" height="22" viewBox="0 0 40 20" style={{ justifySelf: 'center' }}>
          <line x1="2" y1="10" x2="32" y2="10" stroke="#813CED" strokeWidth="2" strokeDasharray="3 6" strokeLinecap="round" style={{ animation: 'sz-dash 1.2s linear infinite' }} />
          <path d="M30 4l8 6-8 6" fill="none" stroke="#813CED" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <div style={{ borderRadius: 14, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--brand-purple-700)' }}>Them · the spotlight</span>
            <span style={{ fontSize: 9.5, fontWeight: 700, color: INK }}>@scarlett.day</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 5, marginBottom: 10 }}>
            {[1, 2, 3, 4, 5, 6].map((n, i) =>
              <span key={n} style={{ position: 'relative', borderRadius: 7, overflow: 'hidden', aspectRatio: '1' }}>
                <img loading="lazy" decoding="async" src={`assets/spotlight/s${n}.webp`} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 16%',
                  opacity: on ? 1 : 0, transition: `opacity 0.45s ${SB_EASE} ${i * 70}ms` }} />
              </span>)}
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <span style={{ fontSize: 10.5, fontWeight: 800, color: INK }}>128k <span style={{ fontWeight: 600, color: 'rgba(28,27,27,0.5)' }}>followers</span></span>
            <span style={{ fontSize: 10.5, fontWeight: 800, color: INK }}>6 <span style={{ fontWeight: 600, color: 'rgba(28,27,27,0.5)' }}>platforms</span></span>
          </div>
        </div>
      </div>
      <div style={{ marginTop: 12, fontSize: 11.5, color: 'var(--text-secondary)' }}>They take the comments, the DMs and the recognition. You take the direction — and the upside.</div>
    </AICard>);
};

// ---------- § 02 Cast from zero ----------
const AI_VIBES = ['Soft glam', 'Y2K', 'Coastal', 'Gym girl', 'After dark'];
const AI_CANDS = [GENS[2], GENS[5], GENS[6]];

const CastPanel = () => {
  const [vibe, setVibe] = azS(0);
  const [pick, setPick] = azS(0);
  return (
    <AICard>
      <div style={{ display: 'flex', gap: 6, marginBottom: 12, flexWrap: 'wrap' }}>
        {AI_VIBES.map((v, i) =>
          <span key={v} onClick={() => setVibe(i)} style={{ borderRadius: 9999, padding: '7px 13px', fontSize: 11, fontWeight: vibe === i ? 700 : 600, cursor: 'pointer', transition: 'all 0.18s',
            background: vibe === i ? INK : 'rgb(246,243,242)', color: vibe === i ? '#fff' : 'rgba(28,27,27,0.6)',
            boxShadow: vibe === i ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>{v}</span>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 9, marginBottom: 13 }}>
        {AI_CANDS.map((g, i) =>
          <div key={i} onClick={() => setPick(i)} style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', aspectRatio: '3/3.8', cursor: 'pointer',
            outline: pick === i ? '2.5px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: -1, transition: `all 0.25s ${SB_EASE}` }}>
            <img loading="lazy" decoding="async" src={g.src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%', filter: pick === i ? 'none' : 'saturate(0.85)' }} />
            <span style={{ position: 'absolute', left: 7, bottom: 7, fontSize: 8.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '2px 8px' }}>Candidate {i + 1}</span>
            {pick === i && <span style={{ position: 'absolute', top: 7, right: 7, width: 18, height: 18, borderRadius: '50%', background: 'var(--brand-purple-500)', display: 'grid', placeItems: 'center' }}>
              <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M3 8.4l3.2 3.2L13.5 4" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg></span>}
          </div>)}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-secondary)', flex: 1 }}>No photos uploaded. No real person referenced. Reroll until they’re right.</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, borderRadius: 9999, padding: '9px 16px', background: PULSE, color: '#fff', fontSize: 10, fontWeight: 800, letterSpacing: '0.05em', flexShrink: 0, boxShadow: '0 8px 20px -4px rgba(104,19,212,0.45)' }}>
          <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M5 7V5.5a3 3 0 016 0V7M4 7h8v6H4z" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>LOCK IDENTITY</span>
      </div>
    </AICard>);
};

// ---------- § 03 Identity lock ----------
const IdentityPanel = () => {
  const [ref, on] = useReveal(0.35);
  return (
    <AICard>
      <div ref={ref}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
          <span style={{ fontSize: 12.5, fontWeight: 700, color: INK }}>Scarlett <span style={{ fontWeight: 600, color: 'var(--text-tertiary)' }}>· one identity, every set</span></span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 9.5, fontWeight: 700, color: '#15803D', background: 'rgba(34,197,94,0.12)', border: '1px solid rgba(34,197,94,0.3)', borderRadius: 9999, padding: '3px 9px' }}>
            <svg width="9" height="9" viewBox="0 0 16 16" fill="none"><path d="M5 7V5.5a3 3 0 016 0V7M4 7h8v6H4z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>Locked</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {[1, 2, 3, 4, 5, 6].map((n, i) =>
            <div key={n} style={{ position: 'relative', borderRadius: 11, overflow: 'hidden', aspectRatio: '3/3.5' }}>
              <img loading="lazy" decoding="async" src={`assets/spotlight/s${n}.webp`} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%',
                opacity: on ? 1 : 0, transition: `opacity 0.5s ${SB_EASE} ${i * 90}ms` }} />
              <span style={{ position: 'absolute', left: 6, bottom: 6, fontSize: 8, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '2px 7px' }}>Take {n}</span>
            </div>)}
        </div>
        <div style={{ marginTop: 12, fontSize: 11.5, color: 'var(--text-secondary)' }}>Same face, same freckles, same jaw — across thousands of generations. That’s what makes them followable.</div>
      </div>
    </AICard>);
};

// ---------- § 05 The roster ----------
const AI_ROSTER = [
  { g: GENS[0], n: 'Scarlett', niche: 'Soft glam · IG + Fanvue', q: '12 queued' },
  { g: GENS[5], n: 'Nova', niche: 'Y2K · TikTok', q: '8 queued' },
  { g: GENS[6], n: 'Mara', niche: 'Fitness · IG + Fansly', q: '15 queued' }];

const RosterPanel = () => (
  <AICard>
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
      <span style={{ fontSize: 12.5, fontWeight: 700, color: INK }}>Your Characters</span>
      <span style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--text-tertiary)' }}>One login · separate worlds</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {AI_ROSTER.map((r) =>
        <div key={r.n} style={{ display: 'flex', alignItems: 'center', gap: 11, borderRadius: 13, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '9px 11px' }}>
          <span style={{ width: 40, height: 40, borderRadius: '50%', overflow: 'hidden', flexShrink: 0, boxShadow: '0 0 0 2px #fff, 0 0 0 3.5px var(--brand-purple-300)' }}>
            <img loading="lazy" decoding="async" src={r.g.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%' }} /></span>
          <span style={{ flex: 1, minWidth: 0 }}>
            <span style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: INK }}>{r.n}</span>
            <span style={{ display: 'block', fontSize: 10, color: 'rgba(28,27,27,0.5)', marginTop: 1 }}>{r.niche}</span>
          </span>
          <span style={{ fontSize: 9.5, fontWeight: 700, color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '3px 10px', flexShrink: 0 }}>{r.q}</span>
          <span style={{ fontSize: 9.5, fontWeight: 700, color: 'rgba(28,27,27,0.5)', flexShrink: 0 }}>Own voice · own library</span>
        </div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, borderRadius: 13, padding: '12px 0', outline: '1.5px dashed rgba(28,27,27,0.18)', outlineOffset: -1, cursor: 'pointer' }}>
        <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'rgb(246,243,242)', display: 'grid', placeItems: 'center' }}>
          <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="rgba(28,27,27,0.55)" strokeWidth="1.8" strokeLinecap="round" /></svg></span>
        <span style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--text-secondary)' }}>Cast another</span>
      </div>
    </div>
  </AICard>
);

const OffCameraSection = () => <AISectionShell label="Off camera" ac="#4D73F2" h1="All the reach." h2="Zero exposure." lean="left"
  sub="Plenty of people want the creator economy without being the content — no recognition at brunch, no doxxing risk, no awkward family group chat. They take the spotlight; you direct from behind it."
  note="Your Characters are private to your account — nobody else can generate with them." panel={<OffCameraPanel />} />;
const CastSection = () => <AISectionShell label="Cast from zero" ac="#C77D3A" h1="Cast them" h2="like a character." flip lean="right" bg={CREAM}
  sub="No photos needed. Pick the look, the world, the voice — a persona designed for the niche instead of adapted to it. Reroll until they’re exactly right, then lock them."
  panel={<window.CharBuilderCard framed={false} />} />;
const IdentitySection = () => <AISectionShell label="Identity lock" ac="#B0489B" h1="Same face." h2="Every single photo." lean="left"
  sub="What kills AI accounts is drift — a slightly different girl every post. Identity lock keeps them recognizable across thousands of generations, which is the whole reason anyone can follow them."
  panel={<IdentityPanel />} />;
const RosterSection = () => <AISectionShell label="The roster" ac="#3A8F6B" h1="Run one." h2="Or run a roster." flip lean="right" bg={CREAM}
  sub="Personas are assets. Operators run several from one login — each with their own look, voice, library, queue and numbers. Test niches; double down on what works."
  note="Agency plans run up to twelve Characters." panel={<RosterPanel />} />;

// ---------- § 06 Monetize — without the work ----------
const AI_MON = [
  { t: 'Brand deals', d: 'Their feed carries the product — Photo Control keeps it pixel-consistent across the whole campaign.', kind: 'deal' },
  { t: 'UGC campaigns', d: 'Brands pay for content, not reach. They shoot studio-grade UGC on demand — no shoot day, no shipping delays.', kind: 'ugc' },
  { t: 'Community', d: 'Subs and DMs on Fanvue and Fansly — welcome messages and re-engagement written in their voice.', kind: 'community' }];

const AIMON_PANEL = { borderRadius: '12px 12px 0 0', background: '#fff', boxShadow: '0 10px 24px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 10, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 6 };

const AIMonMedia = ({ kind }) => (
  <div style={{ height: 200, background: 'rgb(246,243,242)', padding: '16px 16px 0', boxSizing: 'border-box' }}>
    {kind === 'deal' &&
      <div style={AIMON_PANEL}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 28, height: 28, borderRadius: 8, background: '#1C1B1B', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800, color: '#fff', flexShrink: 0 }}>G</span>
          <span style={{ flex: 1, minWidth: 0 }}>
            <span style={{ display: 'block', fontSize: 10.5, fontWeight: 700, color: INK }}>Glow Co. · Collab request</span>
            <span style={{ display: 'block', fontSize: 8.5, color: 'rgba(28,27,27,0.5)' }}>3 posts · product in frame · 30 days</span>
          </span>
          <span style={{ fontSize: 8.5, fontWeight: 700, color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '2px 8px', flexShrink: 0 }}>New</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, flex: 1, minHeight: 0 }}>
          {['assets/control/collar-silver.png', 'assets/shoot/set-2.webp', 'assets/shoot/set-5.webp'].map((src, i) =>
            <div key={src} style={{ position: 'relative', borderRadius: 7, overflow: 'hidden', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
              <img loading="lazy" decoding="async" src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} />
              {i === 0 && <span style={{ position: 'absolute', left: 4, bottom: 4, fontSize: 7, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 6px' }}>The product</span>}
            </div>)}
        </div>
        <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 7, padding: '6px 0', background: PULSE, color: '#fff', fontSize: 8.5, fontWeight: 800, letterSpacing: '0.05em' }}>ACCEPT · QUEUE THE CAMPAIGN</span>
      </div>}
    {kind === 'ugc' &&
      <div style={AIMON_PANEL}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>Campaign · 6 assets</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 8.5, fontWeight: 700, color: '#15803D', background: 'rgba(34,197,94,0.12)', border: '1px solid rgba(34,197,94,0.3)', borderRadius: 9999, padding: '2px 8px' }}>
            <svg width="8" height="8" viewBox="0 0 16 16" fill="none"><path d="M3 8.4l3.2 3.2L13.5 4" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>Delivered · 48h</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, flex: 1, minHeight: 0 }}>
          {[1, 3, 6].map((n, i) =>
            <div key={n} style={{ position: 'relative', borderRadius: 7, overflow: 'hidden' }}>
              <img loading="lazy" decoding="async" src={`assets/spotlight/s${n}.webp`} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%' }} />
              <span style={{ position: 'absolute', left: 4, bottom: 4, fontSize: 7, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 6px' }}>{['4:5', '9:16', 'Story'][i]}</span>
            </div>)}
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          {['No shoot day', 'Brand-safe', 'Usage-ready'].map(c =>
            <span key={c} style={{ borderRadius: 9999, padding: '4px 8px', fontSize: 7.5, fontWeight: 600, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: INK }}>{c}</span>)}
        </div>
      </div>}
    {kind === 'community' &&
      <div style={AIMON_PANEL}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>Fanvue · @scarlett</span>
          <span style={{ fontSize: 8.5, fontWeight: 700, color: 'rgba(28,27,27,0.5)' }}>2,140 subscribers</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, borderRadius: 9, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '7px 9px' }}>
          <span style={{ width: 24, height: 24, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
            <img loading="lazy" decoding="async" src={GENS[0].src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%' }} /></span>
          <span style={{ fontSize: 9, fontWeight: 600, color: INK, flex: 1 }}>New subscriber · welcome DM sent <span style={{ color: 'var(--brand-purple-700)', fontWeight: 700 }}>✦ in their voice</span></span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, borderRadius: 9, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '7px 9px' }}>
          <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--brand-purple-100)', display: 'grid', placeItems: 'center', fontSize: 9, flexShrink: 0 }}>🔔</span>
          <span style={{ fontSize: 9, fontWeight: 600, color: INK, flex: 1 }}>Lapsed subs · re-engagement queued for Friday</span>
        </div>
        <span style={{ marginTop: 'auto', fontSize: 8.5, fontWeight: 600, color: 'var(--text-tertiary)' }}>The audience is hers. The relationship is yours to run.</span>
      </div>}
  </div>
);

const MonetizeSection = () => (
  <section style={{ background: '#fff', padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 46 }}>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px' }}>
            They do the work.<br /><GradText>You keep the upside.</GradText>
          </h2>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto', maxWidth: 520 }}>
            A persona with an audience earns like a creator — deals, campaigns, subscriptions — without you shooting a single photo.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {AI_MON.map((c, i) =>
          <Reveal key={c.t} delay={i * 110} y={26}>
            <div style={{ borderRadius: 18, overflow: 'hidden', background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)',
              transform: `rotate(${i === 1 ? 1 : -1}deg) perspective(1200px) rotateY(${i === 1 ? -2 : 2}deg)` }}>
              <AIMonMedia kind={c.kind} />
              <div style={{ padding: '18px 20px 22px' }}>
                <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em', color: INK, marginBottom: 7 }}>{c.t}</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{c.d}</div>
              </div>
            </div>
          </Reveal>
        )}
      </div>
    </div>
  </section>
);

// ---------- § 07 Their studio — toolkit rack ----------
const HerStudioSection = () => (
  <section style={{ background: CREAM, padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 46 }}>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px' }}>
            Their studio,<br /><GradText>end to end.</GradText>
          </h2>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto', maxWidth: 520 }}>
            Everything a real creator has, they have — shoots, edits, a voice, a queue and receipts.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {window.IN_FEATS.map((f, i) =>
          <Reveal key={f.t} delay={(i % 3) * 100} y={24}>
            <a href={f.href} style={{ display: 'block', borderRadius: 16, overflow: 'hidden', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: 'inherit',
              transform: `rotate(${i % 2 ? 0.8 : -0.8}deg) perspective(1200px) rotateY(${i % 2 ? -1.5 : 1.5}deg)` }}>
              <window.INFeatMedia kind={f.kind} />
              <div style={{ padding: '14px 16px 17px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 5 }}>
                  <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em', color: INK }}>{f.t}</span>
                  <svg width="11" height="11" viewBox="0 0 16 16" fill="none" style={{ opacity: 0.45 }}><path d="M4 12L12 4M6.5 4H12v5.5" stroke={INK} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
                <div style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{f.d}</div>
              </div>
            </a>
          </Reveal>
        )}
      </div>
    </div>
  </section>
);

Object.assign(window, { OffCameraSection, CastSection, IdentitySection, RosterSection, MonetizeSection, HerStudioSection });
