/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, SB_EASE,
   MPill, MPillP, MShell, MRail */
// Mobile § 04 Photo Control (sticky card fan) · § 06 Edit Image (sticky crossfade)

const { useState: moS } = React;
const MPC_TABS = [['Setting', '#3A8F6B'], ['Outfit', '#C77D3A'], ['Shot style', '#5B6470'], ['Expression', '#813CED'], ['Object', '#4D73F2']];
const MEXPR = [['Neutral', 'neutral'], ['Soft smile', 'soft_smile'], ['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 MPCPanel = ({ tab }) => {
  if (tab === 0) return (
    <div>
      <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 9 }}>Saved environments</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9 }}>
        <div style={{ position: 'relative', borderRadius: 13, overflow: 'hidden', aspectRatio: '4/3' }}>
          <img loading="lazy" decoding="async" src="assets/settings/my-room.png" 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: 9, bottom: 8, fontSize: 12, fontWeight: 700, color: '#fff' }}>My room</span>
          <span style={{ position: 'absolute', top: 6, right: 6, fontSize: 9, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 8px' }}>4/4</span>
        </div>
        <div style={{ borderRadius: 13, aspectRatio: '4/3', display: 'grid', placeItems: 'center', outline: '1.5px dashed rgba(28,27,27,0.2)', outlineOffset: -1 }}>
          <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-tertiary)' }}>+ New environment</span>
        </div>
      </div>
      <div style={{ marginTop: 10, fontSize: 11, lineHeight: 1.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 className="m-nosb" style={{ display: 'flex', gap: 5, overflowX: 'auto', marginBottom: 10 }}>
        {[['Tops', '#C77D3A', 90, true], ['Bottoms', '#4D73F2', 60, false], ['Shoes', '#3A8F6B', 30, false], ['Accessories', '#B0489B', 60, false]].map(([l, ac, n, on]) => (
          <span key={l} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, borderRadius: 9999, padding: '5px 10px', fontSize: 10, fontWeight: on ? 700 : 600, whiteSpace: 'nowrap',
            background: on ? `color-mix(in srgb, ${ac} 14%, #fff)` : 'rgb(246,243,242)',
            boxShadow: on ? `inset 0 0 0 1.5px ${ac}` : 'inset 0 0 0 1px rgba(28,27,27,0.08)',
            color: on ? `color-mix(in srgb, ${ac} 72%, #1C1B1B)` : 'rgba(28,27,27,0.6)' }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: ac }} />{l} · {n}
          </span>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 7 }}>
        {[['assets/garments/top-crop-white.webp', 'Ruched Crop Tee · White', true], ['assets/garments/top-velvet-emerald.webp', 'Velvet Cami · Emerald', false], ['assets/garments/top-bodysuit-black.webp', 'Halter Bodysuit · Black', false]].map(([img, name, on]) => (
          <div key={name} style={{ borderRadius: 10, background: '#fff', overflow: 'hidden', position: 'relative',
            outline: on ? '2px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: -1 }}>
            <div style={{ aspectRatio: '1', background: '#fff' }}><img loading="lazy" decoding="async" src={img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
            {on && <span style={{ position: 'absolute', top: 5, right: 5, width: 15, height: 15, borderRadius: '50%', background: 'var(--brand-purple-500)', display: 'grid', placeItems: 'center' }}>
              <svg width="8" height="8" 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: '5px 7px', fontSize: 8, fontWeight: 600, color: INK, lineHeight: 1.3, borderTop: '1px solid rgba(28,27,27,0.06)' }}>{name}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 9, paddingTop: 8, borderTop: '1px solid rgba(28,27,27,0.07)' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          {[['assets/garments/top-crop-white.webp', '#C77D3A'], ['assets/garments/bottom-mini-oxblood.webp', '#4D73F2'], ['assets/garments/shoe-stiletto-gold.webp', '#3A8F6B'], ['assets/garments/acc-garter-black.webp', '#B0489B']].map(([img, ac]) => (
            <span key={img} style={{ width: 21, height: 21, borderRadius: 6, overflow: 'hidden', border: `1.5px solid ${ac}` }}>
              <img loading="lazy" decoding="async" src={img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </span>
          ))}
          <span style={{ fontSize: 8.5, fontWeight: 700, color: INK, marginLeft: 4 }}>The look · one per type</span>
        </span>
        <span style={{ fontSize: 8.5, color: 'var(--text-tertiary)' }}>700+ items</span>
      </div>
    </div>
  );
  if (tab === 2) return (
    <div>
      <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 9 }}>Shot style</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9 }}>
        {[['POV iPhone selfie', 'assets/shots/pov_selfie.webp', true], ['Candid shot', 'assets/shots/candid.webp', false], ['Studio shot', 'assets/shots/studio.webp', false], ['Mirror selfie', 'assets/shots/mirror.webp', false]].map(([s, src, on]) => (
          <div key={s}>
            <div style={{ position: 'relative', borderRadius: 11, overflow: 'hidden', height: 88, marginBottom: 5,
              outline: on ? '2px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: on ? 1.5 : 0 }}>
              <img loading="lazy" decoding="async" src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%', opacity: on ? 1 : 0.75 }} />
            </div>
            <div style={{ fontSize: 10, fontWeight: on ? 700 : 600, color: on ? 'var(--brand-purple-700)' : 'rgba(28,27,27,0.6)', textAlign: 'center' }}>{s}</div>
          </div>
        ))}
      </div>
    </div>
  );
  if (tab === 3) return (
    <div>
      <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 9 }}>Facial expression</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6 }}>
        {MEXPR.map(([e, f], i) => (
          <div key={f}>
            <div style={{ position: 'relative', borderRadius: 9, overflow: 'hidden', aspectRatio: '1', marginBottom: 4,
              outline: i === 1 ? '2px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: i === 1 ? 1.5 : 0 }}>
              <img loading="lazy" decoding="async" src={`assets/expressions/${f}.jpg`} alt={e} style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: i === 1 ? 1 : 0.78 }} />
            </div>
            <div style={{ fontSize: 7.5, fontWeight: i === 1 ? 700 : 600, color: i === 1 ? 'var(--brand-purple-700)' : 'rgba(28,27,27,0.6)', textAlign: 'center', lineHeight: 1.25 }}>{e}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 8, fontSize: 9.5, color: 'var(--text-secondary)' }}>+6 more in the library · 🔒 18+</div>
    </div>
  );
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
        <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>Objects</span>
        <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-tertiary)' }}>· 1 of 4 · props</span>
      </div>
      <div style={{ fontSize: 10.5, lineHeight: 1.5, color: 'var(--text-tertiary)', marginBottom: 9 }}>A handbag, a coffee cup, your brand-deal product — up to 4 per set, held or placed in frame.</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 9 }}>
        <div style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', aspectRatio: '4/3', 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: 6, bottom: 5, fontSize: 8.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 7px' }}>Your product ↗</span>
        </div>
        <div style={{ borderRadius: 12, aspectRatio: '4/3', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 5,
          outline: '1.5px dashed rgba(28,27,27,0.18)', outlineOffset: -1 }}>
          <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'rgb(246,243,242)', display: 'grid', placeItems: 'center' }}>
            <svg width="11" height="11" 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: 10, fontWeight: 600, color: 'var(--text-secondary)' }}>Add a prop</span>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, borderRadius: 11, height: 34, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
        <span style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--brand-purple-600)' }}>Choose from library</span>
      </div>
    </div>
  );
};
const MPCPanelM = React.memo(MPCPanel);

const MPC_STAGES = [
  { n: 'Photo Control', h1: 'Don’t prompt it.', h2: 'Direct it.', sub: 'Five dimensions you set — from presets and saved libraries. Keep scrolling to walk through them.' },
  { 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. 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 they wear it, exactly, in every shot.' },
  { 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.' },
];

// No eyebrow anywhere: subpages dropped theirs first, the home page followed.
const MPhotoControlSection = () => {
  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));
  const fan = stage === 0;
  const jumpTo = (i) => {
    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 = MPC_STAGES[stage];
  return (
    <section style={{ background: CREAM }}>
      <div ref={trackRef} style={{ height: '500vh' }}>
        <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 22px', boxSizing: 'border-box', overflow: 'hidden' }}>
          {/* copy — swaps per stage */}
          <div style={{ marginBottom: 52, minHeight: 132, textAlign: 'center' }}>
            <div key={stage} style={{ animation: `sz-status-in 0.5s ${SB_EASE}` }}>
              <h2 style={{ font: '800 30px/1.04 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 14px', textWrap: 'balance' }}>
                {c.h1} <GradText>{c.h2}</GradText>
              </h2>
              <p style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto', maxWidth: 320 }}>{c.sub}</p>
            </div>
          </div>
          {/* card stack fan */}
          <div style={{ position: 'relative', height: 328 }}>
            <div style={{ position: 'absolute', inset: 0, borderRadius: 18, background: '#fff', padding: 13, boxSizing: 'border-box', zIndex: 21,
              boxShadow: '0 20px 44px 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(-46px) 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: 9, height: '100%', boxSizing: 'border-box' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr 1fr', gap: 6 }}>
                  {[['assets/control/top-red.webp', 'Top'], ['assets/control/skirt-black.webp', 'Bottom'],
                    ['assets/control/heels-black.webp', 'Shoes'], ['assets/control/collar-silver.png', 'Accessory'],
                    ['assets/control/shot-mirror.webp', 'Shot'], ['assets/control/room.png', 'Setting']].map(([src, label]) => (
                    <div key={label} style={{ position: 'relative', borderRadius: 9, overflow: 'hidden', background: '#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: 4, bottom: 4, fontSize: 6.5, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
                        color: '#fff', background: 'rgba(20,16,23,0.6)', borderRadius: 9999, padding: '2px 5px' }}>{label}</span>
                    </div>
                  ))}
                </div>
                <div style={{ position: 'relative', borderRadius: 12, 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>
            {MPC_TABS.map(([t, ac], i) => {
              const posLin = i - tabF;
              let x, y, rot, sc, op, z;
              if (posLin >= 0) {
                x = posLin * 11; y = posLin * 4; rot = posLin * 1.4; 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 = 52 * t01; y = 18 * t01 - arc * 58; rot = 6 * t01 - arc * 5; 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 * 11; y = s * 4; rot = s * 1.4; sc = 1 - s * 0.02; op = 1 - s * 0.05; z = 15 - Math.round(s);
              }
              const front = !fan && i === tab;
              return (
                <div key={t} onClick={() => !front && jumpTo(i + 1)} style={{
                  position: 'absolute', inset: 0, borderRadius: 18, background: '#fff', padding: 13, boxSizing: 'border-box',
                  boxShadow: front ? '0 20px 44px 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: `translate(${x.toFixed(2)}px, ${y.toFixed(2)}px) rotate(${rot.toFixed(2)}deg) scale(${sc.toFixed(3)})`,
                  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 className="m-nosb" style={{ display: 'flex', gap: 2, borderBottom: '1px solid rgba(28,27,27,0.08)', marginBottom: 12, overflowX: 'auto' }}>
                    {MPC_TABS.map(([tt, tac], j) => (
                      <span key={tt} onClick={(ev) => { ev.stopPropagation(); jumpTo(j + 1); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '6px 8px 8px', fontSize: 10, fontWeight: j === i ? 700 : 500, cursor: 'pointer', whiteSpace: 'nowrap',
                        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: 5, height: 5, borderRadius: '50%', background: tac, opacity: j === i ? 1 : 0.45 }} />{tt}
                      </span>
                    ))}
                  </div>
                  <MPCPanelM tab={i} />
                </div>
              );
            })}
          </div>
          <div className="m-nosb" style={{ display: 'flex', gap: 6, marginTop: 62, overflowX: 'auto', position: 'relative', zIndex: 30, justifyContent: 'center' }}>
            {MPC_STAGES.slice(1).map((s, i) => (
              <span key={s.n} onClick={() => jumpTo(i + 1)} style={{ borderRadius: 9999, padding: '5px 11px', fontSize: 10, 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}` }}>{s.n}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- § 06 — Edit Image ----------
const MTOOLS = [
  ['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 MED_IMGS = ['assets/edits/base.webp', 'assets/edits/expression.webp', 'assets/edits/object.webp', 'assets/edits/color.webp', 'assets/edits/color.webp'];
const MED_STAGES = [
  { n: 'Edit Image', h1: 'Edit', h2: 'anything.', sub: 'Make any edit you can imagine in our editing suite. 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 — 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.', 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 rest doesn\u2019t move.', tool: 1, prompt: 'make her top red' },
  { n: 'Filters', h1: 'Grade it', h2: 'like film.', sub: 'Contrast, exposure, grain — dialed on sliders with a live before/after split.', tool: 6, filters: true },
];

const MEditSection = () => {
  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));
  const filtIn = Math.min(1, Math.max(0, (sF - 3.2) / 0.6));
  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 = MED_STAGES[stage];
  return (
    <section style={{ background: '#fff' }}>
      <div ref={trackRef} style={{ height: '480vh' }}>
        <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 22px', boxSizing: 'border-box', overflow: 'hidden' }}>
          <div style={{ marginBottom: 16, minHeight: 120, textAlign: 'center' }}>
            <div key={stage} style={{ animation: `sz-status-in 0.5s ${SB_EASE}` }}>
              <h2 style={{ font: '800 28px/1.04 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 8px' }}>
                {c.h1}{c.br ? <br /> : ' '}<GradText>{c.h2}</GradText>
              </h2>
              <p style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--text-secondary)', margin: '0 auto', maxWidth: 320 }}>{c.sub}</p>
            </div>
          </div>
          {/* horizontal tool rail */}
          <div className="m-nosb" style={{ display: 'flex', gap: 4, borderRadius: 13, background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 6, marginBottom: 10, overflowX: 'auto', alignSelf: 'center', maxWidth: '100%' }}>
            {MTOOLS.map(([name, d], i) => (
              <span key={name} title={name} style={{ width: 34, height: 34, borderRadius: 9, display: 'grid', placeItems: 'center', flexShrink: 0,
                background: i === c.tool ? 'var(--brand-purple-500)' : 'transparent', transition: 'background 0.3s' }}>
                <svg width="14" height="14" 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>
          {/* canvas */}
          <div style={{ position: 'relative', borderRadius: 14, overflow: 'hidden', aspectRatio: '4 / 5', maxHeight: '42vh', alignSelf: 'center', width: '100%', maxWidth: 320, boxShadow: '0 20px 40px rgba(28,27,27,0.12)' }}>
            {MED_IMGS.map((src, i) => {
              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: 28, height: 28, borderRadius: '50%', background: '#fff', display: 'grid', placeItems: 'center', boxShadow: '0 4px 12px rgba(0,0,0,0.3)' }}>
                  <svg width="11" height="11" 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: 8, bottom: 8, fontSize: 8.5, fontWeight: 700, color: '#fff', background: 'rgba(20,16,23,0.65)', borderRadius: 5, padding: '2px 7px' }}>After</span>
                <span style={{ position: 'absolute', right: 8, bottom: 8, fontSize: 8.5, fontWeight: 700, color: '#fff', background: 'rgba(20,16,23,0.65)', borderRadius: 5, padding: '2px 7px' }}>Before</span>
              </div>
            )}
            {stage > 0 && stage < 4 && (
              <div style={{ position: 'absolute', left: 9, bottom: 9, width: 56, borderRadius: 8, 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={MED_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: 6, fontWeight: 800, letterSpacing: '0.1em', color: '#fff', background: 'rgba(20,16,23,0.55)', padding: '1px 0' }}>BEFORE</span>
              </div>
            )}
            <span style={{ position: 'absolute', top: 8, right: 8, fontSize: 8.5, fontWeight: 700, color: '#fff',
              background: 'rgba(20,16,23,0.55)', borderRadius: 9999, padding: '3px 8px' }}>
              {stage === 0 ? 'Original' : `Edit ${stage} of 4`}
            </span>
          </div>
          {/* prompt / chips / sliders row */}
          <div style={{ height: 44, marginTop: 10, alignSelf: 'center', width: '100%', maxWidth: 320 }}>
            {c.prompt ? (
              <div key={stage} style={{ display: 'flex', gap: 7, animation: `sz-status-in 0.4s ${SB_EASE}` }}>
                {c.ref && <span style={{ width: 34, height: 34, borderRadius: 10, 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: 10, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)',
                  display: 'flex', alignItems: 'center', padding: '0 11px', height: 34, fontSize: 10.5, color: INK, fontWeight: 500 }}>{c.prompt}</div>
                <span style={{ display: 'inline-flex', alignItems: 'center', borderRadius: 10, padding: '0 13px', height: 34, background: PULSE,
                  color: '#fff', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Apply</span>
              </div>
            ) : c.filters ? (
              <div key="filters" style={{ display: 'flex', gap: 10, alignItems: 'center', height: 34, 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: 7.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 4 }}>{n}</span>
                    <span style={{ display: 'block', position: 'relative', height: 3.5, 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: 10, height: 10, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 4px rgba(0,0,0,0.3)' }} />
                    </span>
                  </span>
                ))}
                <span style={{ borderRadius: 9999, padding: '7px 12px', background: PULSE, color: '#fff', fontSize: 9, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Save</span>
              </div>
            ) : stage === 1 ? (
              <div key="expr" style={{ display: 'flex', gap: 6, animation: `sz-status-in 0.4s ${SB_EASE}` }}>
                {['Neutral', 'Playful laugh ✓', 'Wink'].map((e, i) => <MPillP key={e} active={i === 1} style={{ fontSize: 10 }}>{e}</MPillP>)}
              </div>
            ) : (
              <div key="hint" style={{ display: 'flex', alignItems: 'center', height: 34, fontSize: 11, 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 className="m-nosb" style={{ display: 'flex', gap: 6, marginTop: 14, overflowX: 'auto', justifyContent: 'center' }}>
            {MED_STAGES.slice(1).map((s, i) => (
              <span key={s.n} onClick={() => jumpTo(i + 1)} style={{ borderRadius: 9999, padding: '5px 11px', fontSize: 10, 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>
    </section>
  );
};

Object.assign(window, { MPhotoControlSection, MEditSection });