// ───────────────────────────────────────────────────────────
// Sección 4 (Tratamientos) · 5 (Enfoque) · 6 (Equipo)
// ───────────────────────────────────────────────────────────

function Tratamientos() {
  const d = DATA.tratamientos;
  return (
    <section id="tratamientos" className="relative overflow-hidden" style={{ background: "var(--papel)" }}>
      <Blob color="rgba(244,166,120,0.10)" size={420} top={-120} right={-120} ring />
      <div className="relative mx-auto max-w-[1240px] px-5 md:px-8 py-24 md:py-32">
        <div className="max-w-[760px]">
          <Reveal><Eyebrow>{d.eyebrow}</Eyebrow></Reveal>
          <Reveal as="h2" delay={80} className="mt-5 font-title text-[var(--verde)]" style={{ fontWeight: 800, lineHeight: 1.05, letterSpacing: "-0.01em", fontSize: "clamp(2rem,4.2vw,3.2rem)" }}>
            {d.titulo}
          </Reveal>
          <Reveal as="p" delay={150} className="mt-6 text-[var(--grafito)]" style={{ fontSize: "clamp(1.05rem,1.4vw,1.22rem)", lineHeight: 1.6 }}>
            {d.subtitulo}
          </Reveal>
        </div>

        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {d.items.map((c, i) => (
            <Reveal key={c.titulo} delay={(i % 3) * 110} y={26} variant="scale">
              <article className="card group h-full rounded-[26px] p-8 transition-all duration-400" style={{ background: "var(--crema)", border: "1px solid rgba(47,111,98,0.1)" }}>
                <span className="inline-flex items-center justify-center w-14 h-14 rounded-2xl text-[var(--pinar)] transition-colors duration-400 group-hover:text-[var(--durazno)]" style={{ background: "rgba(93,174,158,0.14)" }}>
                  <Icon name={c.icon} size={28} />
                </span>
                <h3 className="mt-5 font-title text-[var(--tinta)]" style={{ fontWeight: 800, fontSize: "1.4rem" }}>{c.titulo}</h3>
                <p className="mt-2.5 text-[var(--grafito)]" style={{ fontSize: "1.0rem", lineHeight: 1.55 }}>{c.texto}</p>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Enfoque() {
  const d = DATA.enfoque;
  return (
    <section className="relative overflow-hidden" style={{ background: "var(--azul)" }}>
      <Blob color="rgba(93,174,158,0.16)" size={560} bottom={-220} left={-160} />
      <Blob color="rgba(244,166,120,0.12)" size={300} top={-100} right={-80} ring />
      <Wing color="rgba(244,166,120,0.06)" style={{ position: "absolute", right: "6%", top: "18%", width: 360, height: 360 }} />
      <div className="relative mx-auto max-w-[1240px] px-5 md:px-8 py-24 md:py-32">
        <div className="max-w-[720px]">
          <Reveal><Eyebrow color="var(--durazno)">{d.eyebrow}</Eyebrow></Reveal>
          <Reveal as="h2" delay={80} className="mt-5 font-title" style={{ color: "var(--papel)", fontWeight: 800, lineHeight: 1.04, letterSpacing: "-0.01em", fontSize: "clamp(2rem,4.4vw,3.4rem)" }}>
            {d.titulo}
          </Reveal>
        </div>

        <div className="mt-14 grid gap-x-10 gap-y-12 sm:grid-cols-2">
          {d.items.map((c, i) => (
            <Reveal key={c.titulo} delay={(i % 2) * 120} y={24}>
              <div className="flex gap-5 enfoque-item pb-8">
                <span className="shrink-0 inline-flex items-center justify-center w-14 h-14 rounded-2xl text-[var(--durazno)]" style={{ background: "rgba(244,166,120,0.12)", border: "1px solid rgba(244,166,120,0.25)" }}>
                  <Icon name={c.icon} size={28} />
                </span>
                <div>
                  <h3 className="font-title" style={{ color: "var(--papel)", fontWeight: 800, fontSize: "1.4rem" }}>{c.titulo}</h3>
                  <p className="mt-2" style={{ color: "rgba(251,248,244,0.78)", fontSize: "1.05rem", lineHeight: 1.55 }}>{c.texto}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Equipo() {
  const d = DATA.equipo;
  return (
    <section id="equipo" className="relative overflow-hidden" style={{ background: "var(--papel)" }}>
      <Blob color="rgba(93,174,158,0.07)" size={460} bottom={-160} right={-160} />
      <div className="relative mx-auto max-w-[1240px] px-5 md:px-8 py-24 md:py-32">
        <div className="max-w-[760px]">
          <Reveal><Eyebrow>{d.eyebrow}</Eyebrow></Reveal>
          <Reveal as="h2" delay={80} className="mt-5 font-title text-[var(--verde)]" style={{ fontWeight: 800, lineHeight: 1.05, letterSpacing: "-0.01em", fontSize: "clamp(2rem,4.2vw,3.2rem)" }}>
            {d.titulo}
          </Reveal>
          <Reveal as="p" delay={150} className="mt-6 text-[var(--grafito)]" style={{ fontSize: "clamp(1.05rem,1.4vw,1.22rem)", lineHeight: 1.6 }}>
            {d.subtitulo}
          </Reveal>
        </div>

        <div className="mt-16 flex flex-wrap justify-center gap-6">
          {d.members.map((m, i) => (
            <Reveal key={m.nombre} delay={(i % 4) * 80} y={24} style={{ width: 270, maxWidth: "100%" }}>
              <article className="h-full flex flex-col items-center text-center rounded-[26px] px-7 py-9" style={{ background: "var(--crema)", border: "1px solid rgba(47,111,98,0.1)" }}>
                <Wing color={i % 2 === 0 ? "var(--verde)" : "var(--durazno)"} style={{ width: 26, height: 26 }} />
                <h3 className="mt-4 font-title text-[var(--tinta)]" style={{ fontWeight: 800, fontSize: "1.12rem", lineHeight: 1.22 }}>{m.nombre}</h3>
                <p className="mt-2.5 text-[var(--grafito)] flex-1" style={{ fontSize: "0.92rem", lineHeight: 1.5 }}>{m.rol}</p>
                {m.mat && (
                  <p className="mt-4 inline-block rounded-full px-3.5 py-1.5" style={{ fontSize: "0.78rem", lineHeight: 1.35, color: "var(--pinar)", background: "rgba(93,174,158,0.13)", fontWeight: 600 }}>{m.mat}</p>
                )}
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal className="mt-16 flex justify-center">
          <div className="inline-flex items-center gap-4 rounded-full pl-5 pr-7 py-3.5" style={{ background: "var(--crema)", border: "1px solid rgba(47,111,98,0.12)" }}>
            <Wing color="var(--durazno)" style={{ width: 30, height: 30, flexShrink: 0 }} />
            <span className="text-left leading-tight">
              <span className="block font-title text-[var(--pinar)]" style={{ fontWeight: 800, fontSize: "0.98rem" }}>Equipo interdisciplinario matriculado</span>
              <span className="block text-[var(--grafito)]" style={{ fontSize: "0.86rem", marginTop: 1 }}>Acompañamiento profesional, humano y confidencial</span>
            </span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Tratamientos, Enfoque, Equipo });