/* global React, Icon, Reveal, CountUp */
const { useState: useStateSol } = React;

/* ===========================================================
   Soluciones por industria — 4 cards
   =========================================================== */
function Solutions() {
  const items = [
    {
      tag: 'MIN',
      icon: <Icon.Mountain />,
      title: 'Minería',
      desc: 'Energía para operaciones críticas en zonas remotas con alta radiación. Hibridación diésel-solar, contratos PPA y soluciones para faenas 24/7.',
      stat: { value: '5.2', suffix: ' MWp', label: 'desplegados en faenas mineras' },
      tech: ['Tracker 1P', 'PPA', 'Off-grid hybrid'],
      href: 'SLF Energia - Solucion Mineria.html',
    },
    {
      tag: 'RET',
      icon: <Icon.Cart />,
      title: 'Retail y multi-sucursal',
      desc: 'Reducción sistemática de costos operativos a lo largo de toda la red de tiendas, centros de distribución y oficinas comerciales.',
      stat: { value: '32', suffix: '%', label: 'reducción promedio cuenta eléctrica' },
      tech: ['Net Billing', 'Multi-sitio', 'Monitoreo central'],
      href: 'SLF Energia - Solucion Retail.html',
    },
    {
      tag: 'IND',
      icon: <Icon.Factory />,
      title: 'Manufactura e industria pesada',
      desc: 'Cobertura contra alza tarifaria y previsibilidad de costo energético de mediano plazo para plantas con consumo base elevado.',
      stat: { value: '6.8', suffix: ' años', label: 'payback típico autoconsumo' },
      tech: ['Autoconsumo', 'PMGD', 'TE4'],
      href: 'SLF Energia - Solucion Manufactura.html',
    },
    {
      tag: 'AGR',
      icon: <Icon.Leaf />,
      title: 'Agroindustria',
      desc: 'Riego, refrigeración y bombeo solar para la temporada productiva. Estructuras adaptadas a terrenos agrícolas y consumo estacional.',
      stat: { value: '11', suffix: '', label: 'plantas en riego del centro-norte' },
      tech: ['Bombeo solar', 'Frío industrial', 'Off-grid'],
      href: 'SLF Energia - Solucion Agroindustria.html',
    },
  ];

  return (
    <section id="soluciones" className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <p className="eyebrow mb-3">01 — Soluciones por industria</p>
            <h2 className="h-1">Diseñamos para el perfil de carga real de tu operación.</h2>
          </div>
          <p className="muted">
            Cada industria tiene un perfil de consumo distinto: turnos, estacionalidad, criticidad y geografía. Nuestra ingeniería se ajusta a tu negocio, no al revés.
          </p>
        </div>

        <div className="grid grid-4">
          {items.map((it, i) => (
            <Reveal key={it.title} delay={i * 80}>
              <a href={it.href} className="card card-hover" style={{ display: 'block', padding: 28, height: '100%' }}>
                <div className="flex items-center justify-between mb-6">
                  <div style={{
                    width: 48, height: 48, borderRadius: 10,
                    background: '#E8EEF8', color: 'var(--pv-blue)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center'
                  }}>
                    {it.icon}
                  </div>
                  <span className="badge mono">{it.tag}</span>
                </div>
                <h3 className="h-3 mb-3">{it.title}</h3>
                <p className="body" style={{ fontSize: 14, lineHeight: 1.55, margin: 0 }}>{it.desc}</p>
                <hr className="hr mt-6 mb-4" />
                <div>
                  <div className="mono" style={{ fontSize: 24, fontWeight: 500, color: 'var(--pv-blue)', letterSpacing: '-0.02em' }}>
                    {it.stat.value}<span style={{ fontSize: 16, color: 'var(--slate)' }}>{it.stat.suffix}</span>
                  </div>
                  <div className="stat-label" style={{ marginTop: 4 }}>{it.stat.label}</div>
                </div>
                <div className="flex flex-wrap gap-2 mt-4">
                  {it.tech.map((t) => <span key={t} className="tech-tag" style={{ background: '#fff' }}>{t}</span>)}
                </div>
                <div className="flex items-center gap-2 mt-6" style={{ color: 'var(--pv-blue)', fontSize: 14, fontWeight: 500 }}>
                  Ver solución <Icon.ArrowSmall />
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===========================================================
   Proceso — 5 pasos
   =========================================================== */
function Process() {
  const steps = [
    {
      n: '01',
      icon: <Icon.Eye />,
      title: 'Diagnóstico energético',
      tag: 'Sin costo',
      desc: 'Revisión de boletas, perfil horario de consumo, visita técnica a sitio.',
      out: ['Boletas 12 meses', 'Perfil de carga', 'Levantamiento técnico'],
    },
    {
      n: '02',
      icon: <Icon.Compass />,
      title: 'Ingeniería y diseño',
      desc: 'Memoria de cálculo, layout, simulación de generación con PVsyst u homólogo.',
      out: ['Memoria PVsyst', 'Layout PV', 'Single-line diagram'],
    },
    {
      n: '03',
      icon: <Icon.Chart />,
      title: 'Estructura financiera',
      desc: 'Compra directa, leasing, PPA o financiamiento bancario con tasas preferentes.',
      out: ['CAPEX vs PPA', 'TIR / VPN', 'Banca asociada'],
    },
    {
      n: '04',
      icon: <Icon.Wrench />,
      title: 'Instalación y puesta en marcha',
      desc: 'Cuadrilla propia, certificación SEC, recepción TE4 y conexión a red.',
      out: ['SEC TE4', 'Pruebas SAT', 'Conexión a red'],
    },
    {
      n: '05',
      icon: <Icon.Eye />,
      title: 'Monitoreo y O&M',
      desc: 'Plataforma de monitoreo continuo y mantenimiento garantizado por contrato.',
      out: ['Dashboard 24/7', 'SLA respuesta', 'Reportes mensuales'],
    },
  ];

  return (
    <section id="proceso" className="section bg-off">
      <div className="container">
        <div className="section-head">
          <div>
            <p className="eyebrow mb-3">02 — Cómo trabajamos</p>
            <h2 className="h-1">Cinco etapas. Un solo equipo desde la primera reunión.</h2>
          </div>
          <p className="muted">
            No subcontratamos ingeniería ni instalación. La misma cuadrilla que diseña el proyecto ejecuta la obra y firma la recepción TE4.
          </p>
        </div>

        <div className="proc-grid grid grid-5" style={{ position: 'relative' }}>
          {/* connection line */}
          <div aria-hidden="true" style={{
            position: 'absolute', top: 36, left: '10%', right: '10%', height: 1,
            borderTop: '1px dashed var(--line)', zIndex: 0,
          }} className="proc-line" />
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 100}>
              <div style={{ position: 'relative', zIndex: 1 }}>
                <div className="flex items-center gap-3 mb-4">
                  <div className="step-num">{s.n}</div>
                  {s.tag && <span className="badge badge-solar">{s.tag}</span>}
                </div>
                <div style={{ color: 'var(--pv-blue)', marginBottom: 10 }}>{s.icon}</div>
                <h3 style={{ fontSize: 17, fontWeight: 600, margin: '0 0 8px', color: 'var(--ink)' }}>{s.title}</h3>
                <p className="body" style={{ fontSize: 14, margin: 0 }}>{s.desc}</p>
                <ul className="clean mt-4" style={{ fontSize: 12, color: 'var(--slate)' }}>
                  {s.out.map((o) => (
                    <li key={o} className="flex items-center gap-2 mono">
                      <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--solar)' }} />
                      {o}
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>

        <style>{`
          @media (max-width: 1024px) { .proc-line { display: none; } }
        `}</style>
      </div>
    </section>
  );
}

Object.assign(window, { Solutions, Process });