const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: '¿Cuánto puedo ahorrar con energía solar?',
      a: 'El ahorro depende de tu consumo mensual y ubicación. En el Caribe colombiano, sistemas residenciales bien diseñados generan ahorros del 80% al 95% en la factura eléctrica desde el primer mes. Para negocios y empresas el ahorro puede superar el 90% según el perfil de consumo.'
    },
    {
      q: '¿Cuánto tiempo toma la instalación?',
      a: 'Una instalación residencial típica toma entre 2 y 5 días. Para proyectos comerciales e industriales el tiempo varía según el tamaño del sistema (entre 1 y 6 semanas). El proceso completo desde el diagnóstico hasta la puesta en marcha toma en promedio 4 a 8 semanas.'
    },
    {
      q: '¿Cuál es el retorno de inversión?',
      a: 'En promedio, los sistemas Ampera tienen un retorno de inversión de 4 a 6 años. Después de eso, generas energía gratis durante 20 años más, ya que los paneles tienen una vida útil de 25 a 30 años con degradación mínima.'
    },
    {
      q: '¿Qué pasa si no hay sol o llueve?',
      a: 'Los sistemas conectados a red (on-grid) usan la energía de la red eléctrica como respaldo cuando la generación solar no es suficiente. Sistemas con baterías mantienen funcionamiento autónomo durante días nublados o cortes de luz. En el Caribe colombiano, incluso en días nublados los paneles generan entre 20% y 40% de su capacidad nominal.'
    },
    {
      q: '¿Qué mantenimiento necesitan los paneles?',
      a: 'Los paneles solares requieren muy poco mantenimiento: limpieza periódica (2 a 3 veces al año) y revisiones técnicas anuales. Ampera ofrece planes de mantenimiento preventivo que incluyen limpieza, revisión de conexiones, inspección del inversor y reporte de rendimiento.'
    },
    {
      q: '¿Trabajan con financiación?',
      a: 'Sí. Tenemos alianzas con entidades financieras que ofrecen créditos verdes con tasas preferenciales para proyectos de energía solar, con cuotas que pueden ser menores al ahorro mensual en la factura eléctrica. También trabajamos con Leasing fotovoltaico para empresas.'
    },
    {
      q: '¿Qué beneficios tributarios existen?',
      a: 'La Ley 1715 de 2014 otorga beneficios tributarios significativos: deducción de renta hasta del 50% de la inversión durante 15 años, exclusión de IVA y aranceles para equipos de FNCE, y depreciación acelerada. Estos beneficios pueden reducir el costo efectivo de tu proyecto entre un 20% y 30%.'
    },
    {
      q: '¿Tienen cobertura en mi ciudad?',
      a: 'Operamos en todo el Caribe colombiano: Barranquilla (sede principal), Cartagena, Santa Marta, Valledupar, Montería, Sincelejo, Riohacha y Puerto Colombia. Para proyectos en otras ciudades de Colombia, contáctanos para evaluar la viabilidad.'
    },
  ];
  return (
    <section id="faq" style={{ padding: '96px 48px', background: '#F4F4F0' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <Eyebrow>Preguntas frecuentes</Eyebrow>
          <h2 style={{ fontFamily: 'Inter', fontSize: 44, fontWeight: 600, color: '#0F3518',
            margin: '16px 0 16px', letterSpacing: '-.01em', textWrap: 'balance' }}>
            Todo lo que necesitas <span style={{ color: '#C4A84F' }}>saber</span>
          </h2>
          <p style={{ color: 'rgba(26,26,24,0.7)', maxWidth: 560, margin: '0 auto', fontSize: 16 }}>
            Resolvemos las dudas más comunes sobre energía solar y nuestros servicios.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {items.map((it, i) => {
            const active = open === i;
            return (
              <div key={i} style={{
                background: '#fff', borderRadius: 16,
                border: active ? '1px solid #C4A84F' : '1px solid rgba(15,53,24,0.08)',
                boxShadow: active ? '0 4px 16px rgba(196,168,79,0.12)' : 'none',
                transition: 'all .25s',
              }}>
                <button onClick={() => setOpen(active ? -1 : i)} style={{
                  width: '100%', padding: '20px 24px', background: 'transparent', border: 'none',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  cursor: 'pointer', fontFamily: 'Inter', fontSize: 17, fontWeight: 600,
                  color: '#0F3518', textAlign: 'left', gap: 16,
                }}>
                  <span style={{ flex: 1 }}>{it.q}</span>
                  <Icon name={active ? 'remove' : 'add'} size={24} color={active ? '#C4A84F' : '#1B5C2C'}/>
                </button>
                {active && (
                  <div style={{ padding: '0 24px 24px', fontSize: 15, lineHeight: 1.7,
                    color: 'rgba(26,26,24,0.72)' }}>{it.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};
window.FAQ = FAQ;