// How It Works — 4 steps + a full Studio UI mock anchoring the section.
function PSHowItWorks() {
  const [activeStep, setActiveStep] = React.useState(0); // controls which "screen" of the mock shows

  const steps = [
    { n: '01', t: 'Upload your product', d: 'Drop in a clean shot. PNG or JPG, any angle. Background gets isolated automatically.', img: 'assets/step-1-upload.png' },
    { n: '02', t: 'Pick a scene', d: 'Browse 10,000+ Vault Stock photographs. Real scenes. Or upload your own.', img: 'assets/step-2-scene.png' },
    { n: '03', t: 'Download', d: 'Export at 2K (100 credits) or 4K (200 credits). Yours to keep, commercially.', img: 'assets/step-4-download.png' },
    { n: '04', t: 'Make variations', d: 'Apply a variation preset to remix angle, crop and lighting. Generate a full set in one pass.', img: 'assets/step-5-variations.png' },
  ];

  // Preload every screenshot once so step switches are instant.
  React.useEffect(() => {
    steps.forEach(s => { if (s.img) { const i = new Image(); i.src = s.img; } });
  }, []);

  return (
    <section id="how" className="ps-section" data-mobile-pad="true" data-mobile-y="lg" style={{ background: 'var(--cream)', padding: '128px 48px 96px', position: 'relative' }}>
      {/* Section header */}
      <div className="ps-stack-mobile" style={{ maxWidth: 1320, margin: '0 auto 80px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--cocoa)', verticalAlign: 'middle', marginRight: 12 }}></span>
            How it works
          </div>
          <h2 className="celestial" style={{
            fontSize: 'clamp(48px, 6vw, 96px)', color: 'var(--cocoa)', margin: 0,
          }}>Four steps,<br/>a few minutes.</h2>
        </div>
        <p style={{ fontFamily: '"La Villa", sans-serif', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: 480, margin: 0, justifySelf: 'end' }}>
          Hybrid imagery. Real photography, AI placement. You're not generating a fake scene, you're stepping your product into a real one. The difference shows.
        </p>
      </div>

      {/* The mock + step rail layout */}
      <div className="ps-howitworks-grid" style={{ maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '320px 1fr', gap: 48, alignItems: 'start' }}>
        {/* Step rail */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {steps.map((s, i) => {
            const active = i === activeStep;
            return (
              <button key={s.n}
                onClick={() => setActiveStep(i)}
                style={{
                  textAlign: 'left', background: 'transparent', border: 0, cursor: 'pointer',
                  padding: '20px 0', borderTop: '1px solid var(--border-1)',
                  display: 'grid', gridTemplateColumns: '52px 1fr', gap: 16,
                  opacity: active ? 1 : 0.55,
                  transition: 'opacity 240ms cubic-bezier(.22,.61,.36,1)',
                }}>
                <div style={{
                  fontFamily: '"La Villa", sans-serif', fontWeight: 500,
                  fontSize: 18, color: 'var(--cocoa)', lineHeight: 1,
                  letterSpacing: '0.05em', fontVariantNumeric: 'tabular-nums',
                }}>{s.n}</div>
                <div>
                  <div style={{
                    fontFamily: '"La Villa", sans-serif', fontSize: 22,
                    color: 'var(--cocoa)', lineHeight: 1.1, marginBottom: 8,
                  }}>{s.t}</div>
                  <div style={{ fontFamily: '"La Villa", sans-serif', fontSize: 13, lineHeight: 1.6, color: 'var(--fg-2)' }}>{s.d}</div>
                </div>
              </button>
            );
          })}
          <div style={{ height: 1, background: 'var(--border-1)' }} />
        </div>

        {/* Studio mock — pass full steps array so all screenshots can be pre-rendered */}
        <StudioFrame step={activeStep} stepData={steps[activeStep]} allSteps={steps} />
      </div>
    </section>
  );
}

/* ============================================================
   STUDIO FRAME
   Browser-window chrome wrapping a real screenshot of the app
   for each step. Falls back to the hand-drawn StudioMock when
   no screenshot is provided yet.
   ============================================================ */
function StudioFrame({ step, stepData, allSteps }) {
  return (
    <div style={{
      background: 'var(--cocoa)', borderRadius: 6, overflow: 'hidden',
      boxShadow: '0 30px 60px -20px rgba(42,36,32,0.35), 0 8px 18px rgba(42,36,32,0.12)',
      border: '1px solid var(--cocoa-soft)',
      fontFamily: '"La Villa", sans-serif',
    }}>
      {/* Window chrome */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '12px 16px', borderBottom: '1px solid var(--cocoa-soft)',
        background: 'var(--cocoa-deep)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ display: 'flex', gap: 6 }}>
            {['#7a6f64','#5e564f','#5e564f'].map((c,i) => (
              <span key={i} style={{ width: 9, height: 9, borderRadius: 999, background: c, opacity: 0.65 }} />
            ))}
          </div>
          <div style={{ fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sand)' }}>
            Product Studio
          </div>
        </div>
        <div style={{ fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sand)' }}>
          Step {step + 1} of 4 · {stepData.t}
        </div>
      </div>

      {/* Screenshot area, fixed aspect to keep layout stable as user clicks between steps.
          All 5 screenshots are rendered in the DOM at once — we just fade opacity between them.
          That way the browser decodes each PNG once on first paint, not on every click. */}
      <div style={{
        position: 'relative', width: '100%', aspectRatio: '16 / 10',
        background: 'var(--cocoa-deep)', overflow: 'hidden',
      }}>
        {allSteps && allSteps.map((s, i) => s.img ? (
          <img key={s.img} src={s.img} alt={s.t} loading="eager" decoding="async"
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              objectFit: 'contain', objectPosition: 'center',
              opacity: i === step ? 1 : 0,
              transition: 'opacity 180ms ease-out',
              willChange: 'opacity',
            }} />
        ) : null)}
        {!stepData.img && (
          <div style={{
            position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--sand)', textAlign: 'center', padding: 40,
          }}>
            <div>
              <div style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 28, color: 'var(--cream)', marginBottom: 10 }}>
                {stepData.t}
              </div>
              <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.6 }}>
                Screenshot pending
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ============================================================
   STUDIO UI MOCK
   A simplified, recognisable rendering of the Product Studio app:
   top working bar, left product rail, center stage, right backdrops rail.
   ============================================================ */
function StudioMock({ step = 2 }) {
  const [hoverBackdrop, setHoverBackdrop] = React.useState(1);
  const [genProgress, setGenProgress] = React.useState(72);

  // tiny "live" progress (legacy hook — step 2 was Generate; now Download. Kept harmless.)
  React.useEffect(() => {
    if (step !== -1) return;
    const id = setInterval(() => {
      setGenProgress(p => (p >= 100 ? 12 : p + 4));
    }, 240);
    return () => clearInterval(id);
  }, [step]);

  return (
    <div style={{
      background: 'var(--cocoa)', borderRadius: 6, overflow: 'hidden',
      boxShadow: '0 30px 60px -20px rgba(42,36,32,0.35), 0 8px 18px rgba(42,36,32,0.12)',
      border: '1px solid var(--cocoa-soft)',
      color: 'var(--cream)',
      fontFamily: '"La Villa", sans-serif',
    }}>
      {/* TOP WORKING BAR */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 20px', borderBottom: '1px solid var(--cocoa-soft)',
        background: 'var(--cocoa-deep)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ display: 'flex', gap: 6 }}>
            {['#7a6f64','#5e564f','#5e564f'].map((c,i) => (
              <span key={i} style={{ width: 9, height: 9, borderRadius: 999, background: c, opacity: 0.65 }} />
            ))}
          </div>
          <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sand)' }}>
            Product Studio
          </div>
          <div style={{ width: 1, height: 14, background: 'var(--cocoa-soft)' }} />
          <div style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 13, color: 'var(--cream)' }}>
            Untitled project, draft 03
          </div>
        </div>
        <div style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
          {['Project','Edit','View','Share'].map(t => (
            <span key={t} style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sand)' }}>{t}</span>
          ))}
          <div style={{ width: 1, height: 14, background: 'var(--cocoa-soft)' }} />
          <span style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cream)' }}>
            <span style={{ color: 'var(--sand)', marginRight: 8 }}>Credits</span>2,840
          </span>
        </div>
      </div>

      {/* MAIN GRID */}
      <div style={{
        display: 'grid', gridTemplateColumns: '180px 1fr 240px',
        minHeight: 540,
      }}>
        {/* LEFT, products rail */}
        <div style={{ borderRight: '1px solid var(--cocoa-soft)', padding: '18px 14px', background: 'var(--cocoa)' }}>
          <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sand)', marginBottom: 14 }}>Your products</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[1,2,3].map(i => (
              <div key={i} style={{
                aspectRatio: '1/1', background: 'linear-gradient(160deg,#d6c5ad,#7a6a55)',
                borderRadius: 3,
                outline: i === 1 ? '1.5px solid var(--cream)' : '1px solid var(--cocoa-soft)',
                outlineOffset: i === 1 ? 2 : 0,
                position: 'relative',
              }}>
                {i === 1 && <span style={{
                  position: 'absolute', bottom: 6, left: 6, fontSize: 8.5, letterSpacing: '0.2em',
                  textTransform: 'uppercase', color: 'var(--cream)', background: 'rgba(0,0,0,0.45)',
                  padding: '3px 6px', borderRadius: 2,
                }}>Active</span>}
              </div>
            ))}
            <button style={{
              aspectRatio: '1/1', background: 'transparent', border: '1px dashed var(--cocoa-soft)',
              borderRadius: 3, color: 'var(--sand)', fontSize: 22, cursor: 'pointer',
              fontFamily: '"La Villa", sans-serif',
            }}>+</button>
          </div>
          <div style={{ height: 1, background: 'var(--cocoa-soft)', margin: '20px 0' }} />
          <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sand)', marginBottom: 12 }}>Recent</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 11, color: 'var(--cream)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', opacity: 0.85 }}><span>Bottle 01</span><span style={{ color: 'var(--sand)' }}>4K</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', opacity: 0.85 }}><span>Bottle 01</span><span style={{ color: 'var(--sand)' }}>4K</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', opacity: 0.85 }}><span>Pendant</span><span style={{ color: 'var(--sand)' }}>2K</span></div>
          </div>
        </div>

        {/* CENTER, stage */}
        <div style={{
          background: 'var(--cocoa-deep)', position: 'relative', overflow: 'hidden',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {/* canvas */}
          <div style={{
            position: 'relative', width: '78%', aspectRatio: '4/5',
            background: 'var(--cream-deep)', overflow: 'hidden',
            boxShadow: '0 20px 40px rgba(0,0,0,0.45)',
          }}>
            {/* Backing scene */}
            <div style={{
              position: 'absolute', inset: 0,
              backgroundImage: `url(${['assets/loafers-socks.jpg','assets/denim-stool.jpg','assets/still-life-perfume.jpg','assets/leather-bomber-field.jpg'][step]})`,
              backgroundSize: 'cover', backgroundPosition: 'center',
              filter: step === 2 ? 'none' : 'none',
            }} />
            {/* Placement bracket */}
            <div style={{ position: 'absolute', inset: 0 }}>
              {step >= 2 && (
                <>
                  {/* product card */}
                  <div style={{
                    position: 'absolute', left: '50%', top: '52%', transform: 'translate(-50%,-50%)',
                    width: '32%', aspectRatio: '3/4',
                    background: 'linear-gradient(160deg,#C7B59B,#8C7560)',
                    boxShadow: '0 16px 36px rgba(0,0,0,0.45)', borderRadius: 3,
                    opacity: step === 2 ? Math.min(1, genProgress / 100) : 1,
                    transition: 'opacity 240ms',
                  }} />
                  {/* corner brackets */}
                  <div style={{ position: 'absolute', left: '50%', top: '52%', transform: 'translate(-50%,-50%)', width: '40%', aspectRatio: '3/4' }}>
                    {[
                      { top: 0, left: 0 }, { top: 0, right: 0 },
                      { bottom: 0, left: 0 }, { bottom: 0, right: 0 },
                    ].map((p, i) => {
                      const isTop = p.top === 0; const isLeft = p.left === 0;
                      return <div key={i} style={{ position: 'absolute', ...p, width: 14, height: 14,
                        borderTop: isTop ? '1.25px solid rgba(242,236,228,0.9)' : 0,
                        borderBottom: !isTop ? '1.25px solid rgba(242,236,228,0.9)' : 0,
                        borderLeft: isLeft ? '1.25px solid rgba(242,236,228,0.9)' : 0,
                        borderRight: !isLeft ? '1.25px solid rgba(242,236,228,0.9)' : 0,
                      }}/>;
                    })}
                  </div>
                </>
              )}
              {/* upload prompt for step 0 */}
              {step === 0 && (
                <div style={{
                  position: 'absolute', inset: '50% 14% auto', transform: 'translateY(-50%)',
                  textAlign: 'center', color: 'var(--cream)',
                }}>
                  <div style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 22, color: 'var(--cocoa)', marginBottom: 10 }}>Drop your product here</div>
                  <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--cocoa)', opacity: 0.55 }}>PNG · JPG · up to 20mb</div>
                </div>
              )}
            </div>
          </div>

          {/* bottom toolbar inside stage */}
          <div style={{
            position: 'absolute', bottom: 16, left: 24, right: 24,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            color: 'var(--sand)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          }}>
            <span>Step {step + 1} of 4 · {['Upload','Scene','Download','Variations'][step]}</span>
            <span>2240 × 2800 · 4K</span>
          </div>
        </div>

        {/* RIGHT, backdrops rail */}
        <div style={{ borderLeft: '1px solid var(--cocoa-soft)', padding: '18px 14px', background: 'var(--cocoa)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sand)' }}>Backdrops</div>
            <div style={{ fontFamily: '"La Villa", sans-serif', fontWeight: 500, fontSize: 11, color: 'var(--cream)', letterSpacing: '0.05em', fontVariantNumeric: 'tabular-nums' }}>10,247</div>
          </div>
          {/* search */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 10px', background: 'var(--cocoa-deep)', borderRadius: 3,
            border: '1px solid var(--cocoa-soft)', marginBottom: 14,
          }}>
            <span style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 13, color: 'var(--sand)' }}>⌕</span>
            <span style={{ fontSize: 11, color: 'var(--sand)' }}>denim, daylight, soft</span>
          </div>
          {/* filter chips */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 14 }}>
            {[
              { l: 'Skincare', a: false },
              { l: 'Jewelry', a: false },
              { l: 'Clothing', a: true },
              { l: 'Homeware', a: false },
            ].map(c => (
              <span key={c.l} style={{
                fontSize: 9.5, letterSpacing: '0.18em', textTransform: 'uppercase',
                padding: '5px 10px', borderRadius: 999,
                background: c.a ? 'var(--cream)' : 'transparent',
                color: c.a ? 'var(--cocoa)' : 'var(--sand)',
                border: c.a ? '1px solid var(--cream)' : '1px solid var(--cocoa-soft)',
              }}>{c.l}</span>
            ))}
          </div>
          {/* grid of backdrop thumbs */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              'assets/denim-stool.jpg',
              'assets/loafers-socks.jpg',
              'assets/leather-bomber-field.jpg',
              'assets/cowgirl-field.jpg',
              'assets/still-life-perfume.jpg',
              'assets/agave-moody.jpg',
              'assets/horse-braids.jpg',
              'assets/bw-hibiscus.jpeg',
            ].map((s, i) => (
              <div key={i}
                onMouseEnter={() => setHoverBackdrop(i)}
                style={{
                  aspectRatio: '4/5', backgroundImage: `url(${s})`,
                  backgroundSize: 'cover', backgroundPosition: 'center',
                  outline: hoverBackdrop === i ? '1.5px solid var(--cream)' : '1px solid var(--cocoa-soft)',
                  outlineOffset: hoverBackdrop === i ? 2 : 0,
                  cursor: 'pointer', borderRadius: 2,
                  transition: 'outline 200ms',
                }} />
            ))}
          </div>
          <div style={{
            marginTop: 18, padding: 12, background: 'var(--cocoa-deep)', borderRadius: 3,
            border: '1px solid var(--cocoa-soft)',
          }}>
            <div style={{ fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sand)', marginBottom: 6 }}>
              Selected scene
            </div>
            <div style={{ fontFamily: '"La Villa", sans-serif', fontSize: 14, color: 'var(--cream)', lineHeight: 1.2 }}>
              Denim &amp; daylight
            </div>
            <div style={{ fontSize: 10, color: 'var(--sand)', marginTop: 4 }}>TVS-04812 · 35mm · golden hour</div>
          </div>
        </div>
      </div>

      {/* Bottom action bar */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '14px 20px', borderTop: '1px solid var(--cocoa-soft)',
        background: 'var(--cocoa-deep)',
      }}>
        <div style={{ fontSize: 11, color: 'var(--sand)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          Cost · <span style={{ color: 'var(--cream)' }}>200 credits (4K)</span>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <span style={{
            padding: '10px 16px', fontSize: 10.5, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: 'var(--cream)',
            border: '1px solid var(--cocoa-soft)', borderRadius: 999,
          }}>Save draft</span>
          <span style={{
            padding: '10px 18px', fontSize: 10.5, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: 'var(--cocoa)', background: 'var(--cream)',
            borderRadius: 999, fontWeight: 500,
          }}>Generate →</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PSHowItWorks });