/* global React, LogoMark */
const { useState } = React;

const NAV_ITEMS = [
  { id: "home", label: "Accueil" },
  { id: "lineup", label: "Line-up" },
  { id: "infos", label: "Infos" },
  { id: "tickets", label: "Billetterie" },
  { id: "contact", label: "Contact" },
];

function Nav({ page, setPage }) {
  const [open, setOpen] = useState(false);
  const go = (id) => { setPage(id); setOpen(false); window.scrollTo({ top: 0, behavior: "instant" }); };
  return (
    <>
      <nav className="nav">
        <div className="nav-inner">
          <button className="nav-logo" onClick={() => go("home")} style={{ background: "transparent", padding: 0, height: 88, display: "flex", alignItems: "center" }} aria-label="Summer Sky — Accueil">
            <LogoMark size={140} />
          </button>
          <div className="nav-links">
            {NAV_ITEMS.map((it) => (
              <button key={it.id}
                className={`nav-link ${page === it.id ? "active" : ""}`}
                onClick={() => go(it.id)}
              >
                {it.label}
              </button>
            ))}
          </div>
          <button className="btn btn-pink nav-cta" onClick={() => go("tickets")}>
            Acheter mon billet
            <span aria-hidden="true">→</span>
          </button>
          <button className="nav-burger" onClick={() => setOpen(true)} aria-label="Menu">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M3 6h14M3 10h14M3 14h14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            </svg>
          </button>
        </div>
      </nav>

      <div className={`mobile-menu ${open ? "open" : ""}`}>
        <div className="mobile-menu-header">
          <div className="nav-logo" style={{ height: 72, display: "flex", alignItems: "center" }}>
            <LogoMark size={88} />
          </div>
          <button className="nav-burger" onClick={() => setOpen(false)} aria-label="Fermer">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            </svg>
          </button>
        </div>
        <div className="mobile-menu-list">
          {NAV_ITEMS.map((it) => (
            <button key={it.id} onClick={() => go(it.id)}>{it.label} →</button>
          ))}
        </div>

<div style={{ paddingBottom: 30 }}>
          <button className="btn btn-pink" style={{ width: "100%", justifyContent: "center" }} onClick={() => go("tickets")}>
            Acheter mon billet
          </button>
        </div>
      </div>
    </>
  );
}

function Footer({ setPage }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-top">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <LogoMark size={140} />
            </div>
            <p style={{ marginTop: 16, opacity: 0.85, maxWidth: 320, lineHeight: 1.6, fontSize: 14 }}>
              Le festival d'été qui mélange piscine, soleil et basses lourdes — au Plongeoir du Pôle Européen, près du Mans.
            </p>
            <div style={{ marginTop: 20, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.12em", color: "var(--sun-3)" }}>
              20.06.2026 · 11H — 23H
            </div>
          </div>
          <div>
            <h4>Naviguer</h4>
            <ul>
              {NAV_ITEMS.map((it) => (
                <li key={it.id} onClick={() => { setPage(it.id); window.scrollTo({ top: 0 }); }}>{it.label}</li>
              ))}
            </ul>
          </div>
          <div>
            <h4>L'événement</h4>
            <ul>
              <li>Plongeoir du Pôle Européen</li>
              <li>Yvré-l'Évêque, 72 530</li>
              <li>Sarthe · Pays de la Loire</li>
              <li>10 min du Mans</li>
            </ul>
          </div>
          <div>
            <h4>Suivre</h4>
            <ul>
              <li><a href="https://www.instagram.com/summersky.off" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>Instagram</a></li>
              <li><a href="https://www.tiktok.com/@summersky.off" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>TikTok</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-big">SUMMER<em>·</em>SKY</div>
        <div className="footer-bottom">
          <div>© 2026 Summer Sky Festival · Tous droits réservés</div>
          <div>Site créé par <a href="mailto:guillaumetibumpro@gmail.com" style={{ color: "var(--sun-3)", textDecoration: "none", fontWeight: 700 }}>Guillaume Tibum</a> ☼</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer });