/* global React, Reveal, Btn, Arrow, Placeholder, SERVICES */

function Services({ setRoute }) {
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Reveal><div className="eyebrow" style={{ marginBottom: 32 }}>Servicios · 06 disciplinas</div></Reveal>
          <Reveal delay={120}>
            <h1>Lo que <span className="serif accent">hacemos.</span></h1>
          </Reveal>
          <Reveal delay={240}>
            <p className="lede" style={{ marginTop: 32 }}>
              Seis disciplinas que se combinan a la medida de cada cliente. No vendemos paquetes:
              diagnosticamos, proponemos y ejecutamos lo que realmente mueve la aguja.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingTop: 40 }}>
        <div className="container">
          {SERVICES.map((s, i) => (
            <Reveal key={s.num}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '120px 1.2fr 1fr',
                gap: 40,
                padding: '60px 0',
                borderTop: '1px solid var(--line)',
                alignItems: 'start',
              }} className="service-row">
                <div className="mono" style={{ fontSize: 14, color: 'var(--accent)', letterSpacing: '0.1em' }}>{s.num} / 06</div>
                <div>
                  <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', letterSpacing: '-0.03em', lineHeight: 1 }}>{s.title}</h2>
                  <p style={{ marginTop: 24, maxWidth: '44ch', fontSize: 18 }}>{s.desc}</p>
                  <div style={{ marginTop: 32, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {s.items.map((it, j) => (
                      <span key={j} className="tag" style={{ fontSize: 12, padding: '8px 14px' }}>{it}</span>
                    ))}
                  </div>
                </div>
                <Placeholder label={`SRV / ${s.num}`} tone={i % 3 === 0 ? 'accent' : i % 3 === 1 ? 'navy' : 'cream'}>
                  ilustración · {s.title}
                </Placeholder>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Process */}
      <section style={{ background: 'var(--ink)', color: 'var(--bg)' }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 32, color: 'var(--accent)' }}>Nuestro proceso</div>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="display-lg" style={{ color: 'var(--bg)', maxWidth: '16ch' }}>
              De la idea al<br /><span className="serif" style={{ color: 'var(--accent)' }}>resultado medible.</span>
            </h2>
          </Reveal>
          <div className="grid grid-4" style={{ marginTop: 80 }}>
            {[
              { n: '01', t: 'Escucha', d: 'Entendemos el negocio, la audiencia y los objetivos reales.' },
              { n: '02', t: 'Diseño', d: 'Diagnóstico + plan estratégico + KPIs acordados.' },
              { n: '03', t: 'Ejecución', d: 'Implementamos con equipo senior y velocidad boutique.' },
              { n: '04', t: 'Optimización', d: 'Medimos, iteramos y capacitamos a tu equipo.' },
            ].map((p, i) => (
              <Reveal key={i} delay={i * 120}>
                <div style={{ paddingTop: 24, borderTop: '1px solid rgba(246,243,236,0.2)' }}>
                  <div className="mono" style={{ color: 'var(--accent)', fontSize: 13 }}>{p.n}</div>
                  <h3 style={{ fontSize: 28, color: 'var(--bg)', marginTop: 16 }}>{p.t}</h3>
                  <p style={{ color: 'rgba(246,243,236,0.7)', marginTop: 12, fontSize: 14 }}>{p.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Services });