/* global React, INK, CREAM, PULSE, GENS, Sparkle, GradText, CopyHead,
   Reveal, useReveal, SectionHead, Waveform, SectionShell, SB_EASE */
// New sections: § 03 Photo Control · § 05 Editing suite · § 07 Voice & Live · § 10 Explore

const { useState: smS } = React;
const REF2 = 'assets/gen/likeness-reference.webp';

// ---------- § 03 — Photo Control ----------
const PC_TABS = [['Setting', '#3A8F6B'], ['Outfit', '#C77D3A'], ['Shot style', '#5B6470'], ['Expression', '#813CED'], ['Object', '#4D73F2']];
const EXPRESSIONS = [
['Neutral', 'neutral'], ['Soft smile', 'soft_smile'], ['Playful laugh', 'playful_laugh'], ['Innocent', 'innocent'], ['Surprised', 'surprised'],
['Seductive', 'seductive'], ['Biting lip', 'biting_lip'], ['Wink', 'playful_wink'], ['Blow kiss', 'blow_kiss'], ['Tongue out', 'tongue_out']];

const SHOT_STYLES = ['POV iPhone selfie', 'Candid shot', 'Studio shot', 'Ringlight', 'Mirror selfie'];

const PCChip = ({ children, active, onClick }) =>
<span onClick={onClick} style={{ borderRadius: 9999, padding: '8px 14px', fontSize: 12, fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap',
  background: active ? 'var(--brand-purple-50)' : 'rgb(246,243,242)',
  boxShadow: active ? 'inset 0 0 0 1.5px var(--brand-purple-400)' : 'inset 0 0 0 1px rgba(28,27,27,0.08)',
  color: active ? 'var(--brand-purple-700)' : 'rgba(28,27,27,0.7)', transition: 'all 0.18s' }}>{children}</span>;


const PCPanel = ({ tab }) => {
  const [expr, setExpr] = smS(1);
  const [style, setStyle] = smS(0);
  if (tab === 3) return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 12 }}>Facial expression</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 9 }}>
        {EXPRESSIONS.map(([e, f], i) =>
        <div key={f} onClick={() => setExpr(i)} style={{ cursor: 'pointer' }}>
            <div style={{ position: 'relative', borderRadius: 11, overflow: 'hidden', aspectRatio: '1', marginBottom: 5,
            outline: i === expr ? '2.5px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: i === expr ? 2 : 0 }}>
              <img loading="lazy" decoding="async" src={`assets/expressions/${f}.jpg`} alt={e} style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: i === expr ? 1 : 0.78, transition: 'opacity 0.18s' }} />
              {i === expr && <span style={{ position: 'absolute', top: 5, right: 5, width: 16, height: 16, borderRadius: '50%', background: 'var(--brand-purple-500)', display: 'grid', placeItems: 'center' }}>
                <svg width="9" height="9" 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 style={{ fontSize: 9.5, fontWeight: i === expr ? 700 : 600, color: i === expr ? 'var(--brand-purple-700)' : 'rgba(28,27,27,0.6)', textAlign: 'center', lineHeight: 1.3 }}>{e}</div>
          </div>
        )}
      </div>
      <div style={{ marginTop: 10, fontSize: 11, color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: 5 }}>
        +6 more in the library
        <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><rect x="3.5" y="7" width="9" height="6.5" rx="1.5" stroke="currentColor" strokeWidth="1.5" /><path d="M5.5 7V5.5a2.5 2.5 0 0 1 5 0V7" stroke="currentColor" strokeWidth="1.5" /></svg>
        18+
      </div>
    </div>);

  if (tab === 2) return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 12 }}>Shot style</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
        {[['POV iPhone selfie', 'assets/shots/pov_selfie.webp'], ['Candid shot', 'assets/shots/candid.webp'], ['Studio shot', 'assets/shots/studio.webp'], ['Ringlight', 'assets/shots/ringlight.webp'], ['Mirror selfie', 'assets/shots/mirror.webp']].map(([s, src], i) =>
        <div key={s} onClick={() => setStyle(i)} style={{ cursor: 'pointer', gridColumn: 'span 2' }}>
            <div style={{ position: 'relative', borderRadius: 14, overflow: 'hidden', height: 146, marginBottom: 6,
            outline: i === style ? '2.5px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: i === style ? 2 : 0 }}>
              <img loading="lazy" decoding="async" src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%', opacity: i === style ? 1 : 0.75 }} />
            </div>
            <div style={{ fontSize: 12, fontWeight: i === style ? 700 : 600, color: i === style ? 'var(--brand-purple-700)' : 'rgba(28,27,27,0.6)', textAlign: 'center', lineHeight: 1.3 }}>{s}</div>
          </div>
        )}
      </div>
    </div>);

  if (tab === 0) return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 12 }}>Saved environments</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        {[{ n: 'My room', src: 'assets/settings/my-room.png', b: '4/4' }].map((t) =>
        <div key={t.n} style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', aspectRatio: '4/3' }}>
            <img loading="lazy" decoding="async" src={t.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%)' }} />
            <span style={{ position: 'absolute', left: 12, bottom: 10, fontSize: 15, fontWeight: 700, color: '#fff' }}>{t.n}</span>
            <span style={{ position: 'absolute', top: 9, right: 9, fontSize: 11, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '3px 10px' }}>{t.b}</span>
          </div>
        )}
        <div style={{ borderRadius: 16, aspectRatio: '4/3', display: 'grid', placeItems: 'center', outline: '1.5px dashed rgba(28,27,27,0.2)', outlineOffset: -1 }}>
          <span style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-tertiary)' }}>+ New environment</span>
        </div>
      </div>
      <div style={{ marginTop: 14, fontSize: 12.5, color: 'var(--text-secondary)' }}>Upload 4 photos of a real space — reuse it across every generation.</div>
    </div>);

  if (tab === 1) return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 12 }}>Wardrobe — build a full look</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
        {[['Top', 'Silk blouse', GENS[0]], ['Bottom', 'Denim mini skirt', GENS[2]], ['Shoes', 'Strappy heels', GENS[8]], ['Accessories', 'Gold hoops', GENS[1]]].map(([slot, piece, g], i) =>
        <div key={slot} style={{ display: 'flex', alignItems: 'center', gap: 11, borderRadius: 12, padding: '7px 10px 7px 7px',
          background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
            <div style={{ width: 36, height: 36, borderRadius: 9, overflow: 'hidden', flexShrink: 0,
            backgroundImage: `url(${g.src})`, backgroundSize: 'cover', backgroundPosition: 'center 30%' }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.5)' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#C77D3A' }} />{slot}
              </div>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: INK }}>{piece}</div>
            </div>
            <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '4px 10px', cursor: 'pointer' }}>Library</span>
          </div>
        )}
      </div>
      <div style={{ marginTop: 10, fontSize: 11.5, color: 'var(--text-secondary)' }}>300+ curated pieces or upload your own — each piece stays consistent across the set.</div>
    </div>);

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
        <span style={{ fontSize: 12.5, fontWeight: 700, color: INK }}>Objects</span>
        <span style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--text-tertiary)' }}>· 1 of 4 · props</span>
      </div>
      <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 12 }}>A handbag, a coffee cup, a phone — anything you want held or placed in frame. Up to 4 per set.</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 12 }}>
        <div style={{ position: 'relative', borderRadius: 14, overflow: 'hidden', aspectRatio: '4/3.2', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
          <img loading="lazy" decoding="async" src="assets/garments/acc-garter-black.webp" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', background: '#fff' }} />
          <span style={{ position: 'absolute', left: 7, bottom: 6, fontSize: 9.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '3px 8px' }}>Your product ↗</span>
          <span style={{ position: 'absolute', top: 6, right: 6, width: 18, height: 18, borderRadius: '50%', background: 'rgba(28,27,27,0.5)', display: 'grid', placeItems: 'center', cursor: 'pointer' }}>
            <svg width="8" height="8" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="#fff" strokeWidth="2" strokeLinecap="round" /></svg>
          </span>
        </div>
        <div style={{ borderRadius: 14, aspectRatio: '4/3.2', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 7,
          outline: '1.5px dashed rgba(28,27,27,0.18)', outlineOffset: -1, cursor: 'pointer' }}>
          <span style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgb(246,243,242)', display: 'grid', placeItems: 'center' }}>
            <svg width="13" height="13" 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)' }}>Add a prop</span>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, borderRadius: 12, height: 40, cursor: 'pointer',
        boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
        <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M2.5 2.5h4.5v4.5H2.5zM9 2.5h4.5v4.5H9zM2.5 9h4.5v4.5H2.5zM9 9h4.5v4.5H9z" stroke="var(--brand-purple-600)" strokeWidth="1.4" /></svg>
        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--brand-purple-600)' }}>Choose from library</span>
      </div>
    </div>);

};

// Outfit library — mirrors the Outfit Library feature spec (type × subcategory catalog, one piece per type)
const GTYPES = [
{ k: 'top', label: 'Tops', ac: '#C77D3A', count: 90, items: [
  { img: 'assets/garments/top-crop-white.webp', name: 'Ruched Drawstring Crop Tee · White' },
  { img: 'assets/garments/top-velvet-emerald.webp', name: 'Velvet Cami Crop · Emerald' },
  { img: 'assets/garments/top-bodysuit-black.webp', name: 'Halter Backless Bodysuit · Black' }] },
{ k: 'bottom', label: 'Bottoms', ac: '#4D73F2', count: 60, items: [
  { img: 'assets/garments/bottom-mini-oxblood.webp', name: 'Faux-Leather Slit Mini · Oxblood' },
  { img: 'assets/garments/bottom-denim-lightwash.webp', name: 'Denim Micro Skirt · Light Wash' }] },
{ k: 'shoes', label: 'Shoes', ac: '#3A8F6B', count: 30, items: [
  { img: 'assets/garments/shoe-stiletto-gold.webp', name: 'Lace-Up Stiletto Sandal · Gold' },
  { img: 'assets/garments/shoe-thigh-black.webp', name: 'Patent Thigh Boot · Black' }] },
{ k: 'acc', label: 'Accessories', ac: '#B0489B', count: 60, items: [
  { img: 'assets/garments/acc-garter-black.webp', name: 'Lace Garter Belt · Black' }] }];


const OutfitPanel = () => {
  const [type, setType] = smS(0);
  const [sel, setSel] = smS({ top: 0, bottom: 0, shoes: 0, acc: 0 });
  const t = GTYPES[type];
  return (
    <div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
        {GTYPES.map((g, i) =>
        <span key={g.k} onClick={() => setType(i)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, borderRadius: 9999, padding: '6px 12px',
          fontSize: 11.5, fontWeight: i === type ? 700 : 600, cursor: 'pointer', whiteSpace: 'nowrap', transition: 'all 0.18s',
          background: i === type ? `color-mix(in srgb, ${g.ac} 14%, #fff)` : 'rgb(246,243,242)',
          boxShadow: i === type ? `inset 0 0 0 1.5px ${g.ac}` : 'inset 0 0 0 1px rgba(28,27,27,0.08)',
          color: i === type ? `color-mix(in srgb, ${g.ac} 72%, #1C1B1B)` : 'rgba(28,27,27,0.6)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: g.ac, flexShrink: 0 }} />{g.label} · {g.count}
          </span>
        )}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 9 }}>
        {t.items.map((it, i) => {
          const on = sel[t.k] === i;
          return (
            <div key={it.name} onClick={() => setSel({ ...sel, [t.k]: i })} style={{ cursor: 'pointer', borderRadius: 12, background: '#fff', overflow: 'hidden',
              outline: on ? '2px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: -1, position: 'relative' }}>
              <div style={{ aspectRatio: '1', background: '#fff' }}>
                <img loading="lazy" decoding="async" src={it.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              {on && <span style={{ position: 'absolute', top: 6, right: 6, 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 style={{ padding: '7px 9px', fontSize: 9.5, fontWeight: 600, color: INK, lineHeight: 1.3, borderTop: '1px solid rgba(28,27,27,0.06)' }}>{it.name}</div>
            </div>);

        })}
        {t.items.length < 3 &&
        <div style={{ borderRadius: 12, display: 'grid', placeItems: 'center', outline: '1.5px dashed rgba(28,27,27,0.18)', outlineOffset: -1, minHeight: 120 }}>
            <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--text-tertiary)', textAlign: 'center', padding: '0 8px' }}>+ {t.count - t.items.length} more in the library</span>
          </div>
        }
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, paddingTop: 11, borderTop: '1px solid rgba(28,27,27,0.07)' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          {GTYPES.map((g) =>
          <span key={g.k} style={{ width: 26, height: 26, borderRadius: 7, overflow: 'hidden', border: `1.5px solid ${g.ac}` }}>
              <img loading="lazy" decoding="async" src={g.items[sel[g.k]].img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </span>
          )}
          <span style={{ fontSize: 10.5, fontWeight: 700, color: INK, marginLeft: 5 }}>The look · one piece per type</span>
        </span>
        <span style={{ fontSize: 10.5, color: 'var(--text-tertiary)' }}>700+ items · 48 subcategories</span>
      </div>
    </div>);

};

const PC_COPY = [
{ n: 'Setting', h1: 'Any setting.', h2: 'One click.', sub: 'Pick a saved environment — their bedroom, a hotel pool, a Havana street — and every photo shoots there. No prompting, no describing: one click sets the scene.' },
{ n: 'Outfit', h1: 'Upload any outfit.', h2: 'They wear it.', sub: 'Photograph a garment you own — or pick from 700+ pieces — and put your Character in it, exactly, in every shot of the set.' },
{ n: 'Shot style', h1: 'Select any', h2: 'shot style.', sub: 'Five camera presets — POV iPhone selfie to ringlight — one tap apart.' },
{ n: 'Expression', h1: 'Any mood', h2: 'in 1-click.', sub: 'Ten expressions from soft smile to seductive, applied without touching the prompt.' },
{ n: 'Object', h1: 'Upload or choose', h2: 'custom objects.', sub: 'Up to four objects in frame — including your brand-deal product, consistent in every shot.' }];


const PC_STAGES = [
{ n: 'Photo Control', h1: 'Don’t prompt it.', h2: 'Direct it.', sub: 'Five dimensions you set — Setting, Outfit, Shot style, Expression, Object — from presets and your own saved libraries. Keep scrolling to walk through them.' },
...PC_COPY];


const PCPanelM = React.memo(PCPanel);
const OutfitPanelM = React.memo(OutfitPanel);

const PhotoControlSection = () => {
  // inertia-smoothed scroll: the fan interpolates continuously with scroll instead of snapping per stage
  const [trackRef, p] = window.useSmoothScroll();
  const stage = Math.min(5, Math.max(0, Math.floor(p * 6)));
  const tab = Math.max(0, stage - 1);
  const tabF = Math.min(4, Math.max(0, p * 6 - 1.5)); // continuous fan position, centered on each stage
  const fan = stage === 0;
  const jumpTo = (i) => {// i = stage index (0 = fan intro, 1..5 = features)
    const el = trackRef.current;
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY;
    window.scrollTo({ top: top + (i + 0.5) / 6 * (el.offsetHeight - window.innerHeight), behavior: 'smooth' });
  };
  const c = PC_STAGES[stage];
  return (
    <section style={{ background: CREAM }}>
      <div ref={trackRef} style={{ height: '500vh' }}>
        <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', alignItems: 'center' }}>
          <div style={{ maxWidth: 1140, margin: '0 auto', padding: '0 56px', width: '100%', boxSizing: 'border-box',
            display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
            {/* copy — swaps per stage */}
            <div>
              <div key={stage} style={{ animation: `sz-status-in 0.5s ${SB_EASE}` }}>
                <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px', textWrap: 'balance' }}>
                  {c.h1}<br /><GradText>{c.h2}</GradText>
                </h2>
                <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 28px', maxWidth: 420 }}>{c.sub}</p>
              </div>
              {React.createElement(window.CTAButton, {}, 'Join for free')}
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginTop: 30 }}>
                {PC_COPY.map((p, i) =>
                <span key={p.n} onClick={() => jumpTo(i + 1)} style={{ borderRadius: 9999, padding: '6px 13px', fontSize: 11, fontWeight: 700, cursor: 'pointer', whiteSpace: 'nowrap',
                  background: !fan && i === tab ? INK : 'transparent', color: !fan && i === tab ? '#fff' : 'rgba(28,27,27,0.5)',
                  boxShadow: !fan && i === tab ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.12)', transition: `all 0.3s ${SB_EASE}` }}>{p.n}</span>
                )}
              </div>
            </div>
            {/* card stack — fans out on arrival, reshuffles as you scroll */}
            <div style={{ position: 'relative', height: 470 }}>
              {/* cover card — the selections (outfit, setting, expression) and the shot they produce */}
              <div style={{ position: 'absolute', inset: 0, borderRadius: 20, background: '#fff', padding: 20, boxSizing: 'border-box', zIndex: 21,
                boxShadow: '0 24px 48px rgba(28,27,27,0.16), inset 0 0 0 1px rgba(28,27,27,0.08)',
                opacity: fan ? 1 : 0, transform: fan ? 'none' : 'translateY(-60px) rotate(-4deg) scale(0.96)',
                pointerEvents: 'none', transition: `transform 0.6s ${SB_EASE}, opacity 0.45s ${SB_EASE}`, overflow: 'hidden' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 12, height: '100%', boxSizing: 'border-box' }}>
                  {/* the selections */}
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr 1fr', gap: 8 }}>
                    {[['assets/control/top-red.webp', 'Top', '#fff'], ['assets/control/skirt-black.webp', 'Bottom', '#fff'],
                    ['assets/control/heels-black.webp', 'Shoes', '#fff'], ['assets/control/collar-silver.png', 'Accessory', '#fff'],
                    ['assets/control/shot-mirror.webp', 'Shot style', null], ['assets/control/room.png', 'Setting', null]].map(([src, label, bg]) =>
                    <div key={label} style={{ position: 'relative', borderRadius: 11, 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 style={{ position: 'absolute', left: 6, bottom: 6, fontSize: 8.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
                        color: '#fff', background: 'rgba(20,16,23,0.6)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '3px 8px', whiteSpace: 'nowrap' }}>{label}</span>
                      </div>
                    )}
                  </div>
                  {/* the shot they produce */}
                  <div style={{ position: 'relative', borderRadius: 14, overflow: 'hidden' }}>
                    <img loading="lazy" decoding="async" src="assets/control/result-selfie.webp" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} />
                  </div>
                </div>
              </div>
              {PC_TABS.map(([t, ac], i) => {
                // continuous fan slot: cards glide with scroll; a card leaving the front arcs over to the back
                const posLin = i - tabF;
                let x, y, rot, sc, op, z;
                if (posLin >= 0) {
                  x = posLin * 26;y = posLin * 8;rot = posLin * 2.2;sc = 1 - posLin * 0.02;op = 1 - posLin * 0.05;z = 15 - Math.round(posLin);
                } else if (posLin > -1) {
                  const t01 = -posLin,arc = Math.sin(t01 * Math.PI);
                  x = 104 * t01;y = 32 * t01 - arc * 96;rot = 8.8 * t01 - arc * 7;sc = 1 - t01 * 0.08 + arc * 0.02;op = 1 - t01 * 0.2;z = t01 > 0.62 ? 11 : 20;
                } else {
                  const s = posLin + 5;
                  x = s * 26;y = s * 8;rot = s * 2.2;sc = 1 - s * 0.02;op = 1 - s * 0.05;z = 15 - Math.round(s);
                }
                const front = !fan && i === tab;
                const transform = `translate(${x.toFixed(2)}px, ${y.toFixed(2)}px) rotate(${rot.toFixed(2)}deg) scale(${sc.toFixed(3)})`;
                return (
                  <div key={t} onClick={() => !front && jumpTo(i + 1)} style={{
                    position: 'absolute', inset: 0, borderRadius: 20, background: '#fff', padding: 20, boxSizing: 'border-box',
                    boxShadow: front ? '0 24px 48px rgba(28,27,27,0.16), inset 0 0 0 1px rgba(28,27,27,0.08)' : '0 10px 24px rgba(28,27,27,0.09), inset 0 0 0 1px rgba(28,27,27,0.07)',
                    zIndex: z, transform, opacity: op, transformOrigin: '10% 110%', willChange: 'transform',
                    pointerEvents: op === 0 ? 'none' : 'auto', cursor: front ? 'default' : 'pointer',
                    transition: `box-shadow 0.5s ${SB_EASE}`,
                    overflow: 'hidden'
                  }}>
                    <div style={{ display: 'flex', gap: 3, borderBottom: '1px solid rgba(28,27,27,0.08)', marginBottom: 16 }}>
                      {PC_TABS.map(([tt, tac], j) =>
                      <span key={tt} onClick={(ev) => {ev.stopPropagation();jumpTo(j + 1);}} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 11px 10px', fontSize: 12.5, fontWeight: j === i ? 700 : 500, cursor: 'pointer',
                        color: j === i ? 'var(--brand-purple-700)' : 'rgba(28,27,27,0.55)',
                        borderBottom: j === i ? '2px solid var(--brand-purple-500)' : '2px solid transparent', marginBottom: -1 }}>
                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: tac, opacity: j === i ? 1 : 0.45 }} />{tt}
                        </span>
                      )}
                    </div>
                    <div style={{ minHeight: 300 }}>
                      {i === 1 ? <OutfitPanelM /> : <PCPanelM tab={i} />}
                    </div>
                  </div>);

              })}
            </div>
          </div>
        </div>
      </div>
    </section>);

};

// ---------- § 05 — Editing suite ----------
const TOOL_RAIL = [
['Info', 'M8 7.5v4M8 4.8v.4'],
['Inpaint', 'M3 13l6.5-6.5 2 2L5 15H3v-2zM10.5 5.5l1.5-1.5 2 2-1.5 1.5'],
['Reimagine', 'M8 2l1.2 3.3L12.5 6.5 9.2 7.7 8 11 6.8 7.7 3.5 6.5l3.3-1.2z'],
['Background', 'M3 4.5h10v8H3zM3 10l3-2.6 2.6 2.2L11 7l2 1.8'],
['Expression', 'M8 14A6 6 0 108 2a6 6 0 000 12zM5.8 9.4c.5.8 1.3 1.3 2.2 1.3s1.7-.5 2.2-1.3M6 6.2h0M10 6.2h0'],
['Crop', 'M4.5 1.5v10h10M1.5 4.5h10v10'],
['Filters', 'M3 5h10M5.5 8h5M7 11h2'],
['Upscale', 'M8 12V4M4.8 7.2L8 4l3.2 3.2']];


const EditSection = () => {
  // inertia-smoothed scroll: image crossfades track scroll continuously instead of flipping per stage
  const [trackRef, p] = window.useSmoothScroll();
  const stage = Math.min(4, Math.max(0, Math.floor(p * 5)));
  const sF = Math.min(4, Math.max(0, p * 5 - 0.5)); // continuous stage position (centered)
  const filtIn = Math.min(1, Math.max(0, (sF - 3.2) / 0.6)); // filters chrome fade-in
  const ED_IMGS = ['assets/edits/base.webp', 'assets/edits/expression.webp', 'assets/edits/object.webp', 'assets/edits/color.webp', 'assets/edits/color.webp'];
  const ED_STAGES = [
  { n: 'Edit Image', h1: 'Edit', h2: 'anything.', sub: 'Make any edit you can imagine in our editing suite — inpaint, expressions, objects, colors, filters, 4K upscale. Keep scrolling: one photo, four edits, stacked.', tool: 1 },
  { n: 'Expression', h1: 'New mood.', h2: 'One click.', sub: 'Ten expressions applied without touching a prompt — neutral to playful laugh, their face, still them.', tool: 4 },
  { n: 'Add object', h1: 'Add & reference', h2: 'custom objects.', br: true, sub: 'Brush where it goes and say the word — the edit lands only where you painted. Everything else stays put.', tool: 1, prompt: 'add this gold necklace', ref: 'assets/edits/necklace.png' },
  { n: 'Recolor', h1: 'Type the edit.', h2: 'Watch it happen.', br: true, sub: 'Fabric, light and shadow follow the change — the pose, the room and the last two edits don\u2019t move.', tool: 1, prompt: 'make her top red' },
  { n: 'Filters', h1: 'Grade it', h2: 'like film.', sub: 'Contrast, exposure, brightness, sharpness, grain — dialed on sliders with a live before/after split. Save when it feels right.', tool: 6, filters: true }];

  const jumpTo = (i) => {
    const el = trackRef.current;
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY;
    window.scrollTo({ top: top + (i + 0.5) / 5 * (el.offsetHeight - window.innerHeight), behavior: 'smooth' });
  };
  const c = ED_STAGES[stage];
  return (
    <section style={{ background: '#fff' }}>
      <div ref={trackRef} style={{ height: '480vh' }}>
        <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', alignItems: 'center' }}>
          {/* the canvas side needs the wider track (toolbar + 470px frame); the copy is
              capped at a 420px measure, so giving it the larger share left the whole
              composition sitting left of centre on wide screens */}
          <div style={{ maxWidth: 1140, margin: '0 auto', padding: '0 56px', width: '100%', boxSizing: 'border-box',
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'center' }}>
            {/* canvas */}
            <div style={{ display: 'flex', gap: 14, justifyContent: 'flex-end' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, borderRadius: 16, background: CREAM,
                boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 9, alignSelf: 'center' }}>
                {TOOL_RAIL.map(([name, d], i) =>
                <span key={name} title={name} style={{ width: 44, height: 44, borderRadius: 11, display: 'grid', placeItems: 'center',
                  background: i === c.tool ? 'var(--brand-purple-500)' : 'transparent', transition: 'background 0.3s' }}>
                    <svg width="17" height="17" viewBox="0 0 16 16" fill="none"><path d={d} stroke={i === c.tool ? '#fff' : 'rgba(28,27,27,0.6)'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </span>
                )}
              </div>
              <div style={{ width: 'min(470px, 100%)' }}>
                <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', aspectRatio: '4 / 5', maxHeight: '66vh', boxShadow: '0 20px 40px rgba(28,27,27,0.12)' }}>
                  {ED_IMGS.map((src, i) => {
                    // continuous, scroll-linked crossfade with a full-opacity plateau at each stage center
                    const op = i === 4 ? filtIn :
                    i === 3 ? Math.min(1, Math.max(0, (1 - Math.max(0, 3 - sF)) * 2.2)) :
                    Math.min(1, Math.max(0, (1 - Math.abs(sF - i)) * 2.2));
                    return (
                      <img loading="lazy" decoding="async" key={i} src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
                        filter: i === 4 ? 'contrast(1.08) brightness(0.94) saturate(1.08)' : 'none',
                        clipPath: i === 4 ? 'inset(0 50% 0 0)' : 'none',
                        opacity: op }} />);

                  })}
                  {filtIn > 0.01 &&
                  <div style={{ position: 'absolute', inset: 0, opacity: filtIn, pointerEvents: 'none' }}>
                      <span style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 2, background: '#fff', boxShadow: '0 0 8px rgba(0,0,0,0.35)' }} />
                      <span style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', width: 34, height: 34, borderRadius: '50%', background: '#fff', display: 'grid', placeItems: 'center', boxShadow: '0 4px 12px rgba(0,0,0,0.3)' }}>
                        <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M5.5 4L2 8l3.5 4M10.5 4L14 8l-3.5 4" stroke="rgba(28,27,27,0.7)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
                      </span>
                      <span style={{ position: 'absolute', left: 10, bottom: 10, fontSize: 9.5, fontWeight: 700, color: '#fff', background: 'rgba(20,16,23,0.65)', borderRadius: 6, padding: '3px 8px' }}>After</span>
                      <span style={{ position: 'absolute', right: 10, bottom: 10, fontSize: 9.5, fontWeight: 700, color: '#fff', background: 'rgba(20,16,23,0.65)', borderRadius: 6, padding: '3px 8px' }}>Before</span>
                    </div>
                  }
                  {c.mask && <span key={stage} style={{ position: 'absolute', ...c.mask,
                    border: '2px dashed rgba(166,117,255,0.95)', background: 'rgba(129,60,237,0.2)', animation: 'sz-pulse-dot 1.6s ease-in-out infinite' }} />}
                  {stage > 0 && stage < 4 &&
                  <div style={{ position: 'absolute', left: 12, bottom: 12, width: 74, borderRadius: 9, overflow: 'hidden', border: '1.5px solid rgba(255,255,255,0.6)', boxShadow: '0 4px 12px rgba(0,0,0,0.3)' }}>
                      <img loading="lazy" decoding="async" src={ED_IMGS[0]} alt="" style={{ width: '100%', display: 'block', aspectRatio: '4/5', objectFit: 'cover' }} />
                      <span style={{ position: 'absolute', left: 0, right: 0, bottom: 0, textAlign: 'center', fontSize: 7.5, fontWeight: 800, letterSpacing: '0.1em', color: '#fff', background: 'rgba(20,16,23,0.55)', padding: '2px 0' }}>BEFORE</span>
                    </div>
                  }
                  <span style={{ position: 'absolute', top: 10, right: 10, fontSize: 10, fontWeight: 700, color: '#fff',
                    background: 'rgba(20,16,23,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '4px 10px' }}>
                    {stage === 0 ? 'Original' : `Edit ${stage} of 4`}
                  </span>
                </div>
                <div style={{ height: 54, marginTop: 12 }}>
                  {c.prompt ?
                  <div key={stage} style={{ display: 'flex', gap: 10, animation: `sz-status-in 0.4s ${SB_EASE}` }}>
                      {c.ref && <span style={{ width: 42, height: 42, borderRadius: 12, overflow: 'hidden', flexShrink: 0, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', background: '#fff' }}>
                        <img loading="lazy" decoding="async" src={c.ref} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                      </span>}
                      <div style={{ flex: 1, borderRadius: 12, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)',
                      display: 'flex', alignItems: 'center', padding: '0 14px', height: 42, fontSize: 12.5, color: INK, fontWeight: 500 }}>{c.prompt}</div>
                      <span style={{ display: 'inline-flex', alignItems: 'center', borderRadius: 12, padding: '0 18px', height: 42, background: PULSE,
                      color: '#fff', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
                      boxShadow: '0 8px 20px -4px rgba(104,19,212,0.4)' }}>Apply</span>
                    </div> :
                  c.filters ?
                  <div key="filters" style={{ display: 'flex', gap: 14, alignItems: 'center', height: 42, animation: `sz-status-in 0.4s ${SB_EASE}` }}>
                      {[['Contrast', 0.62], ['Brightness', 0.45], ['Grain', 0.06]].map(([n, v]) =>
                    <span key={n} style={{ flex: 1 }}>
                          <span style={{ display: 'block', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 5 }}>{n}</span>
                          <span style={{ display: 'block', position: 'relative', height: 4, borderRadius: 9999, background: 'rgba(28,27,27,0.1)' }}>
                            <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${v * 100}%`, borderRadius: 9999, background: 'var(--brand-purple-500)' }} />
                            <span style={{ position: 'absolute', left: `${v * 100}%`, top: '50%', transform: 'translate(-50%,-50%)', width: 12, height: 12, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 4px rgba(0,0,0,0.3)' }} />
                          </span>
                        </span>
                    )}
                      <span style={{ borderRadius: 9999, padding: '9px 16px', background: PULSE, color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Save</span>
                    </div> :
                  stage === 1 ?
                  <div key="expr" style={{ display: 'flex', gap: 7, flexWrap: 'wrap', animation: `sz-status-in 0.4s ${SB_EASE}` }}>
                      {['Neutral', 'Playful laugh', 'Wink'].map((e) =>
                    <PCChip key={e} active={e === 'Playful laugh'}>{e === 'Playful laugh' ? 'Playful laugh ✓' : e}</PCChip>
                    )}
                    </div> :

                  <div key="hint" style={{ display: 'flex', alignItems: 'center', height: 42, fontSize: 12.5, color: 'var(--text-tertiary)', animation: `sz-status-in 0.4s ${SB_EASE}` }}>
                      Brush the spot, type the change — or pick a preset.
                    </div>
                  }
                </div>
              </div>
            </div>
            {/* copy — swaps per stage */}
            <div>
              <div key={stage} style={{ animation: `sz-status-in 0.5s ${SB_EASE}` }}>
                <h2 style={{ font: '800 44px/1.05 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px', whiteSpace: 'nowrap' }}>
                  {c.h1}{c.br ? <br /> : ' '}<GradText>{c.h2}</GradText>
                </h2>
                <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 28px', maxWidth: 420 }}>{c.sub}</p>
              </div>
              {React.createElement(window.CTAButton, {}, 'Start today')}
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginTop: 30 }}>
                {ED_STAGES.slice(1).map((s, i) =>
                <span key={s.n} onClick={() => jumpTo(i + 1)} style={{ borderRadius: 9999, padding: '6px 13px', fontSize: 11, fontWeight: 700, cursor: 'pointer', whiteSpace: 'nowrap',
                  background: stage === i + 1 ? INK : 'transparent', color: stage === i + 1 ? '#fff' : 'rgba(28,27,27,0.5)',
                  boxShadow: stage === i + 1 ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.12)', transition: `all 0.3s ${SB_EASE}` }}>{s.n}</span>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

// ---------- § 07 — Voice & Live ----------
// talking-head video in a phone frame (Live Mode)
const PhoneLiveVideo = () => {
  const ref = React.useRef(null);
  const [muted, setMuted] = React.useState(true);
  React.useEffect(() => {
    const v = ref.current;
    if (!v) return;
    v.muted = true;
    setMuted(true);
    const nudge = () => {
      const r = v.getBoundingClientRect();
      const on = r.bottom > 0 && r.top < window.innerHeight && r.width > 0;
      if (on) {if (v.paused) v.play().catch(() => {});} else if (!v.paused) v.pause();
    };
    const io = new IntersectionObserver(nudge, { threshold: 0.01 });
    io.observe(v);
    nudge();
    const t = setInterval(nudge, 700);
    return () => {io.disconnect();clearInterval(t);};
  }, []);
  return (
    <div style={{ display: 'flex', justifyContent: 'center', height: '100%', alignItems: 'center' }}>
      <div style={{ position: 'relative', width: 234, aspectRatio: '9 / 18.5', borderRadius: 38, background: '#141017',
        padding: 9, 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: 30, overflow: 'hidden', background: '#111' }}>
          <video ref={ref} 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 = ref.current;if (!v) return;v.muted = !v.muted;setMuted(v.muted);}}
          style={{ position: 'absolute', bottom: 14, left: '50%', transform: 'translateX(-50%)', display: 'inline-flex', alignItems: 'center', gap: 7, cursor: 'pointer',
            background: 'rgba(20,16,23,0.6)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', borderRadius: 9999, padding: '7px 14px' }}>
            {muted ?
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M8 3L4.8 5.6H2.5v4.8h2.3L8 13z" fill="#fff" /><path d="M11 6l3 4M14 6l-3 4" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" /></svg> :
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M8 3L4.8 5.6H2.5v4.8h2.3L8 13z" fill="#fff" /><path d="M10.6 5.8a3 3 0 0 1 0 4.4M12.4 4.2a5.4 5.4 0 0 1 0 7.6" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" /></svg>}
            <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#fff' }}>{muted ? 'Unmute' : 'Mute'}</span>
          </span>
          <span style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 74, height: 20, borderRadius: 9999, background: '#141017' }} />
        </div>
      </div>
    </div>);

};

const VoiceLiveSection = () => {
  const [playing, setPlaying] = smS(true);
  return (
    <SectionShell>
      <CopyHead center k="voice" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 26, marginTop: 52, maxWidth: 940, marginLeft: 'auto', marginRight: 'auto', alignItems: 'center' }}>
        {/* voice note */}
        <Reveal delay={140} style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
          <div style={{ borderRadius: 20, background: '#fff', boxShadow: '0 24px 48px rgba(28,27,27,0.12), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 22, width: '100%', boxSizing: 'border-box',
            transform: 'perspective(1400px) rotateX(1.5deg) rotate(-1.4deg)', transformOrigin: '50% 50%' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 14 }}>Voice note</div>
            <div style={{ borderRadius: 12, background: 'rgb(246,243,242)', padding: '12px 15px', fontSize: 13, lineHeight: 1.5, color: INK, marginBottom: 16 }}>
              "good morning — new set drops at nine. don't be late."
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
              <span onClick={() => setPlaying((p) => !p)} style={{ width: 44, height: 44, 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="14" height="14" viewBox="0 0 16 16"><path d="M4.5 3h2.5v10H4.5zM9 3h2.5v10H9z" fill="#fff" /></svg> :
                <svg width="14" height="14" viewBox="0 0 16 16"><path d="M5 3l8 5-8 5z" fill="#fff" /></svg>}
              </span>
              <Waveform on={playing} bars={30} h={30} />
              <span style={{ fontSize: 12, fontWeight: 700, color: INK, fontVariantNumeric: 'tabular-nums' }}>0:14</span>
            </div>
            <div style={{ marginTop: 16, fontSize: 12, color: 'var(--text-secondary)' }}>Cloned from 15 seconds of audio, free. Notes cost ~0.01 credits per second.</div>
          </div>
        </Reveal>
        {/* live mode — talking head in a phone */}
        <Reveal delay={240}>
          <PhoneLiveVideo />
        </Reveal>
      </div>
    </SectionShell>);

};

// ---------- § 10 — Explore ----------
const EXP_CATS = ['All', 'Social Media', 'Selfie & Mirror', 'Solo', 'Fitness', 'Outdoors & Travel'];

const ExploreSection = () => {
  const [hover, setHover] = smS(1);
  const tiles = React.useMemo(() => window.pickExplore(6), []);
  return (
    <SectionShell bg="#fff">
      <CopyHead row k="explore" />
      <Reveal delay={160}>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 36, flexWrap: 'wrap' }}>
          {EXP_CATS.map((c, i) => <PCChip key={c} active={i === 0}>{c}</PCChip>)}
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, borderRadius: 9999, padding: '8px 14px', fontSize: 12, fontWeight: 600,
            background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: 'rgba(28,27,27,0.55)' }}>
            18+
            <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="currentColor" strokeWidth="1.5" /><path d="M5.5 7V5.5a2.5 2.5 0 0 1 5 0V7" stroke="currentColor" strokeWidth="1.5" /></svg>
          </span>
        </div>
      </Reveal>
      <Reveal delay={240}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12, marginTop: 26 }}>
          {tiles.map((t, i) =>
          <div key={i} onMouseEnter={() => setHover(i)}
          style={{ position: 'relative', borderRadius: 14, overflow: 'hidden', aspectRatio: '3 / 4.4', cursor: 'pointer', background: 'rgb(246,243,242)',
            transform: hover === i ? 'translateY(-6px)' : 'none', transition: `transform 0.35s ${SB_EASE}` }}>
              {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: 8, right: 8, display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 9999, padding: '3px 8px', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', fontSize: 9, fontWeight: 700, color: '#fff' }}>
                  <svg width="6" height="7" 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: 10,
              background: 'linear-gradient(to top, rgba(20,16,23,0.72), transparent 50%)',
              opacity: hover === i ? 1 : 0, transition: 'opacity 0.25s' }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: '#fff', marginBottom: 3 }}>Generate as you ✦</span>
                <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.75)' }}>1 credit · prompt editable</span>
              </div>
            </div>
          )}
        </div>
      </Reveal>
    </SectionShell>);

};

Object.assign(window, { PhotoControlSection, EditSection, VoiceLiveSection, ExploreSection, PCChip });