/* global React, PapelPicado, Marigold, CornerFlora, Chip */
// sections.jsx — page sections for Día de Muertos Málaga

const { useState } = React;

/* ============ NAV ============ */
const NAV_LINKS = [
  ['mesa', 'Mesa Redonda'],
  ['programa', 'Programa'],
  ['convocatoria', 'Convocatoria'],
  ['colaboradores', 'Colaboradores'],
  ['contacto', 'Contacto'],
];

function Nav({ active }) {
  const [open, setOpen] = useState(false);
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a href="#inicio" className="brand">
          <span className="brand-mark"><Marigold size={34} /></span>
          <span className="brand-txt">
            <strong>Día de Muertos</strong>
            <em>Málaga · 2026</em>
          </span>
        </a>
        <nav className={`nav-links ${open ? 'open' : ''}`} onClick={() => setOpen(false)}>
          {NAV_LINKS.map(([id, label]) => (
            <a key={id} href={`#${id}`} className={active === id ? 'active' : ''}>{label}</a>
          ))}
          <a href="#convocatoria" className="btn btn-primary nav-cta">Participar</a>
        </nav>
        <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="Menú">
          <span /><span /><span />
        </button>
      </div>
    </header>
  );
}

/* ============ HERO ============ */
function Hero({ heroStyle }) {
  return (
    <section id="inicio" className={`hero hero-img hero-${heroStyle}`}>
      <img className="hero-bg" src="catrina-hero.png" alt="Catrina mexicana rodeada de cempasúchil, papel picado y velas" />
      <div className="hero-veil" aria-hidden="true" />

      <div className="wrap hero-inner">
        <p className="kicker solo">Otoño 2026</p>
        <h1 className="hero-title">
          <span className="line l1">Día de</span>
          <span className="line l2">Muertos</span>
          <span className="line l3">Málaga</span>
        </h1>
        <p className="hero-sub">
          Una celebración de la vida y la memoria en el corazón de Málaga:
          exposición de arte, altares y una mesa redonda en torno a la
          tradición mexicana del Día de Muertos.
        </p>
        <div className="hero-actions">
          <a href="#convocatoria" className="btn btn-primary">Convocatoria de artistas</a>
          <a href="#programa" className="btn btn-ghost">Ver programa</a>
        </div>
      </div>

      <div className="hero-meta-bar">
        <div className="wrap hero-meta">
          <div className="hm"><span className="hm-k">Exposición</span><span className="hm-v">Fechas por confirmar</span></div>
          <div className="hm-div" />
          <div className="hm"><span className="hm-k">Mesa redonda</span><span className="hm-v">Fecha por confirmar</span></div>
          <div className="hm-div" />
          <div className="hm"><span className="hm-k">Lugar</span><span className="hm-v">Málaga · Sede por confirmar</span></div>
        </div>
      </div>
    </section>
  );
}

/* ============ generic section header ============ */
function Head({ id, kicker, title, intro }) {
  return (
    <div className="section-head reveal">
      <p className="kicker">{kicker}</p>
      <h2>{title}</h2>
      {intro && <p>{intro}</p>}
    </div>
  );
}

/* ============ MESA REDONDA ============ */
function Mesa() {
  return (
    <section id="mesa" className="section section-alt">
      <CornerFlora pos="bl" />
      <div className="wrap mesa-grid">
        <div>
          <Head kicker="Mesa Redonda" title="Conversación viva"
            intro="Un encuentro abierto al público para hablar de la tradición del Día de Muertos, su significado y su diálogo con la cultura andaluza." />
          <ul className="feature-list">
            <li><Chip tone="c1" icon="mic" /><div><h3>Ponentes</h3><p>Artistas, especialistas en cultura mexicana y mediadores culturales. (Por confirmar)</p></div></li>
            <li><Chip tone="c3" icon="clock" /><div><h3>Duración</h3><p>Aproximadamente 90 minutos, seguidos de un turno de preguntas del público.</p></div></li>
            <li><Chip tone="c4" icon="hand" /><div><h3>Entrada</h3><p>Acceso libre hasta completar aforo. Detalles de reserva por confirmar.</p></div></li>
          </ul>
        </div>
        <aside className="mesa-card reveal">
          <div className="mesa-card-top">
            <span className="kicker solo">El encuentro</span>
            <h3>Memoria, color y comunidad</h3>
          </div>
          <p>La mesa redonda invita a reflexionar sobre cómo el Día de Muertos
            celebra la vida a través del recuerdo, y cómo esta tradición resuena
            en una ciudad mediterránea como Málaga.</p>
          <div className="mesa-info">
            <div><span>Fecha</span><strong>Por confirmar</strong></div>
            <div><span>Hora</span><strong>Por confirmar</strong></div>
            <div><span>Lugar</span><strong>Sede en Málaga</strong></div>
          </div>
        </aside>
      </div>
    </section>
  );
}

/* ============ PROGRAMA ============ */
function Programa() {
  const items = [
    ['c2', 'box', 'Inauguración', 'Apertura de la exposición y recorrido por las obras.', 'Día 1'],
    ['c5', 'skull', 'Altar de muertos', 'Montaje colectivo del altar tradicional con ofrendas.', 'Día 1'],
    ['c1', 'mic', 'Mesa redonda', 'Conversación con ponentes y turno de preguntas.', 'Día 2'],
    ['c3', 'palette', 'Visitas guiadas', 'Recorridos comentados por la muestra.', 'Durante la exposición'],
  ];
  return (
    <section id="programa" className="section">
      <div className="wrap">
        <Head kicker="Programa" title="Días y actividades"
          intro="Estructura provisional del programa. Las fechas y horarios se confirmarán próximamente." />
        <ol className="timeline">
          {items.map(([tone, icon, t, d, when], i) => (
            <li key={i} className="reveal" style={{ transitionDelay: `${i * 70}ms` }}>
              <Chip tone={tone} icon={icon} />
              <div className="tl-body">
                <span className="tl-when">{when}</span>
                <h3>{t}</h3>
                <p>{d}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ============ CONVOCATORIA ============ */
function Convocatoria() {
  const steps = [
    ['c4', 'doc', 'Lee las bases', 'Consulta los requisitos de participación y las categorías admitidas.'],
    ['c2', 'palette', 'Prepara tu obra', 'Obra original relacionada con la temática del Día de Muertos.'],
    ['c5', 'mail', 'Envía tu propuesta', 'Remite tu dossier dentro del plazo establecido.'],
  ];
  return (
    <section id="convocatoria" className="section section-call">
      <CornerFlora pos="tr" />
      <div className="wrap">
        <Head kicker="Convocatoria" title="Llamada a artistas"
          intro="Buscamos obra original que dialogue con la festividad mexicana del Día de Muertos. Si eres artista, te invitamos a participar." />
        <div className="steps">
          {steps.map(([tone, icon, t, d], i) => (
            <article key={i} className="step reveal" style={{ transitionDelay: `${i * 80}ms` }}>
              <span className="step-n">{i + 1}</span>
              <Chip tone={tone} icon={icon} />
              <h3>{t}</h3>
              <p>{d}</p>
            </article>
          ))}
        </div>
        <div className="call-cta reveal">
          <div>
            <h3>Plazo y bases por confirmar</h3>
            <p>Cuando me envíes las bases oficiales, las integro aquí con su documento descargable y el formulario de inscripción.</p>
          </div>
          <a href="#contacto" className="btn btn-primary">Quiero participar</a>
        </div>
      </div>
    </section>
  );
}

/* ============ COLABORADORES ============ */
function Colaboradores() {
  return (
    <section id="colaboradores" className="section section-alt">
      <div className="wrap">
        <Head kicker="Colaboradores" title="Quienes lo hacen posible"
          intro="Entidades e instituciones que apoyan esta celebración. (Logotipos por añadir)" />
        <div className="logos">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="logo-ph"><span>Logo {i + 1}</span></div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CONTACTO / FOOTER ============ */
function Contacto() {
  return (
    <footer id="contacto" className="footer">
      <PapelPicado panels={16} seed={2} />
      <div className="wrap footer-inner">
        <div className="footer-brand">
          <Marigold size={60} />
          <h3>Día de Muertos<br />Mexicano en Málaga</h3>
          <p>Una celebración de la vida, la memoria y el arte.</p>
        </div>
        <div className="footer-col">
          <span className="kicker solo">Contacto</span>
          <p><a href="mailto:info@example.com">info@example.com</a></p>
          <p>Málaga, España</p>
        </div>
        <div className="footer-col">
          <span className="kicker solo">Secciones</span>
          {NAV_LINKS.map(([id, label]) => (<p key={id}><a href={`#${id}`}>{label}</a></p>))}
        </div>
      </div>
      <div className="wrap footer-base">
        <span>© 2026 · Día de Muertos Mexicano en Málaga</span>
        <span>Marcador de posición — información pendiente de confirmar</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Mesa, Programa, Convocatoria, Colaboradores, Contacto, NAV_LINKS });
