// Style gallery — six comic styles using the bundled preview PNGs
function StyleGallery() {
  const { Icon, SectionHead, Tape } = window.RMS;

  const STYLES = [
    { id: 'clean_roast', name: 'CLEAN ROAST', desc: 'Crisp modern cartoon. Bold outlines.', img: 'images/style_clean_roast.png', tone: 'flame' },
    { id: 'anime_pop', name: 'ANIME POP', desc: 'Cel-shaded action energy.', img: 'images/style_anime_pop.png', tone: 'hot' },
    { id: 'cozy_storybook', name: 'COZY STORYBOOK', desc: 'Warm watercolor wash.', img: 'images/style_cozy_storybook.png', tone: 'sun' },
    { id: 'late_night_surreal', name: 'SILLY SHAPES', desc: 'Flat-color oddball cartoon.', img: 'images/style_late_night_surreal.png', tone: 'plum' },
    { id: 'bold_graphic', name: 'BOLD INK', desc: 'Halftones, dramatic silhouettes.', img: 'images/style_bold_graphic.png', tone: 'ink' },
    { id: 'toy_clay', name: 'TOY CLAY', desc: 'Squishy vinyl toy look.', img: 'images/style_toy_clay.png', tone: 'mint' },
  ];

  const [selected, setSelected] = React.useState(0);
  const active = STYLES[selected];

  return (
    <section id="styles" className="section">
      <div className="wrap">
        <SectionHead
          eyebrow="SIX STYLES · ONE TOOTH"
          title="PICK A LOOK FOR THE COMIC."
          kicker="Every roast can render in any of six styles. Tap one and Dr. Hawley swaps art direction. The dental science underneath stays exactly the same."
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.4fr',
          gap: 32,
          alignItems: 'start',
        }} className="style-grid">

          {/* LEFT: the six swatches */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 14,
          }}>
            {STYLES.map((s, i) => (
              <StyleSwatch
                key={s.id}
                style={s}
                active={i === selected}
                onClick={() => setSelected(i)}
              />
            ))}
          </div>

          {/* RIGHT: featured */}
          <div style={{ position: 'sticky', top: 96 }} className="style-feature">
            <div style={{
              border: '3px solid var(--ink)',
              borderRadius: 28,
              boxShadow: '8px 8px 0 var(--ink)',
              position: 'relative',
              minHeight: 540,
              aspectRatio: '1 / 1',
              overflow: 'hidden',
              transition: 'background 220ms ease',
              backgroundImage: `url(${active.img})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat',
              color: 'var(--paper)',
            }}>
              {/* Top scrim + stamp */}
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0,
                padding: '20px 22px 60px',
                background: 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%)',
                display: 'flex', gap: 10, alignItems: 'flex-start', flexWrap: 'wrap',
              }}>
                <span className="stamp" style={{ color: 'var(--ink)', background: 'var(--paper)' }}>{active.id.toUpperCase()}</span>
              </div>

              {/* Bottom scrim + title */}
              <div style={{
                position: 'absolute', bottom: 0, left: 0, right: 0,
                padding: '60px 24px 22px',
                background: 'linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%)',
              }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', opacity: 0.85 }}>
                  STYLE {String(selected + 1).padStart(2, '0')} / 06
                </div>
                <div className="title-xl" style={{
                  marginTop: 6,
                  fontSize: 'clamp(34px, 4.2vw, 60px)',
                  lineHeight: 0.92,
                  textWrap: 'balance',
                  textShadow: '3px 3px 0 var(--ink)',
                }}>{active.name}</div>
                <div className="body" style={{ marginTop: 8, opacity: 0.95, maxWidth: 460 }}>{active.desc}</div>
              </div>
            </div>

            <div className="mono" style={{ marginTop: 14, fontSize: 11, letterSpacing: '0.2em', color: 'var(--mute)', textAlign: 'center' }}>
              ← TAP A SWATCH TO SWAP STYLE
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .style-grid { grid-template-columns: 1fr !important; }
          .style-feature { position: relative !important; top: 0 !important; }
        }
      `}</style>
    </section>
  );
}

function StyleSwatch({ style, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      position: 'relative',
      cursor: 'pointer',
      background: active ? 'var(--flame)' : '#fff',
      border: '2px solid var(--ink)',
      borderRadius: 18,
      padding: 12,
      boxShadow: active ? '6px 6px 0 var(--ink)' : '4px 4px 0 var(--ink)',
      transform: active ? 'translate(-2px,-2px)' : 'none',
      transition: 'all 180ms ease',
      textAlign: 'left',
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{
        aspectRatio: '1 / 1',
        borderRadius: 12,
        border: '1.5px solid var(--ink)',
        overflow: 'hidden',
        background: 'var(--paper-2)',
        backgroundImage: 'radial-gradient(rgba(14,14,16,0.06) 1px, transparent 1px)',
        backgroundSize: '8px 8px',
        display: 'grid', placeItems: 'center',
      }}>
        <img src={style.img} alt={style.name} style={{
          width: '90%', height: 'auto', objectFit: 'contain',
          filter: active ? 'none' : 'none',
        }}/>
      </div>
      <div>
        <div className="title-m" style={{ fontSize: 14 }}>{style.name}</div>
        <div className="mono" style={{ fontSize: 10, color: active ? 'var(--ink)' : 'var(--mute)', letterSpacing: '0.16em', marginTop: 3 }}>
          {style.id.replace(/_/g, ' ').toUpperCase()}
        </div>
      </div>
      {active && (
        <span style={{
          position: 'absolute', top: -10, right: -10,
          background: 'var(--ink)', color: 'var(--flame)',
          borderRadius: 999, width: 30, height: 30,
          display: 'grid', placeItems: 'center',
          border: '2px solid var(--ink)',
          boxShadow: '2px 2px 0 var(--ink)',
        }}>{window.RMS.Icon.check(14, 'var(--flame)')}</span>
      )}
    </button>
  );
}

window.RMS.StyleGallery = StyleGallery;