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

/* ───────────────────────── Data ───────────────────────── */

const WHATSAPP = "5491100000000"; // TODO: reemplazar por número real (formato internacional)
const SHOW_WHATSAPP = false; // activar cuando haya número definitivo
const waLink = (msg) =>
`https://wa.me/${WHATSAPP}?text=${encodeURIComponent(msg || "Hola, quiero hacer una consulta 🐾")}`;

function useIsMobile(bp = 768) {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const check = () => setIsMobile(document.body.getBoundingClientRect().width <= bp);
    check();
    const ro = new ResizeObserver(check);
    ro.observe(document.body);
    window.addEventListener('resize', check);
    return () => {ro.disconnect();window.removeEventListener('resize', check);};
  }, [bp]);
  return isMobile;
}

const NAV = [
{ label: "Inicio", href: "#top" },
{ label: "Nosotros", href: "#nosotros" },
{ label: "Servicios", href: "#servicios" },
{ label: "Novedades", href: "#novedades" },
{ label: "Contacto", href: "#contacto" }];


const HERO_VALUES = [
{ icon: "ti-heart", text: "Atención cercana, por nombre" },
{ icon: "ti-users", text: "El tutor es parte del proceso" },
{ icon: "ti-clock", text: "Tiempo real para cada paciente" }];


const METRICS = [
{ value: 15, suffix: " años", prefix: "+", label: "Cuidando familias del barrio", icon: "clock" },
{ value: 40000, suffix: "+", prefix: "", label: "Pacientes atendidos", icon: "paw" },
{ value: 8000, suffix: "+", prefix: "", label: "Cirugías exitosas", icon: "heart-rate-monitor" }];


const TEAM = [
{
  primary: true,
  initial: "G",
  name: "Dr. Gustavo",
  role: "Director · Cirugía",
  bio: "Lidera el equipo y la especialidad de cirugía. Cree en explicar cada paso y acompañar a cada familia con honestidad."
},
{
  primary: false,
  initial: "+",
  name: "Sumamos al equipo",
  role: "Profesionales",
  bio: "Un equipo que eligió quedarse en el barrio y conocer a sus pacientes. Pronto, más fichas de quienes te atienden."
}];


const SERVICES = [
{ icon: "stethoscope", title: "Clínica general", text: "Consultas, diagnóstico y tratamiento para el día a día de tu mascota." },
{ icon: "heart-rate-monitor", title: "Cirugía", text: "Cirugías programadas y de alta complejidad con seguimiento pre y post-operatorio." },
{ icon: "activity", title: "Diagnóstico por imagen", text: "Ecografía y radiografía para un diagnóstico preciso y rápido." },
{ icon: "bed", title: "Internación diurna", text: "Cuidado y monitoreo durante el día cuando tu mascota lo necesita." },
{ icon: "microscope", title: "Análisis de sangre", text: "Hemograma y bioquímica completa con resultados el mismo día." },
{ icon: "vaccine", title: "Vacunación", text: "Plan de vacunación completo para cachorros y adultos." },
{ icon: "scissors", title: "Baño y peluquería", text: "Estética integral con productos de calidad para que tu mascota luzca y se sienta bien." },
{ icon: "pill", title: "Farmacia", text: "Medicamentos, alimento balanceado y productos de venta libre, todo en el mismo lugar." }];


const NOVEDADES = [
{
  tag: "Novedad",
  title: "Estrenamos nueva sala de internación",
  text: "Renovamos por completo el espacio de internación para que tu mascota se recupere con más comodidad y bajo monitoreo constante.",
  date: "jul 2026",
  image: "uploads/WhatsApp Image 2026-07-20 at 11.09.58 AM.jpeg",
  color: "#6b7c4e"
},
{
  tag: "En producción",
  title: "Nuevo software de gestión",
  text: "Estamos implementando un sistema de gestión propio para agilizar turnos, historias clínicas y seguimiento de cada paciente.",
  date: "jul 2026",
  image: "uploads/ChatGPT Image 1 sept 2026, 12_35_54.png",
  color: "#4a7a5e"
},
{
  tag: "En remodelación",
  title: "Renovamos los consultorios",
  text: "Estamos remodelando los consultorios para brindarte un espacio más cómodo y moderno en cada consulta.",
  date: "jul 2026",
  image: "uploads/IMG_1710-4ccb8fd9.jpg",
  color: "#7a6a3e"
}];

const TESTIMONIALS = [
{
  name: "Mariana G.",
  location: "Villa Celina",
  text: "Llevan años cuidando a nuestra perra Luna. Siempre atentos, siempre honestos. No cambiaríamos de veterinaria por nada."
},
{
  name: "Sebastián R.",
  location: "La Matanza",
  text: "Cuando tuvieron que operar a Toto, el Dr. Gustavo nos explicó todo paso a paso. Salió perfecto y el seguimiento fue increíble."
},
{
  name: "Carolina M.",
  location: "Villa Celina",
  text: "El equipo es una familia. Desde que nos mudamos al barrio, Pelusa tiene su veterinaria de confianza."
}];



const WHY = [
{ n: "01", title: "Hablás con quien te atiende", text: "Sin intermediarios ni call centers. La persona que recibe tu mensaje es la misma que atiende a tu mascota." },
{ n: "02", title: "Especialistas en cirugía compleja", text: "Años de experiencia quirúrgica respaldan cada decisión, incluso en los casos más delicados." },
{ n: "03", title: "Te explicamos todo", text: "Qué tiene, por qué y qué sigue. En palabras claras, para que decidas con tranquilidad." },
{ n: "04", title: "Seguimiento real post-consulta", text: "No terminamos cuando salís del consultorio. Preguntamos cómo sigue y estamos para lo que necesites." }];


const CONTACT = [
{ featured: true, icon: "ti-phone", label: "Teléfono", value: "6088-1599", sub: "Lun a Sáb", href: "tel:6088-1599" },
{ featured: false, icon: "ti-map-pin", label: "Dirección", value: "Olavarría 2294", sub: "Cómo llegar", href: "https://maps.google.com" },
{ featured: false, icon: "ti-clock", label: "Horarios", value: "Lun–Sáb 9 a 19 hs", sub: "Dom 10 a 14 hs", href: null }];


/* ───────────────────────── Hooks / helpers ───────────────────────── */

function useReveal() {
  useEffect(() => {
    const els = Array.from(document.querySelectorAll(".reveal"));
    const force = (el) => {
      el.classList.add("in");
      el.style.transition = "none";
      el.style.opacity = "1";
      el.style.transform = "none";
    };
    let io;
    if ("IntersectionObserver" in window) {
      io = new IntersectionObserver(
        (entries) => entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add("in");io.unobserve(e.target);}}),
        { threshold: 0.12 }
      );
      els.forEach((el) => io.observe(el));
    } else {
      els.forEach(force);
    }
    // Failsafe: never leave content hidden if the observer doesn't deliver
    // (offscreen/capture/export contexts where transitions don't advance).
    const t = setTimeout(() => els.forEach(force), 1400);
    return () => {if (io) io.disconnect();clearTimeout(t);};
  }, []);
}

const wrap = { maxWidth: 1080, margin: "0 auto", padding: "0 24px", width: "100%" };

/* Inline SVG icons (self-contained — no webfont dependency) */
const ICON_PATHS = {
  "paw": <path d="M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1 -6.84 1.045c-.43 -1.38 -1.32 -2.27 -2.7 -2.705a3.5 3.5 0 0 1 1.04 -6.84z M11 4m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0 M18 8m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0 M20 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />,
  "brand-whatsapp": <React.Fragment><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></React.Fragment>,
  "phone": <path d="M22 16.92v3a2 2 0 0 1 -2.18 2a19.79 19.79 0 0 1 -8.63 -3.07a19.5 19.5 0 0 1 -6 -6a19.79 19.79 0 0 1 -3.07 -8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127 .96 .362 1.903 .7 2.81a2 2 0 0 1 -.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27 -1.27a2 2 0 0 1 2.11 -.45c.907 .338 1.85 .573 2.81 .7a2 2 0 0 1 1.72 2.03z" />,
  "map-pin": <React.Fragment><path d="M20 10c0 6 -8 12 -8 12s-8 -6 -8 -12a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="3" /></React.Fragment>,
  "clock": <React.Fragment><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></React.Fragment>,
  "photo": <React.Fragment><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="M21 15l-3.1 -3.1a2 2 0 0 0 -2.8 0L6 21" /></React.Fragment>,
  "arrow-left": <React.Fragment><path d="M12 19l-7 -7 7 -7" /><path d="M19 12H5" /></React.Fragment>,
  "arrow-right": <React.Fragment><path d="M5 12h14" /><path d="M12 5l7 7 -7 7" /></React.Fragment>,
  "heart": <path d="M19 14c1.49 -1.46 3 -3.21 3 -5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0 -3 .5 -4.5 2c-1.5 -1.5 -2.74 -2 -4.5 -2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7z" />,
  "users": <React.Fragment><path d="M16 21v-2a4 4 0 0 0 -4 -4H6a4 4 0 0 0 -4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0 -3 -3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></React.Fragment>,
  "stethoscope": <React.Fragment><path d="M4 3H3a2 2 0 0 0 -2 2v5a6 6 0 0 0 12 0V5a2 2 0 0 0 -2 -2h-1" /><path d="M8 15v1a6 6 0 0 0 12 0v-4" /><circle cx="20" cy="10" r="2" /></React.Fragment>,
  "vaccine": <React.Fragment><path d="M18 2l4 4" /><path d="M17 7l3 -3" /><path d="M19 9l-10.3 10.3a2.12 2.12 0 0 1 -3 -3L16 6" /><path d="M9 11l4 4" /><path d="M5 19l-3 3" /><path d="M14 4l6 6" /></React.Fragment>,
  "bed": <React.Fragment><path d="M2 4v16" /><path d="M2 8h18a2 2 0 0 1 2 2v10" /><path d="M2 17h20" /><path d="M6 8v9" /></React.Fragment>,
  "microscope": <React.Fragment><path d="M6 18h8" /><path d="M3 22h18" /><path d="M14 22a7 7 0 1 0 0 -14h-1" /><path d="M9 14h2" /><path d="M9 12a2 2 0 0 1 -2 -2V6h6v4a2 2 0 0 1 -2 2z" /><path d="M12 6V3a1 1 0 0 0 -1 -1H9a1 1 0 0 0 -1 1v3" /></React.Fragment>,
  "certificate": <React.Fragment><circle cx="12" cy="9" r="6" /><path d="M15.5 13.9l1.5 7.6l-5 -3l-5 3l1.5 -7.6" /></React.Fragment>,
  "scissors": <React.Fragment><circle cx="6" cy="7" r="3" /><circle cx="6" cy="17" r="3" /><line x1="20" y1="4" x2="8.12" y2="15.88" /><line x1="14.47" y1="14.48" x2="20" y2="20" /></React.Fragment>,
  "pill": <React.Fragment><path d="M4.5 12.5l7 -7a4.95 4.95 0 1 1 7 7l-7 7a4.95 4.95 0 0 1 -7 -7" /><path d="M8.5 8.5l7 7" /></React.Fragment>,
  "eye": <React.Fragment><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></React.Fragment>,
  "brain": <React.Fragment><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96-.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.44-4.24" /></React.Fragment>,
  "menu-2": <React.Fragment><path d="M4 6h16" /><path d="M4 12h16" /><path d="M4 18h16" /></React.Fragment>,
  "x": <React.Fragment><path d="M18 6L6 18" /><path d="M6 6l12 12" /></React.Fragment>,
  "heart-rate-monitor": <path d="M3 12h4l3 8l4 -16l3 8h4" />,
  "shield": <path d="M12 3l8 3v5c0 5.25-3.5 10.74-8 12-4.5-1.26-8-6.75-8-12V6l8-3z" />,
  "activity": <path d="M3 12h4l3 -8l4 16l3 -8h4" />,
  "message-circle": <React.Fragment><path d="M3 20l1.3 -3.9a9 9 0 1 1 3.4 2.9z" /></React.Fragment>,
  "star": <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91 -1.01L12 2z" />,
  "instagram": <React.Fragment><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r=".5" fill="currentColor" /></React.Fragment>,
  "facebook": <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
};

function Icon({ name, size = 24, style }) {
  const key = (name || "").replace(/^ti-/, "");
  const path = ICON_PATHS[key];
  if (!path) return null;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
    style={{ display: "block", flexShrink: 0, ...style }} aria-hidden="true">
      {path}
    </svg>);

}

function Eyebrow({ children, light }) {
  return (
    <div style={{
      fontFamily: "var(--sans)", fontSize: 11, fontWeight: 500, letterSpacing: "0.14em",
      textTransform: "uppercase", color: light ? "var(--verde-menta)" : "var(--verde-medio)"
    }}>{children}</div>);

}

function WaButton({ children, msg, style, primary = true }) {
  const [hover, setHover] = useState(false);
  return (
    <a href={waLink(msg)} target="_blank" rel="noopener"
    onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{
      display: "inline-flex", alignItems: "center", gap: 9,
      background: "var(--verde-medio)", color: "#fff",
      fontFamily: "var(--sans)", fontWeight: 600, fontSize: 15,
      padding: "13px 22px", borderRadius: 0,
      transform: hover ? "translateY(-1px)" : "none",
      boxShadow: hover ? "0 10px 24px -10px rgba(27,94,56,0.55)" : "0 4px 14px -8px rgba(27,94,56,0.45)",
      transition: "transform .2s, box-shadow .2s, background .2s",
      ...style
    }}>
      <Icon name="brand-whatsapp" size={19} />
      {children}
    </a>);

}

/* ───────────────────────── TopBar ───────────────────────── */

function TopBar() {
  return (
    <div className="topbar-only" style={{
      background: "var(--verde-oscuro)", height: 36,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 32px", fontFamily: "var(--sans)", fontSize: 12.5
    }}>
      <a href="https://maps.google.com" target="_blank" rel="noopener"
      style={{ display: "flex", alignItems: "center", gap: 6, color: "rgba(255,255,255,0.7)", transition: "color .2s" }}
      onMouseOver={(e) => e.currentTarget.style.color = "#fff"}
      onMouseOut={(e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)"}>
        <Icon name="map-pin" size={13} />
        Olavarría 2294, Buenos Aires
      </a>
      <a href="tel:6088-1599"
      style={{ display: "flex", alignItems: "center", gap: 6, color: "rgba(255,255,255,0.7)", transition: "color .2s" }}
      onMouseOver={(e) => e.currentTarget.style.color = "#fff"}
      onMouseOut={(e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)"}>
        <Icon name="phone" size={13} />
        6088-1599
      </a>
      <a href={waLink("Hola, quiero hacer una consulta 🐾")} target="_blank" rel="noopener"
      style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--verde-menta)", fontWeight: 600, transition: "color .2s" }}
      onMouseOver={(e) => e.currentTarget.style.color = "#fff"}
      onMouseOut={(e) => e.currentTarget.style.color = "var(--verde-menta)"}>
        <Icon name="brand-whatsapp" size={13} />
        Escribinos ahora
      </a>
    </div>);
}

/* ───────────────────────── Navbar ───────────────────────── */

function useActiveSection() {
  const [active, setActive] = useState("#top");
  useEffect(() => {
    const ids = NAV.map((l) => l.href.slice(1));
    const onScroll = () => {
      const y = window.scrollY + 120;
      let current = "#top";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) current = "#" + id;
      }
      setActive(current);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return active;
}

function Navbar({ t, setTweak }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const active = useActiveSection();

  // Etiquetas editables desde Tweaks; el href se mantiene fijo por sección.
  const navItems = NAV.map((l, i) => ({ ...l, label: t.navLabels[i] || l.label }));
  const accent = t.navAccent;
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(255,255,255,0.94)" : "var(--verde-suave)",
      backdropFilter: scrolled ? "blur(10px)" : "none", WebkitBackdropFilter: scrolled ? "blur(10px)" : "none",
      borderBottom: scrolled ? "0.5px solid var(--verde-borde)" : "0.5px solid transparent",
      boxShadow: scrolled ? "0 1px 20px -12px rgba(27,94,56,0.5)" : "none",
      transition: "background .3s, box-shadow .3s, border-color .3s", fontFamily: "var(--sans)"
    }}>
      <nav style={{ ...wrap, height: t.navHeight, display: "flex", alignItems: "center", justifyContent: "space-between", fontFamily: "var(--serif)" }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 11, transform: `translate(${t.brandX}px, ${t.brandY}px)`, transition: "transform .2s ease" }}>
          <span style={{
            width: 38, height: 38, borderRadius: 0, background: "var(--verde-oscuro)",
            display: "flex", alignItems: "center", justifyContent: "center", color: "#fff"
          }}>
            <Icon name="paw" size={22} />
          </span>
          <span style={{ fontWeight: 500, fontSize: t.brandSize, color: "var(--verde-oscuro)", letterSpacing: "-0.01em", fontFamily: "var(--serif)" }}>
            {t.brandName}
          </span>
        </a>

        <div className="nav-links" style={{ display: "flex", alignItems: "center", gap: 6, transform: `translate(${t.navX}px, ${t.navY}px)`, transition: "transform .2s ease" }}>
          {navItems.map((l) => <NavLink key={l.href} {...l} active={active === l.href} accent={accent} />)}
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 12, transform: `translate(${t.ctaX}px, ${t.ctaY}px)`, transition: "transform .2s ease" }}>
          {t.showCta && <div className="nav-cta"><WaButton style={{ padding: "10px 18px", fontSize: 14 }} msg="Hola, quiero hacer una consulta 🐾">{t.ctaLabel}</WaButton></div>}
          <button className="nav-burger" onClick={() => setOpen((o) => !o)} aria-label="Menú"
          style={{ display: "none", background: "none", border: "none", cursor: "pointer", color: "var(--verde-oscuro)", fontSize: 26, padding: 4 }}>
            <Icon name={open ? "x" : "menu-2"} size={26} />
          </button>
        </div>
      </nav>

      {/* Mobile drawer */}
      <div style={{
        overflow: "hidden", maxHeight: open ? 380 : 0, transition: "max-height .35s cubic-bezier(.4,0,.2,1)",
        borderTop: open ? "0.5px solid var(--verde-borde)" : "none", background: "#fff"
      }}>
        <div style={{ ...wrap, padding: "8px 24px 20px", display: "flex", flexDirection: "column" }}>
          {navItems.map((l) =>
          <a key={l.href} href={l.href} onClick={() => setOpen(false)}
          style={{ padding: "14px 0", borderBottom: "0.5px solid var(--verde-borde)", color: active === l.href ? "var(--verde-oscuro)" : "var(--verde-texto)", fontWeight: active === l.href ? 600 : 500, fontSize: 16 }}>
              {l.label}
            </a>
          )}
          {SHOW_WHATSAPP && <WaButton style={{ marginTop: 18, justifyContent: "center" }} msg="Hola, quiero hacer una consulta 🐾">Escribinos por WhatsApp</WaButton>}
        </div>
      </div>
    </header>);

}

function NavLink({ label, href, active, accent }) {
  const [h, setH] = useState(false);
  return (
    <a href={href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{
      fontFamily: "var(--sans)", fontSize: 14.5, fontWeight: 500,
      padding: "8px 16px", borderRadius: 0,
      color: active ? "#fff" : h ? "var(--verde-oscuro)" : "var(--verde-texto)",
      background: active ? accent || "var(--verde-oscuro)" : h ? "rgba(27,94,56,0.07)" : "transparent",
      transition: "color .2s, background .2s"
    }}>
      {label}
    </a>);


}

/* ───────────────────────── Hero ───────────────────────── */

function Hero({ t }) {
  const splitPct = t.heroSplit;
  const isMobile = useIsMobile(768);

  if (isMobile) {
    return (
      <section id="top" style={{
        background: "var(--verde-suave)",
        padding: "24px 20px 40px 20px",
        overflow: "hidden",
        minHeight: 520
      }}>

        <div style={{
          fontFamily: "var(--sans)",
          fontSize: 10,
          fontWeight: 600,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          color: "var(--verde-medio)",
          marginBottom: 14
        }}>
          VETERINARIA · VILLA CELINA
        </div>

        <h1 style={{
          fontFamily: "var(--serif)",
          fontWeight: 600,
          fontSize: 42,
          lineHeight: 1.08,
          letterSpacing: "-0.02em",
          color: "var(--verde-oscuro)",
          marginBottom: 14,
          width: 310,
          height: 117
        }}>
          En nuestra Vete atendemos familias
        </h1>

        <img
          src="assets/perro-hero-3-cropped.png"
          alt="Mascota en Veterinaria Sagrado Corazón"
          style={{
            float: "right",
            width: "72%",
            height: "auto",
            marginLeft: 8,
            marginTop: -20,
            marginBottom: 0,
            shapeOutside: "url('assets/perro-hero-3-cropped.png')",
            shapeMargin: "10px"
          }} />

        <div style={{
          fontFamily: "var(--sans)",
          fontSize: 13,
          fontWeight: 700,
          color: "var(--verde-oscuro)",
          marginTop: 24,
          marginBottom: 6
        }}>
          más de 15 años cuidando a quienes más querés
        </div>

        <div style={{
          fontFamily: "var(--sans)",
          fontSize: 13,
          fontWeight: 400,
          lineHeight: 1.6,
          color: "var(--verde-oscuro)",
          marginTop: 24,
          hyphens: "auto",
          WebkitHyphens: "auto"
        }}>
          Clínica general, cirugía especializada,
          diagnóstico por imagen y 6 especialidades
          médicas — todo en el barrio, de la mano
          de quienes ya te conocen
        </div>

      </section>);
  }

  return (
    <section id="top" style={{ position: "relative", background: `linear-gradient(to bottom, var(--verde-suave) 0%, var(--verde-suave) ${splitPct}%, #ffffff ${splitPct}%, #ffffff 100%)`, overflow: "hidden", color: "rgb(41, 167, 104)" }}>
      <div style={{ ...wrap, position: "relative", zIndex: 2, display: "flex", flexDirection: "column", minHeight: 620 }}>
        <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 40, alignItems: "start" }}>
          <div className="reveal hero-copy" style={{ padding: "60px 0 72px", maxWidth: 500, transform: `translate(${t.titleX}px, ${t.titleY}px)`, transition: "transform .25s ease" }}>
            <Eyebrow>Veterinaria · Villa Celina</Eyebrow>
            <h1 style={{
              color: "var(--verde-oscuro)", margin: "14px 0 22px",
              textWrap: "balance", lineHeight: "1.05", textAlign: "left",
              fontWeight: "600", letterSpacing: "-1.5px",
              fontFamily: "var(--serif)", fontSize: "clamp(52px, 5.5vw, 74px)"
            }}>En nuestra Vete<br />atendemos familias</h1>

            <div className="hero-photo-mobile">
              <img src="assets/perro-hero-3.png" alt="Perro atendido en Veterinaria Sagrado Corazón" style={{ width: "min(320px, 82%)", height: "auto", display: "block", margin: "0 auto", objectFit: "contain", filter: "drop-shadow(0 18px 24px rgba(27,94,56,0.16))" }} />
            </div>

            <p style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: 21, lineHeight: 1.4, color: "var(--verde-oscuro)", maxWidth: 420, marginBottom: 14, textWrap: "pretty" }}>
              Más de 15 años cuidando a quienes más querés.
            </p>
            <p style={{ fontSize: 16.5, lineHeight: 1.72, color: "var(--verde-texto)", maxWidth: 420, marginBottom: 32, textWrap: "pretty" }}>
              Clínica general, cirugía especializada, diagnóstico por imagen y 6 especialidades médicas — todo en el barrio, de la mano de quienes ya te conocen.
            </p>
          </div>

          {/* spacer column — photo is absolutely positioned so it can bleed to the viewport edge */}
          <div aria-hidden="true"></div>
        </div>

        {/* CTA row — full section width, centered within the white stripe */}
        <div style={{ marginTop: "auto", paddingBottom: 48, display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start", justifyContent: "flex-start", width: "100%" }}>
          <a href="#servicios" className="btn-outline" style={{
            display: "inline-flex", alignItems: "center",
            fontFamily: "var(--sans)", fontWeight: 600, fontSize: 15,
            padding: "13px 22px", borderRadius: 0,
            border: "2px solid var(--verde-oscuro)",
            color: "var(--verde-oscuro)"
          }}>Conocé nuestros servicios</a>
          {SHOW_WHATSAPP && <WaButton msg="Hola, quiero hacer una consulta 🐾">Escribinos por WhatsApp</WaButton>}
        </div>
      </div>

      <div className="hero-photo" style={{ position: "absolute", right: 0, bottom: `${100 - splitPct}%`, top: 0, width: "60%", zIndex: 1, display: "flex", alignItems: "flex-end", justifyContent: "center", overflow: "hidden" }}>
        <img src="assets/perro-hero-3.png" alt="Perro atendido en Veterinaria Sagrado Corazón" style={{
          position: "relative", zIndex: 2, width: `min(${t.dogSize}px, 100%)`, height: "auto",
          display: "block", objectFit: "contain",
          transform: `translate(${t.dogX}px, ${t.dogY}px)`, transition: "transform .25s ease, width .25s ease",
          filter: "drop-shadow(0 18px 24px rgba(27,94,56,0.16))"
        }} />
      </div>
    </section>);

}

/* ───────────────────────── Métricas ───────────────────────── */

function useCountUp(target, duration = 1800) {
  const [count, setCount] = useState(0);
  const [started, setStarted] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {setStarted(true);obs.disconnect();}
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  useEffect(() => {
    if (!started) return;
    let start = null;
    const step = (ts) => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / duration, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setCount(Math.round(eased * target));
      if (p < 1) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }, [started, target, duration]);

  return [count, ref];
}

function MetricItem({ value, suffix, prefix, label, icon, delay, isMobile }) {
  const [count, ref] = useCountUp(value, 1600);
  if (isMobile) {
    return (
      <div ref={ref} style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 700, fontSize: 28, lineHeight: 1, color: "#fff", letterSpacing: "-0.02em" }}>
          {prefix}{count.toLocaleString('es-AR')}{suffix}
        </div>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.65)", fontFamily: "var(--sans)", letterSpacing: "0.01em", lineHeight: 1.3 }}>{label}</div>
      </div>);
  }
  return (
    <div ref={ref} style={{ textAlign: "center", padding: "20px 32px", display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
      <div style={{
        width: 72, height: 72, borderRadius: 0,
        border: "2px solid var(--verde-menta)",
        display: "flex", alignItems: "center", justifyContent: "center",
        color: "var(--verde-menta)"
      }}>
        <Icon name={icon} size={30} />
      </div>
      <div>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 700, fontSize: "clamp(40px,4vw,56px)", lineHeight: 1, color: "#fff", letterSpacing: "-0.02em" }}>
          {prefix}{count.toLocaleString('es-AR')}{suffix}
        </div>
        <div style={{ fontSize: 14, color: "rgba(255,255,255,0.6)", marginTop: 10, fontFamily: "var(--sans)", letterSpacing: "0.01em" }}>{label}</div>
      </div>
    </div>);
}

function Metrics() {
  const isMobile = useIsMobile(768);
  return (
    <section id="metricas" style={{ background: "var(--verde-oscuro)", padding: isMobile ? "20px 0" : "72px 0" }}>
      <div style={{ ...wrap }}>
        <div className="metrics-grid" style={isMobile ? {
          display: "flex", flexDirection: "column", gap: 0, alignItems: "stretch"
        } : {
          display: "grid", gridTemplateColumns: "repeat(3,1fr)",
          gap: 0, alignItems: "center"
        }}>
          {METRICS.map((m, i) =>
          <div key={m.label} style={isMobile ? {
            borderTop: i > 0 ? "1px solid rgba(255,255,255,0.15)" : "none",
            padding: "18px 0"
          } : {
            borderLeft: i > 0 ? "1px solid rgba(255,255,255,0.15)" : "none"
          }}>
              <MetricItem {...m} isMobile={isMobile} />
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* ───────────────────────── Quiénes somos ───────────────────────── */

function About() {
  const sectionRef = useRef(null);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const el = sectionRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const scrollable = rect.height - window.innerHeight;
      const p = Math.max(0, Math.min(1, -rect.top / scrollable));
      setProgress(p);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // phase 0→0.35: solo imagen  phase 0.35→1: texto aparece
  const textProgress = Math.max(0, Math.min(1, (progress - 0.35) / 0.45));
  const imgShift = Math.round(progress * 60);

  return (
    <section ref={sectionRef} id="nosotros" style={{ height: "200vh", position: "relative" }}>
      {/* Sticky viewport */}
      <div style={{ position: "sticky", top: 0, height: "100vh", overflow: "hidden" }}>

        {/* Imagen full-screen con parallax */}
        <image-slot
          id="frente-veterinaria"
          placeholder="Foto del frente de la veterinaria"
          src={useIsMobile(768) ? "uploads/foto de enfrente mobile.webp" : "uploads/ChatGPT Image 17 jul 2026, 16_26_44.png"}
          shape="rect"
          style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%",
            transform: `scale(1.12) translateY(${imgShift}px)`,
            willChange: "transform"
          }}>
        </image-slot>

        {/* Overlay oscuro detrás del texto */}
        <div style={{
          position: "absolute", inset: 0,
          background: "rgba(26,58,42,0.48)",
          opacity: textProgress
        }} />

        {/* Tarjeta de texto centrada */}
        <div style={{
          position: "absolute", inset: 0,
          display: "flex", alignItems: "center", justifyContent: "center",
          padding: "0 24px"
        }}>
          <div style={{
            background: "#fff", borderRadius: 0,
            padding: "48px 52px", maxWidth: 720, width: "100%",
            boxShadow: "0 24px 64px rgba(0,0,0,0.22)",
            opacity: textProgress,
            transform: `translateY(${(1 - textProgress) * 56}px)`
          }}>
            <Eyebrow>Quiénes somos</Eyebrow>
            <h2 style={{
              fontFamily: "var(--serif)", fontWeight: 500,
              fontSize: "clamp(24px,2.8vw,32px)", lineHeight: 1.15,
              letterSpacing: "-0.015em", color: "var(--verde-oscuro)",
              margin: "14px 0 18px", textWrap: "balance"
            }}>
              Una veterinaria que recuerda tu nombre
            </h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.75, color: "var(--verde-texto)", textWrap: "pretty", marginBottom: 24 }}>
              Ni una cadena ni un consultorio de paso. Somos el equipo que conoce la historia de tu mascota, que te habla con claridad y que cuando hay que operar lo hace el mejor especialista de la ciudad.
            </p>
            <p style={{ fontSize: 15.5, lineHeight: 1.75, color: "var(--verde-oscuro)", fontWeight: 700, textWrap: "pretty", marginBottom: 24 }}>
              ❝ Te damos la tranquilidad que necesitás cuidando a tu mascota ❞
            </p>
            <div style={{
              display: "flex", alignItems: "center", gap: 14,
              padding: "14px 18px", background: "var(--verde-suave)",
              borderRadius: 0, borderLeft: "3px solid var(--verde-medio)"
            }}>
              <div style={{
                width: 42, height: 42, borderRadius: 0,
                background: "var(--verde-medio)", flexShrink: 0,
                display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden",
                color: "#fff", fontFamily: "var(--serif)", fontSize: 18, fontWeight: 500
              }}><img src="assets/team/gustavo.jpg" alt="Dr. Gustavo" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
              <div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 15, fontWeight: 500, color: "var(--verde-oscuro)" }}>Dr. Gustavo</div>
                <div style={{ fontSize: 12, color: "var(--verde-texto)", marginTop: 2 }}>Director · Cirugía Veterinaria</div>
              </div>
            </div>
          </div>
        </div>

        {/* Indicador de scroll */}
        <div style={{
          position: "absolute", bottom: 32, left: "50%", transform: "translateX(-50%)",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
          opacity: Math.max(0, 1 - progress * 6)
        }}>
          <span style={{ fontSize: 11, fontFamily: "var(--sans)", letterSpacing: "0.1em", color: "rgba(255,255,255,0.8)", textTransform: "uppercase" }}>Scroll</span>
          <div style={{ width: 22, height: 36, borderRadius: 0, border: "2px solid rgba(255,255,255,0.6)", display: "flex", justifyContent: "center", paddingTop: 5 }}>
            <div style={{ width: 3, height: 7, borderRadius: 0, background: "#fff", animation: "scrollDot 1.4s ease-in-out infinite" }} />
          </div>
        </div>
      </div>
    </section>);
}


/* ───────────────────────── Equipo ───────────────────────── */

const CARD_COLORS = ["#e8f5ee", "#f5f0e8", "#dff0e5", "#e4f2ec", "#ede8dc"];

const TEAM_ROWS = [
// Fila 1 — Veterinarios
[
{ name: "Dr. Gustavo", role: "Veterinario", initial: "G", photo: "assets/team/gustavo.jpg" },
{ name: "Dr. Rubén", role: "Veterinario", initial: "R", photo: "assets/team/ruben.jpg" },
{ name: "Dr. Patricio", role: "Veterinario", initial: "P", photo: "assets/team/patricio.jpg" },
{ name: "Dra. Brenda", role: "Veterinaria", initial: "B", photo: "assets/team/brenda.jpg" }],

// Fila 2 — Enfermeros
[
{ name: "Laurita", role: "Enfermera Veterinaria", initial: "L", photo: "assets/team/laurita.jpg" },
{ name: "Cindy", role: "Enfermera Veterinaria", initial: "C", photo: "assets/team/cindy.jpg" },
{ name: "Rosi", role: "Enfermera Veterinaria", initial: "R", photo: "assets/team/rosi.jpg" },
{ name: "Paloma", role: "Enfermera Veterinaria", initial: "P" },
{ name: "Lauti", role: "Enfermero Veterinario", initial: "L" },
{ name: "Tefi", role: "Enfermera Veterinaria", initial: "T" },
{ name: "Ambar", role: "Enfermera Veterinaria", initial: "A" }],

// Fila 3 — Administrativas y Mantenimiento
[
{ name: "Soledad", role: "Administrativa", initial: "S" },
{ name: "Gaby", role: "Administrativa", initial: "G", photo: "assets/team/gaby.jpg" },
{ name: "Claudia", role: "Administrativa", initial: "C", photo: "assets/team/claudia.jpg" },
{ name: "Máximo", role: "Mantenimiento", initial: "M" }]];



function TeamMarqueeCard({ name, role, initial, photo, bg, fg, sub, border }) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 12,
      background: bg, borderRadius: 50, padding: "12px 20px",
      flexShrink: 0, userSelect: "none",
      border: border || "none"
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: "50%", flexShrink: 0,
        border: `1.5px solid ${fg}`,
        background: bg, overflow: "hidden",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--serif)", fontWeight: 600, fontSize: 17,
        color: fg
      }}>{photo ? <img src={photo} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : initial}</div>
      <div>
        <div style={{ fontFamily: "var(--sans)", fontWeight: 700, fontSize: 14, color: fg, whiteSpace: "nowrap" }}>{name}</div>
        <div style={{ fontFamily: "var(--sans)", fontSize: 12, color: sub, whiteSpace: "nowrap", marginTop: 1 }}>{role}</div>
      </div>
    </div>);
}

function MarqueeRow({ members, direction, offset, palette }) {
  // triplicate for a seamless infinite loop (avoids visible jump at wrap)
  const all = [...members, ...members, ...members];
  return (
    <div className="marquee-row" style={{ marginBottom: 16 }}>
      <div className={direction === "right" ? "row-right" : "row-left"}>
        {all.map((m, i) => {
          const c = palette[(i + offset) % palette.length];
          return <TeamMarqueeCard key={i} {...m} bg={c.bg} fg={c.fg} sub={c.sub} border={c.border} />;
        })}
      </div>
    </div>);
}

function Team({ t }) {
  const isLight = (hex) => {
    const h = (hex || "#ffffff").replace("#", "");
    const n = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
    const r = parseInt(n.slice(0, 2), 16),g = parseInt(n.slice(2, 4), 16),b = parseInt(n.slice(4, 6), 16);
    return 0.299 * r + 0.587 * g + 0.114 * b > 170;
  };
  const swatch = (bg) => {
    const light = isLight(bg);
    return {
      bg,
      fg: light ? "var(--verde-oscuro)" : "#ffffff",
      sub: light ? "var(--verde-texto)" : "rgba(255,255,255,0.68)",
      border: light ? "1.5px solid var(--verde-borde)" : "none"
    };
  };
  const palette = [swatch(t.teamColorA), swatch(t.teamColorB), swatch(t.teamColorC)];
  return (
    <section id="equipo" style={{
      background: "#fff",
      padding: "90px 0",
      borderTop: "0.5px solid var(--verde-borde)",
      borderBottom: "0.5px solid var(--verde-borde)"
    }}>
      {/* Header */}
      <div style={{ ...wrap, textAlign: "center", marginBottom: 56 }}>
        <div className="reveal">
          <Eyebrow>El equipo</Eyebrow>
          <h2 style={{
            fontFamily: "var(--serif)", fontWeight: 700,
            fontSize: "clamp(28px,3.5vw,42px)", letterSpacing: "-0.02em",
            color: "var(--verde-oscuro)", margin: "14px 0 14px"
          }}>Quienes cuidan a tu familia</h2>
          <p style={{
            fontSize: 16, color: "var(--verde-texto)", lineHeight: 1.65,
            maxWidth: 500, margin: "0 auto"
          }}>
            Veterinarios, enfermeros y administrativos que eligieron quedarse en el barrio.
          </p>
        </div>
      </div>

      {/* Marquee rows — alternating between the 3 tweak colors */}
      <MarqueeRow members={TEAM_ROWS[0]} direction="left" offset={0} palette={palette} />
      <MarqueeRow members={TEAM_ROWS[1]} direction="right" offset={1} palette={palette} />
      <MarqueeRow members={TEAM_ROWS[2]} direction="left" offset={2} palette={palette} />
    </section>);
}


/* ───────────────────────── Servicios (grid) ───────────────────────── */

function Services() {
  return (
    <section id="servicios" style={{ background: "var(--verde-tenue)", padding: "90px 0" }}>
      <div style={{ ...wrap }}>
        <div className="reveal" style={{ marginBottom: 48 }}>
          <Eyebrow>Servicios</Eyebrow>
          <h2 style={{
            fontFamily: "var(--serif)", fontWeight: 500,
            fontSize: "clamp(26px,3.2vw,34px)", letterSpacing: "-0.015em",
            color: "var(--verde-oscuro)", margin: "16px 0 0", textWrap: "balance"
          }}>Todo lo que tu compañero necesita</h2>
        </div>
        <div className="services-grid reveal" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 20
        }}>
          {SERVICES.map((sv) => <ServiceCard key={sv.title} {...sv} />)}
        </div>
      </div>
    </section>);
}

function ServiceCard({ featured, icon, title, text }) {
  return (
    <div className="svc-card">
      <div className="svc-go-corner" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12h14M12 5l7 7-7 7" />
        </svg>
      </div>
      <div className="svc-icon-wrap">
        <Icon name={icon} size={26} />
      </div>
      
      <h3 className="svc-title">{title}</h3>
      <p className="svc-text">{text}</p>
    </div>);
}


/* ───────────────────────── Novedades (grid) ───────────────────────── */

function Novedades() {
  return (
    <section id="novedades" style={{ background: "var(--verde-suave)", padding: "90px 0" }}>
      <div style={{ ...wrap }}>
        <div className="reveal" style={{ marginBottom: 48 }}>
          <Eyebrow>Lo nuevo de la vete</Eyebrow>
          <h2 style={{
            fontFamily: "var(--serif)", fontWeight: 500,
            fontSize: "clamp(26px,3.2vw,38px)", letterSpacing: "-0.015em",
            color: "var(--verde-oscuro)", margin: "16px 0 0", textWrap: "balance"
          }}>Novedades</h2>
        </div>
        <div className="novedades-grid reveal" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {NOVEDADES.map((item, k) => <NovedadCard key={k} {...item} />)}
        </div>
      </div>
    </section>);
}

function NovedadCard({ tag, title, text, date, color, image }) {
  return (
    <div className="novedad-card" style={{
      width: "100%", background: "#fff", borderRadius: 0, overflow: "hidden",
      display: "flex", flexDirection: "column",
      boxShadow: "0 2px 12px rgba(0,0,0,0.06)"
    }}>
      <div style={{ width: "100%", paddingTop: "56.25%", position: "relative", background: color + "18" }}>
        {image ?
        <img src={image} alt={title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: title.includes("internación") ? "center 75%" : "center" }} /> :

        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.4">
              <rect x="3" y="3" width="18" height="18" rx="3" />
              <circle cx="8.5" cy="8.5" r="1.5" />
              <polyline points="21 15 16 10 5 21" />
            </svg>
          </div>
        }
      </div>
      <div style={{ padding: "20px 22px 24px", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
        <span style={{
          fontFamily: "var(--sans)", fontSize: 10.5, fontWeight: 700,
          letterSpacing: "0.12em", textTransform: "uppercase", color,
          alignSelf: "flex-start", background: color + "18", borderRadius: 0, padding: "3px 10px"
        }}>{tag}</span>
        <h3 style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 17, lineHeight: 1.3, color: "var(--verde-oscuro)", margin: 0, textWrap: "balance" }}>{title}</h3>
        <p style={{ fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.65, color: "var(--verde-texto)", margin: 0, flex: 1 }}>{text}</p>
        <span style={{ fontFamily: "var(--sans)", fontSize: 12.5, color: "#a09a90", marginTop: 4 }}>{date}</span>
      </div>
    </div>);
}

function CarouselArrow({ dir, disabled, onClick }) {
  const [h, setH] = useState(false);
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        position: "absolute", top: "35%",
        [dir === "left" ? "left" : "right"]: -20,
        zIndex: 10, width: 40, height: 40, borderRadius: 0,
        border: "1.5px solid var(--verde-borde)",
        background: disabled ? "#f0ede8" : h ? "var(--verde-oscuro)" : "#fff",
        color: disabled ? "#c5bfb2" : h ? "#fff" : "var(--verde-oscuro)",
        display: "flex", alignItems: "center", justifyContent: "center",
        cursor: disabled ? "default" : "pointer",
        transition: "all .2s", boxShadow: disabled ? "none" : "0 2px 8px rgba(0,0,0,0.1)",
        fontSize: 18, lineHeight: 1
      }}>
      
      {dir === "left" ? "‹" : "›"}
    </button>);

}

/* ───────────────────────── Contacto ───────────────────────── */

/* ── Google Maps script loader (compartido, evita cargar el script dos veces) ── */
function loadGoogleMapsScript(apiKey) {
  if (window.google && window.google.maps && window.google.maps.places) {
    return Promise.resolve();
  }
  if (window.__googleMapsLoadPromise) return window.__googleMapsLoadPromise;

  window.__googleMapsLoadPromise = new Promise((resolve, reject) => {
    window.__googleMapsCallback = () => resolve();
    const script = document.createElement("script");
    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=__googleMapsCallback`;
    script.async = true;
    script.defer = true;
    script.onerror = () => reject(new Error("No se pudo cargar Google Maps"));
    document.head.appendChild(script);
  });
  return window.__googleMapsLoadPromise;
}

/* ── Google Maps component ── */
function GoogleMap() {
  const mapRef = useRef(null);
  const [mapLoaded, setMapLoaded] = React.useState(false);
  const [mapError, setMapError] = React.useState(false);

  // ─── CONFIGURACIÓN — reemplazar antes de publicar ───
  const GOOGLE_API_KEY = "AIzaSyB1iFUzh8Ud1BsYgRSaZbkyUYP61TSozsg"; // reemplazar con API key real
  const LAT = -34.6963479; // coordenadas exactas del local
  const LNG = -58.4896029;
  const PLACE_ID = "ChIJi9fsvh7PwpYRXAVIQZTWOas"; // Place ID real ya confirmado
  // ────────────────────────────────────────────────────

  useEffect(() => {
    if (GOOGLE_API_KEY === "PENDIENTE") return; // no cargar si no hay key

    loadGoogleMapsScript(GOOGLE_API_KEY).then(() => setMapLoaded(true)).catch(() => setMapError(true));
  }, []);

  useEffect(() => {
    if (mapLoaded) initMap();
  }, [mapLoaded]);

  function initMap() {
    if (!mapRef.current || !window.google) return;

    const ubicacion = { lat: LAT, lng: LNG };

    const map = new window.google.maps.Map(mapRef.current, {
      zoom: 17,
      center: ubicacion,
      disableDefaultUI: true,
      zoomControl: true,
      styles: [
      { featureType: "poi", stylers: [{ visibility: "off" }] },
      { featureType: "transit", stylers: [{ visibility: "off" }] },
      { featureType: "road", elementType: "geometry",
        stylers: [{ color: "#f5f2ec" }] },
      { featureType: "road", elementType: "labels.text.fill",
        stylers: [{ color: "#8a9e5a" }] },
      { featureType: "landscape",
        stylers: [{ color: "#f0faf4" }] },
      { featureType: "water",
        stylers: [{ color: "#c8dfc8" }] },
      { elementType: "labels.icon",
        stylers: [{ visibility: "off" }] }]

    });

    // Marcador verde oliva personalizado
    const marker = new window.google.maps.Marker({
      position: ubicacion,
      map: map,
      title: "Veterinaria Sagrado Corazón",
      icon: {
        path: window.google.maps.SymbolPath.CIRCLE,
        scale: 12,
        fillColor: "#1a3a2a",
        fillOpacity: 1,
        strokeColor: "#ffffff",
        strokeWeight: 3
      }
    });

    // Info popup al hacer clic
    const infoWindow = new window.google.maps.InfoWindow({
      content: `
        <div style="font-family:'DM Sans',system-ui,sans-serif;
                    padding:10px 4px;max-width:220px;">
          <div style="font-weight:700;color:#1a3a2a;font-size:14px;margin-bottom:4px;">
            Veterinaria Sagrado Corazón
          </div>
          <div style="font-size:12px;color:#4a7a5e;margin-bottom:4px;">
            Olavarría 2294, Villa Celina
          </div>
          <div style="font-size:12px;color:#4a7a5e;margin-bottom:8px;">
            Lun–Sáb 9 a 19 hs · Dom 10 a 14 hs
          </div>
          <a href="https://maps.google.com/?q=Veterinaria+Sagrado+Corazon+Villa+Celina"
             target="_blank"
             style="font-size:12px;font-weight:600;color:#2e9e5e;
                    text-decoration:none;">
            Cómo llegar →
          </a>
        </div>
      `
    });

    marker.addListener("click", () => {
      infoWindow.open(map, marker);
    });
  }

  // Fallback si API_KEY está pendiente o hay error
  if (GOOGLE_API_KEY === "PENDIENTE" || mapError) {
    return (
      <div style={{
        borderRadius: 0, height: 420,
        background: "var(--verde-suave)",
        border: "1px solid var(--verde-borde)",
        display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center", gap: 16
      }}>
        <div style={{
          width: 56, height: 56, background: "var(--verde-oscuro)",
          display: "flex", alignItems: "center", justifyContent: "center"
        }}>
          <Icon name="map-pin" size={26} style={{ color: "#fff" }} />
        </div>
        <div style={{ textAlign: "center" }}>
          <div style={{ fontFamily: "var(--serif)", fontSize: 17,
            color: "var(--verde-oscuro)", fontWeight: 500 }}>
            Olavarría 2294
          </div>
          <div style={{ fontSize: 13, color: "var(--verde-texto)", marginTop: 4 }}>
            Villa Celina, La Matanza
          </div>
        </div>
        <a href="https://maps.google.com/?q=Veterinaria+Sagrado+Corazon+Villa+Celina"
        target="_blank" rel="noopener"
        style={{
          fontFamily: "var(--sans)", fontSize: 13, fontWeight: 600,
          color: "var(--verde-medio)", textDecoration: "none"
        }}>
          Ver en Google Maps →
        </a>
      </div>);

  }

  return (
    <div
      ref={mapRef}
      style={{
        width: "100%", height: 420,
        borderRadius: 0,
        border: "1px solid var(--verde-borde)"
      }} />);


}

function Contact() {
  return (
    <section id="contacto" style={{ background: "#fff", padding: "90px 0" }}>
      <div style={{ ...wrap }}>
        <div className="reveal" style={{ marginBottom: 48 }}>
          <Eyebrow>Ubicación y contacto</Eyebrow>
          <h2 style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: "clamp(26px,3.2vw,34px)", letterSpacing: "-0.015em", color: "var(--verde-oscuro)", margin: "16px 0 0", textWrap: "balance" }}>
            Encontranos en el barrio
          </h2>
        </div>
        <div className="contact-cols reveal" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }}>
          <GoogleMap />
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--verde-medio)" }}>Datos de contacto</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              {CONTACT.map((c) =>
              <div key={c.label} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                  <div style={{ width: 42, height: 42, borderRadius: 0, background: "var(--verde-suave)", color: "var(--verde-oscuro)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name={c.icon} size={20} />
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: "var(--verde-texto)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600, marginBottom: 3 }}>{c.label}</div>
                    {c.href ?
                  <a href={c.href} target={c.href.startsWith("http") ? "_blank" : undefined} rel="noopener" style={{ fontFamily: "var(--serif)", fontSize: 18, color: "var(--verde-oscuro)", fontWeight: 500, display: "block" }}>{c.value}</a> :
                  <span style={{ fontFamily: "var(--serif)", fontSize: 18, color: "var(--verde-oscuro)", fontWeight: 500 }}>{c.value}</span>
                  }
                    <div style={{ fontSize: 13, color: "var(--verde-texto)", marginTop: 2 }}>{c.sub}</div>
                  </div>
                </div>
              )}
            </div>
            <a href="https://maps.google.com" target="_blank" rel="noopener"
            style={{ display: "inline-flex", alignItems: "center", gap: 10, fontFamily: "var(--sans)", fontWeight: 600, fontSize: 15, padding: "13px 22px", borderRadius: 0, background: "var(--verde-oscuro)", color: "#fff", alignSelf: "flex-start", transition: "opacity .2s" }}
            onMouseOver={(e) => e.currentTarget.style.opacity = ".82"}
            onMouseOut={(e) => e.currentTarget.style.opacity = "1"}>
              <Icon name="map-pin" size={18} />
              Cómo llegar
            </a>
          </div>
        </div>
      </div>
    </section>);
}

/* ───────────────────────── Especialidades ───────────────────────── */

const ESPECIALIDADES = [
{ icon: "heart-rate-monitor", title: "Cardiología veterinaria", text: "Diagnóstico y seguimiento de enfermedades cardíacas en perros y gatos." },
{ icon: "brain", title: "Dermatología veterinaria", text: "Alergias, enfermedades de piel y problemas dermatológicos." },
{ icon: "eye", title: "Oftalmología veterinaria", text: "Patologías oculares, cirugías y tratamiento de la vista." },
{ icon: "activity", title: "Gastroenterología veterinaria", text: "Enfermedades del sistema digestivo y hepático." },
{ icon: "shield", title: "Neurología veterinaria", text: "Diagnóstico y tratamiento de enfermedades neurológicas." },
{ icon: "certificate", title: "Oncología veterinaria", text: "Diagnóstico, tratamiento y acompañamiento oncológico." }];

function Especialidades() {
  return (
    <section id="especialidades" style={{ background: "var(--verde-oscuro)", padding: "90px 0" }}>
      <div style={{ ...wrap }}>
        <div className="reveal" style={{ marginBottom: 52, textAlign: "center" }}>
          <div style={{ fontFamily: "var(--sans)", fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", marginBottom: 14 }}>Especialidades médicas</div>
          <h2 style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: "clamp(26px,3.2vw,38px)", letterSpacing: "-0.015em", color: "#fff", margin: "0 0 16px", textWrap: "balance" }}>
            Si tu veterinario te derivó,<br />estás en el lugar correcto
          </h2>
          <p style={{ fontSize: 16, color: "var(--verde-menta)", lineHeight: 1.65, maxWidth: 480, margin: "0 auto" }}>
            Contamos con especialistas en las principales áreas de la medicina veterinaria.
          </p>
        </div>
        <div className="esp-grid reveal" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
          {ESPECIALIDADES.map((esp) =>
          <div key={esp.title} style={{
            background: "rgba(255,255,255,0.07)",
            border: "1px solid rgba(255,255,255,0.12)",
            padding: "32px 28px",
            display: "flex", flexDirection: "column", gap: 14
          }}>
              <div style={{ color: "var(--verde-menta)" }}><Icon name={esp.icon} size={28} /></div>
              <h3 style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: 18, color: "#fff", margin: 0, lineHeight: 1.25 }}>{esp.title}</h3>
              <p style={{ fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.65, color: "rgba(255,255,255,0.6)", margin: 0, flex: 1 }}>{esp.text}</p>
              <a href={waLink("Hola, quiero consultar sobre especialidades médicas")} target="_blank" rel="noopener"
            style={{ fontFamily: "var(--sans)", fontSize: 13.5, fontWeight: 600, color: "var(--verde-menta)", display: "inline-flex", alignItems: "center", gap: 6, transition: "color .2s" }}
            onMouseOver={(e) => e.currentTarget.style.color = "#fff"}
            onMouseOut={(e) => e.currentTarget.style.color = "var(--verde-menta)"}>
                Consultanos →
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* ───────────────────────── Testimonios ───────────────────────── */

/* ── Google Reviews via Places API ── */

// ─── CONFIGURACIÓN — reemplazar antes de publicar ───
const REVIEWS_API_KEY = "AIzaSyB1iFUzh8Ud1BsYgRSaZbkyUYP61TSozsg"; // misma API key que el mapa
const REVIEWS_PLACE_ID = "ChIJi9fsvh7PwpYRXAVIQZTWOas"; // Place ID confirmado
// ────────────────────────────────────────────────────

function useGoogleReviews() {
  const [reviews, setReviews] = React.useState(null);
  const [rating, setRating] = React.useState(null);
  const [total, setTotal] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(false);

  useEffect(() => {
    if (REVIEWS_API_KEY === "PENDIENTE") {
      setError(true);
      setLoading(false);
      return;
    }

    // La API REST de Places (place/details/json) no admite fetch desde el navegador (sin CORS);
    // usamos la librería Places del SDK de Maps JS, que sí funciona client-side.
    loadGoogleMapsScript(REVIEWS_API_KEY).then(() => {
      const service = new window.google.maps.places.PlacesService(document.createElement("div"));
      service.getDetails(
        { placeId: REVIEWS_PLACE_ID, fields: ["reviews", "rating", "user_ratings_total"], language: "es" },
        (result, status) => {
          if (status === window.google.maps.places.PlacesServiceStatus.OK && result) {
            const mejores = (result.reviews || []).
            filter((r) => r.rating === 5 && r.text && r.text.length > 40).
            slice(0, 3).
            map((r) => ({ author_name: r.author_name, text: r.text, profile_photo_url: r.profile_photo_url }));

            setReviews(mejores.length > 0 ? mejores : null);
            setRating(result.rating);
            setTotal(result.user_ratings_total);
          } else {
            setError(true);
          }
          setLoading(false);
        }
      );
    }).catch(() => {
      setError(true);
      setLoading(false);
    });
  }, []);

  return { reviews, rating, total, loading, error };
}

function Testimonios() {
  const { reviews, rating, total, loading, error } = useGoogleReviews();

  // Fallback: reseñas reales escritas a mano
  // Reemplazar con reseñas reales del perfil de Google antes de publicar
  const fallbackReviews = TESTIMONIALS;

  // Qué mostrar: reseñas de API si están disponibles, fallback si no
  const displayReviews = !loading && !error && reviews ?
  reviews.map((r) => ({
    name: r.author_name,
    location: "Google",
    text: r.text,
    photoUrl: r.profile_photo_url,
    time: r.time
  })) :
  fallbackReviews;

  const showGoogleBadge = !loading && !error && reviews;

  return (
    <section id="testimonios" style={{ background: "var(--verde-oscuro)", padding: "90px 0" }}>
      <div style={{ ...wrap }}>
        <div className="reveal" style={{ marginBottom: 48, textAlign: "center" }}>
          <Eyebrow light>Testimonios</Eyebrow>
          <h2 style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: "clamp(26px,3.2vw,34px)", letterSpacing: "-0.015em", color: "#fff", margin: "16px 0 12px", textWrap: "balance" }}>
            Lo que dicen las familias que nos eligen
          </h2>

          {/* Contador dinámico de reseñas — solo si la API responde */}
          {showGoogleBadge && rating &&
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: "var(--sans)", fontSize: 14, color: "rgba(255,255,255,0.85)"
          }}>
              {/* Ícono G de Google */}
              <svg width="18" height="18" viewBox="0 0 24 24" aria-label="Google">
                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
              </svg>
              <strong style={{ color: "#fff" }}>{rating}</strong>
              <span>·</span>
              <span>{total}+ reseñas en Google</span>
            </div>
          }
        </div>

        <div className="testimonios-grid reveal" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {displayReviews.map((item, k) =>
          <TestimonialCard
            key={k}
            name={item.name}
            location={item.location}
            text={item.text}
            photoUrl={item.photoUrl}
            time={item.time}
            showGoogleBadge={showGoogleBadge} />

          )}
        </div>

        {/* Link a Google Maps para más reseñas */}
        {showGoogleBadge &&
        <div style={{ textAlign: "center", marginTop: 36 }}>
            <a
            href={`https://search.google.com/local/reviews?placeid=${REVIEWS_PLACE_ID}`}
            target="_blank" rel="noopener"
            style={{
              fontFamily: "var(--sans)", fontSize: 14, fontWeight: 600,
              color: "#fff", textDecoration: "none",
              display: "inline-flex", alignItems: "center", gap: 6
            }}
            onMouseOver={(e) => e.currentTarget.style.opacity = "0.7"}
            onMouseOut={(e) => e.currentTarget.style.opacity = "1"}>
            
              Ver todas las reseñas en Google →
            </a>
          </div>
        }
      </div>
    </section>);
}

function TestimonialCard({ name, location, text, photoUrl, time, showGoogleBadge }) {
  const fecha = time ?
  new Date(time * 1000).toLocaleDateString("es-AR", { year: "numeric", month: "long" }) :
  location;

  return (
    <div style={{
      background: "#fff", padding: "32px 28px",
      border: "1px solid var(--verde-borde)",
      display: "flex", flexDirection: "column", gap: 20,
      position: "relative"
    }}>
      {/* Badge de Google — solo cuando las reseñas vienen de la API */}
      {showGoogleBadge &&
      <div style={{ position: "absolute", top: 20, right: 20 }}>
          <svg width="16" height="16" viewBox="0 0 24 24" aria-label="Google">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
          </svg>
        </div>
      }

      {/* Estrellas */}
      <div style={{ display: "flex", gap: 4 }}>
        {Array.from({ length: 5 }).map((_, i) =>
        <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill="#d4a820" stroke="none">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
          </svg>
        )}
      </div>

      {/* Texto */}
      <p style={{
        fontFamily: "var(--serif)", fontSize: 16.5, lineHeight: 1.7,
        color: "var(--verde-oscuro)", fontStyle: "italic", flex: 1, margin: 0
      }}>"{text}"</p>

      {/* Autor */}
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
        borderTop: "1px solid var(--verde-borde)", paddingTop: 18
      }}>
        {/* Foto de perfil de Google o inicial */}
        {photoUrl ?
        <img
          src={photoUrl}
          alt={name}
          width={40} height={40}
          style={{ borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} /> :


        <div style={{
          width: 40, height: 40,
          background: "var(--verde-suave)", color: "var(--verde-oscuro)",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--serif)", fontSize: 17, fontWeight: 500, flexShrink: 0
        }}>
            {name[0]}
          </div>
        }
        <div>
          <div style={{
            fontFamily: "var(--sans)", fontWeight: 600,
            fontSize: 14, color: "var(--verde-oscuro)"
          }}>{name}</div>
          <div style={{ fontSize: 12.5, color: "var(--verde-texto)" }}>{fecha}</div>
        </div>
        <Icon name="paw" size={18}
        style={{ color: "var(--verde-medio)", marginLeft: "auto", opacity: .7 }} />
      </div>
    </div>);

}

/* ───────────────────────── Newsletter ───────────────────────── */

function Newsletter() {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email || loading) return;
    setLoading(true);
    setError(false);
    try {
      const res = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email })
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) throw new Error(data.error || 'request_failed');
      setSent(true);
    } catch (err) {
      setError(true);
    } finally {
      setLoading(false);
    }
  };

  return (
    <section style={{ background: "var(--verde-suave)", padding: "80px 0" }}>
      <div style={{ ...wrap, maxWidth: 640, textAlign: "center" }}>
        <div className="reveal">
          <h2 style={{
            fontFamily: "var(--serif)", fontWeight: 500,
            fontSize: "clamp(24px,3vw,34px)", letterSpacing: "-0.015em",
            color: "var(--verde-oscuro)", margin: "14px 0 12px", textWrap: "balance"
          }}>Quedate al tanto de todo lo que pasa en la vete</h2>
          <p style={{
            fontSize: 15.5, color: "var(--verde-texto)", lineHeight: 1.7,
            margin: "0 auto 36px", maxWidth: 480
          }}>
            Te avisamos cuando hay campañas de vacunación, nuevos servicios o recordatorios importantes. Sin spam, solo lo que importa.
          </p>
        </div>

        {sent ?
        <div className="reveal" style={{
          display: "inline-flex", alignItems: "center", gap: 12,
          background: "#fff", border: "1.5px solid var(--verde-medio)",
          borderRadius: 0, padding: "18px 28px",
          fontFamily: "var(--serif)", fontSize: 17, color: "var(--verde-oscuro)"
        }}>
            <Icon name="paw" size={22} />
            ¡Listo! Te vamos a escribir pronto.
          </div> :

        <form onSubmit={handleSubmit}
        style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <div style={{ flex: "1 1 260px", position: "relative" }}>
              <label htmlFor="nl-email" style={{
              position: "absolute", width: 1, height: 1, overflow: "hidden",
              clip: "rect(0,0,0,0)", whiteSpace: "nowrap"
            }}>Correo electrónico</label>
              <input
              id="nl-email"
              type="email"
              required
              placeholder="tu@correo.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              style={{
                width: "100%", boxSizing: "border-box",
                padding: "14px 18px", borderRadius: 0,
                border: "1.5px solid var(--verde-borde)",
                fontFamily: "var(--sans)", fontSize: 15,
                color: "var(--verde-oscuro)", background: "#fff",
                outline: "none",
                transition: "border-color .2s, box-shadow .2s"
              }}
              onFocus={(e) => {e.target.style.borderColor = "var(--verde-medio)";e.target.style.boxShadow = "0 0 0 3px rgba(78,160,108,0.15)";}}
              onBlur={(e) => {e.target.style.borderColor = "var(--verde-borde)";e.target.style.boxShadow = "none";}} />
            
            </div>
            <button type="submit" id="btn-suscribir-newsletter" disabled={loading} style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "14px 26px", borderRadius: 0,
            background: "var(--verde-oscuro)", color: "#fff",
            fontFamily: "var(--sans)", fontWeight: 600, fontSize: 15,
            border: "none", cursor: loading ? "default" : "pointer",
            opacity: loading ? 0.7 : 1,
            transition: "opacity .2s"
          }}
          onMouseOver={(e) => {if (!loading) e.currentTarget.style.opacity = ".82";}}
          onMouseOut={(e) => {if (!loading) e.currentTarget.style.opacity = "1";}}>
              {loading ? "Enviando…" : "Suscribirme"}
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M12 5l7 7-7 7" />
              </svg>
            </button>
          </form>
        }
        {error &&
        <p className="reveal" style={{ marginTop: 16, fontSize: 13.5, color: "#b8452f" }}>
            No pudimos guardar tu suscripción. Probá de nuevo en un momento.
          </p>
        }
      </div>
    </section>);
}

/* ───────────────────────── Footer ───────────────────────── */

function Footer() {
  return (
    <footer style={{ background: "var(--verde-mas-oscuro)" }}>
      <div style={{ ...wrap, padding: "56px 24px 32px" }}>
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", gap: 48, marginBottom: 48 }}>
          <div>
            <a href="#top" style={{ display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
              <span style={{ width: 34, height: 34, borderRadius: 0, background: "rgba(255,255,255,0.12)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff" }}>
                <Icon name="paw" size={18} />
              </span>
              <span style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: 19, color: "#fff", letterSpacing: "-0.01em" }}>Sagrado Corazón</span>
            </a>
            <p style={{ fontSize: 14, lineHeight: 1.72, color: "rgba(224,245,235,0.55)", maxWidth: 240, marginBottom: 24 }}>
              La veterinaria que recuerda tu nombre. Más de 15 años cuidando a las familias del barrio.
            </p>
            <div style={{ display: "flex", gap: 10 }}>
              {[["instagram", "Instagram", "https://www.instagram.com/veterinariasagradocorazong/?hl=es"]].map(([icon, label, href]) =>
              <a key={icon} href={href} target="_blank" rel="noopener" aria-label={label}
              style={{ width: 36, height: 36, borderRadius: 0, background: "rgba(255,255,255,0.08)", color: "rgba(224,245,235,0.65)", display: "flex", alignItems: "center", justifyContent: "center", transition: "background .2s, color .2s" }}
              onMouseOver={(e) => {e.currentTarget.style.background = "rgba(255,255,255,0.18)";e.currentTarget.style.color = "#fff";}}
              onMouseOut={(e) => {e.currentTarget.style.background = "rgba(255,255,255,0.08)";e.currentTarget.style.color = "rgba(224,245,235,0.65)";}}>
                  <Icon name={icon} size={18} />
                </a>
              )}
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--verde-menta)", marginBottom: 20 }}>Navegación</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {NAV.map((l) =>
              <a key={l.href} href={l.href}
              style={{ color: "rgba(224,245,235,0.65)", fontSize: 14, transition: "color .2s" }}
              onMouseOver={(e) => e.currentTarget.style.color = "#fff"}
              onMouseOut={(e) => e.currentTarget.style.color = "rgba(224,245,235,0.65)"}>{l.label}</a>
              )}
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--verde-menta)", marginBottom: 20 }}>Contacto</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <span style={{ color: "rgba(224,245,235,0.65)", fontSize: 14 }}>Olavarría 2294, Bs. As.</span>
              <span style={{ color: "rgba(224,245,235,0.65)", fontSize: 14 }}>Lun–Sáb 9 a 19 hs · Dom 10 a 14 hs</span>
              {SHOW_WHATSAPP &&
              <a href={waLink()} style={{ color: "var(--verde-menta)", fontSize: 14, fontWeight: 600, transition: "color .2s" }}
              onMouseOver={(e) => e.currentTarget.style.color = "#fff"}
              onMouseOut={(e) => e.currentTarget.style.color = "var(--verde-menta)"}>WhatsApp →</a>
              }
            </div>
          </div>
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,0.07)", paddingTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
          <span style={{ fontSize: 12.5, color: "rgba(224,245,235,0.3)" }}>© 2026 - Farc Consulting</span>
          <span style={{ fontFamily: "var(--serif)", fontSize: 14, color: "rgba(224,245,235,0.3)", fontStyle: "italic" }}>Atendemos familia</span>
        </div>
      </div>
    </footer>);
}

/* ───────────────────────── App ───────────────────────── */

function FloatingChat() {
  const [h, setH] = useState(false);
  const isMobile = useIsMobile(768);
  if (!SHOW_WHATSAPP) return null;
  if (isMobile) {
    return (
      <a href={waLink()} target="_blank" rel="noopener" className="floating-chat"
      style={{
        position: "fixed", right: 20, bottom: 20, zIndex: 999,
        width: 52, height: 52, borderRadius: "50%",
        display: "flex", alignItems: "center", justifyContent: "center",
        background: "#25D366", color: "#fff",
        boxShadow: "0 4px 16px rgba(0,0,0,0.2)"
      }}>
        <Icon name="brand-whatsapp" size={26} />
      </a>);
  }
  return (
    <a href={waLink()} target="_blank" rel="noopener" className="floating-chat"
    onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{
      position: "fixed", right: 22, bottom: 22, zIndex: 60,
      display: "inline-flex", alignItems: "center", gap: 10,
      background: "var(--verde-medio)", color: "#fff",
      fontFamily: "var(--sans)", fontWeight: 600, fontSize: 15,
      padding: "13px 20px", borderRadius: 0,
      boxShadow: h ? "0 16px 34px -12px rgba(27,94,56,0.6)" : "0 8px 24px -8px rgba(27,94,56,0.5)",
      transform: h ? "translateY(-2px)" : "none", transition: "transform .2s, box-shadow .2s"
    }}>
      <Icon name="brand-whatsapp" size={21} />
      <span className="chat-label">¡Escribinos!</span>
    </a>);

}

const FONT_STACKS = {
  default: null,
  inter: "'Inter', system-ui, sans-serif",
  josefin: "'Josefin Sans', system-ui, sans-serif",
  roboto: "'Roboto', system-ui, sans-serif",
  dmsans: "'DM Sans', system-ui, sans-serif",
  lora: "'Lora', Georgia, serif",
  poppins: "'Poppins', system-ui, sans-serif"
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mobileView": false,
  "fontFamily": "default",
  "teamColorA": "#ffffff",
  "teamColorB": "#6b7c4e",
  "teamColorC": "#1a3a2a",
  "brandName": "Sagrado Corazón",
  "brandSize": 21,
  "navLabels": ["Inicio", "Nosotros", "Servicios", "Novedades", "Contacto"],
  "navAccent": "#1a3a2a",
  "showCta": false,
  "ctaLabel": "WhatsApp",
  "navHeight": 72,
  "brandX": 0,
  "brandY": 0,
  "navX": 0,
  "navY": 0,
  "ctaX": 0,
  "ctaY": 0,
  "titleX": 0,
  "titleY": 0,
  "dogSize": 820,
  "dogX": 0,
  "dogY": 0,
  "heroSplit": 78
} /*EDITMODE-END*/;


function App() {
  useReveal();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    document.documentElement.classList.toggle('mobile-preview-active', !!t.mobileView);
    return () => document.documentElement.classList.remove('mobile-preview-active');
  }, [t.mobileView]);
  useEffect(() => {
    const stack = FONT_STACKS[t.fontFamily];
    document.documentElement.style.setProperty('--sans', stack || "'DM Sans', system-ui, sans-serif");
    document.documentElement.style.setProperty('--serif', stack || "'Lora', Georgia, serif");
  }, [t.fontFamily]);
  return (
    <React.Fragment>
      <Navbar t={t} setTweak={setTweak} />
      <main>
        <Hero t={t} />
        <About />
        <Metrics />
        <Services />
        <Especialidades />
        <Team t={t} />
        <Novedades />
        <Testimonios />
        <Contact />
      </main>
      <Newsletter />
      <Footer />
      <FloatingChat />

      <TweaksPanel>
        <TweakSection label="Vista previa" />
        <TweakToggle label="Ver versión mobile" value={t.mobileView}
        onChange={(v) => setTweak('mobileView', v)} />

        <TweakSection label="Tipografía" />
        <TweakRadio label="Fuente" value={t.fontFamily}
        options={['default', 'inter', 'josefin', 'roboto', 'dmsans', 'lora', 'poppins']}
        onChange={(v) => setTweak('fontFamily', v)} />

        <TweakSection label="Encabezado" />
        <TweakText label="Nombre de la marca" value={t.brandName}
        onChange={(v) => setTweak('brandName', v)} />
        <TweakSlider label="Tamaño del nombre" value={t.brandSize} min={16} max={28} step={1} unit="px"
        onChange={(v) => setTweak('brandSize', v)} />
        <TweakColor label="Color sección activa" value={t.navAccent}
        options={['#1b5e38', '#2e9e5e', '#0f3d22', '#4a7a5e']}
        onChange={(v) => setTweak('navAccent', v)} />

        <TweakSection label="Menú de navegación" />
        <TweakText label="1 · Inicio" value={t.navLabels[0]}
        onChange={(v) => setTweak('navLabels', t.navLabels.map((l, i) => i === 0 ? v : l))} />
        <TweakText label="2 · Nosotros" value={t.navLabels[1]}
        onChange={(v) => setTweak('navLabels', t.navLabels.map((l, i) => i === 1 ? v : l))} />
        <TweakText label="3 · Equipo" value={t.navLabels[2]}
        onChange={(v) => setTweak('navLabels', t.navLabels.map((l, i) => i === 2 ? v : l))} />
        <TweakText label="4 · Servicios" value={t.navLabels[3]}
        onChange={(v) => setTweak('navLabels', t.navLabels.map((l, i) => i === 3 ? v : l))} />
        <TweakText label="5 · Contacto" value={t.navLabels[4]}
        onChange={(v) => setTweak('navLabels', t.navLabels.map((l, i) => i === 4 ? v : l))} />

        <TweakSection label="Botón WhatsApp" />
        <TweakToggle label="Mostrar botón" value={t.showCta}
        onChange={(v) => setTweak('showCta', v)} />
        <TweakText label="Texto del botón" value={t.ctaLabel}
        onChange={(v) => setTweak('ctaLabel', v)} />

        <TweakSection label="Posición del encabezado" />
        <TweakSlider label="Alto de la barra" value={t.navHeight} min={56} max={104} step={2} unit="px"
        onChange={(v) => setTweak('navHeight', v)} />
        <TweakSlider label="Marca · horizontal" value={t.brandX} min={-40} max={120} step={2} unit="px"
        onChange={(v) => setTweak('brandX', v)} />
        <TweakSlider label="Marca · vertical" value={t.brandY} min={-20} max={20} step={1} unit="px"
        onChange={(v) => setTweak('brandY', v)} />
        <TweakSlider label="Menú · horizontal" value={t.navX} min={-160} max={160} step={2} unit="px"
        onChange={(v) => setTweak('navX', v)} />
        <TweakSlider label="Menú · vertical" value={t.navY} min={-20} max={20} step={1} unit="px"
        onChange={(v) => setTweak('navY', v)} />
        <TweakSlider label="Botón · horizontal" value={t.ctaX} min={-120} max={40} step={2} unit="px"
        onChange={(v) => setTweak('ctaX', v)} />
        <TweakSlider label="Botón · vertical" value={t.ctaY} min={-20} max={20} step={1} unit="px"
        onChange={(v) => setTweak('ctaY', v)} />

        <TweakSection label="Título" />
        <TweakSlider label="Horizontal" value={t.titleX} min={-60} max={160} step={2} unit="px"
        onChange={(v) => setTweak('titleX', v)} />
        <TweakSlider label="Vertical" value={t.titleY} min={-40} max={320} step={2} unit="px"
        onChange={(v) => setTweak('titleY', v)} />

        <TweakSection label="Imagen del perro" />
        <TweakSlider label="Tamaño" value={t.dogSize} min={480} max={1000} step={10} unit="px"
        onChange={(v) => setTweak('dogSize', v)} />
        <TweakSlider label="Horizontal" value={t.dogX} min={-160} max={160} step={2} unit="px"
        onChange={(v) => setTweak('dogX', v)} />
        <TweakSlider label="Vertical" value={t.dogY} min={-160} max={160} step={2} unit="px"
        onChange={(v) => setTweak('dogY', v)} />

        <TweakSection label="Franja de color" />
        <TweakSlider label="Línea divisoria" value={t.heroSplit} min={55} max={95} step={1} unit="%"
        onChange={(v) => setTweak('heroSplit', v)} />

        <TweakSection label="Equipo · colores de las tarjetas" />
        <TweakColor label="Color 1" value={t.teamColorA}
        options={['#ffffff', '#6b7c4e', '#1a3a2a', '#2e9e5e']}
        onChange={(v) => setTweak('teamColorA', v)} />
        <TweakColor label="Color 2" value={t.teamColorB}
        options={['#6b7c4e', '#ffffff', '#1a3a2a', '#2e9e5e']}
        onChange={(v) => setTweak('teamColorB', v)} />
        <TweakColor label="Color 3" value={t.teamColorC}
        options={['#1a3a2a', '#ffffff', '#6b7c4e', '#2e9e5e']}
        onChange={(v) => setTweak('teamColorC', v)} />
      </TweaksPanel>
    </React.Fragment>);

}

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