const Process = () => {
  const [openStep, setOpenStep] = React.useState(null);
  const steps = [
    {
      n: '01', icon: 'analytics', title: 'Diagnóstico',
      desc: 'Analizamos tu consumo y la viabilidad técnica de tu propiedad para proyectar el ahorro real.',
      detail: 'Evaluamos tu factura eléctrica de los últimos 6 meses, las condiciones físicas de tu propiedad (cubierta, orientación, sombras), y los recursos solares de tu ubicación (HSP — Horas Sol Pico). Con este análisis proyectamos el ahorro real, el tamaño del sistema, la inversión necesaria y el retorno esperado. Todo sin compromiso y de forma gratuita.'
    },
    {
      n: '02', icon: 'architecture', title: 'Diseño',
      desc: 'Creamos un sistema de ingeniería a medida, optimizando ubicación de paneles y estética.',
      detail: 'Nuestro equipo de ingeniería diseña un sistema solar personalizado: selección de paneles, inversores y estructuras de alta eficiencia; modelamos la disposición óptima sobre tu cubierta para maximizar generación y respetar la estética; calculamos producción esperada mes a mes; y entregamos un plan técnico completo conforme a RETIE y normativa CREG.'
    },
    {
      n: '03', icon: 'construction', title: 'Instalación',
      desc: 'Equipo técnico certificado ejecuta la obra con altos estándares de seguridad y calidad.',
      detail: 'Instalamos con personal certificado SENA y técnicos especialistas. Garantizamos cumplimiento de normas RETIE y RETILAP, materiales certificados, fijación segura sin perforaciones innecesarias, y un proceso ordenado que no interrumpe tu rutina. Tiempo típico: 2-5 días residencial, 1-6 semanas comercial.'
    },
    {
      n: '04', icon: 'monitoring', title: 'Monitoreo',
      desc: 'Plataforma digital para que controles tu generación y ahorro en tiempo real.',
      detail: 'Te entregamos acceso a GridOps, nuestra plataforma de monitoreo: visualizas generación, consumo y ahorro en tiempo real desde tu celular; recibes alertas si algún panel baja rendimiento; reportes mensuales automáticos; y trazabilidad completa de tu autogeneración.'
    },
  ];
  return (
    <section id="proceso" className="amp-px amp-py" style={{ padding: '96px 48px', background: '#F4F4F0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ marginBottom: 64, maxWidth: 720 }}>
          <Eyebrow>Cómo funciona</Eyebrow>
          <h2 style={{ fontFamily: 'Inter', fontSize: 48, fontWeight: 600, color: '#0F3518',
            margin: '16px 0 16px', letterSpacing: '-0.01em', lineHeight: 1.2, textWrap: 'balance' }}>
            Un camino hacia el <span style={{ color: '#C4A84F' }}>control</span> energético
          </h2>
          <p style={{ color: '#1B5C2C', margin: 0, fontSize: 16, maxWidth: 560 }}>
            Acompañamos cada etapa: diagnóstico, diseño, implementación, monitoreo y evolución tecnológica.
          </p>
        </div>
        <div className="amp-g4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {steps.map((s, i) => (
            <Card key={s.n} step onClick={() => setOpenStep(i)} style={{ cursor: 'pointer' }}>
              <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 36, color: '#C4A84F',
                opacity: 0.7, lineHeight: 1, letterSpacing: '-.02em', marginBottom: 16,
                fontFeatureSettings: '"tnum"' }}>{s.n}</div>
              <Icon name={s.icon} size={36} style={{ marginBottom: 16 }}/>
              <h4 style={{ fontFamily: 'Inter', fontSize: 22, fontWeight: 600, color: '#0F3518',
                margin: '0 0 12px' }}>{s.title}</h4>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: 'rgba(26,26,24,0.6)' }}>{s.desc}</p>
              <div style={{ marginTop: 20, color: '#8B7232', fontSize: 12, fontWeight: 700,
                letterSpacing: '.04em' }}>Saber más →</div>
            </Card>
          ))}
        </div>
      </div>

      {openStep !== null && (
        <div onClick={() => setOpenStep(null)} style={{
          position: 'fixed', inset: 0, background: 'rgba(15,53,24,0.55)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000,
          padding: 24,
        }}>
          <div onClick={e => e.stopPropagation()} style={{
            background: '#fff', borderRadius: 20, maxWidth: 600, width: '100%',
            padding: 40, position: 'relative', boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
          }}>
            <button onClick={() => setOpenStep(null)} aria-label="Cerrar" style={{
              position: 'absolute', top: 16, right: 16, background: 'transparent',
              border: 'none', cursor: 'pointer', padding: 8, color: '#0F3518',
            }}><Icon name="close" size={24}/></button>
            <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 36, color: '#C4A84F',
              opacity: 0.7, lineHeight: 1, marginBottom: 16 }}>{steps[openStep].n}</div>
            <Icon name={steps[openStep].icon} size={36} style={{ marginBottom: 16 }}/>
            <h3 style={{ fontFamily: 'Inter', fontSize: 28, fontWeight: 600, color: '#0F3518',
              margin: '0 0 16px' }}>{steps[openStep].title}</h3>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.7, color: 'rgba(26,26,24,0.75)' }}>
              {steps[openStep].detail}
            </p>
          </div>
        </div>
      )}
    </section>
  );
};

window.Process = Process;