/* ===== Luxury Academy — Sections 2: Gallery, Testimonials, About, FAQ ===== */

// ── Gallery (with lightbox) ─────────────────────────────────────────────────────
function Gallery({ lang, t }) {
  const items = [
    { src: "assets/interior-sala.jpeg",             label: { es: "Sala de tratamiento", en: "Treatment room" } },
    { src: "assets/exterior-fachada.jpeg",           label: { es: "Nuestra sede en Ibagué", en: "Our Ibagué location" } },
    { src: "assets/interior-cejas.jpeg",             label: { es: "Área de cejas y pestañas", en: "Brow & lash area" } },
    { src: "assets/offer-masterclass-micropig.jpeg", label: { es: "Taller de micropigmentación", en: "Micropigmentation workshop" } },
    { src: "assets/offer-master-lifting.jpeg",       label: { es: "Master lifting de pestañas", en: "Lash lift masterclass" } },
    { src: "assets/promo-redes.jpeg",                label: { es: "Clases en acción", en: "Training in action" } },
    { src: "assets/offer-cejas.jpeg",                label: { es: "Diseño de cejas", en: "Brow design" } },
    { src: "assets/flyer-servicios.jpeg",            label: { es: "Nuestros servicios", en: "Our services" } },
  ];

  const [idx, setIdx] = React.useState(null);
  const open = idx !== null;
  const close = () => setIdx(null);
  const prev = React.useCallback((e) => { if (e) e.stopPropagation(); setIdx(i => (i - 1 + items.length) % items.length); }, [items.length]);
  const next = React.useCallback((e) => { if (e) e.stopPropagation(); setIdx(i => (i + 1) % items.length); }, [items.length]);

  // Keyboard nav + lock body scroll while open
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") close();
      else if (e.key === "ArrowLeft") prev();
      else if (e.key === "ArrowRight") next();
    };
    document.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prevOverflow; };
  }, [open, prev, next]);

  // Touch swipe
  const touchX = React.useRef(null);
  const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touchX.current === null) return;
    const dx = e.changedTouches[0].clientX - touchX.current;
    if (Math.abs(dx) > 50) (dx > 0 ? prev : next)();
    touchX.current = null;
  };

  return (
    <section id="gallery" className="section section--alt">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>{t.gallery.eyebrow}</div>
          <h2>{t.gallery.title1} <span className="alt">{t.gallery.title2}</span></h2>
          <p>{t.gallery.sub}</p>
        </div>
        <div className="gallery-grid">
          {items.map((item, i) => (
            <button key={i} className="gallery-cell" onClick={() => setIdx(i)}
              aria-label={(lang === "es" ? "Ampliar: " : "Expand: ") + item.label[lang]}>
              <img src={item.src} alt={item.label[lang]} loading="lazy"/>
              <div className="gov">
                <span>{item.label[lang]}</span>
                <span className="gov-zoom"><Icon.Search size={16}/></span>
              </div>
            </button>
          ))}
        </div>
      </div>

      {open && (
        <div className="lightbox" onClick={close} role="dialog" aria-modal="true"
             onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
          <button className="lb-close" onClick={close} aria-label={lang === "es" ? "Cerrar" : "Close"}><Icon.Close size={20}/></button>
          <button className="lb-nav lb-prev" onClick={prev} aria-label={lang === "es" ? "Anterior" : "Previous"}><Icon.ChevronLeft size={26}/></button>
          <figure className="lb-figure" onClick={e => e.stopPropagation()}>
            <img src={items[idx].src} alt={items[idx].label[lang]}/>
            <figcaption>
              <span>{items[idx].label[lang]}</span>
              <span className="lb-count">{idx + 1} / {items.length}</span>
            </figcaption>
          </figure>
          <button className="lb-nav lb-next" onClick={next} aria-label={lang === "es" ? "Siguiente" : "Next"}><Icon.ChevronRight size={26}/></button>
        </div>
      )}
    </section>
  );
}

// ── Testimonials ──────────────────────────────────────────────────────────────
function Testimonials({ lang, t, testimonials: testiProp }) {
  const testimonials = testiProp ?? TESTIMONIALS;
  const trackRef = React.useRef(null);
  const [idx, setIdx] = React.useState(0);
  const total = testimonials.length;

  const scrollByIdx = (newIdx) => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.querySelector(".testi-card");
    if (!card) return;
    const w = card.getBoundingClientRect().width + 24;
    track.scrollTo({ left: newIdx * w, behavior: "smooth" });
    setIdx(newIdx);
  };

  const onScroll = () => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.querySelector(".testi-card");
    if (!card) return;
    setIdx(Math.round(track.scrollLeft / (card.getBoundingClientRect().width + 24)));
  };

  React.useEffect(() => {
    const id = setInterval(() => {
      const track = trackRef.current;
      if (!track) return;
      const card = track.querySelector(".testi-card");
      if (!card) return;
      const w = card.getBoundingClientRect().width + 24;
      const next = (Math.round(track.scrollLeft / w) + 1) % total;
      track.scrollTo({ left: next * w, behavior: "smooth" });
    }, 6000);
    return () => clearInterval(id);
  }, [total]);

  return (
    <section id="testimonials" className="section section--gold">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>{t.testi.eyebrow}</div>
          <h2>{t.testi.title1} <span className="alt">{t.testi.title2}</span></h2>
          <p>{t.testi.sub}</p>
        </div>
        <div className="testi-shell">
          <div className="testi-track" ref={trackRef} onScroll={onScroll}>
            {testimonials.map((tx, i) => (
              <article key={i} className="testi-card">
                <div className="testi-quote">"</div>
                <p className="testi-body">{tx[lang].body}</p>
                <div className="testi-foot">
                  <div className="testi-av">{tx.initials}</div>
                  <div>
                    <div className="testi-name">{tx.name}</div>
                    <div className="testi-svc">{tx[lang].svc}</div>
                  </div>
                  <div className="testi-stars">{"★".repeat(tx.stars)}</div>
                </div>
              </article>
            ))}
          </div>
          <div className="testi-controls">
            <button onClick={() => scrollByIdx((idx - 1 + total) % total)}><Icon.ChevronLeft/></button>
            <div className="testi-dots">
              {testimonials.map((_, i) => (
                <span key={i} className={`testi-dot ${i === idx ? "on" : ""}`} onClick={() => scrollByIdx(i)}/>
              ))}
            </div>
            <button onClick={() => scrollByIdx((idx + 1) % total)}><Icon.ChevronRight/></button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── About ─────────────────────────────────────────────────────────────────────
function About({ lang, t }) {
  return (
    <section id="about" className="section">
      <div className="wrap about-grid">
        {/* Visual */}
        <div className="about-visual">
          <img
            src="assets/exterior-fachada.jpeg"
            alt="Luxury Academy Ibagué - Sede Rincón de Piedra Pintada"
            style={{width:"100%",height:"100%",objectFit:"cover",display:"block"}}
          />
          <div className="about-photo-inset">
            <img src="assets/interior-sala.jpeg" alt="Interior Luxury Academy" loading="lazy"/>
          </div>
          <div className="about-stat-card">
            <div className="num">{t.about.stat}</div>
            <div className="lbl">{t.about.statLbl}</div>
          </div>
        </div>

        {/* Text */}
        <div>
          <div className="eyebrow"><span className="dot"></span>{t.about.eyebrow}</div>
          <h2>{t.about.title1} <span className="alt">{t.about.title2}</span></h2>
          <p style={{fontSize:16, color:"var(--c-ink-soft)", lineHeight:1.7, margin:"0 0 18px"}}>{t.about.p1}</p>
          <p style={{fontSize:16, color:"var(--c-ink-soft)", lineHeight:1.7, margin:"0 0 18px"}}>{t.about.p2}</p>
          <div className="values-grid">
            <div className="value-card">
              <div className="vic">🏆</div>
              <h4>{t.about.v1t}</h4>
              <p>{t.about.v1d}</p>
            </div>
            <div className="value-card">
              <div className="vic">✨</div>
              <h4>{t.about.v2t}</h4>
              <p>{t.about.v2d}</p>
            </div>
            <div className="value-card">
              <div className="vic">🌟</div>
              <h4>{t.about.v3t}</h4>
              <p>{t.about.v3d}</p>
            </div>
          </div>

          {/* Mission/Vision tabs */}
          <div style={{marginTop:36, padding:"24px 28px", background:"var(--c-navy-900)", borderRadius:"var(--radius-lg)", border:"1px solid rgba(216,126,158,0.15)"}}>
            <div style={{fontSize:11, letterSpacing:"0.2em", color:"var(--c-gold-400)", textTransform:"uppercase", marginBottom:10}}>
              {lang === "es" ? "Misión" : "Mission"}
            </div>
            <p style={{color:"rgba(251,248,242,0.75)", fontSize:14, lineHeight:1.65, margin:0}}>
              {lang === "es"
                ? "Formar profesionales altamente capacitados en el sector de la belleza y la estética, impulsando el crecimiento personal, el emprendimiento y el desarrollo profesional de cada estudiante."
                : "To train highly skilled professionals in the beauty and aesthetics sector, driving personal growth, entrepreneurship and professional development of each student."}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FAQ ────────────────────────────────────────────────────────────────────────
function FAQ({ lang, t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section section--alt">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>{t.faq.eyebrow}</div>
          <h2>{t.faq.title1} <span className="alt">{t.faq.title2}</span></h2>
        </div>
        <div className="faq-list">
          {t.faq.items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="plus"><Icon.Plus size={16}/></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Offers / Próximas Masterclass ─────────────────────────────────────────────
function Offers({ lang }) {
  const waText = lang === "es"
    ? "Hola Luxury Academy! Me interesa inscribirme a una masterclass. ¿Cuáles son las próximas fechas y cupos disponibles?"
    : "Hello Luxury Academy! I'm interested in enrolling in a masterclass. What are the upcoming dates and available spots?";

  const offers = [
    { img: "assets/offer-masterclass-micropig.jpeg", tag: { es: "Próximamente", en: "Coming soon" } },
    { img: "assets/offer-masterclass-makeup.jpeg",   tag: { es: "5 & 6 Junio · 2 días", en: "June 5 & 6 · 2 days" } },
    { img: "assets/offer-master-lifting.jpeg",       tag: { es: "Inscripciones abiertas", en: "Open enrollment" } },
    { img: "assets/offer-lashista.jpeg",             tag: { es: "Cupos limitados", en: "Limited spots" } },
  ];

  return (
    <section id="offers" className="section section--dark">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow" style={{color:"var(--c-gold-300)"}}>
            <span className="dot"></span>
            {lang === "es" ? "Próximas fechas" : "Upcoming dates"}
          </div>
          <h2 style={{color:"white"}}>
            {lang === "es" ? "Masterclass &" : "Masterclasses &"}{" "}
            <span className="alt">{lang === "es" ? "Ofertas" : "Special offers"}</span>
          </h2>
          <p style={{color:"rgba(251,248,242,0.65)"}}>
            {lang === "es"
              ? "Inscríbete a nuestras próximas masterclass y programas especiales. Cupos limitados — reserva el tuyo hoy."
              : "Enroll in our upcoming masterclasses and special programs. Limited spots — reserve yours today."}
          </p>
        </div>

        <div className="offers-grid">
          {offers.map((o, i) => (
            <div key={i} className="offer-card">
              <div className="offer-img-wrap">
                <img src={o.img} alt={o.tag[lang]} loading="lazy"/>
                <span className="offer-badge">{o.tag[lang]}</span>
              </div>
              <a
                href={`https://wa.me/573332716890?text=${encodeURIComponent(waText)}`}
                target="_blank" rel="noopener"
                className="btn btn-gold btn-small offer-cta"
              >
                <Icon.Whatsapp size={14}/>
                {lang === "es" ? "Separa tu cupo" : "Reserve spot"}
              </a>
            </div>
          ))}
        </div>

        <div style={{textAlign:"center", marginTop:48, paddingTop:32, borderTop:"1px solid rgba(216,126,158,0.15)"}}>
          <p style={{color:"rgba(251,248,242,0.5)", fontSize:14, marginBottom:20}}>
            {lang === "es"
              ? "¿Quieres que te avisemos de nuevas fechas? Suscríbete al newsletter."
              : "Want to be notified of new dates? Subscribe to our newsletter."}
          </p>
          <a
            href={`https://wa.me/573332716890?text=${encodeURIComponent(waText)}`}
            target="_blank" rel="noopener"
            className="btn btn-outline-gold"
          >
            <Icon.Whatsapp size={16}/>
            {lang === "es" ? "Ver todos los programas" : "See all programs"}
          </a>
        </div>
      </div>
    </section>
  );
}

// ── Video Section ─────────────────────────────────────────────────────────────
function VideoSection({ lang }) {
  const waText = lang === "es"
    ? "Hola Luxury Academy! Vi su video y quiero saber más sobre sus servicios y capacitaciones."
    : "Hello Luxury Academy! I saw your video and want to learn more about your services and training.";

  return (
    <section className="video-section">
      <video
        src="assets/promo-video.mp4"
        autoPlay muted loop playsInline
        className="video-bg-el"
        aria-hidden="true"
      />
      <div className="video-overlay">
        <div style={{fontSize:11,letterSpacing:"0.22em",textTransform:"uppercase",color:"var(--c-gold-300)",fontWeight:600,marginBottom:16,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>
          {lang === "es" ? "Luxury Academy Ibagué" : "Luxury Academy Ibagué"}
        </div>
        <h2 style={{fontFamily:"var(--font-display)",fontSize:"clamp(36px,4.5vw,64px)",color:"white",margin:"0 0 12px",lineHeight:1.05,textAlign:"center",letterSpacing:"-0.02em"}}>
          {lang === "es" ? "Excelencia en cada " : "Excellence in every "}
          <span style={{fontFamily:"var(--font-script)",color:"var(--c-gold-300)",fontWeight:400}}>
            {lang === "es" ? "detalle" : "detail"}
          </span>
        </h2>
        <p style={{color:"rgba(251,248,242,0.7)",fontSize:18,maxWidth:520,margin:"0 auto 36px",lineHeight:1.6,textAlign:"center"}}>
          {lang === "es"
            ? "Desde la atención hasta el resultado final, cada momento en Luxury Academy es una experiencia."
            : "From the first moment to the final result, every visit to Luxury Academy is an experience."}
        </p>
        <div style={{display:"flex",gap:14,justifyContent:"center",flexWrap:"wrap"}}>
          <a
            href={`https://wa.me/573332716890?text=${encodeURIComponent(waText)}`}
            target="_blank" rel="noopener"
            className="btn btn-gold"
          >
            <Icon.Whatsapp size={16}/>
            {lang === "es" ? "Agendar cita" : "Book appointment"}
          </a>
          <a
            href="https://instagram.com/luxuryibague"
            target="_blank" rel="noopener"
            className="btn btn-outline-gold"
          >
            <Icon.Instagram size={16}/>
            @luxuryibague
          </a>
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;
window.Testimonials = Testimonials;
window.About = About;
window.FAQ = FAQ;
window.Offers = Offers;
window.VideoSection = VideoSection;