// ─────────────────────────────────────────────────────────────────────────
// DentalBox Landing — secciones
// ─────────────────────────────────────────────────────────────────────────

// ── Header ─────────────────────────────────────────────────────────────────
function Header({ audience, setAudience }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => { const f = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", f); return () => window.removeEventListener("scroll", f); }, []);
  const links = [["#como-funciona", "Cómo funciona"], ["#tipos", "Tipos de box"], ["#confianza", "Confianza"], ["#faq", "Preguntas"]];
  return (
    <header className={"fixed top-0 inset-x-0 z-50 transition-all duration-300 " + (scrolled ? "bg-white/90 backdrop-blur-md border-b border-line" : "bg-transparent")}>
      <div className="max-w-[1200px] mx-auto px-6 h-[72px] flex items-center justify-between gap-6">
        <a href="#top"><Logo /></a>
        <nav className="hidden lg:flex items-center gap-1">
          {links.map((l) => <a key={l[0]} href={l[0]} className="px-3.5 h-9 inline-flex items-center rounded-full text-[14px] font-medium text-muted hover:text-ink hover:bg-brand-50/60 transition">{l[1]}</a>)}
        </nav>
        <div className="flex items-center gap-3">
          <a href="app.html" className="hidden sm:inline-flex items-center h-10 px-4 rounded-full text-[14px] font-semibold text-ink hover:bg-brand-50 transition">Iniciar sesión</a>
          <a href="marketplace.html?public=1" className="inline-flex items-center gap-2 h-10 px-5 rounded-full bg-brand text-white text-[14px] font-semibold hover:bg-brand-600 transition shadow-soft whitespace-nowrap">
            Explorar boxes <Icon name="arrow-right" size={16} />
          </a>
        </div>
      </div>
    </header>
  );
}

// ── Hero ───────────────────────────────────────────────────────────────────
function Hero({ audience, setAudience }) {
  const a = AUDIENCE[audience];
  return (
    <section id="top" className="relative pt-[112px] pb-20 lg:pb-28 overflow-hidden hero-halo">
      <div className="absolute inset-0 grid-faint pointer-events-none" />
      <div className="relative max-w-[1200px] mx-auto px-6 grid lg:grid-cols-[1.05fr_0.95fr] gap-12 lg:gap-10 items-center">
        {/* Copy */}
        <div>
          <div className="inline-flex"><AudienceToggle value={audience} onChange={setAudience} size="lg" /></div>
          <p className="mt-7 flex items-center gap-2 text-[12px] font-bold text-brand-600 uppercase tracking-[0.14em]">
            <span className="w-6 h-px bg-brand-400" /> {a.eyebrow}
          </p>
          <h1 key={audience} className="mt-3 text-[clamp(32px,4.4vw,54px)] font-extrabold tracking-tight leading-[1.06] text-ink">
            <span className="block whitespace-nowrap">{a.title[0]}</span>
            <span className="block whitespace-nowrap text-brand">{a.title[1]}</span>
          </h1>
          <p className="mt-5 text-[17px] text-muted leading-relaxed max-w-xl">{a.sub}</p>

          <div className="flex flex-wrap items-center gap-3 mt-8">
            <a href={a.ctaMain.href} className="inline-flex items-center gap-2 px-6 rounded-full bg-brand text-white text-[15px] font-semibold hover:bg-brand-600 transition shadow-soft whitespace-nowrap" style={{ height: 52 }}>
              <Icon name={a.ctaMain.icon} size={18} /> {a.ctaMain.label}
            </a>
            <a href={a.ctaAlt.href} className="inline-flex items-center gap-2 px-6 rounded-full border border-line bg-white text-ink text-[15px] font-semibold hover:border-brand/40 transition whitespace-nowrap" style={{ height: 52 }}>
              {a.ctaAlt.label} <Icon name={a.ctaAlt.icon} size={17} />
            </a>
          </div>

          <ul className="flex flex-wrap gap-x-6 gap-y-2 mt-7">
            {a.pills.map((p) => (
              <li key={p} className="inline-flex items-center gap-2 text-[14px] text-ink/80"><Icon name="check" size={16} className="text-ok" sw={2.5} /> {p}</li>
            ))}
          </ul>
        </div>

        {/* Visual */}
        <HeroVisual audience={audience} />
      </div>

      {/* tira de confianza */}
      <div className="relative max-w-[1200px] mx-auto px-6 mt-16 lg:mt-20">
        <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-4 text-center">
          <span className="text-[12px] font-bold text-faint uppercase tracking-[0.14em]">Boxes en</span>
          {["Las Condes", "Vitacura", "Providencia", "Ñuñoa", "Santiago Centro"].map((c) => (
            <span key={c} className="text-[15px] font-bold text-ink/70">{c}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function HeroVisual({ audience }) {
  const [fav, setFav] = useState({});
  return (
    <div className="relative">
      {/* tarjeta principal */}
      <div className="relative rounded-[24px] overflow-hidden shadow-lift" style={{ animation: "floatY 6s ease-in-out infinite" }}>
        <Photo photo="photo-1629909613654-28e377c37b09" alt="Box dental" className="h-[300px] lg:h-[360px]" w={1000} />
        <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, rgba(14,59,69,.05) 40%, rgba(14,59,69,.7) 100%)" }} />
        <div className="absolute top-4 left-4 inline-flex items-center gap-1.5 h-7 px-2.5 rounded-full bg-white/95 text-brand-700 text-[11px] font-bold"><span className="w-1.5 h-1.5 rounded-full bg-ok" /> Disponible hoy</div>
        <div className="absolute bottom-4 left-4 right-4 text-white">
          <p className="text-[12px] font-semibold text-white/80">Las Condes · Box clínico</p>
          <div className="flex items-end justify-between">
            <h3 className="text-[22px] font-extrabold leading-tight">Atelier El Golf</h3>
            <span className="text-[15px] font-bold">{clp(58000)} <span className="text-[12px] font-medium text-white/75">/ jornada</span></span>
          </div>
        </div>
      </div>

      {/* tarjeta flotante AM/PM */}
      <div className="absolute -bottom-7 -left-5 w-[230px] rounded-2xl bg-white shadow-lift border border-line p-3.5 hidden sm:block" style={{ animation: "floatY 6s ease-in-out infinite", animationDelay: ".8s" }}>
        <p className="text-[11px] font-bold text-muted uppercase tracking-wide mb-2">Elige tu jornada</p>
        <div className="grid grid-cols-2 gap-2">
          {[["AM", "sunrise", true], ["PM", "sunset", false]].map((s) => (
            <div key={s[0]} className={"rounded-xl border p-2.5 " + (s[2] ? "border-brand bg-brand-50" : "border-line")}>
              <Icon name={s[1]} size={16} className={s[2] ? "text-brand-600" : "text-muted"} />
              <p className={"text-[15px] font-extrabold mt-1 " + (s[2] ? "text-brand-700" : "text-ink")}>{s[0]}</p>
              <p className="text-[11px] text-muted">{clp(58000)}</p>
            </div>
          ))}
        </div>
      </div>

      {/* badge verificado flotante */}
      <div className="absolute -top-4 -right-3 inline-flex items-center gap-2 h-11 px-4 rounded-full bg-white shadow-lift border border-line" style={{ animation: "floatY 6s ease-in-out infinite", animationDelay: "1.6s" }}>
        <Icon name="badge-check" size={18} className="text-ok" /> <span className="text-[13px] font-bold text-ink">Verificado</span>
      </div>
    </div>
  );
}

// ── Cómo funciona ──────────────────────────────────────────────────────────
function ComoFunciona({ audience, setAudience }) {
  const a = AUDIENCE[audience];
  return (
    <section id="como-funciona" className="py-20 lg:py-28 bg-canvas">
      <div className="max-w-[1200px] mx-auto px-6">
        <Reveal className="text-center max-w-2xl mx-auto">
          <p className="text-[12px] font-bold text-brand-600 uppercase tracking-[0.14em]">Cómo funciona</p>
          <h2 className="mt-3 text-[clamp(28px,3.6vw,44px)] font-extrabold tracking-tight text-ink">Tres pasos. Sin vueltas.</h2>
          <p className="mt-3 text-[16px] text-muted">Cambia la vista según quién eres y mira lo simple que es.</p>
          <div className="mt-6 flex justify-center"><AudienceToggle value={audience} onChange={setAudience} /></div>
        </Reveal>

        <div className="grid md:grid-cols-3 gap-5 mt-12 relative">
          {a.pasos.map((p, i) => (
            <Reveal key={audience + i} delay={i * 90}>
              <div className="relative bg-white rounded-2xl border border-line shadow-soft p-7 h-full">
                <div className="flex items-center justify-between mb-5">
                  <span className="grid place-items-center w-13 h-13 rounded-2xl bg-brand text-white" style={{ width: 52, height: 52 }}><Icon name={p.icon} size={24} /></span>
                  <span className="text-[44px] font-extrabold text-brand-50 leading-none">{i + 1}</span>
                </div>
                <h3 className="text-[19px] font-bold text-ink">{p.t}</h3>
                <p className="text-[14.5px] text-muted leading-relaxed mt-2">{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Tipos de box ───────────────────────────────────────────────────────────
function TiposBox() {
  const [fav, setFav] = useState({});
  return (
    <section id="tipos" className="py-20 lg:py-28">
      <div className="max-w-[1200px] mx-auto px-6">
        <Reveal className="max-w-2xl">
          <p className="text-[12px] font-bold text-brand-600 uppercase tracking-[0.14em]">Tipos de box</p>
          <h2 className="mt-3 text-[clamp(28px,3.6vw,44px)] font-extrabold tracking-tight text-ink">Un espacio para cada especialidad.</h2>
          <p className="mt-3 text-[16px] text-muted">Desde una consulta general hasta un pabellón quirúrgico. Cada tipo viene con su equipamiento y rango de precio.</p>
        </Reveal>

        <div className="grid md:grid-cols-3 gap-5 mt-12">
          {BOX_TIPOS_L.map((t, i) => {
            const c = COLORS[t.color];
            const isFav = fav[t.key];
            return (
              <Reveal key={t.key} delay={i * 90}>
                <article className="group bg-white rounded-2xl border border-line shadow-soft overflow-hidden hover:shadow-lift hover:-translate-y-1 transition-all duration-300 h-full flex flex-col">
                  <div className="relative h-44">
                    <Photo photo={t.photo} alt={t.label} className="w-full h-full" w={600} />
                    <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, rgba(14,59,69,.02) 45%, rgba(14,59,69,.5) 100%)" }} />
                    <button onClick={() => setFav((p) => ({ ...p, [t.key]: !p[t.key] }))}
                      className="absolute top-3 right-3 grid place-items-center w-9 h-9 rounded-full bg-white/90 backdrop-blur hover:bg-white hover:scale-110 transition shadow-sm">
                      <Icon name="heart" size={17} className={isFav ? "text-rose-500" : "text-ink/60"} style={isFav ? { fill: "#f43f5e", stroke: "#f43f5e" } : {}} />
                    </button>
                    <span className={"absolute top-3 left-3 inline-flex items-center gap-1.5 h-7 px-2.5 rounded-full text-[11px] font-bold " + c.chip}>
                      <Icon name={t.icon} size={13} /> {t.label.replace("Box ", "")}
                    </span>
                  </div>
                  <div className="p-5 flex flex-col flex-1">
                    <h3 className="text-[19px] font-bold text-ink">{t.label}</h3>
                    <p className="text-[14px] text-muted leading-relaxed mt-1.5 flex-1">{t.desc}</p>
                    <div className="flex flex-wrap gap-1.5 mt-4">
                      {t.equip.slice(0, 3).map((e) => <span key={e} className="text-[11.5px] font-medium text-ink/70 bg-canvas border border-line rounded-md px-2 py-1">{e}</span>)}
                    </div>
                    <div className="flex items-center justify-between mt-5 pt-4 border-t border-line">
                      <span className="text-[13px] text-muted">desde <b className={"text-[16px] " + c.solid}>{clp(t.price)}</b> / jornada</span>
                      <a href="marketplace.html?public=1" className="grid place-items-center w-9 h-9 rounded-full bg-canvas group-hover:bg-brand group-hover:text-white text-ink transition"><Icon name="arrow-up-right" size={17} /></a>
                    </div>
                  </div>
                </article>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Hero, HeroVisual, ComoFunciona, TiposBox });