/* sections.jsx — D'SHINE landing
   All sections except booking + app shell. Exposed on window.
*/

const { useState, useEffect, useRef, useMemo } = React;

/* ────────────────────────────────────────────────────────────
   Sparkle helpers
   ──────────────────────────────────────────────────────────── */
function SparkleField({ count = 18 }) {
  const sparkles = useMemo(() => {
    return Array.from({ length: count }).map((_, i) => ({
      id: i,
      left: Math.random() * 100,
      top: Math.random() * 100,
      sz: 6 + Math.random() * 14,
      del: Math.random() * 4,
      dur: 3 + Math.random() * 3,
      op: 0.3 + Math.random() * 0.5,
    }));
  }, [count]);
  return (
    <div className="sparkle-field" aria-hidden="true">
      {sparkles.map((s) => (
        <span
          key={s.id}
          className="s"
          style={{
            left: `${s.left}%`,
            top: `${s.top}%`,
            "--sz": `${s.sz}px`,
            "--del": `${s.del}s`,
            "--dur": `${s.dur}s`,
            "--op": s.op,
          }}
        />
      ))}
    </div>
  );
}

/* ────────────────────────────────────────────────────────────
   NAV
   ──────────────────────────────────────────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <a href="#top" className="nav-logo" aria-label="D'SHINE inicio">
        <span className="mark">D<span className="acc">'</span>SHINE</span>
        <span className="sub">Estética · Pereira</span>
      </a>
      <div className="nav-links">
        <a href="#servicios">Servicios</a>
        <a href="#sobre">Sobre</a>
        <a href="#precios">Paquetes</a>
        <a href="#testimonios">Testimonios</a>
        <a href="#ubicacion">Visítanos</a>
      </div>
      <a href="#reserva" className="nav-cta">
        Reservar
        <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
      </a>
      <button className="nav-burger" aria-label="Menú">
        <svg width="16" height="14" viewBox="0 0 16 14" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M0 1h16M0 7h16M0 13h16" />
        </svg>
      </button>
    </nav>
  );
}

/* ────────────────────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────────────────────── */
function Hero({ sparklesOn }) {
  // Leer datos del admin si existen
  const h = (typeof window !== 'undefined' && window.DSHINE_HERO) || {};
  const eyebrow = h.heroEyebrow || "Estética & Belleza · Pereira";
  const line1   = h.heroLine1   || "Tu mejor";
  const line2   = h.heroLine2   || "versión brilla";
  const line3   = h.heroLine3   || "en D'SHINE.";
  const sub     = h.heroSub     || "Cuidado facial, depilación láser y maquillaje social en un espacio pensado para que te sientas única. Tratamientos personalizados con la confianza de Daniela Hernández.";
  const cta1    = h.ctaPrimary  || "Reservar cita";
  const cta2    = h.ctaSecondary|| "Ver servicios";

  return (
    <header className="hero" id="top">
      {sparklesOn && <SparkleField count={22} />}
      <span className="hero-ornament tl"><span className="sparkle" /></span>
      <span className="hero-ornament br"><span className="sparkle" /></span>

      <div className="hero-content reveal in">
        <span className="eyebrow">{eyebrow}</span>
        <h1 className="hero-headline">
          <span className="l1">{line1}</span>
          <span className="l2">{line2}</span>
          <span className="l3">{line3}</span>
        </h1>
        <p className="hero-sub">{sub}</p>
        <div className="hero-ctas">
          <a href="#reserva" className="btn btn-primary">
            {cta1}
            <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </a>
          <a href="#servicios" className="btn btn-ghost">{cta2}</a>
        </div>
      </div>

      <div className="hero-visual reveal" data-d="2">
        <div className="hero-portrait">
          <span className="ph-label">Foto · Daniela Hernández<br/>retrato editorial</span>
        </div>
        <div className="hero-tag t1"><span className="dot" /> Atención personalizada</div>
        <div className="hero-tag t2"><span className="dot" /> +5 años de experiencia</div>
        <div className="hero-tag t3"><span className="dot" /> Tecnología láser premium</div>
      </div>

      <div className="hero-meta">
        <div className="m">
          <div className="k">Ubicación</div>
          <div className="v">Pereira, <em>Risaralda</em></div>
        </div>
        <div className="m">
          <div className="k">Atención</div>
          <div className="v">8am — <em>7pm</em></div>
        </div>
        <div className="m">
          <div className="k">Reservas</div>
          <div className="v">+57 <em>300 203 1782</em></div>
        </div>
      </div>

      <div className="hero-scroll">
        <span>Desliza</span>
        <span className="line" />
      </div>
    </header>
  );
}

/* ────────────────────────────────────────────────────────────
   MARQUEE
   ──────────────────────────────────────────────────────────── */
function Marquee() {
  const items = [
    "Estética Facial",
    "Depilación Láser",
    "Maquillaje Social",
    "DermaPen",
    "Limpieza Profunda",
    "Hidratación de Labios",
    "Hollywood Peeling",
  ];
  const block = (
    <span className="item">
      {items.map((t, i) => (
        <React.Fragment key={i}>
          <span>{t}</span>
          <span className="sep"><span className="sparkle" /></span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {block}{block}
      </div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────
   SERVICIOS
   ──────────────────────────────────────────────────────────── */
function Servicios() {
  const svcs = [
    {
      num: "01",
      name: "Cuidado y estética <em>facial</em>",
      desc: "Protocolos personalizados: limpieza profunda, DermaPen, hidratación con ácido hialurónico y Hollywood Peeling para una piel luminosa.",
      tags: ["Limpieza facial", "DermaPen", "Peeling"],
      label: "Tratamiento facial · clínica",
    },
    {
      num: "02",
      name: "Depilación <em>láser</em>",
      desc: "Tecnología láser segura y efectiva. Sesiones rápidas, mínimas molestias y resultados duraderos en todas las zonas del cuerpo.",
      tags: ["Bikini", "Axilas", "Piernas"],
      label: "Equipo láser premium",
    },
    {
      num: "03",
      name: "Maquillaje <em>social</em>",
      desc: "Maquillaje profesional para eventos, sesiones y momentos especiales. Looks pensados para realzar tu belleza natural.",
      tags: ["Eventos", "Novias", "Sesión"],
      label: "Maquillaje editorial",
    },
  ];

  return (
    <section className="section dark" id="servicios">
      <div className="services-head">
        <div className="reveal">
          <span className="eyebrow">Nuestros servicios</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Tres especialidades.<br/>
            <em>Una sola obsesión</em>: tu bienestar.
          </h2>
        </div>
        <div className="right reveal" data-d="2">
          <p className="lead">
            Cada servicio es diseñado contigo, no para ti. Trabajamos con
            productos premium y tecnología certificada, en un espacio limpio,
            cálido y absolutamente discreto.
          </p>
          <div className="hr-orn"><span className="sparkle" /></div>
        </div>
      </div>

      <div className="services-grid">
        {svcs.map((s, i) => (
          <article key={s.num} className="svc-card reveal" data-d={i + 1}>
            <span className="num">{s.num} / 03</span>
            <div className="svc-img">
              <div className="placeholder">
                <span className="ph-label">{s.label}</span>
              </div>
            </div>
            <div className="svc-body">
              <h3 className="svc-name" dangerouslySetInnerHTML={{ __html: s.name }} />
              <p className="svc-desc">{s.desc}</p>
              <div className="svc-tags">
                {s.tags.map((t) => <span key={t}>{t}</span>)}
              </div>
              <a href="#reserva" className="svc-cta">
                Reservar este servicio
                <span className="arr" />
              </a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────────
   SOBRE
   ──────────────────────────────────────────────────────────── */
function Sobre() {
  return (
    <section className="section about" id="sobre">
      <div className="about-grid">
        <div className="about-portrait reveal">
          <div className="placeholder light">
            <span className="ph-label">Retrato editorial · Daniela en cabina</span>
          </div>
          <div className="badge">
            <span className="small">Fundadora & especialista</span>
            Daniela Hernández
          </div>
        </div>

        <div className="about-text reveal" data-d="2">
          {(() => {
            const s = (typeof window !== 'undefined' && window.DSHINE_SOBRE) || {};
            const t1     = s.aboutTitle1  || "Belleza con propósito,";
            const t2     = s.aboutTitle2  || "cuidado con alma.";
            const p1     = s.aboutPara1   || "D'SHINE nace de la convicción de que verse bien empieza por sentirse bien. Cada protocolo se diseña en una valoración inicial honesta, con productos premium, tecnología certificada y un trato que recordarás.";
            const p2     = s.aboutPara2   || "Atiendo personalmente cada cita porque tu piel — y tu confianza — merecen exactamente eso: atención dedicada.";
            const firma  = s.aboutFirm    || "— Daniela Hernández";
            const years  = s.statYears    || "+5";
            const clients= s.statClients  || "1k+";
            const svcs   = s.statServices || "3";
            return (<>
              <span className="eyebrow">Sobre D'SHINE</span>
              <h2 className="h-section">
                {t1}<br/><em>{t2}</em>
              </h2>
              <p className="lead">{p1}</p>
              <p className="lead">{p2}</p>
              <p className="about-script">{firma}</p>
              <div className="about-stats">
                <div className="stat"><div className="n"><em>{years}</em></div><div className="l">Años de experiencia</div></div>
                <div className="stat"><div className="n">{clients.includes('+') ? <>{clients.replace('+','')}<em>+</em></> : clients}</div><div className="l">Clientas felices</div></div>
                <div className="stat"><div className="n">{svcs}</div><div className="l">Especialidades</div></div>
              </div>
            </>);
          })()}
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────────
   PRECIOS / PAQUETES
   ──────────────────────────────────────────────────────────── */
function Precios() {
  const pkgs = [
    {
      name: "Esencial",
      tag: "Para empezar",
      price: "180",
      featured: false,
      items: [
        "Limpieza facial profunda",
        "Hidratación con ácido hialurónico",
        "Valoración personalizada",
        "Recomendaciones de cuidado en casa",
      ],
    },
    {
      name: "Signature",
      tag: "Más reservado",
      price: "320",
      featured: true,
      items: [
        "Limpieza facial profunda + DermaPen",
        "Hollywood Peeling",
        "Depilación láser · 1 zona pequeña",
        "Hidratación de labios",
        "Kit post-tratamiento incluido",
      ],
    },
    {
      name: "Glow",
      tag: "Cuerpo completo",
      price: "560",
      featured: false,
      items: [
        "Depilación láser · zona completa",
        "Tratamiento facial premium",
        "Maquillaje social para 1 evento",
        "Sesión de seguimiento incluida",
      ],
    },
  ];

  return (
    <section className="section dark" id="precios">
      <div className="pricing-head reveal">
        <span className="eyebrow">Paquetes · D'SHINE</span>
        <h2 className="h-section" style={{ marginTop: 18 }}>
          Cuidado curado<br/>
          <em>en tres niveles.</em>
        </h2>
        <p className="lead">
          Paquetes diseñados para acompañarte: desde tu primera visita hasta
          rutinas integrales. Precios en pesos colombianos.
        </p>
      </div>

      <div className="pricing-grid">
        {pkgs.map((p, i) => (
          <article key={p.name} className={`pkg reveal ${p.featured ? "featured" : ""}`} data-d={i + 1}>
            <div className="pkg-h">
              <h3 className="pkg-name">{p.name}</h3>
              <span className="pkg-tag">{p.tag}</span>
            </div>
            <div className="price">
              <span className="cur">$</span>{p.price}
              <span className="unit">mil COP</span>
            </div>
            <ul>
              {p.items.map((it) => <li key={it}>{it}</li>)}
            </ul>
            <a href="#reserva" className="pkg-btn">
              Reservar paquete
            </a>
          </article>
        ))}
      </div>

      <p className="lead" style={{ textAlign: "center", margin: "44px auto 0", fontSize: 13 }}>
        ✦ ¿Quieres algo a tu medida? Escríbenos por WhatsApp y armamos un protocolo para ti.
      </p>
    </section>
  );
}

/* ────────────────────────────────────────────────────────────
   TESTIMONIOS
   ──────────────────────────────────────────────────────────── */
function Testimonios() {
  const data = [
    {
      q: "La atención de Daniela es de otro nivel. Mi piel cambió después de tres sesiones — y la cabina huele a calma.",
      n: "Valentina M.",
      m: "Cliente · Pereira",
      ini: "V",
    },
    {
      q: "Hice depilación láser bikini + axilas y los resultados fueron increíbles. Sin dolor, sin enrojecimientos y un trato impecable.",
      n: "Camila R.",
      m: "Cliente · Dosquebradas",
      ini: "C",
    },
    {
      q: "Me maquilló para mi matrimonio y duró 14 horas perfecto. Daniela entiende lo que cada rostro necesita.",
      n: "Laura V.",
      m: "Novia 2025",
      ini: "L",
    },
    {
      q: "Llevaba años buscando un lugar de confianza. D'SHINE se siente premium sin perder lo cercano. Mi rutina ahora vive aquí.",
      n: "Andrea P.",
      m: "Cliente · Pereira",
      ini: "A",
    },
    {
      q: "El Hollywood Peeling fue otra cosa. Me sentí cuidada, escuchada, y salí brillando de verdad. 10/10.",
      n: "Mariana S.",
      m: "Cliente · Cartago",
      ini: "M",
    },
  ];

  const [idx, setIdx] = useState(0);
  const [perView, setPerView] = useState(3);
  useEffect(() => {
    const onR = () => {
      const w = window.innerWidth;
      setPerView(w < 640 ? 1 : w < 900 ? 2 : 3);
    };
    onR();
    window.addEventListener("resize", onR);
    return () => window.removeEventListener("resize", onR);
  }, []);
  const maxIdx = Math.max(0, data.length - perView);
  const safeIdx = Math.min(idx, maxIdx);
  const prev = () => setIdx((i) => Math.max(0, i - 1));
  const next = () => setIdx((i) => Math.min(maxIdx, i + 1));

  // Auto-advance
  useEffect(() => {
    const t = setInterval(() => {
      setIdx((i) => (i + 1 > maxIdx ? 0 : i + 1));
    }, 6500);
    return () => clearInterval(t);
  }, [maxIdx]);

  const stride = 100 / perView;

  return (
    <section className="section tst" id="testimonios">
      <div className="tst-head reveal">
        <div>
          <span className="eyebrow" style={{ color: "var(--gold-deep)" }}>Testimonios</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Voces que <em>brillan</em> con nosotras.
          </h2>
        </div>
        <div className="tst-controls">
          <button onClick={prev} aria-label="Anterior">←</button>
          <button onClick={next} aria-label="Siguiente">→</button>
        </div>
      </div>

      <div className="tst-viewport reveal" data-d="2">
        <div
          className="tst-track"
          style={{ transform: `translateX(calc(-${safeIdx * stride}% - ${safeIdx * 22 / perView}px))` }}
        >
          {data.map((t, i) => (
            <article key={i} className="tst-card">
              <div className="tst-stars">
                {[0,1,2,3,4].map((j) => <span key={j} className="sparkle" />)}
              </div>
              <p className="tst-quote">{t.q}</p>
              <div className="tst-author">
                <div className="avatar">{t.ini}</div>
                <div className="info">
                  <div className="name">{t.n}</div>
                  <div className="meta">{t.m}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>

      <div className="tst-dots">
        {Array.from({ length: maxIdx + 1 }).map((_, i) => (
          <button
            key={i}
            className={i === safeIdx ? "active" : ""}
            onClick={() => setIdx(i)}
            aria-label={`Ir al testimonio ${i + 1}`}
          />
        ))}
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────────
   UBICACIÓN
   ──────────────────────────────────────────────────────────── */
function Ubicacion() {
  const c = (typeof window !== 'undefined' && window.DSHINE_CONTACT) || {};
  const phone    = c.phone     || "573002031782";
  const insta    = c.instagram || "dshine_estetica";
  const addr1    = c.address1  || "Cra 12 #1A-65";
  const addr2    = c.address2  || "Barrio Popular Modelo";
  const city     = c.city      || "Pereira, Risaralda";
  const hours    = c.hours     || "Lun — Sáb · 8:00 am — 7:00 pm";
  const waMsg    = c.waMessage || "Hola D'SHINE, quiero reservar una cita ✨";
  const waUrl = "https://wa.me/" + phone + "?text=" + encodeURIComponent(waMsg);
  return (
    <section className="section loc" id="ubicacion">
      <div className="loc-wrap">
        <div className="loc-map reveal">
          <div className="loc-pin">
            <span className="label">D<em>'</em>SHINE</span>
            <span className="dot" />
          </div>
        </div>

        <div className="loc-info reveal" data-d="2">
          <span className="eyebrow" style={{ color: "var(--gold-deep)" }}>Visítanos</span>
          <h2 className="h-section">
            Estamos en el corazón<br/>
            de <em>Pereira</em>.
          </h2>
          <p className="lead">
            Un espacio cuidado al detalle, fácil de encontrar y diseñado para
            que cada visita se sienta como un pequeño retiro.
          </p>

          <div className="rows">
            <div className="r">
              <div className="k">Dirección</div>
              <div className="v">{addr1}<br/><em>{addr2}</em><br/>{city}</div>
            </div>
            <div className="r">
              <div className="k">Horario</div>
              <div className="v"><em>{hours}</em></div>
            </div>
            <div className="r">
              <div className="k">WhatsApp</div>
              <div className="v"><em>+{phone}</em></div>
            </div>
            <div className="r">
              <div className="k">Instagram</div>
              <div className="v"><em>@{insta}</em></div>
            </div>
          </div>

          <div className="cta-row">
            <a className="wa-btn-inline" href={waUrl} target="_blank" rel="noopener">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M20.5 3.5A11 11 0 0 0 3.6 17.6L2 22l4.5-1.5A11 11 0 1 0 20.5 3.5Zm-8.5 17a9.05 9.05 0 0 1-4.6-1.25l-.33-.2-2.66.88.9-2.6-.22-.34A9.05 9.05 0 1 1 12 20.5Zm4.95-6.78c-.27-.14-1.61-.79-1.86-.88-.25-.09-.43-.14-.61.14-.18.27-.7.88-.86 1.06-.16.18-.32.2-.59.07a7.45 7.45 0 0 1-2.18-1.35 8.2 8.2 0 0 1-1.52-1.89c-.16-.27 0-.41.12-.55.12-.12.27-.32.41-.48.14-.16.18-.27.27-.45.09-.18.04-.34-.02-.48-.07-.14-.61-1.48-.84-2.02-.22-.53-.45-.45-.61-.46l-.52-.01a1 1 0 0 0-.73.34c-.25.27-.96.94-.96 2.28 0 1.34.98 2.64 1.12 2.82.14.18 1.93 2.95 4.68 4.13a16.1 16.1 0 0 0 1.56.58c.65.21 1.25.18 1.72.11.52-.08 1.61-.66 1.84-1.3.23-.64.23-1.18.16-1.3-.07-.12-.25-.18-.52-.32Z"/>
              </svg>
              WhatsApp directo
            </a>
            <a className="btn btn-primary" href="#reserva">
              Reservar cita
              <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer className="foot">
      <div className="foot-grid">
        <div className="foot-brand">
          <div className="foot-mark">D<em>'</em>SHINE</div>
          <div className="foot-tag">Estética & Belleza</div>
          <p className="foot-bio">
            Centro de estética en Pereira, especialista en cuidado facial,
            depilación láser y maquillaje social. Por Daniela Hernández.
          </p>
        </div>
        <div className="foot-col">
          <h4>Servicios</h4>
          <ul>
            <li><a href="#servicios">Estética facial</a></li>
            <li><a href="#servicios">Depilación láser</a></li>
            <li><a href="#servicios">Maquillaje social</a></li>
            <li><a href="#precios">Paquetes</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Visítanos</h4>
          <ul>
            <li>Cra 12 #1A-65</li>
            <li>Barrio Popular Modelo</li>
            <li>Pereira, Risaralda</li>
            <li>Lun—Sáb · 8am—7pm</li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Contacto</h4>
          <ul>
            <li><a href={"https://wa.me/" + ((typeof window !== 'undefined' && window.DSHINE_CONTACT && window.DSHINE_CONTACT.phone) || "573002031782")}>WhatsApp +{(typeof window !== 'undefined' && window.DSHINE_CONTACT && window.DSHINE_CONTACT.phone) || "57 300 203 1782"}</a></li>
            <li><a href="#reserva">Reserva online</a></li>
            <li><a href="https://instagram.com/dshine_estetica" target="_blank" rel="noopener">@dshine_estetica</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <div>© {new Date().getFullYear()} D'SHINE Estética & Belleza · Pereira, Colombia</div>
        <div className="foot-socials">
          <a href="https://instagram.com/dshine_estetica" target="_blank" rel="noopener" aria-label="Instagram">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <rect x="2.5" y="2.5" width="19" height="19" rx="5"/>
              <circle cx="12" cy="12" r="4.2"/>
              <circle cx="17.5" cy="6.5" r="0.9" fill="currentColor"/>
            </svg>
          </a>
          <a href="https://wa.me/573002031782" target="_blank" rel="noopener" aria-label="WhatsApp">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20.5 3.5A11 11 0 0 0 3.6 17.6L2 22l4.5-1.5A11 11 0 1 0 20.5 3.5Z"/>
            </svg>
          </a>
          <a href="#top" aria-label="Volver arriba">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <path d="M12 19V5M5 12l7-7 7 7" />
            </svg>
          </a>
        </div>
      </div>
    </footer>
  );
}

/* ────────────────────────────────────────────────────────────
   Export
   ──────────────────────────────────────────────────────────── */
Object.assign(window, {
  Nav, Hero, Marquee, Servicios, Sobre, Precios, Testimonios, Ubicacion, Footer, SparkleField,
});