// ───────────────────────────────────────────────────────────
// Sección 2 (Adicción)  +  Sección 3 (Modelo Minnesota & 12 Pasos)
// ───────────────────────────────────────────────────────────

function Adiccion() {
  const d = DATA.adiccion;
  return (
    <section id="fundacion" className="relative overflow-hidden" style={{ background: "var(--crema)" }}>
      <Blob color="rgba(93,174,158,0.10)" size={520} top={-160} right={-140} />
      <Blob color="rgba(244,166,120,0.12)" size={240} bottom={60} left={-90} ring />
      <div className="relative mx-auto max-w-[1240px] px-5 md:px-8 py-24 md:py-32">
        <div className="max-w-[820px]">
          <Reveal><Eyebrow color="var(--pinar)">{d.eyebrow}</Eyebrow></Reveal>
          <Reveal as="h2" delay={80} className="mt-5 font-title text-[var(--pinar)]" style={{ fontWeight: 800, lineHeight: 1.05, letterSpacing: "-0.01em", fontSize: "clamp(2rem, 4.4vw, 3.3rem)" }}>
            {d.titulo}
          </Reveal>
          <Reveal as="p" delay={150} className="mt-6 text-[var(--grafito)]" style={{ fontSize: "clamp(1.05rem,1.5vw,1.28rem)", lineHeight: 1.62, maxWidth: 720 }}>
            {d.texto}
          </Reveal>
        </div>

        <div className="mt-14 grid gap-6 md:grid-cols-3">
          {d.cards.map((c, i) => (
            <Reveal key={c.titulo} delay={i * 120}>
              <article className="card h-full bg-[var(--papel)] rounded-[26px] p-8" style={{ boxShadow: "0 24px 50px -34px rgba(28,28,28,0.4)" }}>
                <span className="inline-flex items-center justify-center w-14 h-14 rounded-2xl text-[var(--durazno)]" style={{ background: "rgba(244,166,120,0.14)" }}>
                  <Icon name={c.icon} size={28} />
                </span>
                <h3 className="mt-5 font-title text-[var(--tinta)]" style={{ fontWeight: 800, fontSize: "1.45rem" }}>{c.titulo}</h3>
                <p className="mt-2.5 text-[var(--grafito)]" style={{ fontSize: "1.02rem", lineHeight: 1.55 }}>{c.texto}</p>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Los 12 Pasos — tres formatos seleccionables por Tweak
function Pasos({ format = "timeline" }) {
  const pasos = DATA.modelo.pasos;
  if (format === "accordion") return <PasosAccordion pasos={pasos} />;
  if (format === "cards") return <PasosCards pasos={pasos} />;
  return <PasosTimeline pasos={pasos} />;
}

function StepNum({ n }) {
  const verde = n % 2 === 1;
  return (
    <span
      className="tl-num font-title"
      style={{
        background: verde ? "var(--verde)" : "var(--durazno)",
        color: verde ? "#fff" : "var(--tinta)",
      }}
    >
      {String(n).padStart(2, "0")}
    </span>
  );
}

function PasosTimeline({ pasos }) {
  return (
    <div className="tl mt-12">
      <div className="tl-line" aria-hidden="true" />
      {pasos.map((p, i) => (
        <Reveal key={i} className={"tl-row " + (i % 2 === 0 ? "tl-row--left" : "tl-row--right")} y={28}>
          <div className="tl-card-wrap">
            <div className="tl-card">
              <p style={{ fontSize: "1.05rem", lineHeight: 1.5, color: "var(--grafito)" }}>{p}</p>
            </div>
          </div>
          <div className="tl-node-col"><StepNum n={i + 1} /></div>
          <div className="tl-spacer" />
        </Reveal>
      ))}
    </div>
  );
}

function PasosAccordion({ pasos }) {
  const [openIdx, setOpenIdx] = useState(0);
  return (
    <div className="mt-12 max-w-[820px] mx-auto flex flex-col gap-3">
      {pasos.map((p, i) => {
        const open = openIdx === i;
        return (
          <Reveal key={i} y={16}>
            <div className="acc rounded-[20px] overflow-hidden" style={{ background: "var(--crema)", border: "1px solid rgba(47,111,98,0.12)" }}>
              <button
                className="w-full flex items-center gap-4 text-left px-5 py-4"
                onClick={() => setOpenIdx(open ? -1 : i)}
                aria-expanded={open}
              >
                <StepNum n={i + 1} />
                <span className="flex-1 font-title text-[var(--pinar)]" style={{ fontWeight: 700, fontSize: "1.05rem" }}>
                  Paso {String(i + 1).padStart(2, "0")}
                </span>
                <span className={"acc-chev text-[var(--gris-medio)] transition-transform " + (open ? "rotate-180" : "")}><Icon name="chevronDown" size={20} /></span>
              </button>
              <div className="acc-body" style={{ maxHeight: open ? 240 : 0 }}>
                <p className="px-5 pb-5" style={{ marginLeft: 60, fontSize: "1.05rem", lineHeight: 1.55, color: "var(--grafito)" }}>{p}</p>
              </div>
            </div>
          </Reveal>
        );
      })}
    </div>
  );
}

function PasosCards({ pasos }) {
  return (
    <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
      {pasos.map((p, i) => (
        <Reveal key={i} delay={(i % 3) * 90} y={24}>
          <article className="h-full rounded-[22px] p-6" style={{ background: "var(--crema)", border: "1px solid rgba(47,111,98,0.1)" }}>
            <StepNum n={i + 1} />
            <p className="mt-4" style={{ fontSize: "1.02rem", lineHeight: 1.5, color: "var(--grafito)" }}>{p}</p>
          </article>
        </Reveal>
      ))}
    </div>
  );
}

function Modelo({ pasosFormat }) {
  const d = DATA.modelo;
  return (
    <section id="modelo" className="relative overflow-hidden" style={{ background: "var(--papel)" }}>
      <Blob color="rgba(93,174,158,0.07)" size={620} top={120} left={-220} />
      <div className="relative mx-auto max-w-[1240px] px-5 md:px-8 py-24 md:py-32">
        <div className="grid lg:grid-cols-12 gap-10 items-start">
          <div className="lg:col-span-5">
            <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>
          </div>
          <div className="lg:col-span-7">
            <Reveal as="p" delay={120} className="text-[var(--grafito)]" style={{ fontSize: "clamp(1.05rem,1.4vw,1.22rem)", lineHeight: 1.66 }}>
              {d.texto}
            </Reveal>
          </div>
        </div>

        <div className="mt-20">
          <Reveal className="text-center">
            <div className="inline-flex flex-col items-center">
              <Wing color="var(--durazno)" style={{ width: 30, height: 30 }} />
              <h3 className="mt-3 font-title text-[var(--tinta)]" style={{ fontWeight: 800, fontSize: "clamp(1.6rem,3vw,2.3rem)" }}>{d.pasosTitulo}</h3>
              <p className="mt-2 font-mono text-[12px] tracking-[0.2em] uppercase" style={{ color: "var(--gris-medio)" }}>Un día a la vez</p>
            </div>
          </Reveal>
          <Pasos format={pasosFormat} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Adiccion, Modelo, Pasos });