// Cotizador.jsx — Lead magnet: interactive quote calculator

const PROPUESTA_SERVICIOS = [
  { k: 'retratos', label: 'Retratos escolares' },
  { k: 'credenciales', label: 'Credenciales' },
  { k: 'graduacion', label: 'Graduación' },
  { k: 'eventos', label: 'Cobertura de eventos' },
  { k: 'albumes', label: 'Álbumes de fin de año' },
  { k: 'marketing', label: 'Marketing educativo' },
];

const PROPUESTA_PASOS = [
  { n: '01', t: 'Cuéntanos sobre tu escuela', d: 'Nivel educativo, número aproximado de alumnos y servicios de interés.' },
  { n: '02', t: 'Agendamos una visita', d: 'Un asesor visita tu institución sin costo para entender necesidades y espacios.' },
  { n: '03', t: 'Recibes propuesta a la medida', d: 'Cotización detallada, calendario de producción y muestras físicas en menos de 48h.' },
];

const PDCotizador = () => {
  const [services, setServices] = React.useState({ retratos: true, credenciales: true });
  const [students, setStudents] = React.useState('');
  const [nivel, setNivel] = React.useState('primaria');
  const [school, setSchool] = React.useState('');
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);

  const toggleService = (k) => setServices((s) => ({ ...s, [k]: !s[k] }));
  const selectedCount = Object.values(services).filter(Boolean).length;

  const handleSubmit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section id="cotizador" style={{ background: '#0a0e1f', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 50% at 80% 20%, rgba(46,203,177,0.15) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 10% 90%, rgba(139,92,246,0.12) 0%, transparent 60%)', pointerEvents: 'none' }}></div>

      <div className="container" style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 50, alignItems: 'flex-start' }}>
        <div>
          <div className="eyebrow reveal" style={{ marginBottom: 16, color: 'var(--accent)' }}><span className="dot"></span>PROPUESTA PERSONALIZADA</div>
          <h2 className="display reveal" style={{ fontSize: 'clamp(32px, 4.5vw, 54px)', fontWeight: 700, color: '#fff', marginBottom: 22 }}>
            Cada escuela es única.<br/><span style={{ background: 'linear-gradient(135deg, var(--accent), #8b5cf6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>Tu propuesta también.</span>
          </h2>
          <p className="reveal" style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, marginBottom: 30 }}>
            En lugar de paquetes genéricos, diseñamos una propuesta a la medida de tu institución: número de alumnos, nivel educativo, fechas, espacios y necesidades específicas. Así pagas exactamente por lo que necesitas —ni más, ni menos.
          </p>

          <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 28 }}>
            {PROPUESTA_PASOS.map((p) => (
              <div key={p.n} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: 'var(--accent)', fontWeight: 700, minWidth: 32, paddingTop: 2 }}>{p.n}</div>
                <div style={{ flex: 1, paddingBottom: 18, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
                  <div style={{ fontSize: 16, fontWeight: 600, color: '#fff', marginBottom: 4 }}>{p.t}</div>
                  <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', lineHeight: 1.55 }}>{p.d}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <div className="tag-chip">Sin compromiso</div>
            <div className="tag-chip">Respuesta en 48h</div>
            <div className="tag-chip">Visita gratuita</div>
          </div>
        </div>

        <div className="reveal" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 20, padding: 32, backdropFilter: 'blur(20px)' }}>
          {!sent ? (
            <form onSubmit={handleSubmit}>
              <h3 className="display" style={{ fontSize: 22, color: '#fff', marginBottom: 6 }}>Solicita tu propuesta</h3>
              <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', marginBottom: 22 }}>Completa en 60 segundos. Un asesor te contacta en 48h hábiles.</p>

              <div style={{ marginBottom: 18 }}>
                <label style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 10, display: 'block' }}>Servicios de interés <span style={{ color: 'var(--accent)', fontFamily: "'JetBrains Mono', monospace" }}>({selectedCount})</span></label>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  {PROPUESTA_SERVICIOS.map((sv) => (
                    <button type="button" key={sv.k} onClick={() => toggleService(sv.k)} style={{
                      padding: '10px 14px', borderRadius: 10, textAlign: 'left',
                      border: services[sv.k] ? '1.5px solid var(--accent)' : '1px solid rgba(255,255,255,0.1)',
                      background: services[sv.k] ? 'rgba(46,203,177,0.1)' : 'transparent',
                      color: services[sv.k] ? 'var(--accent)' : 'rgba(255,255,255,0.7)',
                      fontSize: 12, fontWeight: 600, transition: 'all 0.2s',
                    }}>{sv.label}</button>
                  ))}
                </div>
              </div>

              <div style={{ marginBottom: 18 }}>
                <label style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 10, display: 'block' }}>Nivel educativo</label>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {['preescolar', 'primaria', 'secundaria', 'preparatoria', 'mixto'].map((n) => (
                    <button type="button" key={n} onClick={() => setNivel(n)} style={{
                      padding: '8px 14px', borderRadius: 9999, fontSize: 12, fontWeight: 600,
                      border: nivel === n ? '1.5px solid var(--accent)' : '1px solid rgba(255,255,255,0.12)',
                      background: nivel === n ? 'var(--accent)' : 'transparent',
                      color: nivel === n ? '#0d1b3e' : 'rgba(255,255,255,0.7)',
                      textTransform: 'capitalize', transition: 'all 0.2s',
                    }}>{n}</button>
                  ))}
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14 }}>
                <div>
                  <label style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 8, display: 'block' }}>Escuela</label>
                  <input type="text" required value={school} onChange={(e) => setSchool(e.target.value)} placeholder="Nombre"
                    style={{ width: '100%', padding: '12px 14px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 10, color: '#fff', fontSize: 14, fontFamily: 'inherit' }} />
                </div>
                <div>
                  <label style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 8, display: 'block' }}># Alumnos</label>
                  <input type="number" value={students} onChange={(e) => setStudents(e.target.value)} placeholder="Aprox."
                    style={{ width: '100%', padding: '12px 14px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 10, color: '#fff', fontSize: 14, fontFamily: 'inherit' }} />
                </div>
              </div>

              <div style={{ marginBottom: 14 }}>
                <label style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 8, display: 'block' }}>Tu nombre</label>
                <input type="text" required value={name} onChange={(e) => setName(e.target.value)} placeholder="Nombre y cargo"
                  style={{ width: '100%', padding: '12px 14px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 10, color: '#fff', fontSize: 14, fontFamily: 'inherit' }} />
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 22 }}>
                <div>
                  <label style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 8, display: 'block' }}>WhatsApp</label>
                  <input type="tel" required value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="663 000 0000"
                    style={{ width: '100%', padding: '12px 14px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 10, color: '#fff', fontSize: 14, fontFamily: 'inherit' }} />
                </div>
                <div>
                  <label style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 8, display: 'block' }}>Correo</label>
                  <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="tu@escuela.mx"
                    style={{ width: '100%', padding: '12px 14px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 10, color: '#fff', fontSize: 14, fontFamily: 'inherit' }} />
                </div>
              </div>

              <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%', justifyContent: 'center' }}>
                Solicitar propuesta →
              </button>
              <p style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', textAlign: 'center', marginTop: 12 }}>Sin costo ni compromiso. Tus datos están seguros.</p>
            </form>
          ) : (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'var(--accent)', color: '#0d1b3e', margin: '0 auto 24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="20,6 9,17 4,12"/></svg>
              </div>
              <h3 className="display" style={{ fontSize: 24, color: '#fff', marginBottom: 12 }}>¡Solicitud recibida!</h3>
              <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, marginBottom: 24 }}>
                Gracias {name || ''}. Un asesor PhotoDay te contactará a <strong style={{ color: 'var(--accent)' }}>{email}</strong> en menos de 48 horas hábiles con tu propuesta personalizada.
              </p>
              <button onClick={() => { setSent(false); setName(''); setEmail(''); setPhone(''); setSchool(''); setStudents(''); }} className="btn btn-ghost-light btn-sm">Enviar otra solicitud</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

// ── CONTACT (formulario largo + info + mapa)
const PDContact = () => {
  const [form, setForm] = React.useState({ name: '', school: '', role: '', phone: '', email: '', students: '', services: [], date: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const servicesOpt = ['Retratos', 'Graduación', 'Credenciales', 'Eventos', 'Álbumes', 'Marketing'];
  const toggleSv = (s) => setForm((f) => ({ ...f, services: f.services.includes(s) ? f.services.filter(x => x !== s) : [...f.services, s] }));
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section id="contacto" style={{ background: '#fff', padding: '100px 5%' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 50 }}>
          <div>
            <div className="eyebrow reveal" style={{ marginBottom: 16 }}><span className="dot"></span>AGENDA UNA VISITA</div>
            <h2 className="display reveal" style={{ fontSize: 'clamp(32px, 4.5vw, 54px)', fontWeight: 700, color: '#0d1b3e', marginBottom: 22 }}>
              Hablemos sobre<br/><span style={{ color: 'var(--accent-dark)' }}>tu escuela.</span>
            </h2>
            <p className="reveal" style={{ fontSize: 16, color: '#44506a', lineHeight: 1.65, marginBottom: 32 }}>
              Cuéntanos sobre tu institución. Un asesor te responderá en menos de 24 horas hábiles para agendar una visita gratuita o llamada de 20 minutos.
            </p>
            <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 32 }}>
              {[
                { icon: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></>, label: 'Teléfono / WhatsApp', val: '+52 663 106 7860', href: 'tel:+526631067860' },
                { icon: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>, label: 'Correo', val: 'contacto@photoday.website', href: 'mailto:contacto@photoday.website' },
                { icon: <><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37zM17.5 6.5h.01"/></>, label: 'Instagram', val: '@photodaymex', href: 'https://instagram.com/photodaymex' },
              ].map((c) => (
                <a key={c.label} href={c.href} target="_blank" rel="noopener" style={{ display: 'flex', gap: 18, alignItems: 'center', padding: '14px 4px', borderBottom: '1px solid #eef1f6', transition: 'transform 0.2s' }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateX(4px)'; e.currentTarget.querySelector('svg').style.color = 'var(--accent-dark)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateX(0)'; e.currentTarget.querySelector('svg').style.color = '#0d1b3e'; }}
                >
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ color: '#0d1b3e', flexShrink: 0, transition: 'color 0.2s' }}>{c.icon}</svg>
                  <div>
                    <div style={{ fontSize: 11, color: '#8d98b3', fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 4 }}>{c.label}</div>
                    <div style={{ fontSize: 16, color: '#0d1b3e', fontWeight: 600 }}>{c.val}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>

          <div className="reveal" style={{ background: '#f7f9fc', padding: 32, borderRadius: 20 }}>
            {!sent ? (
              <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <h3 className="display" style={{ fontSize: 22, color: '#0d1b3e', marginBottom: 8 }}>Escríbenos</h3>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <div className="field">
                    <label>Nombre completo *</label>
                    <input type="text" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
                  </div>
                  <div className="field">
                    <label>Cargo</label>
                    <input type="text" value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })} placeholder="Directora, Administrador..." />
                  </div>
                </div>
                <div className="field">
                  <label>Escuela / institución *</label>
                  <input type="text" required value={form.school} onChange={(e) => setForm({ ...form, school: e.target.value })} />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <div className="field">
                    <label>WhatsApp *</label>
                    <input type="tel" required value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
                  </div>
                  <div className="field">
                    <label>Correo *</label>
                    <input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <div className="field">
                    <label># aprox. de alumnos</label>
                    <input type="number" value={form.students} onChange={(e) => setForm({ ...form, students: e.target.value })} placeholder="250" />
                  </div>
                  <div className="field">
                    <label>Fecha tentativa</label>
                    <input type="date" value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} />
                  </div>
                </div>
                <div className="field">
                  <label>Servicios de interés</label>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
                    {servicesOpt.map((s) => (
                      <button key={s} type="button" onClick={() => toggleSv(s)} style={{
                        padding: '6px 12px', borderRadius: 9999, fontSize: 12, fontWeight: 600,
                        border: form.services.includes(s) ? '1.5px solid var(--accent)' : '1px solid #dde2ed',
                        background: form.services.includes(s) ? 'var(--accent)' : '#fff',
                        color: form.services.includes(s) ? '#0d1b3e' : '#44506a',
                        transition: 'all 0.2s',
                      }}>{s}</button>
                    ))}
                  </div>
                </div>
                <div className="field">
                  <label>Mensaje</label>
                  <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="Cuéntanos más sobre tu proyecto..." />
                </div>
                <button type="submit" className="btn btn-primary btn-lg" style={{ justifyContent: 'center', marginTop: 6 }}>Enviar mensaje →</button>
                <p style={{ fontSize: 11, color: '#8d98b3', textAlign: 'center' }}>Al enviar aceptas nuestro aviso de privacidad. Nunca compartimos tus datos.</p>
              </form>
            ) : (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'var(--accent)', color: '#0d1b3e', margin: '0 auto 24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="20,6 9,17 4,12"/></svg>
                </div>
                <h3 className="display" style={{ fontSize: 26, color: '#0d1b3e', marginBottom: 12 }}>¡Mensaje enviado!</h3>
                <p style={{ fontSize: 15, color: '#44506a', lineHeight: 1.6, marginBottom: 24 }}>Gracias {form.name}. Un asesor PhotoDay te contactará en las próximas 24 horas hábiles.</p>
                <button onClick={() => { setSent(false); setForm({ name: '', school: '', role: '', phone: '', email: '', students: '', services: [], date: '', message: '' }); }} className="btn btn-ghost-dark btn-sm">Enviar otro mensaje</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── CTA FOOTER BANNER
const PDCtaBanner = ({ onContact }) => (
  <section style={{ padding: '80px 5%', background: 'linear-gradient(135deg, #0d1b3e 0%, #0a0e1f 100%)', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 50% 60% at 80% 50%, rgba(46,203,177,0.18) 0%, transparent 60%)', pointerEvents: 'none' }}></div>
    <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
      <h2 className="display reveal" style={{ fontSize: 'clamp(32px, 5vw, 64px)', fontWeight: 700, color: '#fff', marginBottom: 22, lineHeight: 1.05 }}>
        ¿Listo para la<br/><span style={{ background: 'linear-gradient(135deg, var(--accent), #8b5cf6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>temporada 2026?</span>
      </h2>
      <p className="reveal" style={{ fontSize: 18, color: 'rgba(255,255,255,0.7)', maxWidth: 580, margin: '0 auto 36px', lineHeight: 1.6 }}>
        Agenda hoy y asegura fechas preferenciales. Cupos limitados para el ciclo escolar 2026–2027.
      </p>
      <div className="reveal" style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <button className="btn btn-primary btn-lg" onClick={onContact}>Agenda visita gratuita</button>
        <a href="https://wa.me/526631067860" className="btn btn-ghost-light btn-lg" target="_blank" rel="noopener">WhatsApp directo</a>
      </div>
    </div>
  </section>
);

// ── FOOTER
const PDFooter = ({ onNav }) => (
  <footer style={{ background: '#040a18', color: 'rgba(255,255,255,0.7)', padding: '72px 5% 32px', fontSize: 14 }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 40, marginBottom: 48 }}>
        <div style={{ gridColumn: 'span 1' }}>
          <div style={{ marginBottom: 16 }}>
            <img src="assets/logo-white.png" alt="PhotoDay" style={{ height: 40, width: 'auto', display: 'block' }} />
          </div>
          <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', lineHeight: 1.7, marginBottom: 18 }}>
            Fotografía escolar profesional para instituciones privadas en Baja California desde 2015. Recuerdos para toda la vida.
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            {['instagram', 'facebook', 'whatsapp'].map((sn) => (
              <a key={sn} href="#" style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.6)', transition: 'all 0.2s' }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = '#0d1b3e'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.05)'; e.currentTarget.style.color = 'rgba(255,255,255,0.6)'; }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  {sn === 'instagram' && <path d="M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.3 2.2.4.5.2 1 .5 1.4.9.4.4.7.9.9 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.3 1.8-.4 2.2-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4.9-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.3-2.2-.4-.5-.2-1-.5-1.4-.9-.4-.4-.7-.9-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.3-1.8.4-2.2.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.2-.1 1.6-.1 4.8-.1zM12 0C8.7 0 8.3 0 7.1.1c-1.3.1-2.1.3-2.9.6-.8.3-1.5.7-2.2 1.4C1.3 2.8.9 3.5.6 4.3c-.3.8-.5 1.6-.6 2.9C0 8.3 0 8.7 0 12s0 3.7.1 4.9c.1 1.3.3 2.1.6 2.9.3.8.7 1.5 1.4 2.2.7.7 1.4 1.1 2.2 1.4.8.3 1.6.5 2.9.6C8.3 24 8.7 24 12 24s3.7 0 4.9-.1c1.3-.1 2.1-.3 2.9-.6.8-.3 1.5-.7 2.2-1.4.7-.7 1.1-1.4 1.4-2.2.3-.8.5-1.6.6-2.9.1-1.2.1-1.6.1-4.9s0-3.7-.1-4.9c-.1-1.3-.3-2.1-.6-2.9-.3-.8-.7-1.5-1.4-2.2C21.2 1.3 20.5.9 19.7.6c-.8-.3-1.6-.5-2.9-.6C15.7 0 15.3 0 12 0zm0 5.8a6.2 6.2 0 1 0 0 12.4 6.2 6.2 0 0 0 0-12.4zm0 10.2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7.8-10.4a1.4 1.4 0 1 1-2.9 0 1.4 1.4 0 0 1 2.9 0z"/>}
                  {sn === 'facebook' && <path d="M24 12a12 12 0 1 0-13.9 11.9v-8.4H7.1V12H10V9.4c0-3 1.8-4.6 4.5-4.6 1.3 0 2.6.2 2.6.2v2.9h-1.5c-1.5 0-1.9.9-1.9 1.8V12h3.3l-.5 3.5h-2.7v8.4A12 12 0 0 0 24 12z"/>}
                  {sn === 'whatsapp' && <path d="M17.5 14.4c-.3-.2-1.8-.9-2-1-.3-.1-.5-.2-.7.2l-1 1.2c-.2.2-.4.3-.7.1-.3-.2-1.3-.5-2.5-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.5 0-.2 0-.4-.1-.5-.1-.2-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.5.2-.7.2-1.4.2-1.5-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5-1.3c1.4.8 3.1 1.2 4.9 1.2h.1c5.5 0 10-4.5 10-10S17.5 2 12 2z"/>}
                </svg>
              </a>
            ))}
          </div>
        </div>

        <div>
          <h5 className="display" style={{ fontSize: 13, color: '#fff', marginBottom: 16, letterSpacing: '0.1em' }}>Servicios</h5>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
            {['Retratos escolares', 'Graduación', 'Credenciales', 'Eventos', 'Álbumes', 'Marketing educativo'].map(x => <li key={x}><a href="#servicios" style={{ color: 'rgba(255,255,255,0.6)', transition: 'color 0.2s' }} onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'} onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.6)'}>{x}</a></li>)}
          </ul>
        </div>

        <div>
          <h5 className="display" style={{ fontSize: 13, color: '#fff', marginBottom: 16, letterSpacing: '0.1em' }}>Empresa</h5>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
            {[['Sobre nosotros', 'nosotros'], ['Para escuelas', 'escuelas'], ['Proceso', 'proceso'], ['Blog', 'blog'], ['Contacto', 'contacto']].map(([t, k]) => <li key={k}><a onClick={() => onNav(k)} style={{ cursor: 'pointer', color: 'rgba(255,255,255,0.6)' }}>{t}</a></li>)}
          </ul>
        </div>

        <div>
          <h5 className="display" style={{ fontSize: 13, color: '#fff', marginBottom: 16, letterSpacing: '0.1em' }}>Zonas de servicio</h5>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
            {['Tijuana', 'Rosarito', 'Tecate', 'Ensenada', 'Mexicali', 'Todo México (bajo demanda)'].map(x => <li key={x} style={{ color: 'rgba(255,255,255,0.6)' }}>{x}</li>)}
          </ul>
        </div>

        <div>
          <h5 className="display" style={{ fontSize: 13, color: '#fff', marginBottom: 16, letterSpacing: '0.1em' }}>Contacto</h5>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
            <li><a href="tel:+526631067860" style={{ color: 'inherit' }}>+52 663 106 7860</a></li>
            <li><a href="mailto:contacto@photoday.website" style={{ color: 'inherit' }}>contacto@photoday.website</a></li>
            <li style={{ lineHeight: 1.6 }}>Bruselas 3833<br/>Playas de Tijuana<br/>CP 22506, BC</li>
          </ul>
        </div>
      </div>

      <div style={{ paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 14, fontSize: 12, color: 'rgba(255,255,255,0.4)' }}>
        <div>© 2026 PhotoDay Mexico. Todos los derechos reservados.</div>
        <div style={{ display: 'flex', gap: 18 }}>
          <a href="#" style={{ color: 'inherit' }}>Aviso de privacidad</a>
          <a href="#" style={{ color: 'inherit' }}>Términos</a>
          <a href="#" style={{ color: 'inherit' }}>LFPDPPP</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { PDCotizador, PDContact, PDCtaBanner, PDFooter });