/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, Waveform, SB_EASE,
   MShell, MHead */
// AI Influencer solutions page — mobile layout (skews alternate right → left → right …).
const { useState: amzS, useEffect: amzE } = React;

// eyebrows are hero-only on mobile — keep the heading, drop the pill
const MAIBadgeHead = ({ title, sub }) => <MHead title={title} sub={sub} />;
const MAICard = ({ lean = 'right', children, pad = 12 }) => (
  <div style={{ borderRadius: 18, background: '#fff', boxShadow: '0 12px 32px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: pad, marginTop: 26, textAlign: 'left',
    transform: lean === 'left' ? 'rotate(-1.2deg) perspective(1200px) rotateY(3deg)' : 'rotate(1.2deg) perspective(1200px) rotateY(-3deg)' }}>{children}</div>
);

// hero
const MAIHero = () => {
  const [ref, on] = useReveal(0.25);
  const [locked, setLocked] = amzS(false);
  amzE(() => {
    if (!on) return;
    const t = setInterval(() => setLocked(l => !l), 4000);
    return () => clearInterval(t);
  }, [on]);
  return (
    <section style={{ background: CREAM, padding: '0 22px 56px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0 30px' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
          <img loading="lazy" decoding="async" src="assets/logo-icon.png" alt="" style={{ width: 19, height: 19, objectFit: 'contain' }} />
          <span style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-0.03em', color: INK }}>sozee</span>
        </span>
      </div>
      <div style={{ textAlign: 'center' }}>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginBottom: 16, borderRadius: 9999, padding: '6px 12px', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
            <a href="/" style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>Solutions</a>
            <span style={{ fontSize: 10, color: 'rgba(28,27,27,0.35)' }}>/</span>
            <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>AI Influencer</span>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <h1 style={{ font: '800 44px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 16px', textWrap: 'balance' }}>
            The next star<br /><GradText>isn’t real.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 14.5, lineHeight: 1.58, color: 'var(--text-secondary)', margin: '0 0 24px' }}>
            AI influencers are the future of social — personas you cast, direct and own. You stay behind the camera.
          </p>
        </Reveal>
        <Reveal delay={250} style={{ marginBottom: 34 }}><CTAButton size="sm">Cast your Character</CTAButton></Reveal>
      </div>
      <Reveal delay={200} y={26}>
        <div ref={ref} style={{ transform: 'rotate(1.2deg) perspective(1200px) rotateY(-3deg)', borderRadius: 20, background: '#fff', boxShadow: '0 20px 44px rgba(28,27,27,0.12), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 12, textAlign: 'left' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 9 }}>
            <span style={{ fontSize: 11, fontWeight: 800, color: INK }}>New Character <span style={{ fontSize: 8.5, fontWeight: 700, color: 'var(--brand-purple-700)' }}>· from zero</span></span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 8, fontWeight: 700, borderRadius: 9999, padding: '2px 8px', transition: `all 0.4s ${SB_EASE}`,
              color: locked ? '#15803D' : 'rgba(28,27,27,0.5)',
              background: locked ? 'rgba(34,197,94,0.12)' : 'rgb(246,243,242)',
              border: locked ? '1px solid rgba(34,197,94,0.3)' : '1px solid rgba(28,27,27,0.08)' }}>
              <svg width="8" height="8" 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 ? 'Identity locked' : 'Casting…'}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 8 }}>
            <div style={{ position: 'relative', borderRadius: 11, overflow: 'hidden', aspectRatio: '3/3.9', background: 'rgb(246,243,242)' }}>
              <img loading="lazy" decoding="async" src={GENS[2].src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%',
                filter: locked ? 'none' : 'blur(5px) saturate(0.9)', transition: `filter 0.8s ${SB_EASE}` }} />
              {!locked && <span style={{ position: 'absolute', left: 0, right: 0, height: '14%', background: 'linear-gradient(to bottom, transparent, rgba(129,60,237,0.35), transparent)', animation: 'sz-scan-x 2.2s ease-in-out infinite' }} />}
              <span style={{ position: 'absolute', left: 6, bottom: 6, fontSize: 7.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 7px' }}>Sloane · 24</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, justifyContent: 'center' }}>
              {[['Look', 'Soft glam · auburn'], ['World', 'Coastal mornings'], ['Platforms', 'IG · Fanvue · TikTok']].map(([k, v]) =>
                <div key={k} style={{ borderRadius: 8, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '6px 9px' }}>
                  <span style={{ display: 'block', fontSize: 7.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', marginBottom: 1 }}>{k}</span>
                  <span style={{ fontSize: 9.5, fontWeight: 600, color: INK }}>{v}</span>
                </div>)}
              <div style={{ borderRadius: 8, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '6px 9px' }}>
                <span style={{ display: 'block', fontSize: 7.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', marginBottom: 3 }}>Voice · warm, low</span>
                <Waveform on={locked} bars={16} h={12} />
              </div>
            </div>
          </div>
        </div>
      </Reveal>
    </section>);
};

// § 01 off camera
const MAIOffCamera = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <MShell bg="#fff">
      <MAIBadgeHead label="AI Influencer · Off camera" ac="#4D73F2" title={<span>All the reach.<br /><GradText>Zero exposure.</GradText></span>}
        sub="They take the spotlight, the comments and the recognition. You direct from behind it — face never used, name private." />
      <MAICard lean="left">
        <div ref={ref} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <span style={{ width: 38, height: 38, borderRadius: '50%', background: 'rgb(235,231,231)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
            <svg width="15" height="15" 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></span>
          <span style={{ flex: 1, minWidth: 0 }}>
            <span style={{ display: 'block', fontSize: 10.5, fontWeight: 700, color: INK }}>You · the director</span>
            <span style={{ display: 'block', fontSize: 9, color: 'rgba(28,27,27,0.5)' }}>Face never used · name private</span>
          </span>
          <svg width="26" height="14" viewBox="0 0 40 20" style={{ flexShrink: 0 }}>
            <line x1="2" y1="10" x2="28" y2="10" stroke="#813CED" strokeWidth="2.4" strokeDasharray="3 6" strokeLinecap="round" style={{ animation: 'sz-dash 1.2s linear infinite' }} />
            <path d="M26 4l8 6-8 6" fill="none" stroke="#813CED" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <span style={{ fontSize: 9.5, fontWeight: 800, color: INK, flexShrink: 0 }}>@scarlett.day</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 5, marginBottom: 9 }}>
          {[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 * 60}ms` }} />
            </span>)}
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <span style={{ fontSize: 9.5, fontWeight: 800, color: INK }}>128k <span style={{ fontWeight: 600, color: 'rgba(28,27,27,0.5)' }}>followers</span></span>
          <span style={{ fontSize: 9.5, fontWeight: 800, color: INK }}>6 <span style={{ fontWeight: 600, color: 'rgba(28,27,27,0.5)' }}>platforms</span></span>
        </div>
      </MAICard>
    </MShell>);
};

// § 02 cast from zero
const MAICast = () => {
  return (
    <MShell>
      <MAIBadgeHead label="AI Influencer · Cast from zero" ac="#C77D3A" title={<span>Cast them<br /><GradText>like a character.</GradText></span>}
        sub="No photos needed — pick the look, the world, the voice. Reroll until they’re exactly right, then lock them." />
      <div style={{ marginTop: 22, textAlign: 'left', transform: 'rotate(1.2deg) perspective(1200px) rotateY(-3deg)' }}><window.MCharBuilder /></div>
    </MShell>);
};

// § 03 identity lock
const MAIIdentity = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <MShell bg="#fff">
      <MAIBadgeHead label="AI Influencer · Identity lock" ac="#B0489B" title={<span>Same face.<br /><GradText>Every single photo.</GradText></span>}
        sub="What kills AI accounts is drift. Identity lock keeps them recognizable across thousands of generations." />
      <MAICard lean="left">
        <div ref={ref} style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
          {[1, 2, 3, 4, 5, 6].map((n, i) =>
            <div key={n} style={{ position: 'relative', borderRadius: 8, 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 * 80}ms` }} />
            </div>)}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 9 }}>
          <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="M5 7V5.5a3 3 0 016 0V7M4 7h8v6H4z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>Locked</span>
          <span style={{ fontSize: 9.5, color: 'var(--text-secondary)' }}>Same face, same freckles, same jaw — every set.</span>
        </div>
      </MAICard>
    </MShell>);
};

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

const MAIRoster = () => (
  <MShell bg="#fff">
    <MAIBadgeHead label="AI Influencer · The roster" ac="#3A8F6B" title={<span>Run one.<br /><GradText>Or run a roster.</GradText></span>}
      sub="Personas are assets — run several from one login, each with their own look, voice, library and numbers." />
    <MAICard lean="right" pad={10}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {MAI_ROSTER.map((r) =>
          <div key={r.n} style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 10, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '7px 9px' }}>
            <span style={{ width: 30, height: 30, borderRadius: '50%', overflow: 'hidden', flexShrink: 0, boxShadow: '0 0 0 1.5px #fff, 0 0 0 2.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: 10.5, fontWeight: 700, color: INK }}>{r.n}</span>
              <span style={{ display: 'block', fontSize: 8.5, color: 'rgba(28,27,27,0.5)' }}>{r.niche}</span>
            </span>
            <span style={{ fontSize: 8, fontWeight: 700, color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '2px 7px', flexShrink: 0 }}>{r.q} queued</span>
          </div>)}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, borderRadius: 10, padding: '9px 0', outline: '1.5px dashed rgba(28,27,27,0.18)', outlineOffset: -1 }}>
          <span style={{ width: 18, height: 18, borderRadius: '50%', background: 'rgb(246,243,242)', display: 'grid', placeItems: 'center' }}>
            <svg width="9" height="9" 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: 9.5, fontWeight: 600, color: 'var(--text-secondary)' }}>Cast another</span>
        </div>
      </div>
    </MAICard>
  </MShell>
);

// § 06 monetize
const MAI_MON = [
  { t: 'Brand deals', d: 'Their feed carries the product — pixel-consistent across the campaign.', kind: 'deal' },
  { t: 'UGC campaigns', d: 'Brands pay for content, not reach. Studio-grade UGC in 48h.', kind: 'ugc' },
  { t: 'Community', d: 'Subs and DMs on Fanvue — answered in their voice.', kind: 'community' }];

const MAIMonMedia = ({ kind }) => (
  <div style={{ width: 96, borderRadius: 11, overflow: 'hidden', flexShrink: 0, aspectRatio: '4/4.4', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 5, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 4 }}>
    {kind === 'deal' && <React.Fragment>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, flex: 1, minHeight: 0 }}>
        {['assets/control/collar-silver.png', 'assets/shoot/set-2.webp'].map((src, i) =>
          <span key={src} style={{ position: 'relative', borderRadius: 5, overflow: 'hidden', background: '#fff', boxShadow: i === 0 ? '0 0 0 1.5px var(--brand-purple-500)' : '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%' }} /></span>)}
      </div>
      <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 6, padding: '4px 0', background: PULSE, color: '#fff', fontSize: 6.5, fontWeight: 800, letterSpacing: '0.05em' }}>ACCEPT DEAL</span>
    </React.Fragment>}
    {kind === 'ugc' &&
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, flex: 1, minHeight: 0 }}>
        {[1, 3, 5, 6].map((n) =>
          <span key={n} style={{ position: 'relative', borderRadius: 5, 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>)}
      </div>}
    {kind === 'community' &&
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1, minHeight: 0 }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 6, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '0 5px', flex: 1, minHeight: 0 }}>
          <span style={{ width: 14, height: 14, 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: 6.5, fontWeight: 700, color: INK, whiteSpace: 'nowrap' }}>New sub · DM sent</span>
        </span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 6, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '0 5px', flex: 1, minHeight: 0 }}>
          <span style={{ fontSize: 7 }}>🔔</span><span style={{ fontSize: 6.5, fontWeight: 700, color: INK, whiteSpace: 'nowrap' }}>2,140 subscribers</span>
        </span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 6, background: 'var(--brand-purple-50)', boxShadow: 'inset 0 0 0 1px var(--brand-purple-200)', padding: '0 5px', flex: 1, minHeight: 0 }}>
          <span style={{ fontSize: 6.5, fontWeight: 700, color: 'var(--brand-purple-700)', whiteSpace: 'nowrap' }}>✦ In their voice</span>
        </span>
      </div>}
  </div>
);

const MAIMonetize = () => (
  <MShell bg="#fff">
    <MAIBadgeHead label="AI Influencer · Monetize" ac="#4D73F2" title={<span>They do the work.<br /><GradText>You keep the upside.</GradText></span>}
      sub="A persona with an audience earns like a creator — deals, campaigns, subscriptions — without you shooting a photo." />
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 28 }}>
      {MAI_MON.map((c, i) =>
        <Reveal key={c.t} delay={i * 90} y={20}>
          <div style={{ display: 'flex', gap: 12, borderRadius: 16, overflow: 'hidden', background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 10, transform: `rotate(${i % 2 ? 0.9 : -0.9}deg)`, textAlign: 'left' }}>
            <MAIMonMedia kind={c.kind} />
            <div style={{ minWidth: 0, alignSelf: 'center' }}>
              <div style={{ fontSize: 14.5, fontWeight: 700, letterSpacing: '-0.01em', color: INK, marginBottom: 4 }}>{c.t}</div>
              <div style={{ fontSize: 11.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{c.d}</div>
            </div>
          </div>
        </Reveal>
      )}
    </div>
  </MShell>
);

// § 07 their studio
const MAI_FEATS = [
  { t: 'Create Image', d: 'Their sets from one sentence.', href: '/create-image', src: 'assets/create/out-mirror.webp' },
  { t: 'Create Video', d: 'Reels in their voice.', href: '/create-video', vid: 'assets/video/explore-1.mp4' },
  { t: 'Photo Control', d: 'Their rooms, wardrobe, angles.', href: '/photo-control', src: 'assets/control/room.png' },
  { t: 'Editing Suite', d: 'Fix anything, no reshoot.', href: '/editing-suite', src: 'assets/edits/color.webp' },
  { t: 'Post & Analyze', d: 'They post. You read receipts.', href: '/post-analyze', src: GENS[7].src },
  { t: 'Copilot', d: 'Direct them by chat.', href: '/copilot', src: GENS[1].src }];

const MAIStudio = () => (
  <MShell>
    <MAIBadgeHead label="AI Influencer · The studio" ac="#813CED" title={<span>Their studio,<br /><GradText>end to end.</GradText></span>}
      sub="Everything a real creator has, they have — shoots, edits, a voice, a queue and receipts." />
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 28 }}>
      {MAI_FEATS.map((f, i) =>
        <Reveal key={f.t} delay={(i % 2) * 80} y={18}>
          <a href={f.href} style={{ display: 'block', borderRadius: 14, overflow: 'hidden', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: 'inherit',
            transform: `rotate(${i % 2 ? 0.9 : -0.9}deg)` }}>
            <div style={{ position: 'relative', height: 84, overflow: 'hidden', background: 'rgb(246,243,242)' }}>
              {f.vid ? <video src={f.vid} autoPlay muted loop playsInline preload="metadata" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> :
                <img loading="lazy" decoding="async" src={f.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 16%' }} />}
            </div>
            <div style={{ padding: '10px 12px 12px', textAlign: 'left' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 3 }}>
                <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em', color: INK }}>{f.t}</span>
                <svg width="9" height="9" 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: 9.5, lineHeight: 1.45, color: 'var(--text-secondary)' }}>{f.d}</div>
            </div>
          </a>
        </Reveal>
      )}
    </div>
  </MShell>
);

const MAIPage = () => (
  <React.Fragment>
    <div style={{ fontFamily: 'var(--font-sans)', maxWidth: 430, margin: '0 auto', boxShadow: '0 0 0 1px rgba(28,27,27,0.06), 0 0 60px rgba(28,27,27,0.08)', overflow: 'clip' }}>
      <div data-screen-label="Hero — AI Influencer"><MAIHero /></div>
      <div data-screen-label="01 Off camera"><MAIOffCamera /></div>
      <div data-screen-label="02 Cast from zero"><MAICast /></div>
      <div data-screen-label="03 Identity lock"><MAIIdentity /></div>
      <div data-screen-label="04 Voice and Live"><window.MVoiceLiveSection /></div>
      <div data-screen-label="05 The roster"><MAIRoster /></div>
      <div data-screen-label="06 The toolkit"><window.MINFeatures /></div>
      <div data-screen-label="07 Brand deals"><window.MBrandDealsSection bg="#fff" audience="ai" /></div>
      <div data-screen-label="08 Pricing"><window.MPricingSection /></div>
      <div data-screen-label="09 FAQ"><window.MFAQSection /></div>
      <div data-screen-label="CTA + Footer"><window.MFinalSection /></div>
    </div>
    <window.MCISticky />
    <window.SozeeNavMobile siteHref="/" localLabels={{ '/ai-influencer': 'Hero — AI Influencer', '09 Voice and Live': '04 Voice and Live', '15 Pricing': '08 Pricing', '16 FAQ': '09 FAQ' }} />
  </React.Fragment>
);

Object.assign(window, { MAIPage });
