// Dentstyle — Hero, TrustStrip, Treatments
const { useState: useS_A, useEffect: useE_A } = React;

// === Image paths ===
const IMG = {
  hero: "assets/hero-portrait.png",
  t1: "assets/treatment-1-diseno.png",
  t2: "assets/treatment-2-blanqueamiento.png",
  t3: "assets/treatment-3-limpieza.png",
  t4: "assets/treatment-4-carillas.png",
  baBefore: "assets/before.png",
  baAfter: "assets/after.png",
  a1: null,
  a2: null,
  a3: null
};

const WA_LINK = "https://wa.me/525535235772?text=Hola%20Dentstyle%2C%20me%20gustar%C3%ADa%20agendar%20una%20cita";

// Soft fallback: swap broken images to a warm placeholder
function imgFallback(e) {
  if (e.target.dataset.fb) return;
  e.target.dataset.fb = "1";
  e.target.style.display = "none";
  const p = e.target.parentElement;
  if (p && !p.querySelector(".img-placeholder")) {
    const ph = document.createElement("div");
    ph.className = "img-placeholder";
    ph.textContent = e.target.alt || "image placeholder";
    p.appendChild(ph);
  }
}

// ===== Hero =====
function Hero() {
  return (
    <section id="hero" className="hero" data-screen-label="01 Hero">
      {/* Background ornaments */}
      <GoldArc variant={1} />
      <GoldArc variant={2} />

      {/* Pearls floating */}
      <Pearl size={36} top="18%" left="48%" anim="b" delay={0.2} />
      <Pearl size={64} top="62%" left="6%" anim="a" delay={0.6} opacity={0.85} />
      <Pearl size={22} top="34%" left="2%" anim="c" delay={1.2} />
      <Pearl size={48} top="78%" left="42%" anim="b" delay={1.6} />
      <Pearl size={28} top="10%" right="6%" anim="a" delay={0.8} opacity={0.7} />
      <Pearl size={80} bottom="-4%" right="-2%" anim="c" delay={1.1} />
      <Pearl size={40} top="50%" right="36%" anim="b" delay={0.5} opacity={0.7} />
      <Spark top="22%" left="12%" delay={0.2} />
      <Spark top="74%" right="14%" size={18} delay={1.5} />

      <div className="container hero-grid">
        <div className="hero-text">
          <span className="eyebrow reveal in">Clínica de estética dental · Premium</span>
          <h1 className="display hero-title reveal in">
            Tu sonrisa,<br />
            <em>tu mejor versión.</em>
          </h1>
          <p className="lead hero-sub reveal in reveal-delay-1">
            Estética dental para sonrisas naturales, luminosas y seguras. Diseñamos cada detalle pensando en ti.
          </p>
          <div className="hero-actions reveal in reveal-delay-2">
            <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener noreferrer">
              <Icon.Whatsapp />
              <span>Agenda tu cita</span>
            </a>
            <a className="btn btn-ghost" href="#tratamientos">
              <span>Conoce más</span>
              <Icon.ArrowRight />
            </a>
          </div>

          {/* Trust micro-row */}
          <div className="reveal in reveal-delay-3" style={{
            display: "flex", alignItems: "center", gap: 18, marginTop: 36,
            paddingTop: 24, borderTop: "1px solid rgba(198,172,111,0.25)", maxWidth: 460
          }}>
            <div style={{ display: "flex", gap: 4, color: "var(--gold)" }}>
              {[0, 1, 2, 3, 4].map((i) => <Icon.Star key={i} width={20} height={20} />)}
            </div>
            <div style={{ width: 1, height: 32, background: "rgba(198,172,111,0.45)" }} />
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 26, lineHeight: 1, color: "var(--ink)" }}>
                +250
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-mute)", letterSpacing: "0.08em", marginTop: 4, textTransform: "uppercase" }}>
                sonrisas transformadas
              </div>
            </div>
          </div>
        </div>

        {/* Portrait stage */}
        <Tilt3D className="hero-stage reveal in reveal-delay-2">
          <div className="hero-portrait">
            <img
              src={IMG.hero}
              alt="Retrato editorial de una sonrisa natural y luminosa"
              loading="eager"
              onError={imgFallback} />
          </div>

          {/* Foreground pearls overlapping portrait edge */}
          <Pearl size={54} top="-2%" right="6%" anim="b" delay={0.3} style={{ zIndex: 5 }} />
          <Pearl size={32} top="42%" right="-2%" anim="c" delay={0.9} style={{ zIndex: 5 }} />
          <Pearl size={70} bottom="-6%" left="-6%" anim="a" delay={0.5} style={{ zIndex: 5 }} />
          <Pearl size={22} top="74%" right="14%" anim="b" delay={1.3} style={{ zIndex: 5 }} />

          {/* Floating call-out card */}
          <div className="reveal in reveal-delay-3 hero-callout" style={{
            position: "absolute",
            bottom: 18, left: 0,
            zIndex: 6,
            background: "rgba(255,255,255,0.85)",
            backdropFilter: "blur(14px)",
            WebkitBackdropFilter: "blur(14px)",
            border: "1px solid rgba(198,172,111,0.3)",
            borderRadius: 18,
            padding: "12px 16px",
            display: "flex",
            alignItems: "center",
            gap: 10,
            boxShadow: "var(--shadow-md)",
            maxWidth: 230
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: "50%",
              background: "var(--grad-gold)", color: "white",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              flexShrink: 0
            }}>
              <Icon.Spark width={18} height={18} />
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18, lineHeight: 1.1, color: "var(--ink)" }}>
                Diseño de sonrisa
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>Plan a medida en 1 sesión</div>
            </div>
          </div>
        </Tilt3D>
      </div>
    </section>);
}

// ===== Trust Strip =====
function TrustStrip() {
  const items = [
  { icon: <Icon.Diamond />, title: "Excelencia estética", desc: "Resultados que elevan tu confianza." },
  { icon: <Icon.Tooth />, title: "Tecnología avanzada", desc: "Equipos de última generación para tu seguridad." },
  { icon: <Icon.ShieldCheck />, title: "Especialistas certificados", desc: "Profesionales con enfoque en estética avanzada." },
  { icon: <Icon.Spark width={28} height={28} />, title: "Experiencia premium", desc: "Atención personalizada en cada detalle." }];

  return (
    <section className="trust" data-screen-label="02 Confianza">
      <div className="container">
        <div className="trust-grid">
          {items.map((it, i) =>
          <div className="trust-item reveal" key={i} style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="trust-icon">{it.icon}</div>
              <h3 className="trust-title">{it.title}</h3>
              <p className="trust-desc">{it.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);
}

// ===== Treatments =====
function Treatments() {
  const treatments = [
  { id: "diseno", title: "Diseño de sonrisa", desc: "Plan personalizado para lograr una sonrisa que refleje lo mejor de ti.", img: IMG.t1, alt: "Retrato sonriente — diseño de sonrisa" },
  { id: "blanq", title: "Blanqueamiento dental", desc: "Dientes más blancos y luminosos de forma segura y efectiva.", img: IMG.t2, alt: "Sonrisa luminosa — blanqueamiento" },
  { id: "limp", title: "Limpieza dental", desc: "Salud y frescura para mantener tu sonrisa en su mejor estado.", img: IMG.t3, alt: "Limpieza dental profesional" },
  { id: "caril", title: "Carillas de porcelana", desc: "Correcciones estéticas mínimas con resultados naturales y duraderos.", img: IMG.t4, alt: "Guía de color para carillas de porcelana" }];

  return (
    <section id="tratamientos" className="treatments section-pad" data-screen-label="03 Tratamientos">
      {/* Subtle ornaments */}
      <Pearl size={50} top="6%" right="4%" anim="a" delay={0.5} opacity={0.5} />
      <Spark top="14%" left="6%" delay={1.1} />

      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Tratamientos</span>
          <h2 className="display">
            Diseñamos sonrisas que<br />
            <em>elevan tu confianza.</em>
          </h2>
          <div className="divider-spark"><Icon.Spark style={{ color: "var(--gold)" }} /></div>
        </div>

        <div className="treatments-grid">
          {treatments.map((t, i) =>
          <Tilt3D key={t.id} className="tcard reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="tcard-media">
                <img src={t.img} alt={t.alt} loading="lazy" onError={imgFallback} />
              </div>
              <div className="tcard-body">
                <h3 className="tcard-title">{t.title}</h3>
                <p className="tcard-desc">{t.desc}</p>
                <div className="tcard-foot">
                  <a className="btn-arrow" href={WA_LINK} target="_blank" rel="noopener noreferrer" aria-label={`Agendar ${t.title}`}>
                    <Icon.ArrowRight />
                  </a>
                </div>
              </div>
            </Tilt3D>
          )}
        </div>
      </div>
    </section>);
}

Object.assign(window, { Hero, TrustStrip, Treatments, IMG, imgFallback, WA_LINK });