/* ===== Luxury Academy — Sections 3: Booking, Contact, Newsletter, Footer ===== */

// ── Contact ───────────────────────────────────────────────────────────────────
function Contact({ lang, t }) {
  React.useEffect(() => {
    if (typeof L === "undefined") return;
    const mapEl = document.getElementById("leaflet-map");
    if (!mapEl || mapEl._leaflet_id) return;
    const lat = 4.4330, lng = -75.2255;
    const map = L.map("leaflet-map", { zoomControl: false, scrollWheelZoom: false }).setView([lat, lng], 15);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap", maxZoom: 19 }).addTo(map);
    L.control.zoom({ position: "bottomright" }).addTo(map);
    const icon = L.divIcon({ className: "", html: '<div class="lux-marker"></div>', iconSize:[44,44], iconAnchor:[22,44] });
    L.marker([lat, lng], { icon }).addTo(map).bindPopup(`<strong>Luxury Academy Ibagué</strong><br/>Cr 8A #57-52, Ibagué`);
  }, []);

  const waUrl = `https://wa.me/573332716890?text=${encodeURIComponent(lang === "es" ? "Hola Luxury Academy! Quiero más información." : "Hello Luxury Academy! I'd like more information.")}`;
  const enrollUrl = `https://wa.me/573332716890?text=${encodeURIComponent(lang === "es" ? "Hola! Me gustaría inscribirme a una capacitación. ¿Cuáles son las próximas fechas disponibles?" : "Hello! I'd like to enroll in a training program. What are the next available dates?")}`;

  return (
    <section id="contact" className="section">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>{t.contact.eyebrow}</div>
          <h2 style={{fontFamily:"var(--font-display)", fontSize:"clamp(36px,4.5vw,56px)", fontWeight:500, color:"var(--c-navy-900)", margin:"14px 0 14px", lineHeight:1.05}}>
            {t.contact.title}
          </h2>
          <p style={{color:"var(--c-ink-soft)", fontSize:17}}>{t.contact.sub}</p>
        </div>
        <div className="contact-grid">
          <div className="contact-card">
            <div className="eyebrow"><span className="dot"></span>{lang === "es" ? "Información" : "Info"}</div>
            <h3>{lang === "es" ? "Cómo contactarnos" : "How to reach us"}</h3>
            <div className="contact-row">
              <div className="ic"><Icon.MapPin size={16}/></div>
              <div><div className="k">{lang === "es" ? "Dirección" : "Address"}</div><div className="v">{t.contact.address}</div></div>
            </div>
            <div className="contact-row">
              <div className="ic"><Icon.Phone size={16}/></div>
              <div><div className="k">WhatsApp</div><div className="v">{t.contact.phone}</div></div>
            </div>
            <div className="contact-row">
              <div className="ic"><Icon.Mail size={16}/></div>
              <div><div className="k">{lang === "es" ? "Correo" : "Email"}</div><div className="v">{t.contact.email}</div></div>
            </div>
            <div className="contact-row">
              <div className="ic"><Icon.Clock size={16}/></div>
              <div>
                <div className="k">{lang === "es" ? "Horarios" : "Hours"}</div>
                <div className="v">
                  <div className="hours-grid">
                    <div>{lang === "es" ? "Lun – Vie" : "Mon – Fri"}</div><div>8:00am – 7:00pm</div>
                    <div>{lang === "es" ? "Sábado" : "Saturday"}</div><div>8:00am – 5:00pm</div>
                    <div>{lang === "es" ? "Domingo" : "Sunday"}</div><div>{lang === "es" ? "Cerrado" : "Closed"}</div>
                  </div>
                </div>
              </div>
            </div>
            <div style={{marginTop:24, display:"flex", flexDirection:"column", gap:10}}>
              <a href={waUrl} target="_blank" rel="noopener" className="btn btn-gold btn-block">
                <Icon.Whatsapp size={16}/> {t.contact.ctaWa}
              </a>
              <a href={enrollUrl} target="_blank" rel="noopener" className="btn btn-primary btn-block">
                🎓 {t.contact.ctaEnroll}
              </a>
              <a href={`https://maps.google.com/?q=4.4330,-75.2255`} target="_blank" rel="noopener" className="btn btn-ghost btn-block">
                <Icon.Navigation size={16}/> {t.contact.ctaMap}
              </a>
            </div>
            <div style={{marginTop:24}}>
              <div style={{fontSize:13, color:"var(--c-ink-mute)", marginBottom:10}}>{lang === "es" ? "Síguenos" : "Follow us"}</div>
              <div style={{display:"flex", gap:10}}>
                <a href="https://instagram.com/luxuryibague" target="_blank" rel="noopener" className="btn btn-ghost btn-small">
                  <Icon.Instagram size={14}/> @luxuryibague
                </a>
              </div>
            </div>
          </div>
          <div className="map-shell">
            <div className="map-pin-card">
              <div className="ttl">Luxury Academy Ibagué</div>
              <div className="addr">Cr 8A #57-52 Urb. Rincón de Piedra Pintada, Ibagué</div>
            </div>
            <div id="leaflet-map" style={{width:"100%",height:"100%",minHeight:460}}/>
            <div className="map-actions">
              <a href="https://maps.google.com/?q=4.4330,-75.2255" target="_blank" rel="noopener" className="btn btn-primary btn-small">
                <Icon.Navigation size={14}/> Google Maps
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Newsletter ─────────────────────────────────────────────────────────────────
function Newsletter({ lang, t }) {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const submit = async e => {
    e.preventDefault();
    if (!email) return;
    setLoading(true);
    try { await lxApi.subscribe(email, lang); } catch (_) { /* silently continue */ }
    setSent(true);
    setEmail("");
    setLoading(false);
  };

  return (
    <section className="newsletter">
      <div className="wrap">
        <div style={{fontSize:11, letterSpacing:"0.22em", textTransform:"uppercase", color:"var(--c-gold-300)", fontWeight:600, marginBottom:8, display:"flex", alignItems:"center", justifyContent:"center", gap:8}}>
          <span style={{display:"inline-block", width:6, height:6, background:"var(--c-gold-400)", borderRadius:"50%"}}></span>
          {t.newsletter.eyebrow}
        </div>
        <h3>{t.newsletter.title1} <span className="alt">{t.newsletter.title2}</span></h3>
        <p>{t.newsletter.sub}</p>
        {sent ? (
          <div style={{fontSize:18, color:"var(--c-gold-300)", fontFamily:"var(--font-display)", fontStyle:"italic"}}>
            ⭐ {lang === "es" ? "¡Listo! Revisa tu correo." : "Done! Check your email."}
          </div>
        ) : (
          <form className="news-form" onSubmit={submit}>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder={t.newsletter.placeholder} required disabled={loading}/>
            <button type="submit" disabled={loading}>{loading ? "..." : t.newsletter.cta}</button>
          </form>
        )}
      </div>
    </section>
  );
}

// ── Footer ────────────────────────────────────────────────────────────────────
function Footer({ lang, t, scrollTo, services: svcsProp, courses: csProp }) {
  const services = svcsProp ?? SERVICES;
  const courses  = csProp  ?? COURSES;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="brand-line">
              <div className="brand-logo"><LuxLogoMark size={26}/></div>
              <div>
                <div className="nm">{t.footer.brand}</div>
                <div style={{fontSize:11, opacity:0.45, letterSpacing:"0.14em"}}>{t.footer.tagline}</div>
              </div>
            </div>
            <p style={{fontSize:14, lineHeight:1.65, maxWidth:300}}>
              {lang === "es" ? "Centro integral de belleza, bienestar y formación profesional en Ibagué, Tolima." : "Integral center for beauty, wellness and professional training in Ibagué, Tolima."}
            </p>
            <div className="socials">
              <a href="https://instagram.com/luxuryibague" target="_blank" rel="noopener" aria-label="Instagram"><Icon.Instagram size={16}/></a>
              <a href="https://www.facebook.com/profile.php?id=61572867628629" target="_blank" rel="noopener" aria-label="Facebook"><Icon.Facebook size={16}/></a>
              <a href="https://wa.me/573332716890" target="_blank" rel="noopener" aria-label="WhatsApp"><Icon.Whatsapp size={16}/></a>
            </div>
          </div>
          <div>
            <h5>{lang === "es" ? "Servicios" : "Services"}</h5>
            {services.slice(0,5).map((s,i) => <a key={i} href="#services" onClick={e => { e.preventDefault(); scrollTo("services"); }}>{s.name[lang]}</a>)}
          </div>
          <div>
            <h5>{lang === "es" ? "Capacitaciones" : "Courses"}</h5>
            {courses.slice(0,5).map((c,i) => <a key={i} href="#courses" onClick={e => { e.preventDefault(); scrollTo("courses"); }}>{c.name[lang]}</a>)}
          </div>
          <div>
            <h5>{lang === "es" ? "Contacto" : "Contact"}</h5>
            <a href="https://wa.me/573332716890" target="_blank" rel="noopener">WhatsApp: 333-271-6890</a>
            <a href="mailto:aluxurybrow@gmail.com">aluxurybrow@gmail.com</a>
            <a href="#">{lang === "es" ? "Política de privacidad" : "Privacy policy"}</a>
            <a href="#">{lang === "es" ? "Términos de servicio" : "Terms of service"}</a>
            <div style={{marginTop:16}}>
              <div style={{fontSize:11, opacity:0.45, marginBottom:8}}>{lang === "es" ? "También somos" : "Also on"}</div>
              <div style={{fontSize:13}}>
                <div>📸 @luxuryibague</div>
                <div style={{marginTop:4}}>🎵 @Luxury Academy</div>
              </div>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.footer.copyright}</span>
          <span>
            <a href="../angel-spa/index.html" style={{color:"rgba(251,248,242,0.4)", fontSize:12}}>
              {lang === "es" ? "¿Buscas spa & bienestar? → Angel's Spa" : "Looking for spa & wellness? → Angel's Spa"}
            </a>
          </span>
        </div>
      </div>
    </footer>
  );
}

// ── WhatsApp FAB ──────────────────────────────────────────────────────────────
function WhatsAppFAB({ lang }) {
  const [bubble, setBubble] = React.useState(true);
  const msg = lang === "es" ? "Hola Luxury Academy! 👋 Quiero información sobre sus servicios y capacitaciones." : "Hello Luxury Academy! 👋 I'd like information about your services and training programs.";
  return (
    <div className="wa-fab">
      {bubble && (
        <div className="wa-bubble">
          <div className="nm">Luxury Academy</div>
          {lang === "es" ? "¡Hola! ¿En qué te podemos ayudar?" : "Hi! How can we help you?"}
          <button className="close-bubble" onClick={() => setBubble(false)}>✕</button>
        </div>
      )}
      <a href={`https://wa.me/573332716890?text=${encodeURIComponent(msg)}`} target="_blank" rel="noopener" className="wa-btn" aria-label="WhatsApp">
        <Icon.Whatsapp size={28}/>
      </a>
    </div>
  );
}

window.Contact = Contact;
window.Newsletter = Newsletter;
window.Footer = Footer;
window.WhatsAppFAB = WhatsAppFAB;