/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, AppWindow, SB_EASE */
// Photo Control feature page — hero: copy left, the control board (selections → shot) right.
const PC_ACCENTS = { Setting: '#4D73F2', Outfit: '#C77D3A', 'Shot style': '#3A8F6B', Expression: '#B0489B', Object: '#813CED' };

const PCBoard = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <div ref={ref} style={{ transform: 'rotate(1.4deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>
      <AppWindow>
        <div style={{ padding: '20px 22px 22px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 12, height: 330 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr 1fr', gap: 8 }}>
              {[['assets/control/top-red.webp', 'Outfit', '#fff'], ['assets/control/skirt-black.webp', 'Outfit', '#fff'],
                ['assets/control/shot-mirror.webp', 'Shot style', null], ['assets/control/expression-surprised.jpg', 'Expression', null],
                ['assets/control/collar-silver.png', 'Object', '#fff'], ['assets/control/room.png', 'Setting', null]].map(([src, label, bg], i) =>
                <div key={i} style={{ position: 'relative', borderRadius: 11, overflow: 'hidden', background: bg || '#eee', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)',
                  opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(10px)', transition: `opacity 0.45s ${SB_EASE} ${i * 70}ms, transform 0.45s ${SB_EASE} ${i * 70}ms` }}>
                  <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, display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 8, 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' }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: PC_ACCENTS[label] }} />{label}</span>
                </div>
              )}
            </div>
            <div style={{ position: 'relative', borderRadius: 14, overflow: 'hidden' }}>
              <img loading="lazy" decoding="async" src="assets/control/result-selfie.webp" alt="The shot" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%',
                opacity: on ? 1 : 0, filter: on ? 'none' : 'blur(12px)', transition: `opacity 0.7s ${SB_EASE} 450ms, filter 0.9s ${SB_EASE} 450ms` }} />
              <span style={{ position: 'absolute', left: 9, bottom: 9, fontSize: 9.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '3px 9px' }}>The shot they produce</span>
            </div>
          </div>
        </div>
      </AppWindow>
    </div>);
};

const PhotoControlHero = () => (
  <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 }}>Photo Control</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' }}>
            Don’t prompt it.<br /><GradText>Direct it.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 30px', maxWidth: 430 }}>
            Five dimensions you set before you generate — Setting, Outfit, Shot style, Expression, Object — from presets and your own saved libraries. No prompt engineering, no re-rolling.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Start directing</CTAButton>
          </div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}><PCBoard /></Reveal>
    </div>
  </section>
);

Object.assign(window, { PhotoControlHero, PC_ACCENTS });