// Main Aleli landing app
const { useState, useEffect, useRef, useMemo } = React;

// Reveal-on-scroll hook
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { el.classList.add("in"); io.disconnect(); }
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function Reveal({ children, className = "", as: Tag = "div", style }) {
  const ref = useReveal();
  return <Tag ref={ref} className={"reveal " + className} style={style}>{children}</Tag>;
}

// Falling petals
function Petals() {
  const petals = useMemo(() => Array.from({ length: 14 }, (_, i) => ({
    left: Math.random() * 100,
    delay: Math.random() * 18,
    duration: 16 + Math.random() * 10,
    color: ["#EB6077", "#F0B849", "#F4A8B6"][i % 3],
    size: 12 + Math.random() * 14,
  })), []);
  return (
    <div style={{ position: "fixed", inset: 0, pointerEvents: "none", zIndex: 1, overflow: "hidden" }}>
      {petals.map((p, i) => (
        <div key={i} className="hero-petal" style={{
          left: p.left + "%",
          animationDelay: -p.delay + "s",
          animationDuration: p.duration + "s",
          color: p.color, fontSize: p.size,
        }}>❀</div>
      ))}
    </div>
  );
}

function Testimonials() {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % window.TESTIMONIALS.length), 6000);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="testimonial-wrap">
      <img className="testimonial-flower-bg" src="assets/flower-transparent.png" alt="" aria-hidden="true" />
      <Reveal className="testimonial">
        <div className="testimonial-stage">
          {window.TESTIMONIALS.map((t, i) => (
            <div key={i} className={"testimonial-slide " + (i === idx ? "is-active" : "")}>
              <div className="testimonial-mark">"</div>
              <blockquote>{t.quote}</blockquote>
              <div className="testimonial-cite"><strong>{t.name}</strong> · {t.meta}</div>
            </div>
          ))}
        </div>
        <div className="testimonial-dots">
          {window.TESTIMONIALS.map((_, i) => (
            <button key={i} className={i === idx ? "is-active" : ""} onClick={() => setIdx(i)} aria-label={"Testimonio " + (i+1)} />
          ))}
        </div>
      </Reveal>
    </section>
  );
}

function App() {
  const [scrolled, setScrolled] = useState(false);
  const [bookingOpen, setBookingOpen] = useState(false);
  const [prefill, setPrefill] = useState(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll); onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => { document.body.style.overflow = bookingOpen ? "hidden" : ""; }, [bookingOpen]);

  const openBooking = (n) => { setPrefill(n || null); setBookingOpen(true); };

  return (
    <>
      <div className="aleli-bg" />
      <div className="aleli-grain" />
      <Petals />

      <header className={"aleli-header" + (scrolled ? " is-scrolled" : "")}>
        <div className="aleli-header-inner">
          <a href="#top" className="brand-mark" aria-label="Alelí — inicio">
            <img className="brand-isotipo" src="assets/flower-transparent.png" alt="" />
            <div>
              <div className="brand-word">ALELÍ</div>
              <div className="brand-tag">Estética & Spa Natural</div>
            </div>
          </a>
          <nav className="aleli-nav">
            <a href="#servicios">Servicios</a>
            <a href="#madres">Mes de las Madres</a>
            <a href="#experiencia">Experiencia</a>
            <a href="#contacto">Contacto</a>
          </nav>
          <button className="btn btn-primary" onClick={() => openBooking()}>
            Agendar <span className="btn-arrow">→</span>
          </button>
        </div>
      </header>

      {/* HERO */}
      <section className="aleli-hero" id="top" data-screen-label="01 Hero">
        <div className="hero-flower-stage">
          <img className="hero-flower" src="assets/flower-transparent.png" alt="" />
        </div>
        <div className="hero-grid">
          <div className="hero-text hero">
            <div className="hero-eyebrow">La Dorada · Caldas</div>
            <h1>
              <span className="word" style={{ animationDelay: "0.1s" }}>Tu mejor </span>
              <span className="word" style={{ animationDelay: "0.2s" }}>versión</span><br/>
              <span className="word" style={{ animationDelay: "0.4s" }}>comienza con </span>
              <span className="word italic" style={{ animationDelay: "0.6s" }}>una pausa.</span>
            </h1>
            <p className="lede">
              Estética profesional en La Dorada. Combinamos tecnología avanzada y
              rituales botánicos para entregarte resultados reales en el rostro y
              el cuerpo.
            </p>
            <div className="hero-cta">
              <button className="btn btn-primary btn-large" onClick={() => openBooking()}>
                Reservar mi cita <span className="btn-arrow">→</span>
              </button>
              <a href="#servicios" className="btn btn-ghost btn-large">Ver carta</a>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item"><div className="num">+800</div><div className="lab">Rituales en 2025</div></div>
              <div className="hero-meta-item"><div className="num">4.9</div><div className="lab">Reseñas Google</div></div>
              <div className="hero-meta-item"><div className="num">100%</div><div className="lab">Productos naturales</div></div>
            </div>
          </div>
          <div /> {/* right column intentionally empty - flower is absolute */}
        </div>
      </section>

      {/* MARQUEE */}
      <div className="aleli-marquee" aria-hidden="true">
        <div className="marquee-track">
          <span>Cuidamos de ti de forma natural <img className="marquee-flower" src="assets/flower-transparent.png" alt="" /> Bienestar real <img className="marquee-flower" src="assets/flower-transparent.png" alt="" /> Belleza con propósito <img className="marquee-flower" src="assets/flower-transparent.png" alt="" /> Estética & Spa Natural <img className="marquee-flower" src="assets/flower-transparent.png" alt="" /></span>
          <span>Cuidamos de ti de forma natural <img className="marquee-flower" src="assets/flower-transparent.png" alt="" /> Bienestar real <img className="marquee-flower" src="assets/flower-transparent.png" alt="" /> Belleza con propósito <img className="marquee-flower" src="assets/flower-transparent.png" alt="" /> Estética & Spa Natural <img className="marquee-flower" src="assets/flower-transparent.png" alt="" /></span>
        </div>
      </div>

      {/* SERVICES */}
      <section className="aleli-section" id="servicios" data-screen-label="02 Servicios">
        <Reveal className="section-head">
          <div>
            <div className="section-eyebrow">Carta de servicios</div>
            <h2>Rituales pensados<br/>para tu piel y <em>tu paz.</em></h2>
          </div>
          <p className="section-sub">Cada experiencia comienza con una infusión, una lectura breve de tu piel y un momento de respiración. La técnica viene después.</p>
        </Reveal>

        <Reveal className="services-quad reveal-stagger">
          {window.SERVICES[0].items.map((item, i) => (
            <article key={item.name} className="quad-card">
              <div className="quad-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="quad-solves">{item.solves}</div>
              <h3 className="quad-name">{item.name}</h3>
              <p className="quad-desc">{item.desc}</p>
              <div className="quad-meta">
                <span className="svc-tag duration">{item.duration}</span>
                {item.tags.map(t => <span key={t} className="svc-tag">{t}</span>)}
              </div>
              <div className="quad-foot">
                <div className="quad-price">{window.formatCOP(item.price)}</div>
                <button className="quad-cta" onClick={() => openBooking(item.name)}>
                  {item.cta} <span className="arrow">→</span>
                </button>
              </div>
            </article>
          ))}
        </Reveal>
      </section>

      {/* MES DE LAS MADRES — la sección estrella */}
      <section className="madres-section" id="madres" data-screen-label="03 Mes de las Madres">
        <div className="madres-bg" />
        <img className="madres-flower-bg" src="assets/flower-transparent.png" alt="" aria-hidden="true" />
        <div className="madres-inner">
          <Reveal className="madres-content">
            <div className="madres-stamp"><span className="pulse"></span> Edición Mayo · solo este mes</div>
            <h2>El regalo que ella<br/>sí <em>quiere:</em><br/>Tiempo y renovación.</h2>
            <div className="sub">Dos rituales pensados para ella.</div>
            <p className="body">
              Este mes, regálale lo que ningún paquete en cinta le da: una pausa
              real. Dos experiencias diseñadas para que mamá se reciba despacio —
              sola, o acompañada de quien ella elija.
            </p>
            <div className="madres-countdown">
              <span className="dot"></span>
              <span>Reserva con anticipación · <strong>Solo 12 cupos disponibles esta semana</strong></span>
            </div>
          </Reveal>

          <div className="madres-packages">
            {window.MADRES_PACKAGES.map((p, i) => (
              <Reveal key={p.name} className="pkg" style={{ transitionDelay: (i * 0.15) + "s" }}>
                <div onClick={() => openBooking(p.name)}>
                  <div className="pkg-num">{p.num}</div>
                  <div className="pkg-name">
                    {p.name.replace(p.nameEm, "").trim().replace(/"/g, "")}{p.name.includes(p.nameEm) ? <> <em>{p.nameEm}</em></> : null}
                  </div>
                  <div className="pkg-includes">{p.includes}</div>
                  <ul className="pkg-list">
                    {p.list.map(li => <li key={li}>{li}</li>)}
                  </ul>
                  <div className="pkg-foot">
                    <div className="pkg-price-stack">
                      <div className="pkg-price">{window.formatCOP(p.price)}</div>
                      <div className="pkg-price-meta">{p.duration}</div>
                    </div>
                    <button className="pkg-cta" onClick={(e) => { e.stopPropagation(); openBooking(p.name); }}>
                      Reservar <span>→</span>
                    </button>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* EXPERIENCE */}
      <section className="aleli-exp" id="experiencia" data-screen-label="04 Experiencia">
        <div className="aleli-section">
          <Reveal className="section-head">
            <div>
              <div className="section-eyebrow">La experiencia Alelí</div>
              <h2>Cuatro gestos<br/>que vas a <em>recordar.</em></h2>
            </div>
            <p className="section-sub">Detalles pequeños, pensados para que tu visita se sienta como una pausa real — no como una cita más en la agenda.</p>
          </Reveal>

          <Reveal className="exp-grid reveal-stagger">
            {[
              { num: "i.", icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M12 2C9 6 9 10 12 14C15 10 15 6 12 2Z"/><path d="M5 11C8 13 11 14 14 13"/><path d="M19 11C16 13 13 14 10 13"/><path d="M12 14V22"/></svg>, title: "Recibimiento", desc: "Té de hibisco, ambientación con aceites esenciales y un momento de respiración guiada." },
              { num: "ii.", icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M5 19l3-3"/></svg>, title: "Lectura de piel", desc: "Análisis personalizado antes de cada ritual para ajustar productos y duración." },
              { num: "iii.", icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M12 4 14 9 19 9 15 12 17 17 12 14 7 17 9 12 5 9 10 9 Z"/></svg>, title: "Manos maestras", desc: "Técnica + aparatología profesional Tensamax con productos 100% naturales." },
              { num: "iv.", icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M12 2C12 6 8 8 8 12 8 16 12 18 12 22M12 2C12 6 16 8 16 12 16 16 12 18 12 22"/></svg>, title: "Cierre ritual", desc: "Hidratación, recomendación a casa y tu próximo gesto agendado con cariño." },
            ].map(c => (
              <div className="exp-col" key={c.num}>
                <div className="exp-num">{c.num}</div>
                <div className="exp-glyph">{c.icon}</div>
                <h4>{c.title}</h4>
                <p>{c.desc}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      <Testimonials />

      {/* FOOTER */}
      <footer className="aleli-footer" id="contacto">
        <div className="footer-inner">
          <div>
            <div className="footer-brand">
              <img src="assets/flower-transparent.png" alt="" />
              <div>
                <div className="name">ALELÍ</div>
              </div>
            </div>
            <div className="footer-tag">Estética & Spa Natural</div>
            <p className="footer-blurb">Belleza con propósito. Pausas reales. Un ritual hecho a la medida de tu piel y de tu día.</p>
          </div>
          <div>
            <h5>Visítanos</h5>
            <ul>
              <li>En el corazón de La Dorada</li>
              <li>Caldas, Colombia</li>
              <li>Lun – Sáb · 9:00 – 18:00</li>
              <li>Domingos cerrado</li>
            </ul>
          </div>
          <div>
            <h5>Contacto</h5>
            <ul>
              <li><a href={`https://wa.me/${window.CONTACT.whatsapp}`}>{window.CONTACT.whatsappDisplay}</a></li>
              <li><a href={`mailto:${window.CONTACT.email}`}>{window.CONTACT.email}</a></li>
              <li><a href={`https://instagram.com/${window.CONTACT.instagram}`}>@{window.CONTACT.instagram}</a></li>
            </ul>
          </div>
          <div>
            <h5>Carta</h5>
            <ul>
              <li><a href="#servicios">Alelí Esencial</a></li>
              <li><a href="#servicios">Efecto Vitalidad</a></li>
              <li><a href="#servicios">Cuerpo en Armonía</a></li>
              <li><a href="#madres">Mes de las Madres</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Alelí · Estética & Spa Natural</span>
          <span>La Dorada · Caldas</span>
        </div>
      </footer>

      {window.BookingModal && React.createElement(window.BookingModal, { open: bookingOpen, onClose: () => setBookingOpen(false), prefillService: prefill })}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);