// About, Motion (YouTube), Services, Shop, Contact footer
const { useState: useStateS } = React;

function BioProse() {
  return (
    <div className="bio bio--prose mono">
      <p>
        Mapa López es creadora audiovisual especializada en la construcción de narrativas visuales y sonoras que combinan dirección, edición, fotografía y diseño sonoro. Su práctica integra lo técnico y lo creativo para dar forma a piezas donde la imagen, el cuerpo y el contexto dialogan de manera constante.
      </p>
      <p>
        Desarrolla proyectos colaborativos con un enfoque sensible y contemporáneo, explorando la estética, la memoria y las dinámicas sociales como ejes narrativos. Desde la dirección y la producción hasta el diseño visual, su trabajo busca crear piezas coherentes, expresivas y adaptables a distintos formatos y plataformas.
      </p>
    </div>
  );
}

function BioFragments() {
  return (
    <div className="bio bio--fragments mono">
      <p className="bio__frag">Creadora audiovisual. Dirección, edición, fotografía y diseño sonoro.</p>
      <p className="bio__frag">Narrativas visuales y sonoras donde la imagen, el cuerpo y el contexto dialogan.</p>
      <p className="bio__frag">Enfoque sensible, contemporáneo. Estética, memoria y dinámicas sociales como ejes.</p>
      <p className="bio__frag">Piezas coherentes, adaptables a distintos formatos y plataformas.</p>
    </div>
  );
}

function BioIndex() {
  return (
    <div className="bio bio--index mono">
      <div className="bio__item">
        <span className="bio__n muted">01 / PRÁCTICA</span>
        <p>
          Creadora audiovisual especializada en narrativas visuales y sonoras que combinan dirección, edición, fotografía y diseño sonoro. Integra lo técnico y lo creativo para dar forma a piezas donde la imagen, el cuerpo y el contexto dialogan.
        </p>
      </div>
      <div className="bio__item">
        <span className="bio__n muted">02 / ENFOQUE</span>
        <p>
          Proyectos colaborativos con una mirada sensible y contemporánea. Estética, memoria y dinámicas sociales como ejes narrativos. Desde la dirección hasta el diseño visual, un trabajo expresivo y adaptable.
        </p>
      </div>
    </div>
  );
}

function BioDropcap() {
  return (
    <div className="bio bio--dropcap">
      <p className="bio__lede serif">
        <span className="bio__cap">M</span>apa López es creadora audiovisual especializada en la construcción de narrativas visuales y sonoras que combinan dirección, edición, fotografía y diseño sonoro. Su práctica integra lo técnico y lo creativo para dar forma a piezas donde la imagen, el cuerpo y el contexto dialogan de manera constante.
      </p>
      <p className="bio__body mono">
        Desarrolla proyectos colaborativos con un enfoque sensible y contemporáneo, explorando la estética, la memoria y las dinámicas sociales como ejes narrativos. Desde la dirección y la producción hasta el diseño visual, su trabajo busca crear piezas coherentes, expresivas y adaptables a distintos formatos y plataformas.
      </p>
    </div>
  );
}

function About() {
  const variant = (typeof document !== "undefined" && document.documentElement.dataset.bio) || "prose";
  const [, forceRender] = useStateS(0);

  // re-render when [data-bio] changes on <html>
  React.useEffect(() => {
    const obs = new MutationObserver(() => forceRender((n) => n + 1));
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-bio"] });
    return () => obs.disconnect();
  }, []);

  const current = document.documentElement.dataset.bio || "prose";
  const Body = {
    prose:     BioProse,
    fragments: BioFragments,
    index:     BioIndex,
    dropcap:   BioDropcap,
  }[current] || BioProse;

  return (
    <section className="about" id="about" data-screen-label="ABOUT">
      <div className="about__head mono">
        <span className="strip__label">SOBRE MÍ</span>
      </div>
      <div className="about__body">
        <p className="about__lead serif">
          Una década documentando el pulso de la música y la memoria colectiva de América Latina.
        </p>
        <div className="about__cols mono">
          <div>
            <div className="muted">BIO</div>
            <Body />
          </div>
        </div>
      </div>
    </section>
  );
}

function Motion({ items }) {
  const [active, setActive] = useStateS(null);
  return (
    <section className="motion" id="motion" data-screen-label="MOTION">
      <header className="strip__head">
        <div className="strip__meta mono">
          <span className="strip__label">CINE / VIDEO</span>
        </div>
      </header>
      <div className="motion__grid">
        {items.map((v, i) => (
          <article className="motion__card" key={v.id} onClick={() => setActive(v)}>
            <div className="motion__thumb">
              <img
                src={`https://img.youtube.com/vi/${v.id}/maxresdefault.jpg`}
                onError={(e) => { e.target.src = `https://img.youtube.com/vi/${v.id}/hqdefault.jpg`; }}
                alt={v.title}
              />
              <div className="motion__play">▶ REPRODUCIR</div>
              <span className="motion__dur mono">{v.dur}</span>
            </div>
            <div className="motion__meta mono">
              <span>{String(i + 1).padStart(2, "0")} · {v.title}</span>
              <span className="muted">{v.year}</span>
            </div>
          </article>
        ))}
      </div>
      {active && (
        <div className="motion__player" onClick={() => setActive(null)}>
          <div className="motion__player-inner" onClick={(e) => e.stopPropagation()}>
            <iframe
              src={`https://www.youtube.com/embed/${active.id}?autoplay=1`}
              title={active.title}
              allow="autoplay; encrypted-media"
              allowFullScreen
            />
            <button className="lightbox__close" onClick={() => setActive(null)}>CERRAR ✕</button>
          </div>
        </div>
      )}
    </section>
  );
}

function Services() {
  const items = [
    { n: "01", t: "DOCUMENTAL", d: "Reportaje fotográfico y audiovisual de largo aliento." },
    { n: "02", t: "CONCIERTO & GIRA", d: "Cobertura de tour para artistas y sellos." },
    { n: "03", t: "RETRATO EDITORIAL", d: "Revistas, campañas y portadas discográficas." },
  ];
  return (
    <section className="services" id="services" data-screen-label="SERVICES">
      <header className="strip__head">
        <div className="strip__meta mono">
          <span className="strip__label">SERVICIOS</span>
        </div>
        <a className="mono link" href="#contact">ESCRIBIR →</a>
      </header>
      <div className="services__list">
        {items.map((it) => (
          <article className="services__row" key={it.n}>
            <span className="mono muted services__n">{it.n}</span>
            <h3 className="services__t serif">{it.t}</h3>
            <p className="services__d mono">{it.d}</p>
            <span className="services__arrow mono">→</span>
          </article>
        ))}
      </div>
    </section>
  );
}

function Shop({ items }) {
  return (
    <section className="shop" id="shop" data-screen-label="SHOP">
      <header className="strip__head">
        <div className="strip__meta mono">
          <span className="strip__label">TIENDA · EDICIÓN LIMITADA</span>
        </div>
      </header>
      <div className="shop__grid">
        {items.map((p, i) => (
          <article className="shop__card" key={i}>
            <div className="shop__img">
              <img src={p.src} alt={p.title} loading="lazy" />
            </div>
            <div className="shop__meta mono">
              <div className="shop__row">
                <span>{String(i + 1).padStart(2, "0")} · {p.title}</span>
                <span>{p.price}</span>
              </div>
              <div className="shop__row muted">
                <span>{p.edition} · {p.size}</span>
                <a href="#" className="link">AÑADIR →</a>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="contact" data-screen-label="CONTACT">
      <div className="footer__head mono">
        <span className="strip__label">CONTACTO</span>
      </div>
      <div className="footer__grid">
        <h2 className="footer__big serif">
          ¿Un proyecto en mente?<br/>
          <em>Conversemos.</em>
        </h2>
        <div className="footer__cols mono">
          <div>
            <div className="muted">DIRECTO</div>
            <p><a className="link" href="mailto:hola@mapalopez.mx">hola@mapalopez.mx</a></p>
          </div>
          <div>
            <div className="muted">SOCIAL</div>
            <p>
              <a className="link" href="https://instagram.com/mapalopez" target="_blank" rel="noopener">INSTAGRAM ↗</a><br/>
              <a className="link" href="https://youtube.com/@mapalopez" target="_blank" rel="noopener">YOUTUBE ↗</a><br/>
              <a className="link" href="https://wa.me/5215555555555" target="_blank" rel="noopener">WHATSAPP ↗</a>
            </p>
          </div>
        </div>
      </div>
      <div className="footer__bottom mono muted">
        <span>© 2016–2026 MAPA LÓPEZ</span>
        <span>SITE v1.0 · CDMX</span>
      </div>
    </footer>
  );
}

window.About = About;
window.Motion = Motion;
window.Services = Services;
window.Shop = Shop;
window.Footer = Footer;
