// ─────────────────────────────────────────────────────────────────────────
// DentalBox Landing — Beneficios espejo, Confianza, FAQ, CTA, Footer + App
// ─────────────────────────────────────────────────────────────────────────

// ── Beneficios espejo (ambas audiencias) ───────────────────────────────────
function BenefCol({ which }) {
  const a = AUDIENCE[which];
  const isOdo = which === "odontologo";
  return (
    <div className={"rounded-3xl border p-7 lg:p-9 " + (isOdo ? "bg-white border-line shadow-soft" : "bg-brand text-white border-brand")}>
      <div className="flex items-center gap-3 mb-6">
        <span className={"grid place-items-center w-12 h-12 rounded-2xl " + (isOdo ? "bg-brand-50 text-brand-600" : "bg-white/15 text-white")}>
          <Icon name={isOdo ? "stethoscope" : "building-2"} size={24} />
        </span>
        <div>
          <p className={"text-[12px] font-bold uppercase tracking-[0.12em] " + (isOdo ? "text-brand-600" : "text-white/70")}>{isOdo ? "Odontólogos" : "Clínicas"}</p>
          <h3 className={"text-[22px] font-extrabold tracking-tight " + (isOdo ? "text-ink" : "text-white")}>{a.benefTitle}</h3>
        </div>
      </div>
      <div className="space-y-1">
        {a.benefits.map((b) => (
          <div key={b.t} className={"flex items-start gap-3.5 py-3.5 border-b last:border-0 " + (isOdo ? "border-line" : "border-white/12")}>
            <span className={"grid place-items-center w-9 h-9 rounded-xl shrink-0 " + (isOdo ? "bg-brand-50 text-brand-600" : "bg-white/12 text-white")}><Icon name={b.icon} size={17} /></span>
            <div>
              <p className={"text-[15px] font-bold " + (isOdo ? "text-ink" : "text-white")}>{b.t}</p>
              <p className={"text-[13.5px] leading-relaxed mt-0.5 " + (isOdo ? "text-muted" : "text-white/75")}>{b.d}</p>
            </div>
          </div>
        ))}
      </div>
      <a href={isOdo ? "marketplace.html?public=1" : "app.html?role=clinica&register=1"}
        className={"inline-flex items-center gap-2 h-12 px-6 rounded-full text-[15px] font-semibold mt-7 transition " +
          (isOdo ? "bg-brand text-white hover:bg-brand-600" : "bg-white text-brand hover:bg-white/90")}>
        {isOdo ? "Explorar boxes" : "Publicar mi box"} <Icon name="arrow-right" size={17} />
      </a>
    </div>
  );
}

function Beneficios() {
  return (
    <section id="beneficios" 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 mb-12">
          <p className="text-[12px] font-bold text-brand-600 uppercase tracking-[0.14em]">Para ambos lados</p>
          <h2 className="mt-3 text-[clamp(28px,3.6vw,44px)] font-extrabold tracking-tight text-ink">Un trato justo para todos.</h2>
          <p className="mt-3 text-[16px] text-muted">DentalBox conecta a quien necesita un box con quien lo tiene disponible. Ganan los dos.</p>
        </Reveal>
        <div className="grid lg:grid-cols-2 gap-5">
          <Reveal><BenefCol which="odontologo" /></Reveal>
          <Reveal delay={120}><BenefCol which="clinica" /></Reveal>
        </div>
      </div>
    </section>
  );
}

// ── Confianza y verificación ───────────────────────────────────────────────
function Confianza() {
  const pasos = [
    { icon: "id-card", t: "Identidad", d: "Validamos RUT y cédula de cada persona." },
    { icon: "graduation-cap", t: "Título y registro", d: "Verificamos el título y la inscripción en la Superintendencia de Salud." },
    { icon: "building-2", t: "Clínica habilitada", d: "Revisamos vigencia de sociedad y autorización sanitaria de la SEREMI." },
  ];
  return (
    <section id="confianza" className="py-20 lg:py-28">
      <div className="max-w-[1200px] mx-auto px-6">
        <div className="max-w-3xl mx-auto">
          <Reveal>
            <p className="text-[12px] font-bold text-brand-600 uppercase tracking-[0.14em]">Confianza y verificación</p>
            <h2 className="mt-3 text-[clamp(28px,3.6vw,44px)] font-extrabold tracking-tight text-ink leading-tight">La verificación es lo que nos hace distintos.</h2>
            <p className="mt-4 text-[16px] text-muted leading-relaxed">A diferencia de un grupo de WhatsApp o un clasificado, en DentalBox cada profesional y cada clínica pasa por un proceso de verificación. Así todos saben con quién trabajan.</p>
            <div className="mt-7 space-y-2.5">
              {pasos.map((p) => (
                <div key={p.t} className="flex items-start gap-3.5 bg-white rounded-2xl border border-line p-4 shadow-soft">
                  <span className="grid place-items-center w-10 h-10 rounded-xl bg-brand-50 text-brand-600 shrink-0"><Icon name={p.icon} size={19} /></span>
                  <div><p className="text-[15px] font-bold text-ink">{p.t}</p><p className="text-[13.5px] text-muted mt-0.5">{p.d}</p></div>
                  <Icon name="badge-check" size={20} className="text-ok ml-auto shrink-0" />
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ── FAQ ────────────────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    { q: "¿Qué es exactamente DentalBox?", a: "Somos un intermediario entre odontólogos y clínicas: una plataforma donde las clínicas publican sus box (consultas) y los profesionales los arriendan por jornada, sin contratos de largo plazo." },
    { q: "¿Cómo se paga y cuánto cuesta?", a: "El odontólogo paga la jornada al reservar, de forma segura con tarjeta o Webpay. Publicar un box es gratis; DentalBox cobra una comisión de servicio solo cuando hay una reserva concretada." },
    { q: "¿Qué significa que estén 'verificados'?", a: "Validamos la identidad y el registro de cada profesional, y la documentación legal y sanitaria de cada clínica, antes de permitir publicar o reservar. Es nuestro principal diferenciador." },
    { q: "¿Qué tipos de box puedo encontrar o publicar?", a: "Box clínico (atención general), box estético (blanqueamiento, carillas, diseño de sonrisa) y box pabellón (cirugía e implantología). Cada uno con su equipamiento y rango de precio." },
    { q: "¿Puedo cancelar una reserva?", a: "Sí. Cada clínica define su política de cancelación (flexible, moderada o estricta), que ves claramente antes de reservar. Si corresponde, el reembolso se emite a tu medio de pago." },
    { q: "¿En qué comunas hay boxes disponibles?", a: "Hoy operamos en Las Condes, Vitacura, Providencia, Ñuñoa y Santiago Centro, y seguimos sumando nuevos espacios en el Gran Santiago." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="py-20 lg:py-28 bg-canvas">
      <div className="max-w-[820px] mx-auto px-6">
        <Reveal className="text-center mb-12">
          <p className="text-[12px] font-bold text-brand-600 uppercase tracking-[0.14em]">Preguntas frecuentes</p>
          <h2 className="mt-3 text-[clamp(28px,3.6vw,44px)] font-extrabold tracking-tight text-ink">Resolvemos tus dudas.</h2>
        </Reveal>
        <div className="space-y-3">
          {items.map((it, i) => {
            const active = open === i;
            return (
              <Reveal key={i} delay={i * 50}>
                <div className={"bg-white rounded-2xl border transition-all " + (active ? "border-brand/30 shadow-soft" : "border-line")}>
                  <button onClick={() => setOpen(active ? -1 : i)} className="w-full flex items-center justify-between gap-4 text-left px-5 py-4.5" style={{ paddingTop: 18, paddingBottom: 18 }}>
                    <span className="text-[16px] font-bold text-ink">{it.q}</span>
                    <span className={"grid place-items-center w-8 h-8 rounded-full shrink-0 transition-all duration-300 " + (active ? "bg-brand text-white rotate-180" : "bg-canvas text-muted")}><Icon name="chevron-down" size={18} /></span>
                  </button>
                  <div className="grid transition-all duration-300" style={{ gridTemplateRows: active ? "1fr" : "0fr" }}>
                    <div className="overflow-hidden"><p className="px-5 pb-5 text-[14.5px] text-muted leading-relaxed">{it.a}</p></div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ── CTA final ──────────────────────────────────────────────────────────────
function CTAFinal({ audience, setAudience }) {
  return (
    <section className="py-20 lg:py-28">
      <div className="max-w-[1100px] mx-auto px-6">
        <Reveal>
          <div className="relative rounded-[28px] bg-brand overflow-hidden px-8 py-14 lg:px-16 lg:py-20 text-center">
            <div className="absolute inset-0 grid-faint opacity-40" />
            <div className="absolute -right-10 -bottom-16 w-64 h-64 rounded-full bg-white/5" />
            <div className="absolute -left-12 -top-12 w-48 h-48 rounded-full bg-white/5" />
            <div className="relative">
              <h2 className="text-[clamp(28px,4vw,48px)] font-extrabold tracking-tight text-white leading-tight max-w-2xl mx-auto">¿List@ para aprovechar mejor cada jornada?</h2>
              <p className="text-[16px] text-white/75 mt-4 max-w-xl mx-auto">Crea tu cuenta gratis. Explora boxes o publica el tuyo en minutos.</p>
              <div className="flex flex-wrap items-center justify-center gap-3 mt-8">
                <a href="marketplace.html?public=1" className="inline-flex items-center gap-2 h-13 px-7 rounded-full bg-white text-brand text-[15px] font-bold hover:bg-white/90 transition" style={{ height: 52 }}><Icon name="search" size={18} /> Explorar boxes</a>
                <a href="app.html?register=1" className="inline-flex items-center gap-2 h-13 px-7 rounded-full bg-white/10 text-white text-[15px] font-bold border border-white/25 hover:bg-white/15 transition" style={{ height: 52 }}>Crear cuenta gratis <Icon name="arrow-right" size={17} /></a>
              </div>
              <p className="text-[13px] text-white/55 mt-5">Sin costo de registro · Sin permanencia</p>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────────
function Footer() {
  const cols = [
    { t: "Producto", links: [
      ["Explorar boxes", "marketplace.html?public=1"],
      ["Publicar un box", "app.html?role=clinica&register=1"],
      ["Tipos de box", "#tipos"],
      ["Cómo funciona", "#como-funciona"],
    ] },
    { t: "Empresa", links: [
      ["Sobre DentalBox", "#top"],
      ["Confianza y verificación", "#confianza"],
      ["Blog dental", "mailto:hola@dentalbox.cl?subject=Blog%20DentalBox"],
      ["Contacto", "mailto:hola@dentalbox.cl?subject=Contacto%20DentalBox"],
    ] },
    { t: "Legal", links: [
      ["Términos y condiciones", "mailto:legal@dentalbox.cl?subject=Términos%20y%20condiciones"],
      ["Política de privacidad", "mailto:legal@dentalbox.cl?subject=Política%20de%20privacidad"],
      ["Política de cancelación", "mailto:legal@dentalbox.cl?subject=Política%20de%20cancelación"],
    ] },
  ];
  const socials = [
    ["instagram", "https://www.instagram.com/"],
    ["linkedin", "https://www.linkedin.com/"],
    ["facebook", "https://www.facebook.com/"],
  ];
  return (
    <footer className="border-t border-line pt-14 pb-8">
      <div className="max-w-[1200px] mx-auto px-6">
        <div className="grid lg:grid-cols-[1.4fr_1fr_1fr_1fr] gap-10">
          <div className="max-w-xs">
            <Logo />
            <p className="text-[14px] text-muted leading-relaxed mt-4">El intermediario entre odontólogos y clínicas para arrendar box dentales por jornada en Santiago.</p>
            <div className="flex items-center gap-2 mt-5">
              {socials.map(([s, href]) => (
                <a key={s} href={href} target="_blank" rel="noreferrer" aria-label={s}
                  className="grid place-items-center w-9 h-9 rounded-full border border-line text-muted hover:text-brand hover:border-brand/40 transition cursor-pointer"><Icon name={s} size={16} /></a>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.t}>
              <p className="text-[12px] font-bold text-ink uppercase tracking-wide mb-3.5">{c.t}</p>
              <ul className="space-y-2.5">{c.links.map(([label, href]) => <li key={label}><a href={href} className="text-[14px] text-muted hover:text-brand cursor-pointer transition">{label}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="flex flex-wrap items-center justify-between gap-3 mt-12 pt-6 border-t border-line text-[13px] text-muted">
          <span>© 2026 DentalBox SpA · Santiago de Chile</span>
          <span className="flex items-center gap-1.5"><Icon name="globe" size={14} /> Español (CL) · CLP $</span>
        </div>
      </div>
    </footer>
  );
}

// ── App ────────────────────────────────────────────────────────────────────
function App() {
  const [audience, setAudience] = useState("odontologo");
  return (
    <div className="overflow-x-hidden">
      <Header audience={audience} setAudience={setAudience} />
      <main>
        <Hero audience={audience} setAudience={setAudience} />
        <ComoFunciona audience={audience} setAudience={setAudience} />
        <TiposBox />
        <Beneficios />
        <Confianza />
        <FAQ />
        <CTAFinal audience={audience} setAudience={setAudience} />
      </main>
      <Footer />
    </div>
  );
}

Object.assign(window, { Beneficios, Confianza, FAQ, CTAFinal, Footer });
ReactDOM.createRoot(document.getElementById("root")).render(<App />);