/* global React, TAND */
// Dirección A — Clínico Healthtech
// Paleta: navy profundo + teal claro + blanco frío. Sans geométrica (Inter Tight).

const { useState, useRef, useEffect } = React;

// ————— Atoms —————

const IconArrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true">
    <path d="M3 7h8M7.5 3.5L11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const IconPlus = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true">
    <path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
  </svg>
);

const IconCheck = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true">
    <path d="M2.5 7.5L5.5 10.5L11.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const IconStar = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="currentColor" aria-hidden="true">
    <path d="M7 0.8l1.9 3.9 4.3.6-3.1 3 .7 4.3L7 10.6l-3.8 2 .7-4.3L.8 5.3l4.3-.6z" />
  </svg>
);

const IconWhatsApp = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="currentColor" aria-hidden="true">
    <path d="M7 .8a6.2 6.2 0 00-5.3 9.4L.8 13.2l3.1-.9A6.2 6.2 0 107 .8zm0 11.3a5.1 5.1 0 01-2.6-.7l-.2-.1-1.8.5.5-1.8-.1-.2a5.1 5.1 0 117.7 4.4 5.1 5.1 0 01-3.5 1.3zm2.9-3.8c-.2-.1-.9-.5-1.1-.5-.1 0-.3 0-.4.2l-.5.6c-.1.1-.2.1-.4 0a4 4 0 01-2-1.8c-.2-.3 0-.3.2-.4l.2-.3v-.3L5.3 4.7c-.1-.2-.2-.2-.3-.2h-.3a.6.6 0 00-.4.2c-.2.1-.6.6-.6 1.4s.6 1.6.7 1.7c.1.2 1.2 1.9 3 2.6 1.2.4 1.4.3 1.7.3.3 0 .9-.4 1-.7.1-.3.1-.6.1-.7-.1-.1-.2-.1-.3-.2z"/>
  </svg>
);

const IconGoogle = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
    <path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"/>
    <path fill="#FF3D00" d="m6.306 14.691 6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"/>
    <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"/>
    <path fill="#1976D2" d="M43.611 20.083 43.595 20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"/>
  </svg>
);

// ————— Top bar —————

const TopBar = () => (
  <div className="A-topbar A-topbar-anim">
    <div className="A-topbar-inner">
      <div className="A-topbar-left">
        <span>Querétaro · Arcos + Centro</span>
        <span className="A-topdot">·</span>
        <span>Hoy abierto hasta las 19:00</span>
      </div>
      <div className="A-topbar-right">
        <a href={TAND.phoneHref}>{TAND.phone}</a>
        <span className="A-topdot">·</span>
        <a href="#whatsapp">WhatsApp</a>
        <span className="A-topdot">·</span>
        <a href="#portal">Portal paciente</a>
      </div>
    </div>
  </div>
);

// ————— Nav —————

const Nav = () => {
  const [open, setOpen] = useState(null);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`A-nav A-nav-anim${scrolled ? " is-scrolled" : ""}`}>
      <div className="A-nav-inner">
        <a href="#" className="A-logo" aria-label="tand">
          <img src="tand/assets/logo-purple.png" alt="tand Dental Wellness" />
        </a>
        <nav className="A-nav-links">
          {TAND.nav.map((n) => (
            <a key={n.label} href={n.href}>{n.label}</a>
          ))}
        </nav>
        <div className="A-nav-actions">
          <a href="#cotizar" className="A-btn A-btn-ghost">Cotizar</a>
          <a href="#agendar" className="A-btn A-btn-primary">
            <img src="tand/assets/WhatsApp.png" alt="" aria-hidden="true" className="A-wa-logo" />
            Agendar mi cita
          </a>
        </div>
      </div>
    </header>
  );
};

// ————— Hero —————

const Hero = () => {
  const Words = window.A_Words;
  return (
    <section className="A-hero">
      <div className="A-hero-inner">
        <div className="A-hero-copy">
          <h1 className="A-h1 A-h1-hero">
            <span className="A-reveal-line">
              <Words text="La clínica dental que amarás visitar," em={[4]} />
            </span>
            <br/>
            <span className="A-reveal-line">
              <Words text="en Querétaro." start={6} />
            </span>
          </h1>
          <p className="A-lede A-lede-hero">
            <span className="A-lede-chunk A-lede-chunk-1">
              Cada especialidad con su propio especialista, tecnología 3D para diagnosticar con precisión y un equipo que te trata sin juicios, sin prisa y sin sermones.
            </span>{" "}
            <span className="A-lede-chunk A-lede-chunk-2">
              Lo decimos en serio: si no amas tu primera cita, te la regresamos.
            </span>
          </p>
          <div className="A-hero-ctas A-hero-ctas-anim">
            <a href="#agendar" className="A-btn A-btn-primary A-btn-lg">
              Agendar mi primera cita <IconArrow />
            </a>
            <a href="#cotizar" className="A-btn A-btn-outline A-btn-lg">
              Cotizar mi tratamiento
            </a>
          </div>

          <div className="A-hero-badge A-hero-badge-anim">
            <span className="A-hero-badge-label">
              Garantía <img src="tand/assets/logo-purple.png" alt="tand" className="A-hero-badge-logo" />
            </span>
            <span className="A-hero-badge-body">
              <em>{TAND.slogan}.</em> {TAND.guarantee}
            </span>
          </div>
        </div>

        <div className="A-hero-media A-hero-media-anim">
          <div className="A-hero-video" aria-label="Recorrido por la clínica tand">
            <video autoPlay muted loop playsInline poster="">
              <source src="tand/assets/hero-video-a.mp4" type="video/mp4" />
            </video>
          </div>
          <div className="A-hero-meta">
            <div className="A-hero-meta-item A-hero-meta-years">
              <img src="tand/assets/icons/cuidado.png" alt="" aria-hidden="true" className="A-hero-meta-years-icon" />
              <div className="A-hero-meta-years-info">
                <span className="A-hero-meta-k">+14 años</span>
                <span className="A-hero-meta-v">cuidando sonrisas en Querétaro</span>
              </div>
            </div>
            <a className="A-hero-meta-item A-hero-meta-google" href="https://www.google.com/maps" target="_blank" rel="noopener">
              <IconGoogle size={26} />
              <div className="A-hero-meta-google-info">
                <span className="A-hero-meta-k">
                  {TAND.googleRating.score}
                  <span className="A-hero-meta-stars">
                    {[0,1,2,3,4].map((i) => <IconStar key={i} size={11} />)}
                  </span>
                </span>
                <span className="A-hero-meta-v">{TAND.googleRating.count} reseñas verificadas</span>
              </div>
            </a>
          </div>
        </div>
      </div>

      <div className="A-hero-strip A-hero-strip-anim">
        <span className="A-hero-strip-label">Avalados y certificados por</span>
        <div className="A-hero-strip-viewport">
          <div className="A-hero-strip-track">
            {Array.from({ length: 4 }).flatMap((_, k) => [
              { src: "tand/assets/cofepris_logo.jpg", alt: "Cofepris", h: 60 },
              { src: "tand/assets/invisalign-logotipo.png", alt: "Invisalign Provider", h: 36 },
              { src: "tand/assets/Straumann_logo.svg.png", alt: "Straumann Partner", h: 22 },
              { src: "tand/assets/itero-logo.png", alt: "Escáner 3D iTero", h: 32 },
            ].map((p, i) => (
              <div key={`${k}-${i}`} className="A-hero-strip-item">
                <img src={p.src} alt={p.alt} style={{ height: p.h }} />
              </div>
            )))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ————— Services (tabs) —————

const Services = () => {
  const [active, setActive] = useState(TAND.services[0].id);
  const current = TAND.services.find((s) => s.id === active);
  return (
    <section className="A-section A-services" id="servicios">
      <div className="A-section-head A-reveal A-reveal-up">
        <h2 className="A-h2">Cada parte de tu boca, en <em>manos expertas</em>.</h2>
        <p className="A-section-lede">
          Bienestar, ortodoncia, estética, prótesis e implantes. Cada tratamiento lo realiza el especialista del área, sin derivaciones ni radiografías repetidas.
        </p>
      </div>

      <div className="A-services-body A-reveal A-reveal-up" style={{ "--reveal-delay": "80ms" }}>
        <div className="A-services-tabs" role="tablist">
          {TAND.services.map((s, idx) => (
            <button
              key={s.id}
              role="tab"
              aria-selected={active === s.id}
              className={`A-services-tab ${active === s.id ? "is-active" : ""}`}
              onClick={() => setActive(s.id)}
            >
              <img
                className="A-services-tab-icon"
                src={`tand/assets/dental/${s.asset}.png`}
                alt=""
                aria-hidden="true"
              />
              <span className="A-services-tab-title">{s.title}</span>
              <span className="A-services-tab-arrow"><IconArrow size={12} /></span>
            </button>
          ))}
        </div>

        <div className="A-services-panel">
          <div className="A-services-panel-media">
            {
              current.id === "ortodoncia" ? <img src="tand/assets/itero-scan.webp" alt="" /> :
              current.id === "bienestar" ? <img src="tand/assets/acompanamiento.webp" alt="" /> :
              current.id === "estetica" ? <img src="tand/assets/consultorio-botanico.webp" alt="" /> :
              <img src="tand/assets/consultorio-arcos.webp" alt="" />
            }
            <div className="A-services-panel-media-tag">Consultorio {current.id === "ortodoncia" ? "Centro" : "Arcos"}</div>
          </div>
          <div className="A-services-panel-copy">
            <h3 className="A-h3">{current.title}</h3>
            <p className="A-lede-sm">{current.lede}</p>
            <ul className="A-services-list">
              {current.items.map((it) => (
                <li key={it}>
                  <IconCheck size={12} /> {it}
                </li>
              ))}
            </ul>
            <div className="A-services-actions">
              <a href={`${current.id}.html`} className="A-btn A-btn-dark">
                Conocer la especialidad <IconArrow />
              </a>
              <a href="#cotizar" className="A-btn A-btn-text">Cotizar este tratamiento</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.A_TopBar = TopBar;
window.A_Nav = Nav;
window.A_Hero = Hero;
window.A_Services = Services;
window.A_Icons = { IconArrow, IconPlus, IconCheck, IconStar, IconWhatsApp, IconGoogle };