// ───────────────────────────────────────────────────────────
// Sección 7 (Familias) · 8 (Testimonios) · 9 (Recursos) · 10 (Contacto) · Footer
// ───────────────────────────────────────────────────────────

function Familias() {
  const d = DATA.familias;
  return (
    <section className="relative overflow-hidden" style={{ background: "var(--crema)" }}>
      <Blob color="rgba(93,174,158,0.1)" size={420} top={-140} left={-140} />
      <div className="relative mx-auto max-w-[1240px] px-5 md:px-8 py-24 md:py-32">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          <div className="order-2 lg:order-1">
            <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.06, letterSpacing: "-0.01em", fontSize: "clamp(1.9rem,4vw,3rem)" }}>
              {d.titulo}
            </Reveal>
            <Reveal as="p" delay={150} className="mt-6 text-[var(--grafito)]" style={{ fontSize: "clamp(1.05rem,1.4vw,1.2rem)", lineHeight: 1.62 }}>
              {d.texto}
            </Reveal>
            <Reveal delay={240} className="mt-8">
              <CTA href={DATA.waFamilia} external variant="primary" icon="wa">{d.cta}</CTA>
            </Reveal>
          </div>
          <Reveal delay={120} variant="right" className="order-1 lg:order-2">
            <div className="relative">
              <Blob color="rgba(244,166,120,0.18)" size={120} top={-26} right={-18} />
              <Slot id="familias-img" ratio="4 / 5" radius={32} label="manos · grupo en círculo" style={{ width: "100%" }} />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Testimonios() {
  const d = DATA.testimonios;
  return (
    <section className="relative overflow-hidden" style={{ background: "var(--crema)", borderTop: "1px solid rgba(47,111,98,0.08)" }}>
      <div className="relative mx-auto max-w-[1240px] px-5 md:px-8 py-24 md:py-32">
        <div className="max-w-[640px]">
          <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, fontSize: "clamp(2rem,4.2vw,3.2rem)" }}>
            {d.titulo}
          </Reveal>
        </div>

        <div className="mt-14 grid gap-6 lg:grid-cols-3">
          {d.quotes.map((q, i) => (
            <Reveal key={i} delay={i * 120} y={26}>
              <figure className="h-full bg-[var(--papel)] rounded-[26px] p-8 flex flex-col" style={{ boxShadow: "0 24px 50px -36px rgba(28,28,28,0.4)" }}>
                <span aria-hidden="true" className="font-title leading-none" style={{ color: "var(--durazno)", fontSize: "4.5rem", fontWeight: 900, height: "2.4rem" }}>&ldquo;</span>
                <blockquote className="flex-1 text-[var(--tinta)]" style={{ fontSize: "1.18rem", lineHeight: 1.5, fontWeight: 600 }}>
                  {q.texto}
                </blockquote>
                <figcaption className="mt-6 flex items-center gap-2.5 text-[var(--gris-medio)]">
                  <Wing color="var(--verde)" style={{ width: 16, height: 16 }} />
                  <span style={{ fontSize: "0.92rem", fontWeight: 600 }}>{q.autor}</span>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>

        <Reveal as="p" className="mt-12 font-mono text-[12px] tracking-wide max-w-[640px]" style={{ color: "var(--gris-medio)" }}>
          {d.nota}
        </Reveal>
      </div>
    </section>
  );
}

function Recursos() {
  const d = DATA.recursos;
  return (
    <section id="recursos" className="relative overflow-hidden" style={{ background: "var(--papel)" }}>
      <Blob color="rgba(93,174,158,0.07)" size={520} top={80} right={-200} />
      <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, 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-7 md:grid-cols-3">
          {d.notes.map((n, i) => (
            <Reveal key={i} delay={i * 120} y={26}>
              <a href={"recursos/nota.html?nota=" + n.slug} className="group h-full flex flex-col text-left" aria-label={"Leer más: " + n.titulo}>
                <div className="overflow-hidden rounded-[24px]">
                  <Slot id={n.slot} ratio="4 / 3" radius={24} label="imagen de nota" />
                </div>
                <span className="mt-5 font-cta uppercase tracking-[0.14em] text-[12px]" style={{ color: "var(--durazno)", fontWeight: 700 }}>{n.categoria}</span>
                <h3 className="mt-2 font-title text-[var(--tinta)] transition-colors group-hover:text-[var(--pinar)]" style={{ fontWeight: 800, fontSize: "1.32rem", lineHeight: 1.22 }}>{n.titulo}</h3>
                <p className="mt-3 text-[var(--grafito)] flex-1" style={{ fontSize: "1rem", lineHeight: 1.55 }}>{n.bajada}</p>
                <span className="mt-5 inline-flex items-center gap-2 font-cta text-[var(--pinar)]" style={{ fontWeight: 700 }}>
                  Leer más <span className="transition-transform duration-300 group-hover:translate-x-1"><Icon name="arrow" size={17} /></span>
                </span>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [f, setF] = useState({ nombre: "", contacto: "", motivo: "", mensaje: "", consent: false });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));

  const motivos = ["Para mí", "Para un familiar", "Consulta general", "Prevención · charlas", "Otro"];

  const validate = () => {
    const e = {};
    if (!f.nombre.trim()) e.nombre = "Contanos tu nombre.";
    if (!f.contacto.trim()) e.contacto = "Dejanos cómo contactarte.";
    if (!f.mensaje.trim()) e.mensaje = "Escribinos unas líneas.";
    if (!f.consent) e.consent = "Necesitamos tu consentimiento.";
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const onSubmit = (ev) => {
    ev.preventDefault();
    if (validate()) setSent(true);
  };
  const waLink = () => {
    const t = `Hola, soy ${f.nombre || ""}. ${f.motivo ? "Motivo: " + f.motivo + ". " : ""}${f.mensaje || "Quiero hacer una consulta."}`;
    return "https://wa.me/543875181401?text=" + encodeURIComponent(t);
  };

  const field = "w-full rounded-2xl px-4 py-3.5 text-[var(--tinta)] bg-[var(--papel)] border transition-colors outline-none focus:border-[var(--verde)] focus:ring-2 focus:ring-[rgba(93,174,158,0.25)]";

  if (sent) {
    return (
      <div className="rounded-[28px] p-9 bg-[var(--papel)] border border-[rgba(47,111,98,0.12)] text-center flex flex-col items-center" style={{ boxShadow: "0 24px 50px -36px rgba(28,28,28,0.4)" }}>
        <span className="inline-flex items-center justify-center w-16 h-16 rounded-full text-white" style={{ background: "var(--verde)" }}><Icon name="check" size={32} stroke={2} /></span>
        <h3 className="mt-5 font-title text-[var(--pinar)]" style={{ fontWeight: 800, fontSize: "1.6rem" }}>Recibimos tu mensaje.</h3>
        <p className="mt-3 text-[var(--grafito)]" style={{ lineHeight: 1.55, maxWidth: 420 }}>
          Gracias por escribirnos, {f.nombre.split(" ")[0] || "che"}. Te vamos a responder a la brevedad. Si querés, podemos seguir la conversación ahora mismo por WhatsApp.
        </p>
        <div className="mt-7"><CTA href={waLink()} external variant="primary" icon="wa">Continuar por WhatsApp</CTA></div>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} noValidate className="rounded-[28px] p-7 sm:p-9 bg-[var(--papel)] border border-[rgba(47,111,98,0.12)]" style={{ boxShadow: "0 24px 50px -38px rgba(28,28,28,0.4)" }}>
      <div className="flex flex-col gap-5">
        <div>
          <label className="form-label" htmlFor="c-nombre">Nombre</label>
          <input id="c-nombre" className={field} style={{ borderColor: errors.nombre ? "#d8775a" : "var(--gris-suave)" }} value={f.nombre} onChange={(e) => set("nombre", e.target.value)} placeholder="Tu nombre" />
          {errors.nombre && <p className="form-err">{errors.nombre}</p>}
        </div>
        <div>
          <label className="form-label" htmlFor="c-contacto">Forma de contacto</label>
          <input id="c-contacto" className={field} style={{ borderColor: errors.contacto ? "#d8775a" : "var(--gris-suave)" }} value={f.contacto} onChange={(e) => set("contacto", e.target.value)} placeholder="Teléfono o email" />
          {errors.contacto && <p className="form-err">{errors.contacto}</p>}
        </div>
        <div>
          <label className="form-label" htmlFor="c-motivo">Motivo de consulta</label>
          <select id="c-motivo" className={field} style={{ borderColor: "var(--gris-suave)" }} value={f.motivo} onChange={(e) => set("motivo", e.target.value)}>
            <option value="">Elegí una opción</option>
            {motivos.map((m) => <option key={m} value={m}>{m}</option>)}
          </select>
        </div>
        <div>
          <label className="form-label" htmlFor="c-mensaje">Mensaje</label>
          <textarea id="c-mensaje" rows={4} className={field} style={{ borderColor: errors.mensaje ? "#d8775a" : "var(--gris-suave)", resize: "vertical" }} value={f.mensaje} onChange={(e) => set("mensaje", e.target.value)} placeholder="Contanos en qué podemos ayudarte" />
          {errors.mensaje && <p className="form-err">{errors.mensaje}</p>}
        </div>
        <label className="flex items-start gap-3 cursor-pointer select-none">
          <input type="checkbox" className="mt-1 w-5 h-5 accent-[var(--verde)] shrink-0" checked={f.consent} onChange={(e) => set("consent", e.target.checked)} />
          <span className="text-[var(--grafito)]" style={{ fontSize: "0.92rem", lineHeight: 1.45 }}>
            Doy mi consentimiento para que Fundación Minnesota use estos datos únicamente para responder mi consulta.
          </span>
        </label>
        {errors.consent && <p className="form-err -mt-2">{errors.consent}</p>}
        <button type="submit" className="cta inline-flex items-center justify-center gap-2.5 rounded-full font-cta bg-[var(--verde)] text-white hover:brightness-[1.05] transition-all duration-300" style={{ padding: "1rem 1.6rem", boxShadow: "0 12px 30px -14px rgba(93,174,158,0.9)" }}>
          Enviar consulta <Icon name="arrow" size={18} />
        </button>
      </div>
    </form>
  );
}

function Contacto() {
  const d = DATA.contacto;
  return (
    <section id="contacto" className="relative overflow-hidden" style={{ background: "var(--crema)" }}>
      <Blob color="rgba(244,166,120,0.12)" size={420} bottom={-160} 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-[680px]">
          <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, fontSize: "clamp(2rem,4.4vw,3.4rem)" }}>
            {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.texto}
          </Reveal>
        </div>

        <div className="mt-14 grid lg:grid-cols-[1.1fr_0.9fr] gap-8 lg:gap-12 items-start">
          <Reveal>{window.MessagePanel ? <MessagePanel /> : <ContactForm />}</Reveal>

          <Reveal delay={120} className="flex flex-col gap-6">
            <a href={DATA.wa} target="_blank" rel="noopener noreferrer" className="group rounded-[28px] p-8 flex items-center gap-5 transition-transform duration-300 hover:-translate-y-1" style={{ background: "var(--durazno)", color: "var(--tinta)", boxShadow: "0 20px 44px -22px rgba(244,166,120,0.95)" }}>
              <span className="inline-flex items-center justify-center w-14 h-14 shrink-0"><WABadge size={52} /></span>
              <span>
                <span className="block font-title" style={{ fontWeight: 800, fontSize: "1.3rem" }}>{d.waBtn}</span>
                <span className="block font-mono text-[13px] mt-0.5 opacity-70">+54 387 518 1401</span>
              </span>
            </a>

            <div className="rounded-[28px] p-8 bg-[var(--papel)] border border-[rgba(47,111,98,0.12)] flex flex-col gap-5">
              <InfoRow icon="location" label="Dirección" value={d.direccion} />
              <div className="h-px" style={{ background: "rgba(47,111,98,0.1)" }} />
              <InfoRow icon="instagram" label="Instagram" value={d.instagram} href="https://instagram.com/fundacion.minnesota" />
              <div className="h-px" style={{ background: "rgba(47,111,98,0.1)" }} />
              <InfoRow icon="globe" label="Web" value={d.web} href="https://fundacionminnesota.com.ar" />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function InfoRow({ icon, label, value, href }) {
  const inner = (
    <div className="flex items-center gap-4">
      <span className="inline-flex items-center justify-center w-11 h-11 rounded-xl text-[var(--pinar)] shrink-0" style={{ background: "rgba(93,174,158,0.12)" }}><Icon name={icon} size={22} /></span>
      <span>
        <span className="block text-[var(--gris-medio)]" style={{ fontSize: "0.78rem", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.08em" }}>{label}</span>
        <span className="block text-[var(--tinta)]" style={{ fontSize: "1.02rem", fontWeight: 600 }}>{value}</span>
      </span>
    </div>
  );
  return href ? <a href={href} target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity">{inner}</a> : inner;
}

function Footer() {
  const d = DATA.footer;
  return (
    <footer className="relative overflow-hidden" style={{ background: "var(--azul)" }}>
      <Wing color="rgba(244,166,120,0.05)" style={{ position: "absolute", left: "-4%", bottom: "-10%", width: 420, height: 420 }} />
      <div className="relative mx-auto max-w-[1240px] px-5 md:px-8 pt-24 pb-12">
        <Reveal className="text-center">
          <p className="font-title" style={{ color: "var(--papel)", fontWeight: 900, fontSize: "clamp(3rem,9vw,7rem)", lineHeight: 0.95, letterSpacing: "-0.02em" }}>
            {d.cierre}
          </p>
        </Reveal>

        <div className="mt-16 pt-12 border-t flex flex-col lg:flex-row gap-10 lg:items-start lg:justify-between" style={{ borderColor: "rgba(251,248,244,0.14)" }}>
          <div className="shrink-0" style={{ maxWidth: 340 }}>
            <Logo dark />
            <p className="mt-5 font-mono text-[12px] leading-relaxed" style={{ color: "rgba(251,248,244,0.55)" }}>
              {d.legal}
            </p>
          </div>

          <nav className="flex flex-wrap gap-x-8 gap-y-3 lg:pt-1" aria-label="Pie">
            {DATA.nav.map((n) => (
              <a key={n.href} href={n.href} className="text-[15px] font-semibold whitespace-nowrap transition-colors" style={{ color: "rgba(251,248,244,0.8)" }} onMouseEnter={(e) => (e.currentTarget.style.color = "var(--durazno)")} onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(251,248,244,0.8)")}>
                {n.label}
              </a>
            ))}
          </nav>

          <div className="flex flex-col gap-3 shrink-0 lg:pt-1">
            <a href="https://instagram.com/fundacion.minnesota" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2.5 text-[15px] font-semibold whitespace-nowrap" style={{ color: "rgba(251,248,244,0.8)" }}><Icon name="instagram" size={19} /> {DATA.contacto.instagram}</a>
            <a href={DATA.wa} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2.5 text-[15px] font-semibold whitespace-nowrap" style={{ color: "rgba(251,248,244,0.8)" }}><WABadge size={20} /> +54 387 518 1401</a>
          </div>
        </div>

        <div className="mt-12 flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between" style={{ color: "rgba(251,248,244,0.45)", fontSize: "13px" }}>
          <span>© 2026 Fundación Minnesota</span>
          <div className="flex gap-6">
            <a href="#" className="hover:text-[var(--papel)] transition-colors">Términos y condiciones</a>
            <a href="privacidad.html" className="hover:text-[var(--papel)] transition-colors">Política de privacidad</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Familias, Testimonios, Recursos, Contacto, Footer });