/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, useTyping, useCountUp, Shimmer, Waveform, SB_EASE,
   MPill, MPillP, MShell, MRail, MHead, MCopyHead, MAutoVideo */
// Mobile § 05 Photo Shoot · § 08 Reel cloning · § 09 Voice & Live · § 10 Copilot · § 11 Scheduler · § 14 Explore · CTA + footer

const { useState: mrS, useEffect: mrE } = React;

// ---------- § 05 — Photo Shoot ----------
const MSHOOT = ['assets/shoot/set-1.webp', 'assets/shoot/set-2.webp', 'assets/shoot/set-3.webp', 'assets/shoot/set-4.webp', 'assets/shoot/set-5.webp', 'assets/shoot/set-6.webp'];

const MSH_TYPES = [
  { key: 'social', name: 'Social Media', sub: 'All-SFW · feed-ready', desc: 'Angles, poses, expressions, outfit shifts. Same person, same room.', locks: ['Identity', 'Environment'], badge: 'SFW', bc: '#22C55E' },
  { key: 'sequenced', name: 'Sequenced Set', sub: 'SFW → NSFW · arc', desc: 'A directed escalation across the set. You set the ceiling and the pacing.', locks: ['Identity', 'Outfit', 'Environment'], badge: 'ARC', bc: 'var(--brand-purple-600)' },
];

const MShootSection = () => {
  const [gridRef, on] = useReveal(0.25);
  const [type, setType] = mrS('social');
  const [count, setCount] = mrS(6);
  const t = MSH_TYPES.find(x => x.key === type);
  return (
    <MShell pad="34px 22px 56px">
      <MCopyHead k="shoot" />
      <Reveal delay={200}>
        <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)', overflow: 'hidden', margin: '30px 0 14px' }}>
          {/* header */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', borderBottom: '1px solid rgba(28,27,27,0.08)' }}>
            <span style={{ fontSize: 13.5, fontWeight: 800, letterSpacing: '-0.01em', color: INK }}>Direct A Photo Shoot</span>
            <span style={{ width: 24, height: 24, 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="M4 4l8 8M12 4l-8 8" stroke="rgba(28,27,27,0.6)" strokeWidth="1.8" strokeLinecap="round"/></svg>
            </span>
          </div>
          <div style={{ padding: '12px 14px 13px' }}>
            {/* source card */}
            <div style={{ display: 'flex', gap: 0, alignItems: 'stretch', borderRadius: 13, background: 'rgb(250,248,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: 8, marginBottom: 14 }}>
              <div style={{ position: 'relative', width: 148, alignSelf: 'stretch', borderRadius: 9, overflow: 'hidden', flexShrink: 0 }}>
                <img loading="lazy" decoding="async" src={MSHOOT[0]} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} />
              </div>
              <div style={{ flex: 1, minWidth: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '12px 0' }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {[
                  [true, 'Identity'],
                  [true, 'Environment'],
                  [false, 'Pose'],
                  [false, 'Lighting'],
                ].map(([locked, l]) => (
                  <span key={l} style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                    <span style={{ width: 22, height: 22, borderRadius: 7, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                      {locked
                        ? <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><rect x="3.5" y="7" width="9" height="6.5" rx="1.5" stroke="var(--brand-purple-600)" strokeWidth="1.6"/><path d="M5.5 7V5.5a2.5 2.5 0 0 1 5 0V7" stroke="var(--brand-purple-600)" strokeWidth="1.6"/></svg>
                        : <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><rect x="3.5" y="7" width="9" height="6.5" rx="1.5" stroke="rgba(28,27,27,0.45)" strokeWidth="1.6"/><path d="M5.5 7V5.5a2.5 2.5 0 0 1 5 0" stroke="rgba(28,27,27,0.45)" strokeWidth="1.6"/></svg>}
                    </span>
                    <span style={{ fontSize: 10.5, fontWeight: 600, color: locked ? INK : 'rgba(28,27,27,0.55)' }}>{l}{locked ? '' : ' · free'}</span>
                  </span>
                ))}
                </div>
              </div>
            </div>
            {/* shoot type — stacked radio cards */}
            <div style={{ fontSize: 8.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-mute)', marginBottom: 7 }}>Shoot type</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
              {MSH_TYPES.map(x => {
                const act = x.key === type;
                return (
                  <div key={x.key} onClick={() => setType(x.key)} style={{ display: 'flex', gap: 10, borderRadius: 13, padding: '11px 12px', cursor: 'pointer',
                    background: act ? '#fff' : 'transparent', boxShadow: act ? '0 4px 14px rgba(28,27,27,0.07), inset 0 0 0 1px rgba(28,27,27,0.12)' : 'inset 0 0 0 1px rgba(28,27,27,0.08)',
                    transition: `all 0.25s ${SB_EASE}` }}>
                    <span style={{ width: 15, height: 15, borderRadius: '50%', marginTop: 1, flexShrink: 0, background: '#fff', boxSizing: 'border-box',
                      border: act ? '4.5px solid var(--brand-purple-600)' : '1.5px solid rgba(28,27,27,0.3)', transition: 'border 0.2s' }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 6 }}>
                        <span style={{ fontSize: 12.5, fontWeight: 700, color: INK }}>{x.name}</span>
                        <span style={{ fontSize: 8.5, fontWeight: 700, letterSpacing: '0.08em', color: x.bc }}>{x.badge}</span>
                      </div>
                      <div style={{ fontSize: 10, color: 'var(--text-tertiary)', marginTop: 1 }}>{x.sub}</div>
                      {act && (
                        <div style={{ animation: `sz-status-in 0.3s ${SB_EASE}` }}>
                          <div style={{ fontSize: 10.5, lineHeight: 1.45, color: 'var(--text-secondary)', marginTop: 6 }}>{x.desc}</div>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
            {/* photo quantity */}
            <div style={{ fontSize: 8.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-mute)', marginBottom: 7 }}>Photo quantity</div>
            <div className="m-nosb" style={{ display: 'flex', gap: 6, overflowX: 'auto', margin: '0 -14px', padding: '0 14px' }}>
              {[3, 4, 5, 6, 7, 8, 9, 10].map(n => (
                <span key={n} onClick={() => setCount(n)} style={{ width: 36, height: 36, borderRadius: 9999, display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 700, flexShrink: 0, cursor: 'pointer',
                  background: n === count ? INK : 'rgb(246,243,242)', color: n === count ? '#fff' : 'rgba(28,27,27,0.65)', transition: `all 0.2s ${SB_EASE}` }}>{n}</span>
              ))}
            </div>
          </div>
        </div>
      </Reveal>
      <div ref={gridRef} style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        {MSHOOT.map((src, i) => (
          <div key={i} style={{ position: 'relative', aspectRatio: '4 / 5', borderRadius: 13, overflow: 'hidden', background: 'rgb(235,231,231)',
            opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(24px) scale(0.96)',
            transition: `opacity 0.65s ${SB_EASE} ${i * 140}ms, transform 0.65s ${SB_EASE} ${i * 140}ms` }}>
            <img loading="lazy" decoding="async" src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 22%',
              filter: on ? 'none' : 'blur(12px)', transition: `filter 0.9s ${SB_EASE} ${200 + i * 140}ms` }} />
            <span style={{ position: 'absolute', top: 7, left: 7, fontSize: 8.5, fontWeight: 700, color: '#fff',
              background: 'rgba(28,27,27,0.5)', borderRadius: 9999, padding: '3px 7px' }}>{i + 1} / 6</span>
          </div>
        ))}
      </div>
    </MShell>
  );
};

// ---------- § 08 — Reel cloning (dark) ----------
const MREEL_URL = 'instagram.com/reel/xK92hf4…';
const MReelPhone = ({ children, label, w = 138 }) => (
  <div style={{ width: w }}>
    <div style={{ position: 'relative', width: '100%', aspectRatio: '9 / 16', borderRadius: 18, overflow: 'hidden',
      background: '#0d0a12', boxShadow: '0 24px 48px -10px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.12)' }}>
      {children}
    </div>
    <div style={{ textAlign: 'center', marginTop: 9, fontSize: 9, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>{label}</div>
  </div>
);

const MReelSection = () => {
  const [ref, on] = useReveal(0.3);
  const [typed, doneTyping] = useTyping(MREEL_URL, on, 26, 500);
  const [phase, setPhase] = mrS('idle');
  mrE(() => {
    if (doneTyping && phase === 'idle') { const t = setTimeout(() => setPhase('cloning'), 500); return () => clearTimeout(t); }
    if (phase === 'cloning') { const t = setTimeout(() => setPhase('done'), 1800); return () => clearTimeout(t); }
  }, [doneTyping, phase]);
  return (
    <MShell dark>
      <div ref={ref}>
        <MCopyHead dark k="reel" />
        <Reveal delay={140}>
          <div style={{ margin: '28px 0 0', display: 'flex', gap: 8 }}>
            <div style={{ flex: 1, minWidth: 0, borderRadius: 12, background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.16)',
              display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', height: 44 }}>
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}><path d="M6.5 9.5a3 3 0 0 0 4.2 0l2.4-2.4a3 3 0 1 0-4.2-4.2l-1 1M9.5 6.5a3 3 0 0 0-4.2 0L2.9 8.9a3 3 0 1 0 4.2 4.2l1-1" stroke="rgba(255,255,255,0.6)" strokeWidth="1.5" strokeLinecap="round"/></svg>
              <span style={{ fontSize: 11.5, color: typed ? '#fff' : 'rgba(255,255,255,0.45)', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                {typed || 'Paste a reel link'}
                {on && !doneTyping && <span style={{ display: 'inline-block', width: 2, height: 13, background: '#A675FF', marginLeft: 2, verticalAlign: 'middle', animation: 'sz-blink 1s step-end infinite' }} />}
              </span>
            </div>
            <span style={{ display: 'inline-flex', alignItems: 'center', borderRadius: 12, padding: '0 14px', height: 44, flexShrink: 0,
              background: doneTyping ? PULSE : 'rgba(255,255,255,0.1)', transition: `background 0.4s ${SB_EASE}`,
              boxShadow: doneTyping ? '0 8px 24px -6px rgba(129,60,237,0.6)' : 'none',
              fontSize: 10.5, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#fff', cursor: 'pointer' }}>
              {phase === 'cloning' ? 'Cloning…' : 'Clone it'}
            </span>
          </div>
        </Reveal>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 14, marginTop: 32 }}>
          <Reveal delay={200}>
            <MReelPhone label="The reference">
              <MAutoVideo src="assets/reel-reference.mp4" />
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 46, background: 'linear-gradient(to top, rgba(13,10,18,0.75), transparent)' }} />
              <span style={{ position: 'absolute', bottom: 9, left: 9, right: 9, fontSize: 8, color: 'rgba(255,255,255,0.75)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{MREEL_URL}</span>
            </MReelPhone>
          </Reveal>
          <Reveal delay={280}>
            <svg width="42" height="26" viewBox="0 0 86 40" style={{ overflow: 'visible' }}>
              <line x1="4" y1="20" x2="74" y2="20" stroke="#A675FF" strokeWidth="3" strokeDasharray="4 8" strokeLinecap="round" style={{ animation: 'sz-dash 0.7s linear infinite' }} />
              <path d="M72 13l9 7-9 7" fill="none" stroke="#A675FF" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </Reveal>
          <Reveal delay={340}>
            <MReelPhone label="Your clone">
              {/* plays from the start, in step with the reference — no cloning shimmer */}
              <div style={{ position: 'absolute', inset: 0 }}>
                <MAutoVideo src="assets/reel-clone.mp4" />
              </div>
              <React.Fragment>
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.55), transparent 40%)', pointerEvents: 'none' }} />
                  <span style={{ position: 'absolute', top: 8, left: 8, display: 'inline-flex', alignItems: 'center', gap: 4,
                    background: 'rgba(18,15,24,0.55)', borderRadius: 9999, padding: '3px 7px', animation: 'sz-like-pop 0.4s ease-out' }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#A675FF', animation: 'sz-pulse-dot 1.3s ease-in-out infinite' }} />
                    <span style={{ fontSize: 7.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#fff' }}>Your likeness</span>
                  </span>
                  <div style={{ position: 'absolute', bottom: 10, left: 9, fontSize: 8.5, fontWeight: 700, color: '#fff' }}>Same motion. New star.</div>
                </React.Fragment>
            </MReelPhone>
          </Reveal>
        </div>
      </div>
    </MShell>
  );
};

// ---------- § 09 — Voice & Live ----------
const MVoiceLiveSection = () => {
  const [playing, setPlaying] = mrS(true);
  const [muted, setMuted] = mrS(true);
  const vref = React.useRef(null);
  return (
    <MShell>
      <MCopyHead k="voice" />
      <Reveal delay={140}>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }}>
          <div style={{ position: 'relative', width: 224, aspectRatio: '9 / 18.5', borderRadius: 36, background: '#141017',
            padding: 8, boxSizing: 'border-box', boxShadow: '0 24px 48px rgba(28,27,27,0.22), inset 0 0 0 1.5px rgba(255,255,255,0.08)' }}>
            <div style={{ position: 'relative', width: '100%', height: '100%', borderRadius: 29, overflow: 'hidden', background: '#111' }}>
              <video ref={vref} src="assets/video/live-mode-phone.mp4" autoPlay muted loop playsInline preload="metadata"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              <span onClick={() => { const v = vref.current; if (!v) return; v.muted = !v.muted; setMuted(v.muted); }}
                style={{ position: 'absolute', top: 34, left: '50%', transform: 'translateX(-50%)', display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer',
                  background: 'rgba(20,16,23,0.6)', backdropFilter: 'blur(8px)', borderRadius: 9999, padding: '6px 12px' }}>
                <span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#fff' }}>{muted ? '🔇 Unmute' : '🔊 Mute'}</span>
              </span>
              <span style={{ position: 'absolute', top: 7, left: '50%', transform: 'translateX(-50%)', width: 64, height: 17, borderRadius: 9999, background: '#141017' }} />
            </div>
          </div>
        </div>
      </Reveal>
      <Reveal delay={240}>
        <div style={{ position: 'relative', zIndex: 5, marginTop: -64, borderRadius: 18, background: '#fff', boxShadow: '0 20px 44px rgba(28,27,27,0.16), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 18, transform: 'rotate(-1.2deg)' }}>
          <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 11 }}>Voice note</div>
          <div style={{ borderRadius: 11, background: 'rgb(246,243,242)', padding: '10px 13px', fontSize: 12, lineHeight: 1.5, color: INK, marginBottom: 13 }}>
            "good morning — new set drops at nine. don't be late."
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <span onClick={() => setPlaying(p => !p)} style={{ width: 38, height: 38, borderRadius: '50%', background: PULSE, display: 'grid', placeItems: 'center',
              cursor: 'pointer', boxShadow: '0 8px 20px -4px rgba(104,19,212,0.45)', flexShrink: 0 }}>
              {playing
                ? <svg width="12" height="12" viewBox="0 0 16 16"><path d="M4.5 3h2.5v10H4.5zM9 3h2.5v10H9z" fill="#fff"/></svg>
                : <svg width="12" height="12" viewBox="0 0 16 16"><path d="M5 3l8 5-8 5z" fill="#fff"/></svg>}
            </span>
            <Waveform on={playing} bars={24} h={26} />
            <span style={{ fontSize: 11, fontWeight: 700, color: INK, fontVariantNumeric: 'tabular-nums' }}>0:14</span>
          </div>
          <div style={{ marginTop: 13, fontSize: 10.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>Cloned from 15 seconds of audio, free. Notes cost ~0.01 credits per second.</div>
        </div>
      </Reveal>
    </MShell>
  );
};

// ---------- § 10 — Copilot ----------
const MMsg = ({ children, me = false, show, delay = 0, pad = true }) => (
  <div style={{ display: 'flex', justifyContent: me ? 'flex-end' : 'flex-start',
    opacity: show ? 1 : 0, transform: show ? 'none' : 'translateY(14px)',
    transition: `opacity 0.5s ${SB_EASE} ${delay}ms, transform 0.5s ${SB_EASE} ${delay}ms` }}>
    <div style={{ maxWidth: '86%', borderRadius: me ? '14px 14px 4px 14px' : '4px 14px 14px 14px',
      background: me ? INK : 'rgb(246,243,242)', color: me ? '#fff' : INK,
      boxShadow: me ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.06)',
      padding: pad ? '9px 13px' : 0, overflow: 'hidden', fontSize: 12, lineHeight: 1.5 }}>{children}</div>
  </div>
);

const MCopilotSection = () => {
  const [ref, on] = useReveal(0.25);
  const [step, setStep] = mrS(0);
  mrE(() => {
    if (!on) return;
    const ts = [400, 1300, 2300, 3400].map((t, i) => setTimeout(() => setStep(i + 1), t));
    return () => ts.forEach(clearTimeout);
  }, [on]);
  return (
    <MShell bg="#fff">
      <MCopyHead k="copilot" />
      <Reveal delay={140}>
        <div ref={ref} style={{ marginTop: 30, borderRadius: 18, background: CREAM, boxShadow: '0 20px 44px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '11px 14px', borderBottom: '1px solid rgba(28,27,27,0.08)', background: 'rgb(252,248,248)' }}>
            <span style={{ width: 20, height: 20, borderRadius: 9999, background: PULSE, display: 'grid', placeItems: 'center', fontSize: 10, color: '#fff' }}>✦</span>
            <span style={{ fontSize: 12.5, fontWeight: 700, color: INK }}>Copilot</span>
            <span style={{ fontSize: 7.5, fontWeight: 700, color: '#fff', background: 'rgb(129,60,237)', borderRadius: 9999, padding: '2px 6px' }}>NEW</span>
            <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10, fontWeight: 600, color: 'var(--text-secondary)' }}>
              <span style={{ width: 13, height: 13, borderRadius: '50%', backgroundImage: `url(${GENS[0].src})`, backgroundSize: 'cover', backgroundPosition: 'center 15%' }} />
              Scarlett
            </span>
          </div>
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <MMsg me show={step >= 1}>What's going viral right now?</MMsg>
            <MMsg show={step >= 2}>Slow push-in reels are outperforming this week — up 3.1× for creators like you. Here's a brief:</MMsg>
            <MMsg show={step >= 3} pad={false} delay={100}>
              <div style={{ width: 300, maxWidth: '100%' }}>
                <div style={{ display: 'flex', gap: 10, padding: 10 }}>
                  <div style={{ width: 58, height: 74, borderRadius: 9, overflow: 'hidden', flexShrink: 0,
                    backgroundImage: `url(${GENS[1].src})`, backgroundSize: 'cover', backgroundPosition: 'center 15%' }} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 11, fontWeight: 700, color: INK, marginBottom: 3 }}>Golden hour · slow push-in</div>
                    <div style={{ fontSize: 10, color: 'var(--text-secondary)', lineHeight: 1.45, marginBottom: 6 }}>Backlit field, hair in the breeze, they turn to camera.</div>
                    <div style={{ display: 'flex', gap: 4 }}>
                      {['9:16', '5s', '1K'].map(cc => (
                        <span key={cc} style={{ fontSize: 8.5, fontWeight: 600, color: INK, background: '#fff',
                          boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', borderRadius: 9999, padding: '2px 6px' }}>{cc}</span>
                      ))}
                    </div>
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 10px', borderTop: '1px solid rgba(28,27,27,0.07)' }}>
                  <span style={{ fontSize: 9, color: 'var(--text-tertiary)' }}>Option 1 / 3</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, borderRadius: 9, padding: '6px 11px', background: PULSE,
                    boxShadow: '0 8px 20px -4px rgba(104,19,212,0.45)', fontSize: 10, fontWeight: 700, color: '#fff' }}>Generate ✦</span>
                </div>
              </div>
            </MMsg>
            <MMsg show={step >= 4} delay={100}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <svg width="12" height="12" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}><circle cx="8" cy="8" r="7" fill="#22C55E"/><path d="M5 8.2l2 2 4-4.4" stroke="#fff" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
                Generated & scheduled — Fanvue, tomorrow 9:00 AM.
              </span>
            </MMsg>
          </div>
          <div className="m-nosb" style={{ display: 'flex', gap: 6, padding: '0 14px 13px', overflowX: 'auto' }}>
            {['Create a photo for social', 'Find reels to clone', 'Plan my week'].map(q => (
              <span key={q} style={{ fontSize: 10, fontWeight: 600, color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', whiteSpace: 'nowrap',
                border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '5px 10px' }}>{q}</span>
            ))}
          </div>
        </div>
      </Reveal>
    </MShell>
  );
};

// ---------- § 11 — Scheduler ----------
const MCAL_FILLS = [[0, 0, 5], [1, 1, 1], [2, 0, 7], [3, 2, 2], [4, 1, 3], [5, 0, 0], [6, 2, 8]];
const MSchedSection = () => {
  const [filled, setFilled] = mrS(0);
  mrE(() => {
    const t = setInterval(() => setFilled(f => (f >= MCAL_FILLS.length ? 0 : f + 1)), 900);
    return () => clearInterval(t);
  }, []);
  return (
    <MShell>
      <MCopyHead k="sched" />
      {/* Create Post — compact */}
      <Reveal delay={140}>
        <div style={{ borderRadius: 18, background: '#fff', boxShadow: '0 20px 44px rgba(28,27,27,0.12), inset 0 0 0 1px rgba(28,27,27,0.08)', overflow: 'hidden', margin: '30px 0 18px', transform: 'rotate(1.1deg)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 14px', borderBottom: '1px solid rgba(28,27,27,0.08)' }}>
            <span style={{ fontSize: 13, fontWeight: 800, color: INK }}>Create Post</span>
            <span style={{ width: 22, height: 22, 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="M4 4l8 8M12 4l-8 8" stroke="rgba(28,27,27,0.6)" strokeWidth="1.8" strokeLinecap="round"/></svg>
            </span>
          </div>
          <div style={{ padding: '11px 14px 13px' }}>
            <div style={{ fontSize: 8.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-mute)', marginBottom: 6 }}>Post to</div>
            <div className="m-nosb" style={{ display: 'flex', gap: 5, overflowX: 'auto', marginBottom: 9 }}>
              {[['Instagram', '#E1306C', true], ['TikTok', '#1C1B1B', false], ['Twitter/X', '#5B6470', false], ['Reddit', '#FF4500', false], ['Fanvue', '#1FB85A', false]].map(([n, cc, sel]) => (
                <span key={n} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 9999, padding: '5px 10px', fontSize: 9.5, fontWeight: sel ? 700 : 600, whiteSpace: 'nowrap',
                  boxShadow: sel ? 'inset 0 0 0 1.5px var(--brand-purple-500)' : 'inset 0 0 0 1px rgba(28,27,27,0.1)',
                  color: sel ? INK : 'rgba(28,27,27,0.45)' }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: cc, opacity: sel ? 1 : 0.4 }} />{n}
                </span>
              ))}
            </div>
            <div style={{ borderRadius: 12, background: 'rgb(250,248,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: '10px 12px', marginBottom: 9 }}>
              <div style={{ fontSize: 11, lineHeight: 1.5, color: INK }}>poolside, golden light, zero meetings. new set live now ↗</div>
              <span style={{ display: 'inline-flex', marginTop: 4, fontSize: 9.5, fontWeight: 700, color: 'var(--brand-purple-700)' }}>✦ Rewrite in my voice</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 11, padding: 7, outline: '1.5px dashed rgba(28,27,27,0.15)', outlineOffset: -1, marginBottom: 11 }}>
              <div style={{ width: 32, height: 40, borderRadius: 7, overflow: 'hidden', flexShrink: 0,
                backgroundImage: `url(${GENS[7].src})`, backgroundSize: 'cover', backgroundPosition: 'center 20%' }} />
              <span style={{ fontSize: 10, color: 'var(--text-secondary)' }}>poolside-set-04.png · from your Vault</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, borderTop: '1px solid rgba(28,27,27,0.08)', paddingTop: 10 }}>
              <div>
                <div style={{ fontSize: 7.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-mute)' }}>Publishing at</div>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--brand-purple-600)' }}>7/28/2026, 01:17 PM</div>
              </div>
              <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', borderRadius: 9999, padding: '8px 14px',
                background: PULSE, color: '#fff', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
                boxShadow: '0 8px 20px -4px rgba(104,19,212,0.4)' }}>Schedule Post</span>
            </div>
          </div>
        </div>
      </Reveal>
      {/* week rail — posts pop into slots on a loop */}
      <Reveal delay={220}>
        <div style={{ borderRadius: 16, background: '#fff', boxShadow: '0 12px 32px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 13, transform: 'rotate(-0.8deg)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <span style={{ fontSize: 12, fontWeight: 700, color: INK }}>This week</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9.5, fontWeight: 700, color: '#22C55E' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#22C55E', animation: 'sz-pulse-dot 1.4s ease-in-out infinite' }} />
              Auto-publishing
            </span>
          </div>
          <div className="m-nosb" style={{ display: 'flex', gap: 6, overflowX: 'auto', margin: '0 -13px', padding: '0 13px' }}>
            {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, di) => {
              const hit = MCAL_FILLS.find(f => f[0] === di);
              const on = hit && MCAL_FILLS.indexOf(hit) < filled;
              const times = ['9:00', '1:00', '5:00'];
              return (
                <div key={day} style={{ width: 72, flexShrink: 0, borderRadius: 10, background: 'rgb(252,248,248)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '7px 6px' }}>
                  <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 6, textAlign: 'center' }}>{day}</div>
                  <div style={{ position: 'relative', height: 58, borderRadius: 7, overflow: 'hidden',
                    outline: on ? 'none' : '1px dashed var(--brand-purple-200)', outlineOffset: -1,
                    background: on ? 'var(--brand-purple-50)' : 'transparent', transition: `background 0.35s ${SB_EASE}` }}>
                    {on ? (
                      <span style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 3, animation: `sz-status-in 0.4s ${SB_EASE}` }}>
                        <span style={{ width: 26, height: 32, borderRadius: 5, backgroundImage: `url(${GENS[hit[2]].src})`, backgroundSize: 'cover', backgroundPosition: 'center 20%' }} />
                        <span style={{ fontSize: 8, fontWeight: 700, color: 'var(--brand-purple-700)' }}>{times[hit[1]]}</span>
                      </span>
                    ) : (
                      <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontSize: 8, fontWeight: 600, color: 'var(--brand-purple-300)' }}>{times[(di + 1) % 3]}</span>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 9, fontSize: 9.5 }}>
            <span style={{ fontWeight: 700, color: 'var(--brand-purple-700)' }}>{Math.min(filled, MCAL_FILLS.length)} posts queued this week</span>
            <span style={{ color: 'var(--text-tertiary)' }}>Month · Week · Day</span>
          </div>
        </div>
      </Reveal>
    </MShell>
  );
};

// ---------- § 14 — Explore ----------
const MExploreSection = () => {
  const tiles = React.useMemo(() => window.pickExplore(6), []);
  return (
  <MShell bg="#fff">
    <MCopyHead k="explore" />
    <Reveal delay={140}>
      <MRail style={{ marginTop: 28, justifyContent: 'flex-start' }}>
        {['All', 'Social Media', 'Selfie & Mirror', 'Solo', 'Fitness', 'Outdoors'].map((cName, i) => <MPillP key={cName} active={i === 0}>{cName}</MPillP>)}
        <MPillP>18+ 🔒</MPillP>
      </MRail>
    </Reveal>
    <Reveal delay={220}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 18 }}>
        {tiles.map((t, i) => (
          <div key={i} style={{ position: 'relative', borderRadius: 13, overflow: 'hidden', aspectRatio: '3 / 4', background: 'rgb(246,243,242)' }}>
            {t.video ?
            <React.Fragment>
              <video src={t.src} autoPlay muted loop playsInline preload="metadata" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 16%' }} />
              <span style={{ position: 'absolute', top: 6, right: 6, display: 'inline-flex', alignItems: 'center', gap: 3, borderRadius: 9999, padding: '2px 7px', background: 'rgba(28,27,27,0.55)', fontSize: 8, fontWeight: 700, color: '#fff' }}>
                <svg width="5" height="6" viewBox="0 0 8 10" fill="#fff"><path d="M0 0l8 5-8 5z" /></svg>Video</span>
            </React.Fragment> :
            <img loading="lazy" decoding="async" src={t.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 16%' }} />}
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 9,
              background: 'linear-gradient(to top, rgba(20,16,23,0.72), transparent 50%)', opacity: i === 1 ? 1 : 0 }}>
              <span style={{ fontSize: 10, fontWeight: 700, color: '#fff', marginBottom: 2 }}>Generate as you ✦</span>
              <span style={{ fontSize: 8.5, color: 'rgba(255,255,255,0.75)' }}>1 credit · prompt editable</span>
            </div>
          </div>
        ))}
      </div>
    </Reveal>
  </MShell>
  );
};

// ---------- CTA + footer ----------
const MFinalSection = () => {
  return (
    <section style={{ background: '#141017', padding: '56px 22px 0' }}>
      <div>
        <div style={{ padding: '46px 0 60px', textAlign: 'center' }}>
          <Reveal delay={80}>
            <h2 style={{ font: '800 56px/0.98 var(--font-sans)', letterSpacing: '-0.04em', color: '#fff', margin: '0 0 20px' }}>
              Direct<br />the <GradText style={{ backgroundImage: 'linear-gradient(135deg,#C9A8FF,#A675FF)' }}>shoot.</GradText>
            </h2>
          </Reveal>
          <Reveal delay={180}>
            <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.75)', maxWidth: 320, margin: '0 auto 26px' }}>
              Your likeness, a private Character, and a studio that never sleeps. Free to start — no card, no shoot day.
            </p>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <CTAButton size="lg">Try it free</CTAButton>
            </div>
          </Reveal>
        </div>
        <footer style={{ borderTop: '1px solid rgba(255,255,255,0.12)', padding: '34px 22px 30px', textAlign: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginBottom: 8 }}>
            <img loading="lazy" decoding="async" src="assets/logo-icon.png" alt="" style={{ height: 19, filter: 'brightness(0) invert(1)' }} />
            <span style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-0.03em', color: '#fff' }}>sozee</span>
          </div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)' }}>The #1 AI Content Studio For Creators Who Monetize</div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', margin: '9px 0 26px' }}>Customer Support: <a href="tel:9103382416" style={{ color: 'rgba(255,255,255,0.8)', fontWeight: 600 }}>910-338-2416</a></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: 24, rowGap: 30, alignItems: 'start', textAlign: 'left', maxWidth: 320, margin: '0 auto 0 auto', transform: 'translateX(14px)', paddingTop: 4 }}>
            {(window.SOZEE_FOOTER_COLS || []).map(([h, links]) => (
              <div key={h} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)', marginBottom: 2 }}>{h}</span>
                {links.map(([l, href]) => <a key={l} href={href} style={{ fontSize: 12, color: 'rgba(255,255,255,0.75)' }}>{l}</a>)}
              </div>
            ))}
          </div>
        </footer>
        <div style={{ padding: '0 22px 22px', display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center', textAlign: 'center' }}>
          <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.35)' }}>© 2026 Animus Technologies LLC (DBA Sozee AI). All rights reserved.</span>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { MShootSection, MReelSection, MVoiceLiveSection, MCopilotSection, MSchedSection, MExploreSection, MFinalSection });
