/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE,
   MPhone, MAppHeader, MGenerate */
// Influencer solutions page — The grind · Built for the grind (features) · On the go.
const { useState: izS, useEffect: izE } = React;

const INBadge = ({ 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>;

// ---------- § 01 The grind, before/after ----------
const IN_BEFORE = [
  ['7:00 AM', 'Do makeup, set up the ringlight, shoot for 2 hours'],
  ['11:00 AM', 'Cull 400 photos down to 6 usable ones'],
  ['2:00 PM', 'Edit, retouch, write captions, resize per platform'],
  ['6:00 PM', 'Post to each platform, one by one'],
  ['11:00 PM', 'Realize tomorrow needs content too']];
const IN_AFTER = [
  ['9:00 AM', 'Approve the set Copilot drafted overnight', true],
  ['9:06 AM', 'Queue the week to six platforms', true],
  ['9:20 AM', 'Done. Go live your life', true]];

const GrindPanel = () => {
  const [ref, on] = useReveal(0.35);
  return (
    <div ref={ref} 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: 18 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', marginBottom: 10 }}>Your Tuesday, before</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {IN_BEFORE.map(([t, d], i) =>
              <div key={t} style={{ borderRadius: 10, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '8px 11px',
                opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${i * 70}ms` }}>
                <span style={{ fontSize: 9, fontWeight: 700, color: 'rgba(28,27,27,0.45)', display: 'block', marginBottom: 2 }}>{t}</span>
                <span style={{ fontSize: 11, lineHeight: 1.45, fontWeight: 500, color: 'rgba(28,27,27,0.7)', textDecoration: 'line-through', textDecorationColor: 'rgba(28,27,27,0.25)' }}>{d}</span>
              </div>)}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--brand-purple-700)', marginBottom: 10 }}>With Sozee</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {IN_AFTER.map(([t, d], i) =>
              <div key={t} style={{ borderRadius: 10, background: 'var(--brand-purple-50)', boxShadow: 'inset 0 0 0 1px var(--brand-purple-200)', padding: '8px 11px',
                opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${350 + i * 90}ms` }}>
                <span style={{ fontSize: 9, fontWeight: 700, color: 'var(--brand-purple-700)', display: 'block', marginBottom: 2 }}>{t}</span>
                <span style={{ display: 'flex', alignItems: 'flex-start', gap: 5, fontSize: 11, lineHeight: 1.45, fontWeight: 600, color: INK }}>
                  <svg width="10" height="10" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: 2 }}><path d="M3 8.4l3.2 3.2L13.5 4" stroke="var(--brand-purple-600)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>{d}</span>
              </div>)}
            <div style={{ marginTop: 4, borderRadius: 10, padding: '10px 11px', textAlign: 'center', outline: '1.5px dashed var(--brand-purple-300)', outlineOffset: -1,
              opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} 650ms` }}>
              <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--brand-purple-700)' }}>The rest of the day is yours.</span>
            </div>
          </div>
        </div>
      </div>
    </div>);
};

const GrindSection = () => (
  <section style={{ background: '#fff', padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
      <div>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px', textWrap: 'balance' }}>
            You became the content.<br /><GradText>Take yourself back.</GradText>
          </h2>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 28px', maxWidth: 420 }}>
            At your size, the feed is a full-time job stacked on a full-time job. Sozee takes the shoot day, the edit pass and the posting run — you keep the taste and the final say.
          </p>
        </Reveal>
        <Reveal delay={250}><CTAButton>Join for free</CTAButton></Reveal>
      </div>
      <Reveal delay={160} y={28}>
        <div style={{ transform: 'rotate(-1.3deg) perspective(1400px) rotateY(4deg)', transformOrigin: 'center' }}><GrindPanel /></div>
      </Reveal>
    </div>
  </section>
);

// ---------- § 02 Built for the grind — the feature rack ----------
const IN_FEATS = [
  { t: 'Create Image', d: 'A set of photos from one sentence — 4:5 or 9:16, up to 4K.', href: '/create-image', kind: 'image' },
  { t: 'Create Video', d: 'Reels with your face and your voice. Four ways in.', href: '/create-video', kind: 'video' },
  { t: 'Photo Control', d: 'Your rooms, your wardrobe, your angles — locked across every set.', href: '/photo-control', kind: 'control' },
  { t: 'Editing Suite', d: 'Fix anything without a reshoot — brush, type, done.', href: '/editing-suite', kind: 'edit' },
  { t: 'Post & Analyze', d: 'Six platforms, one queue — receipts on every post.', href: '/post-analyze', kind: 'sched' },
  { t: 'Copilot', d: 'Ask for tonight’s post. Approve it from the couch.', href: '/copilot', kind: 'copilot' }];

const INFeatMedia = ({ kind }) => {
  const P = { borderRadius: '10px 10px 0 0', background: '#fff', boxShadow: '0 8px 20px rgba(28,27,27,0.09), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 8, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 6 };
  const chip = { borderRadius: 9999, padding: '4px 9px', fontSize: 8.5, fontWeight: 600, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: INK, whiteSpace: 'nowrap' };
  return (
    <div style={{ height: 150, background: 'rgb(246,243,242)', padding: '12px 12px 0', boxSizing: 'border-box' }}>
      {kind === 'image' &&
        <div style={P}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 5, flex: 1, minHeight: 0 }}>
            {['assets/create/out-mirror.webp', 'assets/create/out-garden.webp', 'assets/create/out-gym.webp'].map((src, i) =>
              <span key={src} style={{ position: 'relative', borderRadius: 6, overflow: 'hidden', 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', gap: 3, borderRadius: 7, padding: '5px 0', background: PULSE, color: '#fff', fontSize: 7.5, fontWeight: 800, letterSpacing: '0.05em' }}>GENERATE ✦</span>
        </div>}
      {kind === 'video' &&
        <div style={P}>
          <span style={{ position: 'relative', flex: 1, minHeight: 0, borderRadius: 7, overflow: 'hidden', display: 'block', background: 'rgb(246,243,242)' }}>
            <video src="assets/video/explore-1.mp4" autoPlay muted loop playsInline preload="metadata" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 12%' }} />
            <span style={{ position: 'absolute', left: 6, bottom: 6, display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 7.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 7px' }}>
              <svg width="5" height="6" viewBox="0 0 8 10" fill="#fff"><path d="M0 0l8 5-8 5z" /></svg>0:08</span>
          </span>
        </div>}
      {kind === 'control' &&
        <div style={P}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 5, flex: 1, minHeight: 0 }}>
            {[['assets/control/top-red.webp', '#fff'], ['assets/control/room.png', null], ['assets/control/shot-mirror.webp', null]].map(([src, bg], i) =>
              <span key={i} style={{ position: 'relative', borderRadius: 6, overflow: 'hidden', background: bg || '#eee', 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%' }} /></span>)}
          </div>
          <div style={{ display: 'flex', gap: 4 }}>
            <span style={chip}>Setting</span><span style={chip}>Outfit</span><span style={chip}>Shot</span>
          </div>
        </div>}
      {kind === 'edit' &&
        <div style={P}>
          <span style={{ position: 'relative', flex: 1, minHeight: 0, borderRadius: 7, overflow: 'hidden', display: 'block' }}>
            <img loading="lazy" decoding="async" src="assets/edits/color.webp" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 10%' }} />
            <span style={{ position: 'absolute', top: 0, bottom: 0, left: '50%', width: 1.5, background: '#fff', boxShadow: '0 0 6px rgba(0,0,0,0.3)' }} />
            <span style={{ position: 'absolute', left: 5, bottom: 5, fontSize: 7, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#fff', background: 'rgba(20,16,23,0.6)', borderRadius: 9999, padding: '2px 6px' }}>Before</span>
            <span style={{ position: 'absolute', right: 5, bottom: 5, fontSize: 7, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#fff', background: 'rgba(20,16,23,0.6)', borderRadius: 9999, padding: '2px 6px' }}>After</span>
          </span>
        </div>}
      {kind === 'sched' &&
        <div style={P}>
          {[[GENS[7].src, 'Instagram · 9:00', 'Queued'], [GENS[1].src, 'TikTok · 12:30', 'Queued'], [GENS[3].src, 'Fanvue · 6:00', 'Posted']].map(([src, l, st]) =>
            <span key={l} style={{ display: 'flex', alignItems: 'center', gap: 6, borderRadius: 7, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '0 7px', flex: 1, minHeight: 0 }}>
              <span style={{ width: 16, height: 16, borderRadius: 5, overflow: 'hidden', flexShrink: 0 }}>
                <img loading="lazy" decoding="async" src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} /></span>
              <span style={{ fontSize: 8, fontWeight: 700, color: INK, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{l}</span>
              <span style={{ fontSize: 7, fontWeight: 700, color: st === 'Posted' ? '#15803D' : 'var(--brand-purple-700)' }}>{st}</span>
            </span>)}
        </div>}
      {kind === 'copilot' &&
        <div style={P}>
          <span style={{ alignSelf: 'flex-end', borderRadius: '10px 10px 3px 10px', background: INK, color: '#fff', padding: '6px 9px', fontSize: 8.5, fontWeight: 500 }}>make tonight’s post</span>
          <span style={{ alignSelf: 'flex-start', borderRadius: '10px 10px 10px 3px', background: 'rgb(246,243,242)', color: INK, padding: '6px 9px', fontSize: 8.5, fontWeight: 500, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.06)' }}>Done — queued for 9 PM. <span style={{ fontWeight: 700, color: 'var(--brand-purple-700)' }}>Approve?</span></span>
          <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3, borderRadius: 7, padding: '5px 0', background: PULSE, color: '#fff', fontSize: 7.5, fontWeight: 800, letterSpacing: '0.05em', marginTop: 'auto' }}>APPROVE & SHIP</span>
        </div>}
    </div>);
};

const FeatureRackSection = () => (
  <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' }}>
            Built for people<br /><GradText>who post for a living.</GradText>
          </h2>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto', maxWidth: 520 }}>
            Every tool in the studio exists to kill a step of the grind. Tap into any of them.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {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)` }}>
              <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>
);

// ---------- § 03 On the go — the real mobile Studio (Create) screen ----------
const OTG_FEED = [
  [GENS[7], 118, 4], [GENS[1], 146, 1],
  [GENS[3], 138, 2], [GENS[5], 110, 6],
  [GENS[0], 128, 1], [GENS[6], 150, 3]];

const OTG_HAIR = '1px solid rgba(28,27,27,0.09)';
const OTG_CHIP = { display: 'inline-flex', alignItems: 'center', gap: 3, height: 20, padding: '0 7px', borderRadius: 9999, background: '#fff', border: OTG_HAIR,
  boxShadow: '0 1px 2px rgba(28,27,27,0.04)', fontSize: 7.5, fontWeight: 600, color: INK, whiteSpace: 'nowrap', flexShrink: 0 };
const OTG_CARET = <svg width="7" height="7" viewBox="0 0 12 12" fill="none"><path d="M2.5 4.5L6 8l3.5-3.5" stroke="rgba(28,27,27,0.4)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>;

// the app's feed — sits behind every sheet
const OTGFeed = () => (
  <div style={{ position: 'absolute', inset: 0, padding: '46px 9px 0', columns: 2, columnGap: 7, overflow: 'hidden' }}>
    {OTG_FEED.map(([g, h, n], i) =>
      <div key={i} style={{ breakInside: 'avoid', marginBottom: 7, position: 'relative', borderRadius: 11, overflow: 'hidden', boxShadow: '0 1px 3px rgba(28,27,27,0.1)' }}>
        <img loading="lazy" decoding="async" src={g.src} alt="" style={{ display: 'block', width: '100%', height: h, objectFit: 'cover', objectPosition: 'center 14%' }} />
        {i === 0 && <span style={{ position: 'absolute', top: 5, left: 5, height: 14, padding: '0 6px', borderRadius: 9999, background: PULSE, color: '#fff', fontSize: 7, fontWeight: 800, letterSpacing: '0.05em', display: 'grid', placeItems: 'center' }}>NEW</span>}
        <span style={{ position: 'absolute', bottom: 5, right: 5, display: 'inline-flex', alignItems: 'center', gap: 3, height: 15, padding: '0 6px', borderRadius: 9999, background: 'rgba(28,27,27,0.62)', backdropFilter: 'blur(6px)', color: '#fff', fontSize: 7.5, fontWeight: 700 }}>✦ {n}</span>
      </div>)}
  </div>
);

const OTGCluster = () => (
  <div style={{ position: 'absolute', top: 28, right: 9, zIndex: 9, display: 'flex', alignItems: 'center', gap: 5 }}>
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, height: 21, padding: '0 8px', borderRadius: 9999, background: 'rgba(255,255,255,0.9)', backdropFilter: 'blur(8px)', border: OTG_HAIR, fontSize: 8.5, fontWeight: 700, color: INK }}>
      <span style={{ color: 'var(--brand-purple-600)' }}>⚡</span>240</span>
    <span style={{ position: 'relative', width: 22, height: 22, borderRadius: '50%', border: '1.5px solid #fff', background: INK, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, boxShadow: '0 1px 4px rgba(28,27,27,0.2)' }}>J
      <span style={{ position: 'absolute', top: -3, right: -3, minWidth: 11, height: 11, borderRadius: 9999, background: '#EF4444', border: '1.5px solid #fff', color: '#fff', fontSize: 6.5, fontWeight: 800, display: 'grid', placeItems: 'center' }}>3</span>
    </span>
  </div>
);

// sheet shell — grabber, title, close, body
const OTGSheet = ({ title, sub, children, footer }) => (
  <React.Fragment>
    <div style={{ position: 'absolute', inset: 0, zIndex: 8, background: 'rgba(28,27,27,0.28)' }} />
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 9, background: '#fff', borderRadius: '20px 20px 0 0', boxShadow: '0 -18px 44px -10px rgba(28,27,27,0.28)', overflow: 'hidden' }}>
      <div style={{ display: 'grid', placeItems: 'center', padding: '6px 0 2px' }}>
        <span style={{ width: 30, height: 3.5, borderRadius: 9999, background: 'rgba(28,27,27,0.16)' }} /></div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '4px 11px 8px' }}>
        <span style={{ flex: 1, minWidth: 0 }}>
          <span style={{ display: 'block', fontSize: 12, fontWeight: 800, letterSpacing: '-0.01em', color: INK }}>{title}</span>
          {sub && <span style={{ display: 'block', fontSize: 8.5, fontWeight: 600, color: 'rgba(28,27,27,0.45)', marginTop: 1 }}>{sub}</span>}
        </span>
        <span style={{ width: 20, height: 20, borderRadius: '50%', border: OTG_HAIR, display: 'grid', placeItems: 'center', color: 'rgba(28,27,27,0.5)', fontSize: 10, flexShrink: 0 }}>✕</span>
      </div>
      <div style={{ padding: '0 11px 11px' }}>{children}</div>
      {footer}
    </div>
  </React.Fragment>
);

// ① Create — docked composer over the feed
const OTGCreate = ({ typed, prompt }) => (
  <React.Fragment>
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 190, background: 'linear-gradient(180deg, rgba(251,247,245,0) 0%, rgba(251,247,245,0.72) 36%, rgba(251,247,245,0.98) 100%)', zIndex: 7 }} />
    <div style={{ position: 'absolute', left: 9, right: 9, bottom: 11, zIndex: 8, background: '#fff', borderRadius: 17, border: OTG_HAIR, boxShadow: '0 18px 40px -8px rgba(28,27,27,0.18)', padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
        <span style={{ flex: 1, minWidth: 0, fontSize: 10.5, color: INK, lineHeight: 1.3 }}>
          {prompt.slice(0, typed)}<span style={{ display: 'inline-block', width: 1.2, height: 10, background: 'var(--brand-purple-500)', verticalAlign: '-1px', animation: 'sz-blink 1.1s step-end infinite' }} />
        </span>
        <span style={{ width: 30, height: 30, borderRadius: '50%', background: PULSE, color: '#fff', display: 'grid', placeItems: 'center', flexShrink: 0, boxShadow: '0 8px 20px -4px rgba(104,19,212,0.35)' }}>
          <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M8 13V3.5M3.6 7.4L8 3l4.4 4.4" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </span>
      </div>
      <div className="m-nosb" style={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap', rowGap: 4 }}>
        <span style={{ ...OTG_CHIP, padding: '0 8px 0 3px' }}>
          <span style={{ width: 15, height: 15, borderRadius: '50%', overflow: 'hidden', border: '1.5px solid #fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.09)' }}>
            <img loading="lazy" decoding="async" src={GENS[0].src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%' }} /></span>
          Scarlett{OTG_CARET}</span>
        <span style={{ ...OTG_CHIP, padding: '0 8px 0 4px' }}>
          <span style={{ display: 'flex', alignItems: 'center' }}>
            {['assets/gen/golden-hour.png', 'assets/garments/top-velvet-emerald.webp'].map((src, i) =>
              <span key={i} style={{ width: 13, height: 13, marginLeft: i ? -4 : 0, borderRadius: 4, overflow: 'hidden', border: '1.5px solid #fff', background: '#fff', boxShadow: '0 1px 3px rgba(28,27,27,0.16)' }}>
                <img loading="lazy" decoding="async" src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></span>)}
          </span>
          Photo Control · 2{OTG_CARET}</span>
        <span style={{ ...OTG_CHIP, color: 'var(--brand-purple-700)' }}>✦ Create Image{OTG_CARET}</span>
      </div>
    </div>
  </React.Fragment>
);

// ② Photo Control sheet
const OTG_PC_TABS = [['Setting', true], ['Outfit'], ['Shot'], ['Expr.'], ['Object']];
const OTG_PC_TILES = [
  ['assets/gen/golden-hour.png', 'Golden hour', true], ['assets/gen/bedroom-boudoir.png', 'Boudoir'],
  ['assets/gen/cafe-rain.png', 'Café · rain'], ['assets/gen/beach-pool.png', 'Poolside'],
  ['assets/gen/streetwear-city.png', 'City street'], ['assets/settings/my-room.png', 'My room']];

const OTGPhotoControl = () => (
  <OTGSheet title="Photo Control" sub="Setting · Outfit · Shot style · Expression · Object">
    <div className="m-nosb" style={{ display: 'flex', gap: 4, overflow: 'hidden', marginBottom: 9 }}>
      {OTG_PC_TABS.map(([t, on]) =>
        <span key={t} style={{ ...OTG_CHIP, background: on ? INK : '#fff', color: on ? '#fff' : 'rgba(28,27,27,0.6)', border: on ? '1px solid transparent' : OTG_HAIR }}>{t}</span>)}
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
      {OTG_PC_TILES.map(([src, l, on]) =>
        <span key={l} style={{ position: 'relative', borderRadius: 9, overflow: 'hidden', aspectRatio: '1', background: 'rgb(246,243,242)',
          boxShadow: on ? '0 0 0 2px 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 30%' }} />
          <span style={{ position: 'absolute', inset: 0, background: 'linear-gradient(transparent 55%, rgba(0,0,0,0.5))' }} />
          <span style={{ position: 'absolute', left: 4, bottom: 3, right: 3, fontSize: 7, fontWeight: 700, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{l}</span>
          {on && <span style={{ position: 'absolute', top: 4, right: 4, width: 12, height: 12, borderRadius: '50%', background: 'var(--brand-purple-600)', display: 'grid', placeItems: 'center', fontSize: 7, color: '#fff', fontWeight: 800 }}>✓</span>}
        </span>)}
    </div>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 9 }}>
      <span style={{ fontSize: 8, fontWeight: 600, color: 'rgba(28,27,27,0.45)' }}>Locked across every photo</span>
      <span style={{ borderRadius: 9999, padding: '6px 13px', background: PULSE, color: '#fff', fontSize: 8.5, fontWeight: 800, letterSpacing: '0.04em' }}>APPLY</span>
    </div>
  </OTGSheet>
);

// ③ Outfit Library sheet
const OTG_OL_CATS = [['Tops', true], ['Bottoms'], ['Shoes'], ['Accessories']];
const OTG_OL_ITEMS = [
  ['assets/garments/top-crop-white.webp', 'Ruched crop tee'], ['assets/garments/top-velvet-emerald.webp', 'Velvet cami crop', true],
  ['assets/garments/top-bodysuit-black.webp', 'Halter bodysuit'], ['assets/garments/bottom-mini-oxblood.webp', 'Slit mini'],
  ['assets/garments/bottom-denim-lightwash.webp', 'Denim shorts'], ['assets/garments/shoe-stiletto-gold.webp', 'Gold stiletto']];

const OTGOutfitLibrary = () => (
  <OTGSheet title="Outfit Library" sub="Your wardrobe · 348 pieces">
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, borderRadius: 10, background: 'rgb(248,245,244)', border: OTG_HAIR, padding: '6px 9px', marginBottom: 8 }}>
      <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="rgba(28,27,27,0.4)" strokeWidth="1.8" /><path d="M11 11l3 3" stroke="rgba(28,27,27,0.4)" strokeWidth="1.8" strokeLinecap="round" /></svg>
      <span style={{ fontSize: 9, color: 'rgba(28,27,27,0.42)' }}>Search pieces…</span>
    </div>
    <div className="m-nosb" style={{ display: 'flex', gap: 4, overflow: 'hidden', marginBottom: 9 }}>
      {OTG_OL_CATS.map(([t, on]) =>
        <span key={t} style={{ ...OTG_CHIP, background: on ? INK : '#fff', color: on ? '#fff' : 'rgba(28,27,27,0.6)', border: on ? '1px solid transparent' : OTG_HAIR }}>{t}</span>)}
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
      {OTG_OL_ITEMS.map(([src, l, on]) =>
        <span key={l} style={{ position: 'relative', borderRadius: 9, overflow: 'hidden', aspectRatio: '1', background: '#fff',
          boxShadow: on ? '0 0 0 2px 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: 'contain', padding: 5, boxSizing: 'border-box' }} />
          <span style={{ position: 'absolute', left: 4, bottom: 3, right: 3, fontSize: 6.5, fontWeight: 700, color: 'rgba(28,27,27,0.6)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{l}</span>
          {on && <span style={{ position: 'absolute', top: 4, right: 4, width: 12, height: 12, borderRadius: '50%', background: 'var(--brand-purple-600)', display: 'grid', placeItems: 'center', fontSize: 7, color: '#fff', fontWeight: 800 }}>✓</span>}
        </span>)}
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 9 }}>
      <span style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
        {['assets/garments/top-velvet-emerald.webp', 'assets/garments/bottom-mini-oxblood.webp', 'assets/garments/shoe-stiletto-gold.webp'].map((src, i) =>
          <span key={i} style={{ width: 20, height: 20, marginLeft: i ? -5 : 0, borderRadius: 6, overflow: 'hidden', background: '#fff', border: '1.5px solid #fff', boxShadow: '0 1px 3px rgba(28,27,27,0.18)' }}>
            <img loading="lazy" decoding="async" src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} /></span>)}
        <span style={{ fontSize: 8, fontWeight: 700, color: 'rgba(28,27,27,0.5)', marginLeft: 7 }}>3 pieces</span>
      </span>
      <span style={{ borderRadius: 9999, padding: '6px 13px', background: PULSE, color: '#fff', fontSize: 8.5, fontWeight: 800, letterSpacing: '0.04em' }}>SAVE OUTFIT</span>
    </div>
  </OTGSheet>
);

const OTG_SCREENS = ['Create · the feed', 'Photo Control', 'Outfit Library'];

const OnTheGoPanel = () => {
  const [ref, on] = useReveal(0.35);
  const [typed, setTyped] = izS(0);
  const [scr, setScr] = izS(0);
  const PROMPT = 'golden hour on the rooftop, linen set';
  izE(() => {
    if (!on) return;
    const t = setInterval(() => setTyped(n => (n >= PROMPT.length ? 0 : n + 1)), 70);
    return () => clearInterval(t);
  }, [on]);
  izE(() => {
    if (!on) return;
    const t = setInterval(() => setScr(s => (s + 1) % 3), 4200);
    return () => clearInterval(t);
  }, [on]);
  return (
    <div ref={ref} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
      <MPhone w={272} ratio="9 / 18.2">
        <div style={{ position: 'relative', flex: 1, minHeight: 0, background: 'linear-gradient(180deg,#FFFAF5 0%,#FCF7F5 45%,#FBFBFB 100%)' }}>
          <div style={{ position: 'absolute', top: 26, left: '50%', transform: 'translateX(-50%)', zIndex: 6, width: 40, height: 15, borderRadius: '0 0 8px 8px', border: OTG_HAIR, borderTop: 0, background: '#fff', display: 'grid', placeItems: 'center' }}>
            <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M2.5 4.5L6 8l3.5-3.5" stroke="rgba(28,27,27,0.45)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </div>
          <OTGCluster />
          <OTGFeed />
          {scr === 0 && <OTGCreate typed={typed} prompt={PROMPT} />}
          {scr === 1 && <OTGPhotoControl />}
          {scr === 2 && <OTGOutfitLibrary />}
        </div>
      </MPhone>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {OTG_SCREENS.map((s, i) =>
          <span key={s} onClick={() => setScr(i)} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, borderRadius: 9999, padding: '5px 11px', cursor: 'pointer', fontSize: 10.5, fontWeight: scr === i ? 700 : 600,
            background: scr === i ? '#fff' : 'transparent', color: scr === i ? INK : 'rgba(28,27,27,0.5)',
            boxShadow: scr === i ? '0 4px 14px rgba(28,27,27,0.1), inset 0 0 0 1px rgba(28,27,27,0.08)' : 'none', transition: 'all 0.2s' }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: scr === i ? 'var(--brand-purple-500)' : 'rgba(28,27,27,0.2)' }} />{s}</span>)}
      </div>
    </div>);
};

const OnTheGoSection = () => (
  <section style={{ background: '#fff', padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center' }}>
      <Reveal delay={160} y={28} style={{ order: 1 }}>
        <div style={{ transform: 'rotate(-1.3deg) perspective(1400px) rotateY(4deg)', transformOrigin: 'center' }}><OnTheGoPanel /></div>
      </Reveal>
      <div style={{ order: 2 }}>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px', textWrap: 'balance' }}>
            The studio fits<br /><GradText>in your pocket.</GradText>
          </h2>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 28px', maxWidth: 420 }}>
            Everything works from your phone — generate in the car, swap an option in line for coffee, approve tonight’s post from the couch. The feed never knows you left.
          </p>
        </Reveal>
        <Reveal delay={250}><CTAButton>Join for free</CTAButton></Reveal>
        <Reveal delay={330}>
          <div style={{ marginTop: 26, fontSize: 13, color: 'var(--text-tertiary)' }}>
            Coming soon: Copilot by text, Telegram or WhatsApp — the full studio without logging in.
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

Object.assign(window, { GrindSection, FeatureRackSection, OnTheGoSection, INFeatMedia, IN_FEATS });