// Shared shell: Nav + ACCENTS + useTweaks — included by every page

const ACCENTS = {
  editorial: ["#416EE2","#0E6B3E","#16A34A","#0E0E0E","#D93B1E"],
  terminal: ["#7AA0FF","#B6FF3C","#9BFFB0","#FF9340","#E7E7E3"],
  refined:  ["#416EE2","#0E6B3E","#16A34A","#8B2D8B","#0B1220"],
};

function Nav({ audience, setAudience, current }){
  const [menuOpen, setMenuOpen] = React.useState(false);

  const links = [
    { h:"/",             l:"Home",         k:"home" },
    { h:"/companies",    l:"Companies",    k:"companies" },
    { h:"/sales-reps",   l:"Sales reps",   k:"reps" },
    { h:"/verification", l:"Verification", k:"verify" },
    { h:"/pricing",      l:"Pricing",      k:"pricing" },
    { h:"/contact",      l:"Contact",      k:"contact" },
  ];

  React.useEffect(() => {
    const handler = () => { if (window.innerWidth > 768) setMenuOpen(false); };
    window.addEventListener("resize", handler);
    return () => window.removeEventListener("resize", handler);
  }, []);

  return (
    <nav className="top">
      <div className="wrap row">
        <a href="/" className="logo">
          <img src="assets/clozer-logo.png" alt="clozer"/>
        </a>

        <div style={{display:"flex",gap:4}} className="hide-mobile">
          {links.slice(1).map(L=>(
            <a key={L.k} href={L.h} className="link" style={current===L.k?{color:"var(--fg)",background:"var(--line)"}:{}}>{L.l}</a>
          ))}
        </div>

        <div style={{display:"flex",gap:12,alignItems:"center"}} className="hide-mobile">
          {setAudience && (
            <div className="audswitch">
              <button aria-pressed={audience==="company"} onClick={()=>setAudience("company")}>Hire closers</button>
              <button aria-pressed={audience==="rep"} onClick={()=>setAudience("rep")}>I'm a closer</button>
            </div>
          )}
          <a href="https://app.clozer.com/" className="btn btn-ghost" style={{padding:"10px 16px",fontSize:14}}>Log in</a>
          <a href="https://app.clozer.com/signup" className="btn btn-primary" style={{padding:"10px 18px",fontSize:14}}>Get started</a>
        </div>

        <button
          className="hamburger"
          aria-label="Toggle menu"
          onClick={() => setMenuOpen(o => !o)}
        >
          <span style={{display:"block",width:22,height:2,background:"var(--fg)",borderRadius:2,transition:"transform .2s",transform: menuOpen?"rotate(45deg) translate(3px,3px)":"none"}}/>
          <span style={{display:"block",width:22,height:2,background:"var(--fg)",borderRadius:2,transition:"opacity .2s",opacity: menuOpen?0:1,margin:"5px 0"}}/>
          <span style={{display:"block",width:22,height:2,background:"var(--fg)",borderRadius:2,transition:"transform .2s",transform: menuOpen?"rotate(-45deg) translate(3px,-3px)":"none"}}/>
        </button>
      </div>

      {menuOpen && (
        <div className="mobile-menu">
          <div style={{display:"flex",flexDirection:"column",gap:4,padding:"8px 0"}}>
            {links.slice(1).map(L=>(
              <a key={L.k} href={L.h} className="link" style={{...(current===L.k?{color:"var(--fg)",background:"var(--line)"}:{}), borderRadius:12, padding:"12px 16px", fontSize:15}}>
                {L.l}
              </a>
            ))}
          </div>
          <div style={{borderTop:"1px solid var(--line)",paddingTop:16,marginTop:8,display:"flex",flexDirection:"column",gap:10}}>
            {setAudience && (
              <div className="audswitch" style={{alignSelf:"flex-start"}}>
                <button aria-pressed={audience==="company"} onClick={()=>setAudience("company")}>Hire closers</button>
                <button aria-pressed={audience==="rep"} onClick={()=>setAudience("rep")}>I'm a closer</button>
              </div>
            )}
            <div style={{display:"flex",gap:10}}>
              <a href="https://app.clozer.com/" className="btn btn-ghost" style={{padding:"10px 16px",fontSize:14,flex:1,justifyContent:"center"}}>Log in</a>
              <a href="https://app.clozer.com/signup" className="btn btn-primary" style={{padding:"10px 18px",fontSize:14,flex:1,justifyContent:"center"}}>Get started</a>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
}

function useTweaks(){
  const T = window.__TWEAKS__ || {};
  const [dir, setDir] = React.useState(T.direction || "editorial");
  const [accent, setAccent] = React.useState(T.accent || "#416EE2");
  const persist = (edits) => window.parent.postMessage({type:"__edit_mode_set_keys", edits}, "*");

  React.useEffect(()=>{
    document.documentElement.setAttribute("data-dir", dir);
    const a = ACCENTS[dir][0];
    setAccent(a);
    document.documentElement.style.setProperty("--accent", a);
  }, [dir]);

  React.useEffect(()=>{
    document.documentElement.style.setProperty("--accent", accent);
  }, [accent]);

  React.useEffect(()=>{
    const handler = (e)=>{
      if(!e.data || typeof e.data !== "object") return;
      if(e.data.type === "__activate_edit_mode") document.getElementById("tweaksPanel")?.classList.add("on");
      if(e.data.type === "__deactivate_edit_mode") document.getElementById("tweaksPanel")?.classList.remove("on");
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({type:"__edit_mode_available"}, "*");
    return ()=>window.removeEventListener("message", handler);
  }, []);

  React.useEffect(()=>{
    const dirBtns = document.querySelectorAll("#dirBtns button");
    dirBtns.forEach(b=>{
      b.setAttribute("aria-pressed", b.dataset.dir === dir);
      b.onclick = ()=>{ setDir(b.dataset.dir); persist({direction: b.dataset.dir, accent: ACCENTS[b.dataset.dir][0]}); };
    });
    const swWrap = document.getElementById("swatches");
    if(swWrap){
      swWrap.innerHTML = "";
      ACCENTS[dir].forEach(c=>{
        const btn = document.createElement("button");
        btn.style.background = c;
        btn.setAttribute("aria-pressed", c === accent);
        btn.onclick = ()=>{ setAccent(c); persist({accent: c}); };
        swWrap.appendChild(btn);
      });
    }
  });

  return { dir, accent, persist };
}

Object.assign(window, { Nav, useTweaks, ACCENTS });