// ============================================================
// Foro Economía Circular del Sector Lácteo — Micrositio
// ============================================================
const { useState, useEffect, useRef, useMemo } = React;

// -- Tweak defaults persisted by host --------------------------------
const FORO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "evento",
  "headlineFont": "outfit",
  "showCircularityGlyph": true,
  "heroLayout": "split"
}/*EDITMODE-END*/;

const PALETTES = {
  evento: {
    label: "Evento (flyer)",
    bg: "#FFFFFF",
    panel: "#F5FAEE",
    ink: "#0F2818",
    inkSoft: "#4E5A52",
    line: "#E1ECD9",
    primary: "#1F8A3A",
    primarySoft: "#0E5C2C",
    primaryInk: "#FFFFFF",
    accent: "#7BC242",
    chip: "#E7F2D9",
  },
  canilec: {
    label: "Canilec clásico",
    bg: "#F6F1E4",
    panel: "#FBF8EE",
    ink: "#15211A",
    inkSoft: "#4F5B52",
    line: "#E1D9C2",
    primary: "#0E5631",
    primarySoft: "#1B7A45",
    primaryInk: "#FBF8EE",
    accent: "#C77A2C",
    chip: "#EFE7D2",
  },
  editorial: {
    label: "Editorial mono",
    bg: "#F2F0EC",
    panel: "#FFFFFF",
    ink: "#111111",
    inkSoft: "#5A5A5A",
    line: "#E2DFD7",
    primary: "#111111",
    primarySoft: "#2A2A2A",
    primaryInk: "#FFFFFF",
    accent: "#1F8A3A",
    chip: "#E8E5DE",
  },
};

const HEADLINE_FONTS = {
  outfit: { label: "Outfit (sans amigable)", stack: '"Outfit", system-ui, sans-serif' },
  newsreader: { label: "Newsreader (editorial)", stack: '"Newsreader", "Times New Roman", serif' },
  instrument: { label: "Instrument Serif", stack: '"Instrument Serif", "Times New Roman", serif' },
  fraunces: { label: "DM Serif Display", stack: '"DM Serif Display", "Times New Roman", serif' },
};

// -- Helper: countdown -----------------------------------------------
const EVENT_DATE = new Date("2026-05-26T08:00:00-06:00");

function useCountdown(target) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const minutes = Math.floor((diff % 3600000) / 60000);
  const seconds = Math.floor((diff % 60000) / 1000);
  return { days, hours, minutes, seconds, done: diff === 0 };
}

// -- Nav -------------------------------------------------------------
function TopNav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    ['Foro', 'foro'],
    ['Agenda', 'agenda'],
    ['Ponentes', 'semblanzas'],
    ['Tu pregunta', 'pregunta'],
    ['Contacto', 'contacto'],
  ];
  return (
    <header className={"nav " + (scrolled ? 'nav--scrolled' : '')}>
      <div className="nav__inner">
        <a href="#foro" className="nav__brand">
          <img src="assets/canilec-logo.png" alt="CANILEC" className="nav__logo" />
          <span className="nav__brand-text">
            <span className="nav__brand-eyebrow">Canilec presenta</span>
            <span className="nav__brand-title">Foro Economía Circular<br /><span className="nav__brand-title-soft">del Sector Lácteo</span></span>
          </span>
        </a>
        <nav className="nav__links">
          {links.map(([label, id]) => (
            <a key={id} href={`#${id}`} className="nav__link">{label}</a>
          ))}
        </nav>
        <a href="#pregunta" className="btn btn--primary nav__cta">Enviar pregunta</a>
      </div>
    </header>
  );
}

// -- Hero ------------------------------------------------------------
function MilkSplash() {
  // Abstract organic decoration evoking a milk splash — built from primitives, not photo-recreation.
  return (
    <svg viewBox="0 0 1200 800" className="milk-splash" aria-hidden="true" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="ms-radial" cx="0.7" cy="0.4" r="0.7">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.18" />
          <stop offset="50%" stopColor="var(--accent)" stopOpacity="0.06" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </radialGradient>
        <linearGradient id="ms-wave" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--primary)" stopOpacity="0.10" />
          <stop offset="100%" stopColor="var(--primary)" stopOpacity="0.02" />
        </linearGradient>
      </defs>
      <ellipse cx="900" cy="320" rx="520" ry="380" fill="url(#ms-radial)" />
      <path d="M 0,640 C 200,580 400,700 600,640 C 800,580 1000,720 1200,660 L 1200,800 L 0,800 Z" fill="url(#ms-wave)" />
      <path d="M 0,720 C 240,680 480,760 720,700 C 960,640 1200,720 1200,720 L 1200,800 L 0,800 Z" fill="var(--accent)" fillOpacity="0.08" />
    </svg>
  );
}

function CircularGlyph({ size = 360 }) {
  // Original geometric mark: nested ring + dot, suggesting cycle/closure.
  // Not a logo recreation — built from primitives.
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} aria-hidden="true" className="glyph">
      <defs>
        <pattern id="diag" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" strokeWidth="1" opacity="0.35" />
        </pattern>
      </defs>
      {/* Outer arc with gap = openness */}
      <circle cx="100" cy="100" r="92" fill="none" stroke="currentColor" strokeWidth="1.2" opacity="0.45" />
      <path d="M 100 14 A 86 86 0 1 1 30 142" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
      {/* Arrow tip */}
      <path d="M 30 142 L 22 132 M 30 142 L 40 134" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
      {/* Inner stripe ring */}
      <circle cx="100" cy="100" r="62" fill="url(#diag)" stroke="currentColor" strokeWidth="0.8" opacity="0.55" />
      {/* Center */}
      <circle cx="100" cy="100" r="28" fill="currentColor" />
      <circle cx="100" cy="100" r="10" fill="var(--panel)" />
      {/* Tick marks */}
      {[0, 90, 180, 270].map(d => (
        <line key={d} x1="100" y1="6" x2="100" y2="14"
          stroke="currentColor" strokeWidth="2" strokeLinecap="round"
          transform={`rotate(${d} 100 100)`} />
      ))}
    </svg>
  );
}

function Hero({ tweaks }) {
  const cd = useCountdown(EVENT_DATE);
  return (
    <section id="foro" className={"hero hero--" + tweaks.heroLayout}>
      <MilkSplash />
      <div className="hero__grid">
        <div className="hero__content">
          <div className="eyebrow">
            <span className="eyebrow__dot" />
            <span>Foro · Ciudad de México · 26 de mayo, 2026</span>
          </div>
          <h1 className="hero__title">
            La <em>economía circular</em><br />
            en el <em>sector lácteo</em>.
          </h1>
          <p className="hero__sub">
            Cómo entender la nueva regulación y qué implica para la industria.
          </p>
          <div className="hero__meta">
            <div className="hero__meta-item">
              <span className="hero__meta-label">Fecha</span>
              <span className="hero__meta-value">Mar 26 May</span>
            </div>
            <div className="hero__meta-divider" />
            <div className="hero__meta-item">
              <span className="hero__meta-label">Horario</span>
              <span className="hero__meta-value">8:00 — 14:00</span>
            </div>
            <div className="hero__meta-divider" />
            <div className="hero__meta-item">
              <span className="hero__meta-label">Sede</span>
              <span className="hero__meta-value">Hotel Marquis Reforma · Salón Palacios</span>
            </div>
          </div>
          <div className="hero__ctas">
            <a href="#agenda" className="btn btn--primary btn--lg">Ver agenda</a>
            <a href="#pregunta" className="btn btn--ghost btn--lg">Enviar una pregunta</a>
          </div>
          <Countdown cd={cd} />
        </div>
        {tweaks.showCircularityGlyph && (
          <div className="hero__art">
            <div className="hero__logo-slot">
              <image-slot
                id="evento-logo"
                shape="rounded"
                radius="20"
                placeholder="Arrastra aquí el logo del evento"
              ></image-slot>
            </div>
          </div>
        )}
      </div>
      <Marquee />
    </section>
  );
}

function Countdown({ cd }) {
  const items = [
    { label: 'días', value: cd.days },
    { label: 'horas', value: cd.hours },
    { label: 'min', value: cd.minutes },
    { label: 'seg', value: cd.seconds },
  ];
  return (
    <div className="countdown">
      <span className="countdown__label mono">FALTAN</span>
      <div className="countdown__cells">
        {items.map((it, i) => (
          <React.Fragment key={it.label}>
            <div className="countdown__cell">
              <span className="countdown__value">{String(it.value).padStart(2, '0')}</span>
              <span className="countdown__unit mono">{it.label}</span>
            </div>
            {i < items.length - 1 && <span className="countdown__sep">·</span>}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Marquee() {
  const items = [
    "Ley General de Economía Circular",
    "Política pública",
    "Implementación sectorial",
    "Cadena de valor láctea",
    "Diálogo regulador-industria",
    "Rutas de cumplimiento",
    "Modelos viables y graduales",
  ];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        {[...items, ...items, ...items].map((t, i) => (
          <span key={i} className="marquee__item">
            <span className="marquee__bullet">◍</span> {t}
          </span>
        ))}
      </div>
    </div>
  );
}

// -- Detalles --------------------------------------------------------
function Details() {
  const mapUrl = "https://www.google.com/maps?q=Hotel+Marquis+Reforma+CDMX&output=embed";
  return (
    <section id="datos" className="section details">
      <div className="container details__grid">
        <div className="details__info">
          <SectionTag>Logística</SectionTag>
          <h2 className="section__title">Detalles del evento</h2>
          <dl className="details__dl">
            <div className="details__row">
              <dt>Fecha</dt>
              <dd><strong>Martes 26 de mayo, 2026</strong></dd>
            </div>
            <div className="details__row">
              <dt>Horario</dt>
              <dd>8:00 a 14:00 h <span className="muted">· Registro y networking desde 8:00</span></dd>
            </div>
            <div className="details__row">
              <dt>Sede</dt>
              <dd>
                Hotel Marquis Reforma · Salón Palacios
                <br />
                <span className="muted">Paseo de la Reforma 465, Cuauhtémoc, CDMX</span>
              </dd>
            </div>
            <div className="details__row">
              <dt>Formato</dt>
              <dd>Presencial · Cupo limitado · Sin costo</dd>
            </div>
          </dl>
          <div className="details__actions">
            <a className="btn btn--outline" target="_blank" rel="noopener"
              href="https://maps.app.goo.gl/hk9m3H4imThufgux9">
              Cómo llegar <span aria-hidden>↗</span>
            </a>
            <CalendarButton />
            <ShareButton />
          </div>
        </div>
        <div className="details__map">
          <iframe
            title="Mapa Hotel Marquis Reforma"
            src={mapUrl}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            allowFullScreen
          />
          <div className="details__map-caption mono">
            <span>HOTEL MARQUIS REFORMA</span>
            <span>19.4287° N · 99.1737° W</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function CalendarButton() {
  const start = "20260526T140000Z"; // 8 AM CDMX = 14 UTC
  const end = "20260526T200000Z";
  const text = encodeURIComponent("Foro: Economía Circular en el Sector Lácteo");
  const location = encodeURIComponent("Hotel Marquis Reforma, Salón Palacios, CDMX");
  const details = encodeURIComponent("Foro organizado por CANILEC para entender la nueva Ley General de Economía Circular y sus implicaciones para el sector lácteo.");
  const url = `https://www.google.com/calendar/render?action=TEMPLATE&text=${text}&dates=${start}/${end}&location=${location}&details=${details}`;
  return (
    <a className="btn btn--outline" href={url} target="_blank" rel="noopener">
      Agregar al calendario <span aria-hidden>＋</span>
    </a>
  );
}

function ShareButton() {
  const [copied, setCopied] = useState(false);
  const onClick = () => {
    const url = window.location.href;
    if (navigator.share) {
      navigator.share({ title: 'Foro Economía Circular del Sector Lácteo', url }).catch(() => {});
    } else {
      navigator.clipboard?.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    }
  };
  return (
    <button className="btn btn--outline" onClick={onClick}>
      {copied ? '¡Copiado!' : 'Compartir'} <span aria-hidden>{copied ? '✓' : '↗'}</span>
    </button>
  );
}

// -- Descripción -----------------------------------------------------
function Description() {
  return (
    <section id="acerca" className="section about">
      <div className="container about__grid">
        <div className="about__rail">
          <SectionTag>Acerca del foro</SectionTag>
          <div className="about__pulls">
            <div className="pull">
              <span className="pull__num">01</span>
              <span className="pull__text">Aterrizar conceptos de la ley.</span>
            </div>
            <div className="pull">
              <span className="pull__num">02</span>
              <span className="pull__text">Explicar los instrumentos de implementación.</span>
            </div>
            <div className="pull">
              <span className="pull__num">03</span>
              <span className="pull__text">Traducir lo regulatorio a la operación.</span>
            </div>
          </div>
        </div>
        <div className="about__body">
          <p className="about__lead">
            <em>Economía Circular en el Sector Lácteo</em> es un foro diseñado para
            ayudar a las empresas y actores de la cadena de valor a comprender con
            mayor claridad la nueva Ley General de Economía Circular y sus implicaciones
            para la industria.
          </p>
          <p>
            A través de una agenda didáctica y práctica, el encuentro busca aterrizar
            conceptos, explicar los principales instrumentos de implementación y
            traducir una regulación compleja en elementos comprensibles y útiles para
            el sector.
          </p>
          <p>
            El objetivo es que las y los asistentes no solo escuchen una explicación
            general de la ley, sino que puedan clarificar dudas, identificar retos
            reales, entender qué se espera del sector y salir con mayores certezas
            sobre las rutas de cumplimiento, las condiciones de implementación y los
            primeros pasos para avanzar hacia <strong>modelos de economía circular
            viables, graduales y técnicamente sustentados.</strong>
          </p>
        </div>
      </div>
    </section>
  );
}

// -- Agenda ----------------------------------------------------------
function Agenda() {
  const [openIdx, setOpenIdx] = useState(2); // open the first content session by default
  return (
    <section id="agenda" className="section agenda">
      <div className="container">
        <div className="section__head">
          <div>
            <SectionTag>Programa</SectionTag>
            <h2 className="section__title">Agenda del 26 de mayo</h2>
          </div>
          <p className="section__sub">
            Seis sesiones, una conversación. De la lógica regulatoria a los primeros
            pasos operativos en planta y cadena de valor.
          </p>
        </div>
        <ol className="timeline">
          {window.FORO_DATA.AGENDA.map((item, i) => (
            <AgendaItem
              key={i}
              item={item}
              idx={i}
              total={window.FORO_DATA.AGENDA.length}
              open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
            />
          ))}
        </ol>
      </div>
    </section>
  );
}

function AgendaItem({ item, idx, total, open, onToggle }) {
  return (
    <li className={"timeline__item " + (open ? 'is-open' : '')}>
      <div className="timeline__rail">
        <span className="timeline__dot" />
        {idx < total - 1 && <span className="timeline__line" />}
      </div>
      <button className="timeline__card" onClick={onToggle} aria-expanded={open}>
        <div className="timeline__head">
          <div className="timeline__time mono">{item.time}</div>
          <div className="timeline__type-tag">{item.type}</div>
          <span className="timeline__chevron" aria-hidden>{open ? '−' : '+'}</span>
        </div>
        <h3 className="timeline__title">{item.title}</h3>
        {item.subtitle && <p className="timeline__sub">{item.subtitle}</p>}
        <div className="timeline__body" style={{ display: open ? 'block' : 'none' }}>
          {item.body && <p className="timeline__desc">{item.body}</p>}
          {item.speakers.length > 0 && (
            <ul className="timeline__speakers">
              {item.speakers.map((s, j) => (
                <li key={j} className="speaker-line">
                  <span className="speaker-line__name">{s.name}</span>
                  {s.role && <span className="speaker-line__role">{s.role}</span>}
                </li>
              ))}
            </ul>
          )}
          {item.presidium && item.presidium.length > 0 && (
            <>
              <div className="timeline__subhead mono">Presídium</div>
              <ul className="timeline__speakers timeline__speakers--small">
                {item.presidium.map((s, j) => (
                  <li key={j} className="speaker-line">
                    <span className="speaker-line__name">{s.name}</span>
                    {s.role && <span className="speaker-line__role">{s.role}</span>}
                  </li>
                ))}
              </ul>
            </>
          )}
        </div>
      </button>
    </li>
  );
}

// -- Semblanzas ------------------------------------------------------
function Speakers() {
  const [activeIdx, setActiveIdx] = useState(-1);
  const speakers = window.FORO_DATA.SPEAKERS;
  const active = activeIdx >= 0 ? speakers[activeIdx] : null;

  useEffect(() => {
    if (active) {
      document.body.style.overflow = 'hidden';
      const onKey = (e) => { if (e.key === 'Escape') setActiveIdx(-1); };
      window.addEventListener('keydown', onKey);
      return () => {
        document.body.style.overflow = '';
        window.removeEventListener('keydown', onKey);
      };
    }
  }, [active]);

  const go = (delta) => {
    const next = (activeIdx + delta + speakers.length) % speakers.length;
    setActiveIdx(next);
  };

  return (
    <section id="semblanzas" className="section speakers">
      <div className="container">
        <div className="section__head">
          <div>
            <SectionTag>Quiénes participan</SectionTag>
            <h2 className="section__title">Voces del foro</h2>
          </div>
          <p className="section__sub">
            Una mesa con gobierno, gremio, industria y especialistas técnicos.
            Da clic en cada tarjeta para leer la semblanza completa.
          </p>
        </div>
        <div className="speakers__grid">
          {speakers.map((s, i) => (
            <article key={i} className="speaker-card" onClick={() => setActiveIdx(i)} tabIndex="0"
              onKeyDown={(e) => { if (e.key === 'Enter') setActiveIdx(i); }}>
              <div className="speaker-card__top">
                <span className="speaker-card__num mono">{String(i + 1).padStart(2, '0')}</span>
                <span className="speaker-card__counter mono">de {String(speakers.length).padStart(2, '0')}</span>
              </div>
              <div className="speaker-card__body">
                <h3 className="speaker-card__name">{s.name}</h3>
                <p className="speaker-card__role">{s.role}</p>
                <p className="speaker-card__org mono">{s.org}</p>
                {s.bio && (
                  <span className="speaker-card__more mono">
                    Ver semblanza <span aria-hidden>→</span>
                  </span>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
      {active && (
        <div className="speaker-modal" onClick={() => setActiveIdx(-1)}>
          <div className="speaker-modal__inner" onClick={(e) => e.stopPropagation()}>
            <button className="speaker-modal__close" onClick={() => setActiveIdx(-1)} aria-label="Cerrar">
              <span aria-hidden>✕</span>
            </button>
            <div className="speaker-modal__nav">
              <button onClick={() => go(-1)} aria-label="Anterior">←</button>
              <span className="mono">{String(activeIdx + 1).padStart(2, '0')} / {String(speakers.length).padStart(2, '0')}</span>
              <button onClick={() => go(1)} aria-label="Siguiente">→</button>
            </div>
            <div className="speaker-modal__body">
              <span className="speaker-modal__counter mono">{String(activeIdx + 1).padStart(2, '0')} de {String(speakers.length).padStart(2, '0')}</span>
              <h3 className="speaker-modal__name">{active.name}</h3>
              <p className="speaker-modal__role">{active.role}</p>
              <p className="speaker-modal__org mono">{active.org}</p>
              <div className="speaker-modal__bio">
                {active.bio.split('\n\n').map((para, i) => <p key={i}>{para}</p>)}
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

// -- Tu Pregunta -----------------------------------------------------
const FORM_URL = "https://docs.google.com/forms/d/e/1FAIpQLScYIA9hZL3vPlhNt0cMZiIqhNPjXwVGcsie4wuPOza8nvusuQ/viewform";
const FORM_EMBED_URL = FORM_URL + "?embedded=true";

function Question() {
  return (
    <section id="pregunta" className="section question">
      <div className="container question__grid">
        <aside className="question__aside">
          <SectionTag inverted>Tu pregunta</SectionTag>
          <h2 className="section__title section__title--inverted">
            ¿Qué te gustaría que se <em>aborde</em> durante el foro?
          </h2>
          <p className="question__lead">
            Antes del 26 de mayo, compártenos la duda o inquietud que quisieras
            que se discuta. Las recibimos directamente el equipo organizador y
            las consideramos al preparar las sesiones.
          </p>
          <ul className="question__bullets">
            <li><span className="mono">01</span> Llena el formulario corto.</li>
            <li><span className="mono">02</span> Recibimos tu pregunta de forma privada.</li>
            <li><span className="mono">03</span> La consideramos al curar el contenido del foro.</li>
          </ul>
          <a className="btn btn--primary btn--lg question__cta-external" href={FORM_URL} target="_blank" rel="noopener">
            Abrir formulario en pestaña nueva <span aria-hidden>↗</span>
          </a>
          <div className="question__contact mono">
            ¿Prefieres escribir por correo?{' '}
            <a href="mailto:ilopez@canilec.org.mx">ilopez@canilec.org.mx</a>
          </div>
        </aside>
        <div className="question__form-wrap">
          <div className="question__form-bar mono">
            <span className="question__form-bar-dot" />
            <span>FORMULARIO · GOOGLE FORMS</span>
          </div>
          <iframe
            title="Formulario de preguntas"
            src={FORM_EMBED_URL}
            className="question__iframe"
            loading="lazy"
          >Cargando…</iframe>
        </div>
      </div>
    </section>
  );
}

// -- FAQ -------------------------------------------------------------
function FAQSection() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section faq">
      <div className="container faq__grid">
        <div className="faq__head">
          <SectionTag>FAQ</SectionTag>
          <h2 className="section__title">Preguntas frecuentes</h2>
          <p className="section__sub">
            Si tienes una duda específica, escríbenos a{' '}
            <a href="mailto:ilopez@canilec.org.mx">ilopez@canilec.org.mx</a>.
          </p>
        </div>
        <ul className="faq__list">
          {window.FORO_DATA.FAQ.map((f, i) => (
            <li key={i} className={"faq__item " + (open === i ? 'is-open' : '')}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="faq__q-num mono">{String(i + 1).padStart(2, '0')}</span>
                <span className="faq__q-text">{f.q}</span>
                <span className="faq__q-chev" aria-hidden>{open === i ? '−' : '+'}</span>
              </button>
              {open === i && <div className="faq__a">{f.a}</div>}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// -- Contacto / Footer ----------------------------------------------
function Contact() {
  return (
    <section id="contacto" className="section contact">
      <div className="container contact__grid">
        <div className="contact__main">
          <SectionTag>Contacto</SectionTag>
          <h2 className="section__title">Hablemos antes del foro.</h2>
          <p className="contact__lead">
            Para registro, prensa, semblanzas y logística general, puedes escribirnos
            directamente.
          </p>
        </div>
        <div className="contact__cards">
          <a className="contact-card" href="mailto:ilopez@canilec.org.mx">
            <span className="contact-card__tag mono">CANILEC · Coordinación</span>
            <span className="contact-card__email">ilopez@canilec.org.mx</span>
            <span className="contact-card__cta">Escribir <span aria-hidden>→</span></span>
          </a>
          <a className="contact-card" href="mailto:alejandra@psiquepol.com">
            <span className="contact-card__tag mono">Psiquepol · Operación</span>
            <span className="contact-card__email">alejandra@psiquepol.com</span>
            <span className="contact-card__cta">Escribir <span aria-hidden>→</span></span>
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="container foot__grid">
        <div className="foot__brand">
          <img src="assets/canilec-logo.png" alt="CANILEC" className="foot__logo" />
          <div className="foot__brand-text">
            <strong>Cámara Nacional de Industriales de la Leche</strong>
            <span className="muted">CANILEC · México</span>
          </div>
        </div>
        <div className="foot__cols">
          <div className="foot__col">
            <h4 className="mono">Foro</h4>
            <ul>
              <li><a href="#foro">Inicio</a></li>
              <li><a href="#agenda">Agenda</a></li>
              <li><a href="#semblanzas">Ponentes</a></li>
              <li><a href="#pregunta">Tu pregunta</a></li>
            </ul>
          </div>
          <div className="foot__col">
            <h4 className="mono">Contacto</h4>
            <ul>
              <li><a href="mailto:ilopez@canilec.org.mx">ilopez@canilec.org.mx</a></li>
              <li><a href="mailto:alejandra@psiquepol.com">alejandra@psiquepol.com</a></li>
            </ul>
          </div>
          <div className="foot__col">
            <h4 className="mono">Sede</h4>
            <ul>
              <li>Hotel Marquis Reforma</li>
              <li>Salón Palacios</li>
              <li>Mar 26 May, 8:00–14:00</li>
            </ul>
          </div>
        </div>
      </div>
      <div className="foot__bar">
        <span className="mono">© 2026 CANILEC · Foro Economía Circular del Sector Lácteo</span>
        <span className="mono foot__bar-meta">Edición 01 · CDMX</span>
      </div>
    </footer>
  );
}

// -- Section utilities -----------------------------------------------
function SectionTag({ children, inverted }) {
  return (
    <span className={"section-tag mono " + (inverted ? 'section-tag--inv' : '')}>
      <span className="section-tag__dot" /> {children}
    </span>
  );
}

// -- Tweaks ----------------------------------------------------------
function ForoTweaks() {
  const [t, setTweak] = useTweaks(FORO_TWEAK_DEFAULTS);

  // Apply palette + headline font to CSS variables
  useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES.canilec;
    const root = document.documentElement;
    Object.entries(p).forEach(([k, v]) => {
      if (k === 'label') return;
      root.style.setProperty('--' + k, v);
    });
    root.style.setProperty('--headline-font', HEADLINE_FONTS[t.headlineFont]?.stack || HEADLINE_FONTS.newsreader.stack);
  }, [t.palette, t.headlineFont]);

  return (
    <>
      <App tweaks={t} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta">
          <PaletteSwatchPicker
            label="Tema"
            value={t.palette}
            onChange={(v) => setTweak('palette', v)}
            options={Object.keys(PALETTES).map(k => ({
              value: k,
              label: PALETTES[k].label,
              colors: [PALETTES[k].primary, PALETTES[k].bg, PALETTES[k].accent],
            }))}
          />
        </TweakSection>
        <TweakSection label="Tipografía de titulares">
          <TweakSelect
            label="Familia"
            value={t.headlineFont}
            onChange={(v) => setTweak('headlineFont', v)}
            options={Object.entries(HEADLINE_FONTS).map(([k, v]) => ({ value: k, label: v.label }))}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakRadio
            label="Layout"
            value={t.heroLayout}
            onChange={(v) => setTweak('heroLayout', v)}
            options={[
              { value: 'stack', label: 'Apilado' },
              { value: 'split', label: 'Dividido' },
            ]}
          />
          <TweakToggle
            label="Glifo de circularidad"
            value={t.showCircularityGlyph}
            onChange={(v) => setTweak('showCircularityGlyph', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// PaletteSwatchPicker (renamed to avoid clobbering the panel's global TweakColor)
function PaletteSwatchPicker({ label, value, onChange, options }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: 0.5 }}>{label}</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
        {options.map(opt => (
          <button
            key={opt.value}
            onClick={() => onChange(opt.value)}
            style={{
              background: 'rgba(255,255,255,0.06)',
              border: value === opt.value ? '1.5px solid #fff' : '1px solid rgba(255,255,255,0.15)',
              borderRadius: 8,
              padding: 8,
              cursor: 'pointer',
              color: '#fff',
              fontSize: 11,
              textAlign: 'left',
              display: 'flex',
              flexDirection: 'column',
              gap: 6,
            }}
          >
            <div style={{ display: 'flex', gap: 3, height: 18 }}>
              {opt.colors.map((c, i) => (
                <div key={i} style={{ flex: 1, background: c, borderRadius: 3 }} />
              ))}
            </div>
            <span>{opt.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

// -- App -------------------------------------------------------------
function App({ tweaks }) {
  return (
    <div className="site">
      <TopNav />
      <main>
        <Hero tweaks={tweaks} />
        <Details />
        <Description />
        <Agenda />
        <Speakers />
        <Question />
        <FAQSection />
        <Contact />
      </main>
      <Footer />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ForoTweaks />);