/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, AppWindow, SB_EASE */
// Editing Suite feature page — hero: copy left, live editor board right.
const { useState: edS, useEffect: edE } = React;
const ED_ACCENTS = { Inpaint: '#4D73F2', Expression: '#B0489B', Recolor: '#C77D3A', Filters: '#3A8F6B', Upscale: '#813CED' };
const ED_TOOLS = [
  ['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 ED_CYCLE = [
  { src: 'assets/edits/base.webp', chip: 'Original', tool: -1 },
  { src: 'assets/edits/expression.webp', chip: 'Expression · Playful laugh', tool: 3 },
  { src: 'assets/edits/object.webp', chip: 'Inpaint · necklace added', tool: 0 },
  { src: 'assets/edits/color.webp', chip: 'Recolor · outfit → red', tool: -2 }];

const EDBoard = () => {
  const [ref, on] = useReveal(0.3);
  const [step, setStep] = edS(0);
  edE(() => {
    if (!on) return;
    const t = setInterval(() => setStep(s => (s + 1) % ED_CYCLE.length), 2600);
    return () => clearInterval(t);
  }, [on]);
  const c = ED_CYCLE[step];
  return (
    <div ref={ref} style={{ transform: 'rotate(1.4deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>
      <AppWindow>
        <div style={{ display: 'flex', gap: 12, padding: '18px 20px 20px' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 5, flexShrink: 0 }}>
            {ED_TOOLS.map(([name, d], i) => {
              const active = (step === 1 && i === 3) || (step === 2 && i === 0) || (step === 3 && i === 0);
              return (
                <span key={name} title={name} style={{ width: 34, height: 34, borderRadius: 9, display: 'grid', placeItems: 'center', transition: `all 0.3s ${SB_EASE}`,
                  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)' }}>
                  <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d={d} stroke={active ? 'var(--brand-purple-600)' : 'rgba(28,27,27,0.55)'} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </span>);
            })}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ position: 'relative', borderRadius: 13, overflow: 'hidden', height: 330, background: 'rgb(246,243,242)' }}>
              {ED_CYCLE.map((im, i) =>
                <img loading="lazy" decoding="async" key={im.src + i} src={im.src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 12%',
                  opacity: step === i ? 1 : 0, transition: `opacity 0.6s ${SB_EASE}` }} />)}
              <span key={step} style={{ position: 'absolute', left: 10, bottom: 10, fontSize: 9.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '4px 10px', animation: `sz-status-in 0.4s ${SB_EASE}` }}>{c.chip}</span>
              <span style={{ position: 'absolute', top: 10, right: 10, fontSize: 9, fontWeight: 800, letterSpacing: '0.06em', color: '#fff', background: PULSE, borderRadius: 9999, padding: '4px 10px', boxShadow: '0 6px 16px -2px rgba(104,19,212,0.5)' }}>4K</span>
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' }}>
              {ED_CYCLE.slice(1).map((im, i) =>
                <span key={im.chip} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, borderRadius: 9999, padding: '5px 11px', fontSize: 9.5, fontWeight: 700, transition: `all 0.3s ${SB_EASE}`,
                  background: step >= i + 1 ? INK : 'rgb(246,243,242)', color: step >= i + 1 ? '#fff' : 'rgba(28,27,27,0.45)',
                  boxShadow: step >= i + 1 ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
                  {step >= i + 1 && <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>}
                  Edit {i + 1}</span>)}
              <span style={{ marginLeft: 'auto', fontSize: 9.5, fontWeight: 600, color: 'var(--text-tertiary)', alignSelf: 'center' }}>One photo · edits stack</span>
            </div>
          </div>
        </div>
      </AppWindow>
    </div>);
};

const EditingSuiteHero = () => (
  <section style={{ background: CREAM, padding: '0 0 100px' }}>
    <div style={{ maxWidth: 1180, margin: '0 auto', padding: '140px 56px 0', display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 60, alignItems: 'center' }}>
      <div>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 20, borderRadius: 9999, padding: '7px 14px', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
            <a href="/" style={{ fontSize: 11.5, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>Features</a>
            <span style={{ fontSize: 11, color: 'rgba(28,27,27,0.35)' }}>/</span>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>Editing Suite</span>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <h1 style={{ font: '800 62px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 20px', textWrap: 'balance' }}>
            Edit anything.<br /><GradText>Reshoot nothing.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 30px', maxWidth: 430 }}>
            Make any edit you can imagine in our editing suite — inpaint, expressions, recolor, filters, 4K upscale. One photo, four edits, stacked — and nothing else in the photo moves.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Start editing</CTAButton>
          </div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}><EDBoard /></Reveal>
    </div>
  </section>
);

Object.assign(window, { EditingSuiteHero, ED_ACCENTS });