// Styles — 3 horizontal cards
const STYLE_DATA = [
  { n: '01', key: 'black-grey', title: 'Black & Grey',
    text: 'El arte del claroscuro. Retratos, naturaleza y composiciones complejas con degradados perfectos.' },
  { n: '02', key: 'blackwork', title: 'Blackwork',
    text: 'Diseños de alto contraste en negro sólido. Geométricos, tribales y mandalas con fuerza visual.' },
  { n: '03', key: 'fineline', title: 'Fineline',
    text: 'Líneas delicadas de precisión milimétrica. Florales, lettering y diseños minimalistas.' },
];

function Styles() {
  const [hover, setHover] = useState(null);
  return (
    <section id="estilos" style={{ background: 'var(--bg-secondary)', maxWidth: 'none', padding: '120px 6vw' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto' }}>
        <Reveal><div className="label-tag">Especialidades</div></Reveal>
        <Reveal delay={0.1}>
          <h2 style={{ fontSize: 'clamp(40px, 6vw, 84px)', marginTop: 16, lineHeight: 1 }}>
            Los estilos que <em style={{ color: 'var(--ink-red-bright)' }}>domino.</em>
          </h2>
        </Reveal>

        <div className="styles-grid">
          {STYLE_DATA.map((s, i) => (
            <Reveal key={s.key} delay={i * 0.1}>
              <motion.div
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(null)}
                whileHover={{ x: 12 }}
                transition={{ duration: 0.3 }}
                style={{
                  position: 'relative',
                  padding: '32px 24px',
                  background: hover === i ? 'var(--bg-card)' : 'rgba(20,10,10,0.4)',
                  border: hover === i ? '1px solid var(--ink-red-bright)' : '1px solid rgba(139,0,0,0.2)',
                  display: 'grid',
                  gridTemplateColumns: 'auto 1fr auto',
                  gap: 24,
                  alignItems: 'center',
                  transition: 'background 0.3s, border 0.3s',
                  overflow: 'hidden',
                  height: '100%',
                }} className="style-row"
              >
                {/* Giant number background on hover */}
                <div style={{
                  position: 'absolute', right: -20, top: '50%', transform: 'translateY(-50%)',
                  fontFamily: 'var(--font-display)', fontSize: 240,
                  color: 'var(--ink-red)', opacity: hover === i ? 0.08 : 0,
                  transition: 'opacity 0.4s', lineHeight: 1, fontStyle: 'italic', pointerEvents: 'none',
                }}>{s.n}</div>

                <div className="style-num" style={{
                  fontFamily: 'var(--font-accent)',
                  fontSize: 36, color: 'var(--ink-red-bright)',
                  letterSpacing: '0.1em', minWidth: 50,
                }}>{s.n}</div>

                <div style={{ position: 'relative', zIndex: 2 }}>
                  <h3 style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 'clamp(22px, 2.5vw, 36px)',
                    color: 'var(--white)',
                    textTransform: 'uppercase',
                    letterSpacing: '0.02em',
                    marginBottom: 10,
                  }}>{s.title}</h3>
                  <p style={{
                    color: 'var(--gray)',
                    fontSize: 14, lineHeight: 1.6,
                  }}>{s.text}</p>
                </div>

                <div className="style-arrow" style={{ color: hover === i ? 'var(--ink-red-bright)' : 'var(--gray)', position: 'relative', zIndex: 2 }}>
                  <Icon.Arrow/>
                </div>
              </motion.div>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .styles-grid {
          margin-top: 64px;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        @media (max-width: 600px) {
          .style-row { padding: 24px 18px !important; gap: 16px !important; }
          .style-row .style-num { font-size: 28px !important; min-width: 36px !important; }
          .style-row h3 { font-size: 22px !important; }
          .style-row p { font-size: 13px !important; }
          .style-row .style-arrow { display: none; }
        }
      `}</style>
    </section>
  );
}

window.Styles = Styles;