// Dentstyle — BeforeAfter, Experience, Testimonials, FinalCTA, Footer, Fab
const { useState: useS_B, useRef: useR_B, useEffect: useE_B, useCallback: useCb_B } = React;

// ===== Before/After interactive slider =====
function BeforeAfter() {
  const [pos, setPos] = useS_B(52);
  const [tilt, setTilt] = useS_B({ x: 0, y: 0 });
  const trackRef = useR_B(null);
  const draggingRef = useR_B(false);

  const updateFromClientX = useCb_B((clientX) => {
    const el = trackRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    let p = ((clientX - rect.left) / rect.width) * 100;
    p = Math.max(0, Math.min(100, p));
    setPos(p);
    const drag = clientX - (rect.left + rect.width / 2);
    const tiltY = (drag / (rect.width / 2)) * 7;
    setTilt({ x: 1.2, y: Math.max(-7, Math.min(7, tiltY)) });
  }, []);

  useE_B(() => {
    const onMove = (e) => {
      if (!draggingRef.current) return;
      const x = e.touches ? e.touches[0].clientX : e.clientX;
      updateFromClientX(x);
    };
    const onUp = () => { draggingRef.current = false; setTilt({ x: 0, y: 0 }); };
    window.addEventListener("pointermove", onMove, { passive: true });
    window.addEventListener("pointerup", onUp);
    window.addEventListener("pointercancel", onUp);
    return () => {
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointerup", onUp);
      window.removeEventListener("pointercancel", onUp);
    };
  }, [updateFromClientX]);

  const onDown = (e) => {
    draggingRef.current = true;
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    updateFromClientX(x);
  };

  return (
    <section id="resultados" className="ba section-pad" data-screen-label="04 Antes y Despues">
      <Pearl size={60} top="8%" left="-2%" anim="a" delay={0.4} opacity={0.6} />
      <Pearl size={26} bottom="14%" right="4%" anim="b" delay={1.0} opacity={0.6} />

      <div className="container">
        <div className="ba-shell reveal-3d">
          <div>
            <span className="eyebrow ba-eyebrow">Resultados que hablan</span>
            <h2 className="display ba-title">
              Antes y después<br/>
              <em>que inspiran.</em>
            </h2>
            <p className="lead" style={{ marginBottom: 0, maxWidth: 340 }}>
              Desliza para ver la transformación real de nuestras pacientes.
              Cada sonrisa, un caso pensado con detalle.
            </p>
          </div>

          <div
            ref={trackRef}
            className="ba-viewer"
            onPointerDown={onDown}
            style={{ transform: `perspective(1200px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)` }}
            role="slider"
            aria-label="Comparador antes y después"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={Math.round(pos)}
          >
            {/* After (bottom layer) */}
            <img src={IMG.baAfter} alt="Sonrisa después del tratamiento" className="ba-img" loading="lazy" onError={imgFallback}/>
            {/* Before (clipped) */}
            <div className="ba-img-top-wrap" style={{ clipPath: `inset(0 ${100 - pos}% 0 0)` }}>
              <img src={IMG.baBefore} alt="Sonrisa antes del tratamiento" className="ba-img" loading="lazy" onError={imgFallback}/>
            </div>

            <span className="ba-tag ba-tag-before">Antes</span>
            <span className="ba-tag ba-tag-after">Después</span>

            <div className="ba-handle" style={{ left: `${pos}%` }}/>
            <div className="ba-knob" style={{ left: `${pos}%` }}>
              <Icon.Drag/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Experience steps =====
function Experience() {
  const steps = [
    { n: "01", title: "Evaluación personalizada", desc: "Escuchamos tus objetivos y analizamos tu sonrisa.", icon: <Icon.Users/> },
    { n: "02", title: "Diseño y plan a medida", desc: "Creamos un plan exclusivo, pensado para ti.", icon: <Icon.Layers/> },
    { n: "03", title: "Tratamiento de excelencia", desc: "Aplicamos tecnología y técnicas avanzadas con precisión.", icon: <Icon.ShieldCheck/> },
    { n: "04", title: "Resultados que acompañan", desc: "Seguimiento y cuidado para mantener tu sonrisa radiante.", icon: <Icon.Bell/> },
  ];
  return (
    <section id="experiencia" className="exp section-pad" data-screen-label="05 Experiencia">
      <Spark top="20%" right="8%" delay={0.6}/>
      <Pearl size={42} top="50%" left="-1%" anim="c" delay={0.8} opacity={0.5}/>

      <div className="container">
        <span className="eyebrow exp-eyebrow reveal">Un camino simple hacia tu mejor sonrisa</span>
        <div className="exp-grid">
          {steps.map((s, i) => (
            <div key={s.n} className="exp-step reveal" style={{ transitionDelay: `${i * 0.1}s` }}>
              <div className="exp-step-head">
                <div className="exp-icon">{s.icon}</div>
                <div className="exp-num">{s.n}</div>
              </div>
              <h3 className="exp-title">{s.title}</h3>
              <p className="exp-desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Testimonials =====
function Testimonials() {
  const trackRef = useR_B(null);
  const data = [
    { name: "Andrea R.", role: "Diseño de sonrisa", initial: "A", tone: 0, stars: 5, text: "Me encantó la atención y el resultado. Ahora sonrío sin pensar dos veces, se siente totalmente mía." },
    { name: "Carlos M.", role: "Carillas de porcelana", initial: "C", tone: 1, stars: 5, text: "Profesionales, cercanos y con un nivel de detalle excepcional. La experiencia se sintió de principio a fin. Gracias Dentstyle." },
    { name: "Valentina P.", role: "Blanqueamiento dental", initial: "V", tone: 2, stars: 5, text: "Volvería mil veces. Cambió mi sonrisa y mi seguridad. El cuidado en cada visita marcó la diferencia." },
    { name: "Sofía L.", role: "Limpieza & cuidado", initial: "S", tone: 0, stars: 5, text: "Un espacio sereno, atento y limpio. Cada cita se siente como un pequeño ritual de cuidado personal." },
  ];

  const toneGrad = (i) => [
    "linear-gradient(135deg,#E5D2A0,#A98C4D)",
    "linear-gradient(135deg,#D3B775,#8E724B)",
    "linear-gradient(135deg,#F0D8AB,#C6AC6F)",
  ][i % 3];

  const scrollByCards = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector(".tt-card");
    const dx = (card?.offsetWidth || 320) + 22;
    el.scrollBy({ left: dir * dx, behavior: "smooth" });
  };

  return (
    <section id="testimonios" className="tt section-pad" data-screen-label="06 Testimonios">
      <div className="container">
        <span className="eyebrow tt-eyebrow reveal">Lo que dicen nuestros pacientes</span>
        <div className="tt-track-wrap reveal">
          <div className="tt-track" ref={trackRef}>
            {data.map((t, i) => (
              <article key={i} className="tt-card">
                <div className="tt-stars">
                  {Array.from({ length: t.stars }).map((_, k) => <Icon.Star key={k}/>)}
                </div>
                <p className="tt-quote">"{t.text}"</p>
                <div className="tt-author">
                  <div className="tt-avatar" style={{
                    background: toneGrad(t.tone),
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "white", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20, fontWeight: 500,
                  }}>
                    {t.initial}
                  </div>
                  <div>
                    <div className="tt-name">— {t.name}</div>
                    <div className="tt-role">{t.role}</div>
                  </div>
                </div>
              </article>
            ))}
          </div>
          <div className="tt-arrows">
            <button className="tt-arrow" onClick={() => scrollByCards(-1)} aria-label="Anterior">
              <Icon.ChevronL/>
            </button>
            <button className="tt-arrow" onClick={() => scrollByCards(1)} aria-label="Siguiente">
              <Icon.ChevronR/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Final CTA =====
function FinalCTA() {
  return (
    <section id="contacto" className="fcta" data-screen-label="07 Cita">
      {/* Decor */}
      <Pearl size={90} bottom="-12%" left="-2%" anim="a" delay={0.3} />
      <Pearl size={42} top="20%" left="14%" anim="b" delay={0.8} opacity={0.7}/>
      <Pearl size={28} top="40%" right="18%" anim="c" delay={1.2} opacity={0.7}/>
      <Pearl size={64} bottom="-8%" right="6%" anim="b" delay={0.6}/>
      <Spark top="22%" left="34%" delay={0.4}/>
      <Spark bottom="20%" right="32%" delay={1.0}/>

      <div className="arc" aria-hidden="true" style={{ top: "0", left: "20%", width: "60%", height: "100%", opacity: 0.4, zIndex: 1 }}>
        <svg viewBox="0 0 800 400" preserveAspectRatio="xMidYMid meet" style={{ width: "100%", height: "100%" }}>
          <defs>
            <linearGradient id="ga3" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#C6AC6F" stopOpacity="0"/>
              <stop offset="50%" stopColor="#C6AC6F" stopOpacity="0.7"/>
              <stop offset="100%" stopColor="#C6AC6F" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M 0 360 Q 400 80 800 360" stroke="url(#ga3)" strokeWidth="1.5" fill="none"/>
          <path d="M 0 380 Q 400 120 800 380" stroke="url(#ga3)" strokeWidth="1" fill="none" opacity="0.6"/>
        </svg>
      </div>

      <div className="container fcta-inner reveal">
        <h2 className="display fcta-title">
          Tu mejor sonrisa<br/>
          <em>empieza hoy.</em>
        </h2>
        <div className="fcta-actions">
          <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener noreferrer">
            <Icon.Whatsapp/>
            <span>Agenda tu cita</span>
          </a>
          <p className="fcta-note">
            Da el primer paso<br/>hacia tu mejor versión.
          </p>
        </div>
      </div>
    </section>
  );
}

// ===== Footer =====
function Footer() {
  return (
    <footer id="nosotros" className="foot" data-screen-label="08 Footer">
      <div className="container">
        <div className="foot-grid">
          <div>
            <div className="foot-logo">
              <img src="assets/logo-white.png" alt="Dentstyle" loading="lazy"/>
            </div>
            <p className="foot-blurb">
              Clínica de estética dental premium. Diseñamos sonrisas naturales,
              luminosas y seguras con tecnología avanzada y cuidado personalizado.
            </p>
            <div className="foot-social" style={{ marginTop: 18 }}>
              <a href="#" aria-label="Instagram"><Icon.Instagram/></a>
              <a href="#" aria-label="Facebook"><Icon.Facebook/></a>
              <a href="#" aria-label="TikTok"><Icon.Tiktok/></a>
            </div>
          </div>
          <div>
            <h4 className="foot-h">Tratamientos</h4>
            <div className="foot-links">
              <a href="#tratamientos">Diseño de sonrisa</a>
              <a href="#tratamientos">Blanqueamiento</a>
              <a href="#tratamientos">Limpieza dental</a>
              <a href="#tratamientos">Carillas de porcelana</a>
            </div>
          </div>
          <div>
            <h4 className="foot-h">Clínica</h4>
            <div className="foot-links">
              <a href="#nosotros">Nosotros</a>
              <a href="#experiencia">Experiencia</a>
              <a href="#resultados">Resultados</a>
              <a href="#testimonios">Testimonios</a>
            </div>
          </div>
          <div>
            <h4 className="foot-h">Contacto</h4>
            <div className="foot-links">
              <a href={WA_LINK} target="_blank" rel="noopener noreferrer">Agenda tu cita</a>
              <a href={WA_LINK} target="_blank" rel="noopener noreferrer">WhatsApp directo</a>
              <a href="#">Dirección de la clínica</a>
              <a href="#">Lun – Sáb · 09:00 – 19:00</a>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© {new Date().getFullYear()} Dentstyle. Todos los derechos reservados.</div>
          <div>Aviso de privacidad · Términos · Política de cookies</div>
        </div>
      </div>
    </footer>
  );
}

// ===== Floating WhatsApp =====
function Fab() {
  return (
    <a className="fab" href={WA_LINK} target="_blank" rel="noopener noreferrer" aria-label="Contactar por WhatsApp">
      <Icon.Whatsapp width={26} height={26}/>
    </a>
  );
}

Object.assign(window, { BeforeAfter, Experience, Testimonials, FinalCTA, Footer, Fab });