// About — Edwin Fernando
function About() {
  const values = [
    { icon: <Icon.Sparkle/>, title: 'Diseño personalizado', text: 'Cada pieza es única, creada para ti.' },
    { icon: <Icon.Needle/>, title: 'Precisión técnica', text: 'Líneas limpias y duraderas.' },
    { icon: <Icon.Shield/>, title: 'Higiene garantizada', text: 'Materiales esterilizados, estándar profesional.' },
    { icon: <Icon.Chat/>, title: 'Comunicación constante', text: 'Te guío en todo el proceso.' },
  ];

  return (
    <section id="sobre-mi">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }} className="about-grid">
        <Reveal>
          <div
            className="corner-marks img-placeholder"
            style={{ position: 'relative', aspectRatio: '4/5', overflow: 'hidden' }}
          >
            <span className="cm-a"/><span className="cm-b"/>
            <img
              src="assets/tatuador.png"
              alt="Edwin Fernando — Tatuador y Piercer"
              loading="lazy"
              style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'contrast(1.08) brightness(0.98)' }}
            />
            <div style={{
              position: 'absolute', bottom: 24, left: 24,
              fontFamily: 'var(--font-accent)', fontSize: 12,
              letterSpacing: '0.3em', color: 'var(--white)',
              background: 'rgba(10,10,10,0.6)', padding: '8px 12px',
              backdropFilter: 'blur(6px)'
            }}>ISFER · QUETZALTENANGO</div>
          </div>
        </Reveal>

        <div>
          <Reveal><div className="label-tag">El artista</div></Reveal>
          <Reveal delay={0.1}>
            <h2 style={{
              fontSize: 'clamp(40px, 6vw, 78px)',
              marginTop: 16, lineHeight: 0.95,
              fontFamily: 'var(--font-display)',
            }}>
              Edwin<br/>
              <span style={{ fontStyle: 'italic' }}>Fernando.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="italic-lead" style={{ fontSize: 22, color: 'var(--ink-red-bright)', marginTop: 16 }}>
              Tatuador y Piercer desde 2018.
            </p>
          </Reveal>
          <Reveal delay={0.3}>
            <span className="divider" style={{ marginTop: 32, marginBottom: 24 }}/>
          </Reveal>
          <Reveal delay={0.35}>
            <p style={{ color: 'var(--white)', opacity: 0.8, lineHeight: 1.8, fontSize: 16 }}>
              Con más de 6 años de experiencia me especializo en crear piezas únicas
              que cuentan la historia de cada cliente. Cada diseño es una colaboración
              entre el artista y quien lo llevará por siempre en su piel.
            </p>
          </Reveal>
          <Reveal delay={0.45}>
            <p style={{ color: 'var(--gray)', lineHeight: 1.8, fontSize: 16, marginTop: 20 }}>
              Trabajo en Hype Tattoo Collective en Quetzaltenango, donde cada sesión
              es una experiencia personalizada desde el diseño hasta la aplicación.
            </p>
          </Reveal>

          <div style={{
            marginTop: 40, display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)', gap: 20,
          }} className="values-grid">
            {values.map((v, i) => (
              <Reveal key={v.title} delay={0.5 + i * 0.08}>
                <div style={{
                  display: 'flex', gap: 16, padding: 20,
                  background: 'var(--bg-card)', border: '1px solid rgba(139,0,0,0.15)',
                }}>
                  <div style={{ color: 'var(--ink-red-bright)', flexShrink: 0, marginTop: 2 }}>{v.icon}</div>
                  <div>
                    <div style={{
                      fontFamily: 'var(--font-accent)', fontSize: 13,
                      letterSpacing: '0.18em', color: 'var(--white)',
                      textTransform: 'uppercase',
                    }}>{v.title}</div>
                    <div style={{ color: 'var(--gray)', fontSize: 13, marginTop: 6, lineHeight: 1.5 }}>
                      {v.text}
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal delay={0.8}>
            <a
              href={IG_URL}
              target="_blank" rel="noopener noreferrer"
              className="btn btn-outline-red"
              style={{ marginTop: 40 }}
            >Sígueme en Instagram <Icon.Arrow/></a>
          </Reveal>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .values-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.About = About;