/* global React, Icon, Reveal, WA_URL, PHONE_FMT, EMAIL */
const { useState: useStateFin } = React;

/* ===========================================================
   Equipo y respaldo
   =========================================================== */
function Team() {
  return (
    <section id="nosotros" className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <p className="eyebrow mb-3">07 — Nosotros</p>
            <h2 className="h-1" style={{ maxWidth: 760 }}>
              Caras reales detrás de cada proyecto.
            </h2>
          </div>
          <p className="muted">
            SLF Energía nace en Valparaíso de la mano de Danilo, con más de una década instalando proyectos
            solares en Chile. Hoy ejecutamos a escala industrial con un equipo técnico propio de 24 personas.
          </p>
        </div>

        <a href="SLF Energia - Nosotros.html" className="card card-hover" style={{ display: 'block', overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr' }} className="team-teaser-grid">
            <div className="ph-img" style={{ minHeight: 360, position: 'relative' }}>
              <span className="ph-tag">Retrato Danilo · pendiente</span>
              <div style={{
                position: 'absolute', bottom: 16, left: 16, right: 16,
                background: 'rgba(11,37,69,.85)', color: '#fff', borderRadius: 8, padding: 12,
                backdropFilter: 'blur(6px)', border: '1px solid rgba(255,255,255,.1)'
              }}>
                <p className="mono" style={{ margin: 0, fontSize: 11, color: 'rgba(255,255,255,.6)', letterSpacing: '.08em', textTransform: 'uppercase' }}>
                  Danilo Núñez
                </p>
                <p style={{ margin: '4px 0 0', fontSize: 14, fontWeight: 500 }}>Fundador · Director técnico</p>
              </div>
            </div>
            <div style={{ padding: 40, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div className="flex items-center gap-2 mb-4 flex-wrap">
                <span className="badge badge-solar mono">Fundador</span>
                <span className="badge mono">Ingeniero eléctrico</span>
                <span className="badge mono">12 años · terreno</span>
              </div>
              <h3 className="h-2 mb-3" style={{ maxWidth: 540 }}>
                "Aprendí a instalar paneles antes de tener oficina. Ese sigue siendo el estándar."
              </h3>
              <p className="body" style={{ maxWidth: 560 }}>
                Danilo fundó SLF en 2014 con una camioneta y dos técnicos. Hoy somos un equipo de 24 personas
                con ingeniería, instalación y O&amp;M propios — y un canal con 192 videos de instalaciones reales.
              </p>

              <div className="grid grid-4 mt-6" style={{ gap: 16, paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                <div>
                  <div className="mono" style={{ fontSize: 22, color: 'var(--pv-blue)', fontWeight: 500 }}>24</div>
                  <div className="stat-label">personas</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 22, color: 'var(--pv-blue)', fontWeight: 500 }}>12a</div>
                  <div className="stat-label">trayectoria</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 22, color: 'var(--pv-blue)', fontWeight: 500 }}>192</div>
                  <div className="stat-label">videos canal</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 22, color: 'var(--pv-blue)', fontWeight: 500 }}>47</div>
                  <div className="stat-label">proyectos</div>
                </div>
              </div>

              <div className="flex items-center gap-2 mt-6" style={{ color: 'var(--pv-blue)', fontSize: 14, fontWeight: 500 }}>
                Conoce al equipo completo, la trayectoria y el canal <Icon.ArrowSmall />
              </div>
            </div>
          </div>
        </a>

        <style>{`@media (max-width: 900px) { .team-teaser-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
}

/* ===========================================================
   Recursos / Blog
   =========================================================== */
function Resources() {
  const posts = [
    {
      cat: 'Regulación',
      title: 'Net Billing en Chile: qué es y por qué es clave para autoconsumo industrial.',
      read: '8 min',
      date: 'May 2026',
    },
    {
      cat: 'Regulación',
      title: 'PMGD: la vía para grandes consumidores que quieren inyectar excedentes.',
      read: '11 min',
      date: 'Abr 2026',
    },
    {
      cat: 'Financiamiento',
      title: 'Cómo financiar tu planta solar sin tocar CAPEX: PPA, leasing y banca.',
      read: '7 min',
      date: 'Abr 2026',
    },
    {
      cat: 'Técnico',
      title: 'TIR, payback y LCOE: las tres cifras que deciden una cotización solar.',
      read: '6 min',
      date: 'Mar 2026',
    },
  ];

  return (
    <section id="recursos" className="section bg-off">
      <div className="container">
        <div className="section-head">
          <div>
            <p className="eyebrow mb-3">08 — Recursos</p>
            <h2 className="h-1">Material técnico para tu equipo de decisión.</h2>
          </div>
          <a href="#" className="flex items-center gap-2" style={{ fontSize: 14, color: 'var(--pv-blue)', fontWeight: 500 }}>
            Ver todos los recursos <Icon.ArrowSmall />
          </a>
        </div>

        <div className="grid grid-4">
          {posts.map((p, i) => (
            <Reveal key={p.title} delay={i * 60}>
              <a href="#" className="card card-hover" style={{ display: 'block', overflow: 'hidden', height: '100%' }}>
                <div className="ph-img" style={{ aspectRatio: '16/10' }}>
                  <span className="badge badge-blue" style={{ position: 'absolute', top: 12, left: 12 }}>
                    {p.cat}
                  </span>
                </div>
                <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 12 }}>
                  <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, lineHeight: 1.4, color: 'var(--ink)' }}>
                    {p.title}
                  </h3>
                  <div className="res-meta">
                    <span>{p.date}</span>
                    <span style={{ opacity: .4 }}>·</span>
                    <span>{p.read} lectura</span>
                  </div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===========================================================
   Final CTA — formulario inline
   =========================================================== */
function FinalCTA({ onOpenCalendar }) {
  const [form, setForm] = useStateFin({
    empresa: '', sector: '', consumo: '', nombre: '', cargo: '', email: '', telefono: '',
  });
  const [sent, setSent] = useStateFin(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <section id="contacto" className="section bg-blue-deep" style={{ position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 0% 100%, rgba(255,184,0,.10), transparent 50%)',
      }} />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56 }} className="cta-grid">
          <div>
            <p className="eyebrow mb-3" style={{ color: 'rgba(255,255,255,.5)' }}>09 — Próximo paso</p>
            <h2 className="h-1" style={{ color: '#fff' }}>
              Coordinemos un diagnóstico técnico de tu operación, sin costo.
            </h2>
            <p className="lead mt-6" style={{ color: 'rgba(255,255,255,.78)', maxWidth: 520 }}>
              Un ingeniero revisa tus boletas de 12 meses, analiza el perfil de carga, visita el sitio
              y entrega un informe técnico ejecutivo en 5 días hábiles. Sin compromiso.
            </p>

            <div className="mt-8" style={{
              background: 'rgba(255,255,255,.04)',
              border: '1px solid rgba(255,255,255,.12)',
              borderRadius: 12,
              padding: 20,
            }}>
              <p className="mono" style={{ margin: 0, fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,.5)' }}>
                O escríbenos por WhatsApp
              </p>
              <p style={{ margin: '8px 0 16px', color: '#fff', fontSize: 22, fontFamily: 'var(--mono)', fontWeight: 500 }}>
                {PHONE_FMT}
              </p>
              <div className="flex items-center gap-3 flex-wrap">
                <a className="btn btn-wa" href={WA_URL} target="_blank" rel="noopener">
                  <Icon.Whatsapp /> Abrir WhatsApp
                </a>
                <a className="btn btn-onblue" href={`mailto:${EMAIL}`}>
                  <Icon.Mail /> {EMAIL}
                </a>
              </div>
            </div>

            <div className="flex items-center gap-4 mt-8 flex-wrap" style={{ color: 'rgba(255,255,255,.6)', fontSize: 13 }}>
              <span className="flex items-center gap-2"><Icon.Clock /> L–V · 09:00 a 18:00</span>
              <span style={{ opacity: .4 }}>·</span>
              <span className="flex items-center gap-2"><Icon.Map /> Valparaíso, Chile</span>
              <span style={{ opacity: .4 }}>·</span>
              <span className="flex items-center gap-2"><Icon.Phone /> {PHONE_FMT}</span>
            </div>
          </div>

          <div>
            {!sent ? (
              <form onSubmit={submit} style={{
                background: 'var(--paper)',
                borderRadius: 14,
                padding: 28,
                boxShadow: '0 24px 60px -20px rgba(0,0,0,.5)',
              }}>
                <h3 className="h-3 mb-2">Solicitar diagnóstico</h3>
                <p style={{ margin: '0 0 20px', color: 'var(--slate)', fontSize: 13 }}>Respondemos en 24h hábiles.</p>
                <div className="grid grid-2 mb-4" style={{ gap: 12 }}>
                  <div>
                    <label className="label">Empresa</label>
                    <input className="input" value={form.empresa} onChange={(e) => setForm({ ...form, empresa: e.target.value })} required />
                  </div>
                  <div>
                    <label className="label">Sector</label>
                    <select className="select" value={form.sector} onChange={(e) => setForm({ ...form, sector: e.target.value })} required>
                      <option value="">Selecciona</option>
                      <option>Minería</option>
                      <option>Retail / Multi-sucursal</option>
                      <option>Manufactura</option>
                      <option>Agroindustria</option>
                      <option>Sector público</option>
                      <option>Otro</option>
                    </select>
                  </div>
                </div>
                <div className="mb-4">
                  <label className="label">Consumo mensual aprox.</label>
                  <div className="flex items-center gap-2">
                    <input className="input" type="number" placeholder="50000" value={form.consumo} onChange={(e) => setForm({ ...form, consumo: e.target.value })} />
                    <span className="mono" style={{ color: 'var(--slate)', fontSize: 13 }}>kWh / mes</span>
                  </div>
                </div>
                <div className="grid grid-2 mb-4" style={{ gap: 12 }}>
                  <div>
                    <label className="label">Nombre</label>
                    <input className="input" value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} required />
                  </div>
                  <div>
                    <label className="label">Cargo</label>
                    <input className="input" value={form.cargo} onChange={(e) => setForm({ ...form, cargo: e.target.value })} />
                  </div>
                </div>
                <div className="grid grid-2 mb-6" style={{ gap: 12 }}>
                  <div>
                    <label className="label">Email corporativo</label>
                    <input className="input" type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required />
                  </div>
                  <div>
                    <label className="label">Teléfono</label>
                    <input className="input" type="tel" placeholder="+56 9" value={form.telefono} onChange={(e) => setForm({ ...form, telefono: e.target.value })} />
                  </div>
                </div>
                <button type="submit" className="btn btn-primary btn-lg w-full" style={{ justifyContent: 'center' }}>
                  Solicitar diagnóstico <Icon.Arrow />
                </button>
                <p className="mono" style={{ fontSize: 11, color: 'var(--slate)', marginTop: 12, textAlign: 'center' }}>
                  Tus datos quedan bajo política de privacidad SLF. No spam.
                </p>
              </form>
            ) : (
              <div style={{
                background: 'var(--paper)',
                borderRadius: 14,
                padding: 40,
                textAlign: 'center',
              }}>
                <div style={{
                  width: 56, height: 56, borderRadius: '50%',
                  background: '#ECFDF5', color: '#065F46',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 16,
                }}>
                  <Icon.Check />
                </div>
                <h3 className="h-3 mb-2">Solicitud recibida</h3>
                <p style={{ margin: 0, color: 'var(--slate)' }}>
                  Un ingeniero de SLF te contactará en las próximas 24h hábiles.
                </p>
                <button className="btn btn-ghost mt-6" onClick={() => setSent(false)}>Enviar otra</button>
              </div>
            )}
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </div>
    </section>
  );
}

/* ===========================================================
   Footer
   =========================================================== */
function Footer({ onHome = true }) {
  const HOME = 'index.html';
  const base = onHome ? '' : HOME;
  return (
    <footer className="footer">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1.2fr', gap: 32 }} className="ft-grid">
          <div>
            <Wordmark variant="full" tone="light" size={22} />
            <p style={{ margin: '20px 0 16px', maxWidth: 320, fontSize: 14, color: 'rgba(255,255,255,.6)', lineHeight: 1.6 }}>
              Soluciones energéticas industriales en Chile.
              Diseño, ingeniería, instalación y O&amp;M de plantas solares fotovoltaicas.
            </p>
            <div className="flex items-center gap-3">
              <a href="https://www.facebook.com/www.slf.cl" target="_blank" rel="noopener" aria-label="Facebook" style={{
                width: 36, height: 36, borderRadius: 8, border: '1px solid rgba(255,255,255,.15)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.7)'
              }}><Icon.Facebook /></a>
              <a href="https://www.instagram.com/slfventa" target="_blank" rel="noopener" aria-label="Instagram" style={{
                width: 36, height: 36, borderRadius: 8, border: '1px solid rgba(255,255,255,.15)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.7)'
              }}><Icon.Instagram /></a>
              <a href="https://youtube.com/user/danilojrn/videos" target="_blank" rel="noopener" aria-label="YouTube" style={{
                width: 36, height: 36, borderRadius: 8, border: '1px solid rgba(255,255,255,.15)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.7)'
              }}><Icon.Youtube /></a>
            </div>
          </div>

          <div>
            <h4>Navegación</h4>
            <ul className="clean" style={{ fontSize: 14 }}>
              <li><a href={base + '#soluciones'}>Soluciones</a></li>
              <li><a href={base + '#casos'}>Casos</a></li>
              <li><a href="SLF Energia - Sector Publico.html">Sector Público</a></li>
              <li><a href="SLF Energia - Nosotros.html">Nosotros</a></li>
              <li><a href={base + '#recursos'}>Recursos</a></li>
              <li><a href="SLF Energia - Contacto.html">Contacto</a></li>
            </ul>
          </div>

          <div>
            <h4>Soluciones</h4>
            <ul className="clean" style={{ fontSize: 14 }}>
              <li><a href="SLF Energia - Solucion Mineria.html">Minería</a></li>
              <li><a href="SLF Energia - Solucion Retail.html">Retail</a></li>
              <li><a href="SLF Energia - Solucion Manufactura.html">Manufactura</a></li>
              <li><a href="SLF Energia - Solucion Agroindustria.html">Agroindustria</a></li>
              <li><a href="#" style={{ color: 'rgba(255,255,255,.4)', fontSize: 13 }}>Productos residenciales (legacy)</a></li>
            </ul>
          </div>

          <div>
            <h4>Contacto</h4>
            <ul className="clean" style={{ fontSize: 14 }}>
              <li className="flex items-center gap-2"><Icon.Map /> Valparaíso, Chile</li>
              <li className="flex items-center gap-2"><Icon.Phone /> <a href={`tel:${PHONE}`}>{PHONE_FMT}</a></li>
              <li className="flex items-center gap-2"><Icon.Whatsapp size={20} /> <a href={WA_URL} target="_blank" rel="noopener">WhatsApp</a></li>
              <li className="flex items-center gap-2"><Icon.Mail /> <a href={`mailto:${EMAIL}`}>{EMAIL}</a></li>
              <li className="flex items-center gap-2"><Icon.Clock /> L–V · 09:00–18:00</li>
            </ul>
          </div>
        </div>

        <hr className="hr hr-onblue mt-12 mb-6" />

        <div className="flex items-center justify-between flex-wrap" style={{ gap: 16, fontSize: 12, color: 'rgba(255,255,255,.5)' }}>
          <div className="flex items-center gap-4 flex-wrap">
            <span>© 2026 SLF Energía. Todos los derechos reservados.</span>
            <span style={{ opacity: .5 }}>·</span>
            <a href="#" style={{ color: 'rgba(255,255,255,.6)' }}>Política de privacidad</a>
            <span style={{ opacity: .5 }}>·</span>
            <a href="#" style={{ color: 'rgba(255,255,255,.6)' }}>Términos</a>
          </div>
          <div className="flex items-center gap-3 mono">
            <span className="tech-tag" style={{ background: 'transparent', color: 'rgba(255,255,255,.5)', border: '1px solid rgba(255,255,255,.15)' }}>SEC</span>
            <span className="tech-tag" style={{ background: 'transparent', color: 'rgba(255,255,255,.5)', border: '1px solid rgba(255,255,255,.15)' }}>ChileCompra</span>
            <span className="tech-tag" style={{ background: 'transparent', color: 'rgba(255,255,255,.5)', border: '1px solid rgba(255,255,255,.15)' }}>ISO 9001</span>
            <span className="tech-tag" style={{ background: 'transparent', color: 'rgba(255,255,255,.5)', border: '1px solid rgba(255,255,255,.15)' }}>ISO 14001</span>
          </div>
        </div>

        <style>{`@media (max-width: 900px) { .ft-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; } } @media (max-width: 540px) { .ft-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </footer>
  );
}

/* ===========================================================
   Calendar / diagnostic Modal
   =========================================================== */
function CalendarModal({ open, onClose, prefill }) {
  const [step, setStep] = useStateFin(1);
  const [slot, setSlot] = useStateFin(null);
  const [form, setForm] = useStateFin({ empresa: '', nombre: '', email: '', telefono: '' });
  const [done, setDone] = useStateFin(false);

  if (!open) return null;

  // Generate next 5 weekdays
  const days = [];
  let d = new Date();
  while (days.length < 5) {
    d = new Date(d.getTime() + 86400000);
    if (d.getDay() !== 0 && d.getDay() !== 6) {
      days.push(new Date(d));
    }
  }
  const slots = ['09:30', '11:00', '12:30', '15:00', '16:30'];

  const submit = (e) => {
    e.preventDefault();
    setDone(true);
  };

  const fmtDay = (d) => d.toLocaleDateString('es-CL', { weekday: 'short', day: 'numeric', month: 'short' });

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <p className="eyebrow" style={{ margin: 0 }}>Paso {done ? 3 : step} de 3</p>
            <h3 className="h-3 mt-1">
              {done ? '¡Listo!' : step === 1 ? 'Elige una hora' : 'Tus datos'}
            </h3>
          </div>
          <button onClick={onClose} aria-label="Cerrar" style={{ background: 'transparent', border: 0, color: 'var(--slate)', padding: 8 }}>
            <Icon.X />
          </button>
        </div>

        {done ? (
          <div style={{ padding: 32, textAlign: 'center' }}>
            <div style={{
              width: 56, height: 56, borderRadius: '50%', background: '#ECFDF5', color: '#065F46',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16,
            }}>
              <Icon.Check />
            </div>
            <h3 className="h-3 mb-2">Diagnóstico agendado</h3>
            <p style={{ color: 'var(--slate)', margin: '0 0 4px' }}>{slot && `${fmtDay(slot.day)} · ${slot.time} hrs`}</p>
            <p style={{ color: 'var(--slate)', margin: 0, fontSize: 14 }}>Te enviamos confirmación a {form.email}.</p>
            <button className="btn btn-primary mt-6" onClick={onClose}>Volver al sitio</button>
          </div>
        ) : step === 1 ? (
          <div style={{ padding: 24 }}>
            <p style={{ margin: '0 0 16px', color: 'var(--slate)', fontSize: 14 }}>
              Reunión de 30 min con un ingeniero de SLF. Por videollamada o en sitio.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, marginBottom: 16 }}>
              {days.map((day, i) => (
                <button
                  key={i}
                  onClick={() => setSlot({ day, time: null })}
                  className="card"
                  style={{
                    padding: 12, textAlign: 'center', cursor: 'pointer',
                    background: slot && slot.day.getDate() === day.getDate() ? 'var(--pv-blue)' : '#fff',
                    color: slot && slot.day.getDate() === day.getDate() ? '#fff' : 'var(--ink)',
                    borderColor: slot && slot.day.getDate() === day.getDate() ? 'var(--pv-blue)' : 'var(--line)',
                  }}
                >
                  <div style={{ fontSize: 11, opacity: .7, textTransform: 'uppercase' }}>{day.toLocaleDateString('es-CL', { weekday: 'short' })}</div>
                  <div style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>{day.getDate()}</div>
                  <div style={{ fontSize: 10, opacity: .7 }}>{day.toLocaleDateString('es-CL', { month: 'short' })}</div>
                </button>
              ))}
            </div>
            {slot && (
              <>
                <p className="eyebrow mb-3">Horarios disponibles</p>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, marginBottom: 16 }}>
                  {slots.map((t) => (
                    <button
                      key={t}
                      onClick={() => setSlot({ ...slot, time: t })}
                      className="btn btn-ghost btn-sm"
                      style={{
                        background: slot.time === t ? 'var(--pv-blue)' : '#fff',
                        color: slot.time === t ? '#fff' : 'var(--ink)',
                        borderColor: slot.time === t ? 'var(--pv-blue)' : 'var(--line)',
                      }}
                    >
                      {t}
                    </button>
                  ))}
                </div>
              </>
            )}
            <button
              className="btn btn-primary w-full"
              disabled={!slot || !slot.time}
              onClick={() => setStep(2)}
              style={{ justifyContent: 'center', marginTop: 8 }}
            >
              Continuar <Icon.Arrow />
            </button>
          </div>
        ) : (
          <form onSubmit={submit} style={{ padding: 24 }}>
            <p style={{ margin: '0 0 16px', color: 'var(--slate)', fontSize: 14 }}>
              Reunión: <strong style={{ color: 'var(--ink)' }}>{slot && `${fmtDay(slot.day)} · ${slot.time} hrs`}</strong>
            </p>
            <div className="mb-4">
              <label className="label">Empresa</label>
              <input className="input" required value={form.empresa} onChange={(e) => setForm({ ...form, empresa: e.target.value })} />
            </div>
            <div className="mb-4">
              <label className="label">Tu nombre</label>
              <input className="input" required value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} />
            </div>
            <div className="grid grid-2 mb-4" style={{ gap: 12 }}>
              <div>
                <label className="label">Email corporativo</label>
                <input className="input" type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
              </div>
              <div>
                <label className="label">Teléfono</label>
                <input className="input" type="tel" required value={form.telefono} onChange={(e) => setForm({ ...form, telefono: e.target.value })} />
              </div>
            </div>
            <div className="flex items-center gap-2">
              <button type="button" className="btn btn-ghost" onClick={() => setStep(1)}>Volver</button>
              <button type="submit" className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
                Confirmar reunión
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

/* ===========================================================
   Floating WhatsApp
   =========================================================== */
function WhatsAppFloat() {
  return (
    <a className="wa-float" href={WA_URL} target="_blank" rel="noopener" aria-label="WhatsApp">
      <Icon.Whatsapp size={28} />
    </a>
  );
}

Object.assign(window, { Team, Resources, FinalCTA, Footer, CalendarModal, WhatsAppFloat });