/* global React, ReactDOM, firebase */
const { useState, useEffect, useRef, useCallback } = React;

// Public web config — safe to expose; Firestore security rules (not this
// key) are what actually gate read/write access.
firebase.initializeApp({
  apiKey: "AIzaSyD9dgA7zwAe-dJIKFv8gbtt0gUm9NutILk",
  authDomain: "ciap-51e88.firebaseapp.com",
  projectId: "ciap-51e88",
  storageBucket: "ciap-51e88.appspot.com",
  messagingSenderId: "119110415690",
  appId: "1:119110415690:web:11e3b1d63874a8ee69bdb3",
});
const db = firebase.firestore();

/* ============================== DATA ============================== */

const POWERS = [
  { title: "El poder de reiniciar", question: "¿Qué te gustaría dejar atrás hoy?", answer: "Ese es tu primer paso para reiniciar.", icon: "images/ruleta/icon-1.png" },
  { title: "El poder de soltar", question: "¿Qué estás cargando que ya no te pertenece?", answer: "Nombrarlo ya es empezar a soltarlo.", icon: "images/ruleta/icon-2.png" },
  { title: "El poder de la pausa", question: "Cierra los ojos, respira y cuando estés listo, di: “Estoy aquí”.", answer: "Detenerte también es avanzar.", icon: "images/ruleta/icon-3.png" },
  { title: "El poder de poner límites", question: "¿A qué le has dicho sí, cuando querías decir no?", answer: "Ahora sabes qué límite necesitas poner.", icon: "images/ruleta/icon-4.png" },
  { title: "El poder de cambiar de rumbo", question: "¿Qué camino ya no te está llevando a donde quieres ir?", answer: "Cambiar de rumbo también es un acto de valentía.", icon: "images/ruleta/icon-5.png" },
  { title: "El poder de pedir refuerzos", question: "¿A quién podrías pedirle ayuda esta semana?", answer: "Ya sabes a quién recurrir. Eso es tener una red de apoyo.", icon: "images/ruleta/icon-6.png" },
  { title: "El poder de desconectarse", question: "¿Qué harías con 10 minutos sin pantallas?", answer: "Desconectarte también te reconecta contigo.", icon: "images/ruleta/icon-7.png" },
  { title: "El poder de empezar de nuevo", question: "¿Qué te gustaría intentar otra vez?", answer: "Siempre hay una nueva oportunidad.", icon: "images/ruleta/icon-8.png" },
  { title: "El poder de no tener todas las respuestas", question: "¿Qué pregunta te has sentido presionado a responder?", answer: "Decir “no sé” también es honesto y válido.", icon: "images/ruleta/icon-9.png" },
  { title: "El poder de ser humano", question: "¿Cuándo fue la última vez que te permitiste sentir?", answer: "Ser humano es el superpoder más real.", icon: "images/ruleta/icon-10.png" },
];

const SEED_STORIES = [
  { title: "Mi papá es", bold: "mi héroe.", desc: "Con su apoyo incondicional, me enseñó a creer en mí." },
  { title: "Mi psicóloga es", bold: "mi héroe.", desc: "Me enseñó que pedir ayuda también es un acto de valentía." },
];

const LEGAL_TEXT = "Material educativo dirigido a público general. No contiene fines promocionales ni publicitarios. Esta información no sustituye la consulta ni el criterio del Profesional de la Salud. En caso de duda, consulte a su médico o farmacéutico. Reportes de eventos adversos: farmacovigilancia@aspenlatam.com. Colombia: Aspen Colombiana S.A.S. hace parte de la Corporación Punto Azul; los medicamentos vencidos, deteriorados o parcialmente consumidos y sus empaques deben depositarse en los contenedores Punto Azul. Ecuador: Aspenpharma forma parte del colectivo Redfarmed; los medicamentos vencidos, deteriorados o parcialmente consumidos y sus empaques deben depositarse en los puntos de recolección de Redfarmed.";

const LEGAL_CODES = {
  home: "COL-REG-08-26-00001",
  ruleta: "COL-REG-08-26-00003",
  heroe: "COL-REG-08-26-00002",
  senales: "COL-REG-08-26-00001",
  carga: "COL-REG-08-26-00001",
};

const SENALES_REFERENCES = [
  "1. Organización Mundial de la Salud (OMS). Trastorno depresivo (depresión) [Internet]. Ginebra: OMS; 2025 [citado 28 jul 2025]. Disponible en: who.int/es/news-room/fact-sheets/detail/depression",
  "2. American Psychiatric Association (APA). Manual Diagnóstico y Estadístico de los Trastornos Mentales (DSM-5). Washington, D.C.: APA; 2013.",
  "3. Organización Panamericana de la Salud (OPS). Hablemos de depresión [Internet]. Washington, D.C.: OPS; 2017 [citado 28 jul 2026]. Disponible en: paho.org/es/temas/depresion",
];

const CARGA_REFERENCES = [
  "1. Organización Mundial de la Salud (OMS). Trastorno depresivo (depresión) [Internet]. Ginebra: OMS; 2025 [citado 28 jul 2026]. Disponible en: who.int/es/news-room/fact-sheets/detail/depression",
  "2. Organización Panamericana de la Salud (OPS). Hablemos de depresión [Internet]. Washington, D.C.: OPS; 2017 [citado 28 jul 2026]. Disponible en: paho.org/es/temas/depresion",
];

const SIGNALS = [
  { photo: "images/senales/signal-1.jpg", title: "Tristeza persistente:", desc: "Una sensación de vacío, melancolía o desesperanza profunda que no desaparece con el paso de las horas.²" },
  { photo: "images/senales/signal-2.jpg", title: "Pérdida de interés:", desc: "Aquellas actividades, pasatiempos o momentos que antes te daban alegría ya no te generan motivación ni placer.²" },
  { photo: "images/senales/signal-3.jpg", title: "Cambios en el sueño:", desc: "Dificultad extrema para lograr dormir (insomnio) o, por el contrario, una necesidad incontrolable de dormir en exceso (hipersomnia).²" },
  { photo: "images/senales/signal-4.jpg", title: "Alteraciones en el apetito:", desc: "Falta de hambre notoria o necesidad de comer en exceso, reflejada en cambios de peso involuntarios.²" },
  { photo: "images/senales/signal-5.jpg", title: "Fatiga constante:", desc: "Sensación de agotamiento físico y pérdida de energía, incluso sin haber realizado grandes esfuerzos.²" },
  { photo: "images/senales/signal-6.jpg", title: "Dificultad para concentrarse:", desc: "Problemas para enfocar tu atención, pensar con claridad o tomar decisiones simples del día a día.²" },
  { photo: "images/senales/signal-7.jpg", title: "Sensación de desesperanza:", desc: "Sentir que el futuro no va a mejorar o lidiar constantemente con sentimientos de culpa infundados.²" },
  { photo: "images/senales/signal-8.jpg", title: "Aislamiento social:", desc: "Deseo frecuente de alejarte de tu entorno y reducir la interacción, lo cual es una consecuencia clínica del agotamiento emocional.¹²" },
];

const MYTHS = [
  { photo: "images/senales/myth-1.jpg", mito: "“La depresión es solo falta de voluntad o pereza.”", realidad: "La Organización Mundial de la Salud (OMS) la reconoce como un trastorno mental y una condición de salud real que requiere atención y apoyo.¹ No se cura simplemente “echándole ganas”." },
  { photo: "images/senales/myth-2.jpg", mito: "“Las personas fuertes no se deprimen.”", realidad: "La depresión es universal. La evidencia clínica muestra que puede afectar a cualquier persona,¹ sin importar su edad, éxito o fortaleza emocional aparente." },
  { photo: "images/senales/myth-3.jpg", mito: "“Hablar de lo que siento me hace ver débil frente a los demás.”", realidad: "La Organización Panamericana de la Salud (OPS) señala que expresar lo que sentimos es una muestra de valentía y una medida de autocuidado clave para proteger la salud mental.³" },
  { photo: "images/senales/myth-4.jpg", mito: "“Debo ser capaz de resolver mis problemas yo solo.”", realidad: "Contar con una perspectiva externa transforma el proceso. El apoyo de familiares, amigos o profesionales marca una diferencia clínica importante en el tratamiento.¹³" },
];

const SUPPORT_NETWORK = [
  { photo: "images/carga/network-1.jpg", title: "Familia:", desc: "quienes te conocen desde siempre y pueden notar los primeros cambios." },
  { photo: "images/carga/network-2.jpg", title: "Amigos:", desc: "que te brindan un espacio de desconexión y confianza." },
  { photo: "images/carga/network-3.jpg", title: "Compañeros:", desc: "que te acompañan y entienden tu rutina diaria." },
  { photo: "images/carga/network-4.jpg", title: "Profesionales de la salud:", desc: "listos para ofrecerte las herramientas médicas y psicológicas adecuadas." },
  { photo: "images/carga/network-5.jpg", title: "Personas que escuchan sin juzgar:", desc: "Cualquier entorno empático dispuesto a sostenerte." },
];

const HEROE_WALL_COLLECTION = "septiembreAmarillo_heroeWall";

/* ============================== SHARED UI ============================== */

function BrandMark({ size = 40, dark = false }) {
  return (
    <div className="brand">
      <img
        src={dark ? "images/shared/logo.png" : "images/shared/logo-nav.png"}
        alt="Aspen · Comprometidos con quienes viven con dolor."
        style={{ height: size }}
      />
    </div>
  );
}

const TABS = [
  { id: "home", label: "Home" },
  { id: "senales", label: "Reconoce las Señales" },
  { id: "carga", label: "No lo cargues solo" },
  { id: "heroe", label: "¿Quién es tu héroe?" },
  { id: "ruleta", label: "Los poderes secretos" },
];

/* ---------------------- RUTEO Y MEDICIÓN ----------------------
   La navegación es por estado, así que la sincronizamos con el
   History API para que cada interna tenga su propia URL (/senales,
   /carga, ...). Firebase Hosting reescribe esas rutas a index.html
   (ver la sección "rewrites" de firebase.json).

   Usamos rutas reales y no #hash porque GA4 descarta el fragmento al
   armar la dimensión "Ruta de página": con hash las cinco internas se
   reportarían todas como "/". */
const GA4_ID = "G-SXFN1XTS06";
const SECTION_IDS = TABS.map((t) => t.id);

function sectionToPath(section) {
  return section === "home" ? "/" : "/" + section;
}

function pathToSection(pathname) {
  const id = pathname.replace(/^\/+|\/+$/g, "");
  return SECTION_IDS.includes(id) ? id : "home";
}

function Header({ active, onChange }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const light = active !== "home";

  function handleNav(id) {
    onChange(id);
    setMenuOpen(false);
  }

  return (
    <header className={"site-header" + (light ? " site-header--light" : "")}>
      <div className="site-header-inner">
        <a href="#home" onClick={(e) => { e.preventDefault(); handleNav("home"); }}>
          <BrandMark size={64} dark={light} />
        </a>

        <nav className="nav-tabs nav-desktop">
          {TABS.map((t) => (
            <button
              key={t.id}
              className={"nav-tab" + (active === t.id ? " active" : "")}
              onClick={() => handleNav(t.id)}
            >
              {t.label}
            </button>
          ))}
        </nav>

        <button
          className={"hamburger" + (menuOpen ? " is-open" : "")}
          onClick={() => setMenuOpen(!menuOpen)}
          aria-label="Abrir menú"
        >
          <span /><span /><span />
        </button>
      </div>

      {menuOpen && (
        <nav className="nav-drawer">
          {TABS.map((t) => (
            <button
              key={t.id}
              className={"nav-tab" + (active === t.id ? " active" : "")}
              onClick={() => handleNav(t.id)}
            >
              {t.label}
            </button>
          ))}
        </nav>
      )}
    </header>
  );
}

function Footer({ section, references }) {
  return (
    <footer className="site-footer">
      <div className="site-footer-inner">
        <BrandMark size={130} dark />
        <div className="footer-refs">
          {references && (
            <p className="footer-references">
              <strong>Referencias:</strong> {references.join(" ")}
            </p>
          )}
          <p>
            <strong>Material educativo dirigido a público general.</strong> {LEGAL_TEXT.replace("Material educativo dirigido a público general. ", "")}
          </p>
          <p className="footer-code">Código: {LEGAL_CODES[section] || LEGAL_CODES.home} · Vigencia: 01/09/2028</p>
        </div>
      </div>
    </footer>
  );
}

function PageBanner({ kicker, title, subtitle, lead, bgImage, bgAlt, mediaRatio, mobileContentWidth }) {
  return (
    <div className="page-banner">
      <div className="page-banner-media">
        <img src={bgImage} alt={bgAlt || ""} style={mediaRatio ? { aspectRatio: mediaRatio } : undefined} />
      </div>
      {/* --pb-mobile-w only affects the mobile media query (see styles.css) —
          desktop always uses its own fixed width regardless of this prop.
          Pages whose photo has a narrower safe/fade zone (or a longer
          title) need a tighter box on mobile so the text doesn't spill
          onto faces in the photo. */}
      <div className="page-banner-content" style={mobileContentWidth ? { "--pb-mobile-w": mobileContentWidth } : undefined}>
        {kicker && <span className="page-kicker">{kicker}</span>}
        <h1 className="page-title">{title}</h1>
        {subtitle && <p className="page-subtitle">{subtitle}</p>}
        {lead && <p className="page-lead">{lead}</p>}
      </div>
    </div>
  );
}

/* ============================== HOME ============================== */

function Home({ onChange }) {
  return (
    <div className="home-page">
      <section className="home-hero">
        <div className="hero-media">
          <img src="images/home/hero-bg.jpg" alt="En Septiembre Amarillo. Rompe el silencio, abraza la vida. Ni los héroes luchan solos." />
        </div>

        {/* The approved mobile creative bakes the headline, CTA copy and legal
            footer into a single tall portrait image (see
            images/home/hero-mobile.jpg) instead of reusing the wide desktop
            photo — so on mobile we swap to that image wholesale rather than
            overlaying our own text block on the desktop crop. */}
        <img className="home-hero-mobile-only" src="images/home/hero-mobile.jpg" alt="En Septiembre Amarillo. Rompe el silencio, abraza la vida. Ni los héroes luchan solos. El verdadero poder no está en creerse invencible, está en saber cuándo pedir ayuda." />
      </section>

      <Footer section="home" />
    </div>
  );
}

/* ============================== RULETA (Los poderes secretos) ============================== */

const SLICE = 36;
const SPIN_MS = 5200;

// spokes=true rotates each icon to match its slice angle (like a spoke).
// That looks wrong on a static wheel (icons on their side / upside down),
// but it's required on the *spinning* wheel: the disc's own rotation and
// the icon's fixed spoke rotation cancel out exactly when a slice lands
// under the pointer, so the winning icon always settles upright. Without
// it, the winner ends up tilted by whatever angle the disc stopped at.
function WheelIcons({ showLabel = false, radius = 33, spokes = false, offsets = {} }) {
  return POWERS.map((p, i) => {
    const angle = i * SLICE;
    const rad = (angle * Math.PI) / 180;
    const off = offsets[i] || {};
    const left = 50 + radius * Math.sin(rad) + (off.dx || 0);
    const top = 50 - radius * Math.cos(rad) + (off.dy || 0);
    const rotate = spokes ? ` rotate(${angle}deg)` : "";
    return (
      <div
        key={i}
        className={"wheel-icon" + (showLabel ? " has-label" : "")}
        style={{ left: left + "%", top: top + "%", transform: `translate(-50%,-50%)${rotate}` }}
      >
        <img src={p.icon} alt="" />
        {showLabel && <span className="wheel-icon-label">{p.title}</span>}
      </div>
    );
  });
}

// Hand-tuned nudges for a couple of icons on the spinning wheel that sat
// slightly too close to a neighbor at their exact formula position.
const WHEEL_ICON_OFFSETS = {
  3: { dy: 1 },
  5: { dx: -1.5 },
  6: { dx: -2 },
};

function Ruleta() {
  const [rotation, setRotation] = useState(0);
  const [spinning, setSpinning] = useState(false);
  const [resultIndex, setResultIndex] = useState(null);
  const [revealed, setRevealed] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const timerRef = useRef(null);

  useEffect(() => () => clearTimeout(timerRef.current), []);

  const spin = useCallback(() => {
    if (spinning) return;
    const k = Math.floor(Math.random() * POWERS.length);
    const targetMod = (360 - k * SLICE) % 360;
    const currentMod = ((rotation % 360) + 360) % 360;
    const delta = (targetMod - currentMod + 360) % 360;
    const extraSpins = 6 + Math.floor(Math.random() * 3);
    const newRotation = rotation + extraSpins * 360 + delta;

    setSpinning(true);
    setShowModal(false);
    setRevealed(false);
    setRotation(newRotation);

    timerRef.current = setTimeout(() => {
      setSpinning(false);
      setResultIndex(k);
      setShowModal(true);
    }, SPIN_MS);
  }, [rotation, spinning]);

  function closeModal() {
    setShowModal(false);
  }

  const active = resultIndex != null ? POWERS[resultIndex] : null;

  return (
    <>
      <PageBanner
        title="Los poderes secretos de los héroes reales"
        bgImage="images/ruleta/banner-bg.jpg"
        mediaRatio="2 / 1"
      />

      <section className="instructions-section">
        <div className="container instructions-grid">
          <div className="instructions-copy">
            <h2>Instrucciones:</h2>
            <p>
              Pon a girar la ruleta y una vez se detenga en el reto a enfrentar…
              responde una pregunta con honestidad. Una vez cumplas la misión, dale
              click al botón de seguir y deja que la respuesta te muestre el poder
              del héroe que llevas dentro.
            </p>
          </div>
        </div>
      </section>

      <section className="wheel-section">
        <div className="container wheel-section-inner">
          <h2 className="wheel-kicker">Dale un GIRO</h2>

          <div className="wheel-stage">
            <div className="wheel-wrap">
              <img className="wheel-pointer" src="images/ruleta/pointer.png" alt="" />
              <div className="wheel-disc" style={{ transform: `rotate(${rotation}deg)` }}>
                <img className="wheel-base" src="images/ruleta/wheel.png" alt="Ruleta de los poderes secretos" />
                <WheelIcons spokes radius={29} offsets={WHEEL_ICON_OFFSETS} />
              </div>
              <button className="spin-btn" onClick={spin} disabled={spinning} aria-label="Girar la ruleta">
                <img src="images/ruleta/spin-button.png" alt="Girar" />
              </button>
            </div>
          </div>

          <p className="wheel-caption">
            <strong>Gira la ruleta</strong>
            <em>y descubre tu poder</em>
          </p>
        </div>
      </section>

      {showModal && active && (
        <div className="modal-overlay" onClick={closeModal}>
          <div className="power-card" onClick={(e) => e.stopPropagation()}>
            <button className="modal-close" onClick={closeModal} aria-label="Cerrar">✕</button>
            <img className="power-icon" src={active.icon} alt="" />
            <div className="power-index">Poder {resultIndex + 1} de {POWERS.length}</div>
            <h3>{active.title}</h3>
            <div className="power-prompt-label">Responde en voz alta</div>
            <p className="power-question">“{active.question}”</p>

            {!revealed ? (
              <div className="power-actions">
                <button className="btn btn-navy" onClick={() => setRevealed(true)}>Seguir</button>
              </div>
            ) : (
              <>
                <div className="power-answer">{active.answer}</div>
                <div className="power-actions">
                  <button className="btn btn-outline" onClick={closeModal}>Salir</button>
                  <button className="btn btn-gold" onClick={() => { closeModal(); setTimeout(spin, 250); }}>Girar de nuevo</button>
                </div>
              </>
            )}
          </div>
        </div>
      )}

      <Footer section="ruleta" />
    </>
  );
}

/* ============================== HEROE (¿Quién es tu héroe?) ============================== */

// Posts live in Firestore (collection HEROE_WALL_COLLECTION) instead of
// localStorage so a post made on one visitor's phone shows up for everyone,
// on any device — not just in that one browser.
function Heroe() {
  const [text, setText] = useState("");
  const [posts, setPosts] = useState([]);
  const [submitting, setSubmitting] = useState(false);
  const [justPosted, setJustPosted] = useState(false);
  const wallRef = useRef(null);
  const MAX = 140;

  useEffect(() => {
    const unsubscribe = db
      .collection(HEROE_WALL_COLLECTION)
      .orderBy("createdAt", "desc")
      .limit(60)
      .onSnapshot(
        (snapshot) => setPosts(snapshot.docs.map((doc) => ({ id: doc.id, text: doc.data().text }))),
        () => {} // offline/permission hiccup — the seed stories still render below
      );
    return unsubscribe;
  }, []);

  async function handleSubmit(e) {
    e.preventDefault();
    const trimmed = text.trim();
    if (!trimmed || submitting) return;
    setSubmitting(true);
    try {
      await db.collection(HEROE_WALL_COLLECTION).add({
        text: trimmed,
        createdAt: firebase.firestore.FieldValue.serverTimestamp(),
      });
      setText("");
      setJustPosted(true);
      setTimeout(() => setJustPosted(false), 3200);
      if (wallRef.current) wallRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
    } catch (e) {
      // network/offline — leave the draft text in place so they can retry
    } finally {
      setSubmitting(false);
    }
  }

  const remaining = MAX - text.length;
  const wall = [...posts.map((p) => ({ id: p.id, desc: p.text })), ...SEED_STORIES];

  return (
    <>
      <PageBanner
        title="¿Quién es tu héroe de la vida real?"
        lead="Todos tenemos cerca a un héroe que admiramos, que nos inspira y nos impulsa para reconectarnos con la vida y con nuestros sueños."
        bgImage="images/heroe/banner-bg.jpg"
        bgAlt="Madre e hija abrazadas"
        mediaRatio="1.9 / 1"
      />

      <section className="heroe-panel-section">
        <div className="container">
          <div className="heroe-panel-top">
            <div className="heroe-panel-intro">
              <h2>Cuéntanos quién es ese héroe o heroína para ti y cómo te ha ayudado.</h2>
              <p>No necesitas decir su nombre, podemos seguir manteniendo en secreto su identidad.</p>
            </div>
            <div className="heroe-panel-photos">
              <img src="images/heroe/real-heroes-strip.png" alt="Historias de héroes reales" />
            </div>
          </div>

          <div className="heroe-panel-bottom">
            <div className="heroe-portrait-circle">
              <img src="images/heroe/mujer-heroe.png" alt="Ilustración de una heroína real" />
            </div>

            <div className="heroe-form">
              <h3>Mi héroe es…</h3>
              <form onSubmit={handleSubmit}>
                <textarea
                  value={text}
                  maxLength={MAX}
                  placeholder="Cuéntanos tu historia…"
                  onChange={(e) => setText(e.target.value)}
                />
                <div className="form-meta">
                  <span className={"char-count" + (remaining <= 10 ? " limit" : "")}>
                    {remaining < MAX ? `${remaining} caracteres restantes` : "Máximo 140 caracteres"}
                  </span>
                </div>
                <button className="btn btn-navy" type="submit" disabled={!text.trim() || submitting}>{submitting ? "Enviando…" : "Enviar"}</button>
              </form>

              {justPosted && (
                <div className="form-success">
                  <span className="check">✓</span>
                  <span>Tu post it quedó pegado en la pared de héroes reales. ¡Gracias por compartir!</span>
                </div>
              )}
            </div>
          </div>

          <div className="heroe-panel-foot">
            <div className="foot-item">
              <img src="images/heroe/icon-shield.png" alt="" />
              <span>* No se aceptan nombres propios.</span>
            </div>
            <div className="foot-item">
              <img src="images/heroe/icon-people.png" alt="" />
              <span>
                Al terminar de escribir y darle enviar, este post it quedará pegado en una pared la
                cual se irá llenando con los post it de todos los que comenten.
              </span>
            </div>
          </div>
        </div>
      </section>

      <section className="wall-section">
        <div className="container">
          <div ref={wallRef} className="wall-board">
            {wall.map((entry, i) => (
              <div key={entry.id || "seed-" + i} className="hero-card">
                <span className="hero-card-icon">
                  <img src="images/heroe/icon-chat.png" alt="" />
                </span>
                <div className="hero-card-body">
                  {entry.title && (
                    <p className="hero-card-title">
                      {entry.title} <strong>{entry.bold}</strong>
                    </p>
                  )}
                  <p className="hero-card-desc">{entry.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="wall-title-band">
        <h2>Historias de héroes reales</h2>
      </section>

      <Footer section="heroe" />
    </>
  );
}

/* ============================== SEÑALES ============================== */

function Senales() {
  return (
    <>
      <PageBanner
        subtitle="Reconoce las señales de alerta"
        title="Reconoce las señales. Más conversación, menos estigma"
        lead="Cuando algo no está bien, las señales importan."
        bgImage="images/senales/banner-bg.jpg"
        bgAlt="Mujer relajada en su sala"
        mediaRatio="2 / 1"
      />

      <section className="signals-section">
        <div className="gold-panel gold-panel--top gold-panel--dip">
          <div className="container container--wide">
            <div className="floating-card floating-card--hero">
              <img className="floating-card-icon" src="images/senales/icon-brain-heart.png" alt="" />
              <div>
                <h2>A veces, la mente y el cuerpo nos avisan que necesitamos una pausa.</h2>
                <p>
                  La depresión es una condición médica real y reconocida a nivel mundial, no una
                  simple tristeza pasajera.¹ De acuerdo con los manuales clínicos (DSM-5), es
                  fundamental prestar atención si tú o alguien cercano presenta estas señales casi
                  todos los días:²
                </p>
              </div>
            </div>

            <div className="photo-card-grid cols-4">
              {SIGNALS.map((s, i) => (
                <div className="photo-card" key={i}>
                  <img src={s.photo} alt="" />
                  <div className="photo-card-body">
                    <h3>{s.title}</h3>
                    <p>{s.desc}</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="emphasis-band">
              <strong>Reconocer estas señales no te hace débil;</strong>
              <em>es el primer paso médico y emocional para acompañarte y buscar la ayuda que mereces.</em>
            </div>
          </div>
        </div>

        <div className="gold-panel-strong">
          <div className="container">
            <div className="stigma-block">
              <h2>Más conversación,<br />menos estigma</h2>
              <img src="images/senales/couple-ribbon.png" alt="Pareja apoyándose" />
            </div>

            <div className="floating-card floating-card--static">
              <img className="floating-card-icon" src="images/senales/icon-brain-shatter.png" alt="" />
              <div>
                <h2>Existen muchas creencias equivocadas sobre la salud mental que nos alejan de la recuperación.</h2>
                <p>Hablar con la verdad sustentada en la ciencia nos ayuda a derribar los muros del prejuicio:</p>
              </div>
            </div>

            <div className="myth-list">
              {MYTHS.map((m, i) => (
                <div className="myth-row" key={i}>
                  <img src={m.photo} alt="" />
                  <div>
                    <p className="myth-label">Mito: <span>{m.mito}</span></p>
                    <p className="myth-label">Realidad: <span>{m.realidad}</span></p>
                  </div>
                </div>
              ))}
            </div>

            <div className="wall-title-band wall-title-band--inline">
              <strong>Hablar abiertamente de salud mental</strong>
              <em>ayuda a romper el silencio y a reducir el estigma.</em>
            </div>
          </div>
        </div>
      </section>

      <Footer section="senales" references={SENALES_REFERENCES} />
    </>
  );
}

/* ============================== NO LO CARGUES SOLO ============================== */

function Carga() {
  return (
    <>
      <PageBanner
        subtitle="El poder de una red de apoyo"
        title="Nadie debería tener que enfrentarlo todo, solo."
        lead="Detrás de cada héroe, hay alguien que estuvo presente."
        bgImage="images/carga/banner-bg.jpg"
        bgAlt="Pareja apoyándose en el sofá"
        mobileContentWidth="54%"
      />

      <section className="signals-section">
        <div className="container container--wide">
          <div className="support-card">
            <div className="support-intro">
              <img className="floating-card-icon" src="images/carga/icon-hands-heart-blue.png" alt="" />
              <p>
                El aislamiento solo hace que las batallas parezcan invencibles. La evidencia
                médica demuestra que mantener el contacto social es una intervención fundamental
                para la recuperación.¹² Rodearte de personas que te sumen tranquilidad es clave.
              </p>
            </div>

            <h2 className="section-heading">Tu red de apoyo puede estar conformada por:</h2>

            <div className="photo-card-grid cols-5">
              {SUPPORT_NETWORK.map((n, i) => (
                <div className="photo-card" key={i}>
                  <img src={n.photo} alt="" />
                  <div className="photo-card-body">
                    <h3>{n.title}</h3>
                    <p>{n.desc}</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="highlight-box">
              <p>Compartir el peso de tus emociones no hace que la carga sea más grande.</p>
              <em>La hace mucho más ligera.</em>
            </div>
          </div>
        </div>

        <div className="valor-section">
          <img className="valor-media" src="images/carga/valor-bg.jpg" alt="" />
          <div className="container">
            <div className="valor-content">
              <div className="valor-copy">
                <h2>Buscar ayuda es un acto de valentía</h2>
                <p>
                  Llevar todo el peso sobre tus hombros en silencio llega a ser agotador. Es momento
                  de soltar un poco el control.
                </p>
              </div>
              <div className="valor-cards">
                <div className="valor-card">
                  <img src="images/carga/icon-hands-heart-purple.png" alt="" />
                  <div className="valor-card-body">
                    <h3>Pedir ayuda no significa rendirse:</h3>
                    <p>significa reconocer tu propio valor y aceptar que mereces apoyo cuando atraviesas momentos difíciles.²</p>
                  </div>
                </div>
                <div className="valor-card">
                  <img src="images/carga/icon-shield-purple.png" alt="" />
                  <div className="valor-card-body">
                    <h3>Buscar acompañamiento es una decisión valiente:</h3>
                    <p>hablar con un profesional de la salud es el punto de partida clínico recomendado para acceder a tratamientos eficaces, seguros, y dar un paso importante hacia el bienestar.¹²</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="wall-title-band">
          <strong>Los héroes de la vida real, también buscan apoyo cuando lo necesitan.</strong>
          <em>Ni los héroes luchan solos.</em>
        </div>
      </section>

      <Footer section="carga" references={CARGA_REFERENCES} />
    </>
  );
}

/* ============================== APP ============================== */

function App() {
  const [section, setSection] = useState(() => pathToSection(window.location.pathname));

  // Botones Atrás / Adelante del navegador.
  useEffect(() => {
    function handlePopState() { setSection(pathToSection(window.location.pathname)); }
    window.addEventListener("popstate", handlePopState);
    return () => window.removeEventListener("popstate", handlePopState);
  }, []);

  const navigate = useCallback((id) => {
    if (window.location.pathname !== sectionToPath(id)) {
      window.history.pushState({ section: id }, "", sectionToPath(id));
    }
    setSection(id);
  }, []);

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" });

    const pageTitle = `Septiembre Amarillo - ${TABS.find((tab) => tab.id === section)?.label || "Home"}`;
    document.title = pageTitle;

    // El efecto corre después del pushState, así que location.href ya
    // apunta a la interna actual.
    const pageLocation = window.location.href;

    // Para los triggers del contenedor GTM-5WTDNXLQ.
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "virtual_page_view",
      page_location: pageLocation,
      page_path: sectionToPath(section),
      page_title: pageTitle,
    });

    // GA4 arma "Ruta de página" a partir de page_location; page_path es
    // un parámetro de Universal Analytics y GA4 lo ignora.
    if (typeof window.gtag === "function") {
      window.gtag("event", "page_view", {
        send_to: GA4_ID,
        page_location: pageLocation,
        page_title: pageTitle,
      });
    }
  }, [section]);

  let content;
  if (section === "home") content = <Home onChange={navigate} />;
  else if (section === "ruleta") content = <Ruleta />;
  else if (section === "heroe") content = <Heroe />;
  else if (section === "senales") content = <Senales />;
  else if (section === "carga") content = <Carga />;
  else content = <Home onChange={navigate} />;

  return (
    <div className="app">
      <Header active={section} onChange={navigate} />
      <main className="page">{content}</main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);