// Shell
const { useState: useState_sh, useEffect: useEffect_sh } = React;
const { Link, Btn, useRoute, OFFICES } = window;

function Logo({ inverted = false }) {
  return (
    <Link to="/" className="lx-logo" aria-label="Accueil Clyvonna">
      <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="12" r="11" fill="none" stroke={inverted ? "#F2EDE4" : "#0F0F0E"} strokeWidth="1.5" />
        <path d="M5 12 L12 5 L19 12" fill="none" stroke={inverted ? "#F2EDE4" : "#0F0F0E"} strokeWidth="1.5" />
        <circle cx="12" cy="12" r="3" fill="oklch(88% 0.21 128)" />
      </svg>
      <span style={{ display: "inline-flex", gap: 0 }}>
        Clyvonna
        <span style={{ color: "var(--acid-deep)", marginLeft: 1, fontStyle: "italic" }}>.</span>
      </span>
    </Link>
  );
}

function ClockBadge() {
  const [t, setT] = useState_sh("");
  useEffect_sh(() => {
    const upd = () => {
      const d = new Date();
      const opts = { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: "America/Chicago" };
      setT(d.toLocaleTimeString("fr-FR", opts) + " CT");
    };
    upd();
    const id = setInterval(upd, 30000);
    return () => clearInterval(id);
  }, []);
  return <span className="nav-time">{t} · Cedar Rapids</span>;
}

function Nav() {
  const { path } = useRoute();
  const [open, setOpen] = useState_sh(false);
  const isDark = path === "/platform" || path === "/login" || path === "/signup";

  // Close drawer on route change
  useEffect_sh(() => { setOpen(false); }, [path]);

  // Toggle body class for menu-open lock
  useEffect_sh(() => {
    document.body.classList.toggle("menu-open", open);
    return () => document.body.classList.remove("menu-open");
  }, [open]);

  // Close on Escape
  useEffect_sh(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  const NAV_LINKS = [
    ["/work", "Réalisations"],
    ["/services", "Services"],
    ["/platform", "Plateforme"],
    ["/journal", "Journal"],
    ["/about", "À propos"],
    ["/contact", "Contact"],
    ["/pricing", "Tarifs"],
    ["/careers", "Carrières"],
  ];

  return (
    <React.Fragment>
      <header className={"lx-nav" + (isDark ? " is-dark" : "")}>
        <Logo inverted={isDark} />
        <nav>
          <ul>
            <li><Link to="/work" className="navlink">Réalisations</Link></li>
            <li><Link to="/services" className="navlink">Services</Link></li>
            <li><Link to="/platform" className="navlink">Plateforme</Link></li>
            <li><Link to="/journal" className="navlink">Journal</Link></li>
            <li><Link to="/about" className="navlink">À propos</Link></li>
            <li><Link to="/contact" className="navlink">Contact</Link></li>
          </ul>
        </nav>
        <div className="nav-right" style={{ display: "flex", alignItems: "center", gap: 16, justifyContent: "flex-end" }}>
          <span className="nav-desktop-only" style={{ display: "inline-flex", alignItems: "center", gap: 24 }}>
            <ClockBadge />
            <Btn to="/contact" variant="primary">Démarrer un projet</Btn>
          </span>
          <span className="nav-mobile-only" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <Btn to="/contact" variant="primary">Démarrer</Btn>
            <button
              className="nav-burger"
              aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
              aria-expanded={open}
              aria-controls="mobileDrawer"
              onClick={() => setOpen(o => !o)}
            ><span></span></button>
          </span>
        </div>
      </header>
      <div id="mobileDrawer" className="mobile-drawer" aria-hidden={!open}>
        <nav>
          <ul>
            {NAV_LINKS.map(([href, label]) => (
              <li key={href}><Link to={href}>{label}<span aria-hidden="true" style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)" }}>→</span></Link></li>
            ))}
          </ul>
        </nav>
        <div className="drawer-foot">
          <span>Cedar Rapids · Iowa · USA</span>
          <a href="mailto:contact@clyvonna.com" className="ilink">contact@clyvonna.com</a>
          <a href="tel:+19495758179" className="ilink">+1 (949) 575-8179</a>
        </div>
      </div>
    </React.Fragment>
  );
}

function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="lx-footer">
      {/* Manifesto strip */}
      <div className="footer-manifesto" style={{ borderBottom: "1px solid rgba(242,237,228,0.15)", paddingBottom: 60, marginBottom: 60 }}>
        <div className="flex gap-8" style={{ alignItems: "end", justifyContent: "space-between", flexWrap: "wrap" }}>
          <h2 className="serif" style={{ fontSize: "clamp(28px, 5.4vw, 96px)", lineHeight: 0.96, letterSpacing: "-0.02em", maxWidth: "62%" }}>
            Nous construisons des marques qui <em>capitalisent</em>,<br/>
            pas des campagnes qui <span style={{ color: "var(--acid)" }}>s'évaporent</span>.
          </h2>
          <div className="footer-newsletter" style={{ maxWidth: 380 }}>
            <div className="lx-label" style={{ marginBottom: 14 }}>Lettre d'information — écrite, pas générée</div>
            <div className="body" style={{ color: "rgba(242,237,228,0.7)", marginBottom: 18 }}>
              Une lettre par mois. D'une personne, à une personne. Pas de pixels de suivi — nous avons déjà toutes les données qu'il nous faut.
            </div>
            <form onSubmit={(e) => { e.preventDefault(); alert("Inscription enregistrée (simulation)."); }} style={{ display: "flex", gap: 8, borderBottom: "1px solid rgba(242,237,228,0.4)", paddingBottom: 6, flexWrap: "wrap" }}>
              <input className="lx-input" type="email" placeholder="vous@studio.co" required style={{ borderBottom: 0, padding: "8px 0", flex: "1 1 200px", minWidth: 0 }} />
              <button className="btn btn-acid" type="submit" style={{ padding: "8px 16px" }}>S'inscrire</button>
            </form>
          </div>
        </div>
      </div>

      {/* Sitemap grid */}
      <div className="footer-sitemap" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 32, marginBottom: 60 }}>
        <div className="footer-brand-block">
          <div className="lx-label" style={{ marginBottom: 16 }}>Clyvonna LLC, fondée en 2019</div>
          <div className="body" style={{ color: "rgba(242,237,228,0.7)", maxWidth: 320 }}>
            Un studio marketing aux allures de système d'exploitation. Siège : Cedar Rapids, Iowa, États-Unis.
          </div>
          <div className="body-sm" style={{ color: "rgba(242,237,228,0.6)", marginTop: 14 }}>
            5249 North Park Place NE, place 5945<br/>
            Cedar Rapids, Iowa 52402 — USA<br/>
            <a href="mailto:contact@clyvonna.com" className="ilink">contact@clyvonna.com</a><br/>
            +1 (949) 575-8179
          </div>
        </div>
        {[
          { h: "Studio", links: [["Réalisations", "/work"], ["Services", "/services"], ["À propos", "/about"], ["Journal", "/journal"]] },
          { h: "Plateforme", links: [["Visite", "/platform"], ["Tarifs", "/pricing"], ["Connexion", "/login"], ["Inscription", "/signup"]] },
          { h: "Entreprise", links: [["Carrières", "/careers"], ["Contact", "/contact"], ["Dossier de presse", "/journal"], ["Manifeste", "/about"]] },
          { h: "Légal", links: [["Conditions générales", "/legal/terms"], ["Confidentialité", "/legal/privacy"], ["Cookies", "/legal/cookies"], ["Remboursement", "/legal/refund"], ["Usage acceptable", "/legal/aup"], ["Mentions légales", "/legal/mentions-legales"]] },
        ].map((col, i) => (
          <div key={i}>
            <div className="lx-label" style={{ marginBottom: 16 }}>{col.h}</div>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              {col.links.map(([t, h]) => <li key={h}><Link to={h}>{t}</Link></li>)}
            </ul>
          </div>
        ))}
      </div>

      {/* Offices */}
      <div className="footer-offices" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginBottom: 60, paddingBottom: 48, borderBottom: "1px solid rgba(242,237,228,0.15)" }}>
        {OFFICES.map(o => (
          <div key={o.city}>
            <div className="lx-label" style={{ marginBottom: 10 }}>{o.city} · {o.role}</div>
            <div className="body" style={{ color: "rgba(242,237,228,0.85)" }}>{o.line}</div>
            <div className="body-sm" style={{ marginTop: 6 }}>{o.hours}</div>
          </div>
        ))}
      </div>

      <div className="flex items-center justify-between footer-bottom" style={{ flexWrap: "wrap", gap: 16, color: "rgba(242,237,228,0.6)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>
        <span>© {year} CLYVONNA LLC · Cedar Rapids, Iowa, USA · contact@clyvonna.com</span>
        <span>Conçu à la main, en HTML. Sans pisteurs. <Link to="/legal/privacy" className="ilink">Confidentialité</Link></span>
        <span style={{ display: "inline-flex", gap: 18 }}>
          <a href="#" className="ilink">Are.na</a>
          <a href="#" className="ilink">Instagram</a>
          <a href="#" className="ilink">LinkedIn</a>
          <a href="#" className="ilink">RSS</a>
        </span>
      </div>
    </footer>
  );
}

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