// Shared site chrome — NAV + FOOTER reused across all pages.
// Expects window.Emblem, LangToggle, HairlineBtn, Arabesque.

// Wrapper that always resolves to the LIVE window.LangToggle at render time.
// i18n.jsx overrides window.LangToggle after this file loads; this wrapper
// ensures we pick up the override instead of any captured reference.
const LiveLangToggle = (props) => {
  const Impl = (typeof window !== "undefined" && window.LangToggle) ? window.LangToggle : null;
  return Impl ? React.createElement(Impl, props) : null;
};

const SiteNav = ({current}) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    {label:"The Agency",  href:"agency.html",     key:"agency"},
    {label:"Universes",   href:"universes.html",  key:"universes"},
    {label:"Membership",  href:"membership.html", key:"membership"},
    {label:"Aurum",       href:"aurum.html",      key:"aurum"}
  ];

  // Lock body scroll when menu is open
  React.useEffect(() => {
    if (menuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  return (
    <nav style={{position:"absolute", top:0, left:0, right:0,
      zIndex: menuOpen ? 9999 : 20,
      padding:"28px 56px", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
      <a href="index.html" aria-label="Home · Elite Private Agency" style={{display:"flex", alignItems:"center", textDecoration:"none"}}>
        <Emblem size={48}/>
      </a>
      <div style={{display:"flex", gap:36, font:"500 11px/1 var(--font-ui)",
        letterSpacing:".24em", textTransform:"uppercase"}}>
        {links.map(l => (
          <a key={l.key} href={l.href} style={{
            color: current===l.key ? "var(--epa-gold)" : "var(--epa-paper-ivory)",
            textDecoration:"none",
            borderBottom: current===l.key ? "1px solid var(--epa-gold)" : "1px solid transparent",
            paddingBottom:4}}>{l.label}</a>
        ))}
      </div>
      <div style={{display:"flex", alignItems:"center", gap:20}}>
        <LiveLangToggle/>
        <HairlineBtn size="sm" href="request-access.html">Request access</HairlineBtn>
        {/* Hamburger — visible only on mobile via responsive.css */}
        <button
          data-epa-menu-btn
          aria-label="Open menu"
          onClick={() => setMenuOpen(true)}
          style={{display:"none", background:"transparent", border:"none",
            padding:8, cursor:"pointer", color:"var(--epa-champagne)"}}>
          <svg width="22" height="14" viewBox="0 0 22 14">
            <line x1="0" y1="1" x2="22" y2="1" stroke="currentColor" strokeWidth="1"/>
            <line x1="0" y1="7" x2="22" y2="7" stroke="currentColor" strokeWidth="1"/>
            <line x1="0" y1="13" x2="22" y2="13" stroke="currentColor" strokeWidth="1"/>
          </svg>
        </button>
      </div>

      {/* Full-screen menu overlay — mobile only */}
      {menuOpen && (
        <div data-epa-menu-overlay
          style={{position:"fixed", inset:0, background:"#0B0703",
            zIndex:100, display:"flex", flexDirection:"column",
            padding:"28px 24px", animation:"epaMenuFade .35s ease-out"}}>
          <style>{`@keyframes epaMenuFade{from{opacity:0}to{opacity:1}}`}</style>
          <div style={{display:"flex", justifyContent:"space-between",
            alignItems:"center", marginBottom:60}}>
            <Emblem size={44}/>
            <button
              aria-label="Close menu"
              onClick={() => setMenuOpen(false)}
              style={{background:"transparent", border:"none", padding:8,
                cursor:"pointer", color:"var(--epa-champagne)"}}>
              <svg width="22" height="22" viewBox="0 0 22 22">
                <line x1="2" y1="2" x2="20" y2="20" stroke="currentColor" strokeWidth="1.2"/>
                <line x1="2" y1="20" x2="20" y2="2" stroke="currentColor" strokeWidth="1.2"/>
              </svg>
            </button>
          </div>
          <div style={{flex:1, display:"flex", flexDirection:"column",
            gap:28, alignItems:"flex-start", paddingLeft:8}}>
            {links.map(l => (
              <a key={l.key} href={l.href} style={{
                font:"400 32px/1 var(--font-display)",
                color: current===l.key ? "var(--epa-gold)" : "var(--epa-paper-ivory)",
                textDecoration:"none", letterSpacing:".01em"}}>{l.label}</a>
            ))}
            <div style={{width:40, height:1, background:"var(--epa-gold-dark)",
              margin:"12px 0"}}/>
            <a href="request-access.html" style={{
              font:"italic 400 24px/1 var(--font-editorial)",
              color:"var(--epa-champagne)", textDecoration:"none"}}>Request access →</a>
          </div>
          <div style={{paddingTop:24, borderTop:"1px solid rgba(170,135,87,.15)",
            display:"flex", justifyContent:"space-between", alignItems:"center"}}>
            <LiveLangToggle/>
            <div style={{font:"italic 300 12px/1.4 var(--font-editorial)",
              color:"var(--epa-text-secondary)"}}>Paris · London · Dubai</div>
          </div>
        </div>
      )}
    </nav>
  );
};

const SiteFooter = () => {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  return (
    <footer style={{padding:"80px 80px 48px", background:"#060403",
      borderTop:"1px solid rgba(170,135,87,.2)"}}>
      <div style={{display:"flex", justifyContent:"space-between",
        alignItems:"flex-start", gap:40, paddingBottom:48,
        borderBottom:"1px solid rgba(170,135,87,.15)"}}>
        <div>
          <a href="index.html" aria-label="Home · Elite Private Agency" style={{display:"inline-block", textDecoration:"none"}}>
            <Emblem size={80}/>
          </a>
          <div style={{font:"500 11px/1 var(--font-ui)", color:"var(--epa-gold)",
            letterSpacing:".36em", textTransform:"uppercase", margin:"20px 0 10px"}}>Elite Private Agency</div>
          <div style={{font:"italic 400 13px/1.4 var(--font-editorial)",
            color:"var(--epa-text-secondary)", maxWidth:300}}>
            Paris · London · Dubai<br/>
            A private atelier, since 2022.
          </div>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,auto)", gap:64,
          font:"500 11px/2.2 var(--font-ui)", letterSpacing:".16em", textTransform:"uppercase"}}>
          <div>
            <div style={{color:"var(--epa-gold)", marginBottom:8}}>Agency</div>
            <div><a href="agency.html"    style={{color:"var(--epa-text-secondary)", textDecoration:"none"}}>About</a></div>
            <div><a href="universes.html" style={{color:"var(--epa-text-secondary)", textDecoration:"none"}}>Universes</a></div>
          </div>
          <div>
            <div style={{color:"var(--epa-gold)", marginBottom:8}}>Access</div>
            <div><a href="membership.html" style={{color:"var(--epa-text-secondary)", textDecoration:"none"}}>Membership</a></div>
            <div><a href="membership.html#pay-as-you-go" style={{color:"var(--epa-text-secondary)", textDecoration:"none"}}>Pay as you go</a></div>
            <div><a href="aurum.html" style={{color:"var(--epa-text-secondary)", textDecoration:"none"}}>Aurum</a></div>
          </div>
          <div>
            <div style={{color:"var(--epa-gold)", marginBottom:8}}>Contact</div>
            <div style={{color:"var(--epa-text-secondary)"}}>+33 6 42 31 78 69</div>
            <div style={{color:"var(--epa-text-secondary)"}}>info@eliteprivateagency.com</div>
            <a href="https://www.instagram.com/eliteprivateagency/" target="_blank" rel="noreferrer"
              style={{color:"var(--epa-text-secondary)", textDecoration:"none", transition:"color .2s"}}
              onMouseEnter={e=>e.currentTarget.style.color="var(--epa-gold)"}
              onMouseLeave={e=>e.currentTarget.style.color="var(--epa-text-secondary)"}>@eliteprivateagency</a>
          </div>
        </div>
      </div>

      {/* Social row */}
      <div style={{display:"flex", alignItems:"center", justifyContent:"center",
        gap:24, padding:"32px 0 24px", borderBottom:"1px solid rgba(170,135,87,.15)"}}>
        <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
          letterSpacing:".4em", textTransform:"uppercase", marginRight:12}}>Follow the atelier</div>
        {[
          {icon:"instagram", url:"https://www.instagram.com/eliteprivateagency/", label:"Instagram"},
          {icon:"linkedin",  url:"https://www.linkedin.com/company/elite-private-agency/", label:"LinkedIn"},
          {icon:"facebook",  url:"https://www.facebook.com/share/18UusDcFwQ/?mibextid=wwXIfr", label:"Facebook"}
        ].map(s => (
          <a key={s.icon} href={s.url} target="_blank" rel="noreferrer" aria-label={s.label}
            style={{width:40, height:40, borderRadius:"50%",
              border:"1px solid rgba(170,135,87,.3)",
              display:"flex", alignItems:"center", justifyContent:"center",
              color:"var(--epa-champagne)", transition:"all .22s", textDecoration:"none"}}
            onMouseEnter={e=>{
              e.currentTarget.style.background="var(--epa-gold)";
              e.currentTarget.style.borderColor="var(--epa-gold)";
              e.currentTarget.style.color="var(--epa-charcoal)";
            }}
            onMouseLeave={e=>{
              e.currentTarget.style.background="transparent";
              e.currentTarget.style.borderColor="rgba(170,135,87,.3)";
              e.currentTarget.style.color="var(--epa-champagne)";
            }}>
            <i data-lucide={s.icon} style={{width:16, height:16, strokeWidth:1.4}}/>
          </a>
        ))}
      </div>

      <div style={{display:"flex", justifyContent:"space-between", paddingTop:28,
        font:"400 10px/1 var(--font-ui)", color:"var(--epa-text-secondary)",
        letterSpacing:".18em", textTransform:"uppercase"}}>
        <div>© 2026 Elite Private Agency · All rights reserved</div>
        <div style={{display:"flex", gap:28}}>
          <span>Legal</span><span>Privacy</span><span>Cookies</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, {SiteNav, SiteFooter});
