// Top nav + footer — exact replica of assurix.com chrome.

function TopNav({ onGoHome }) {
  const A = window.ASX;
  return (
    <header style={{
      background: A.navy,
      color:"#fff",
      borderBottom:"1px solid rgba(255,255,255,0.04)",
    }}>
      <div style={{
        maxWidth:1200, margin:"0 auto",
        padding:"14px 32px",
        display:"flex", alignItems:"center", gap:36,
      }}>
        <a href="#/" onClick={(e)=>{e.preventDefault(); onGoHome && onGoHome();}}
           style={{textDecoration:"none", color:"#fff", fontSize:19, fontWeight:700, letterSpacing:"-0.02em"}}>
          Assurix
        </a>
        <nav style={{display:"flex", gap:28, fontSize:14, color:"rgba(255,255,255,0.8)", marginLeft:20}}>
          <a style={linkStyle} href="#">For MSPs</a>
          <a style={{...linkStyle, color:"#fff", fontWeight:500}} href="#/">For SMEs</a>
          <a style={linkStyle} href="#">Resources</a>
          <a style={linkStyle} href="#">About Us</a>
          <a style={linkStyle} href="#">Contact Us</a>
        </nav>
        <div style={{flex:1}}/>
        <a href="#" style={{
          background:"#1bcd9d", color:"#fff",
          padding:"9px 18px",
          borderRadius:6,
          fontSize:13.5, fontWeight:500,
          textDecoration:"none",
          display:"inline-flex", alignItems:"center", gap:8,
          fontFamily: A.font,
        }}>
          Talk to an expert
          <Icon name="arrow-right" size={14} color="#fff" strokeWidth={2.2}/>
        </a>
      </div>
    </header>
  );
}

const linkStyle = {
  color:"rgba(255,255,255,0.8)",
  textDecoration:"none",
  fontWeight:400,
  fontSize:14,
};

function Footer() {
  const A = window.ASX;
  return (
    <footer style={{background: A.navy, color:"rgba(255,255,255,0.6)", marginTop:80}}>
      <div style={{maxWidth:1200, margin:"0 auto", padding:"56px 32px 28px", display:"grid", gridTemplateColumns:"2fr 1fr 1fr 1fr", gap:48}}>
        <div>
          <div style={{fontSize:22, fontWeight:700, color:"#fff", letterSpacing:"-0.02em"}}>Assurix</div>
          <p style={{fontSize:13, marginTop:14, maxWidth:360, lineHeight:1.6, color:"rgba(255,255,255,0.6)"}}>
            UK's first live evidence trustmark for MSPs — continuously verifying security and operational controls.
          </p>
        </div>
        <FooterCol title="For MSPs" items={["For MSPs","Priority onboarding","Pricing","Partners"]}/>
        <FooterCol title="For SMEs" items={["Why verification","The directory","Check your MSP","NCSC guidance"]}/>
        <FooterCol title="Company" items={["About Us","Resources","Contact Us","Careers"]}/>
      </div>
      <div style={{borderTop:"1px solid rgba(255,255,255,0.08)", padding:"22px 32px", display:"flex", justifyContent:"space-between", fontSize:12, maxWidth:1200, margin:"0 auto", color:"rgba(255,255,255,0.5)"}}>
        <span>© 2026 Assurix Ltd. Prototype — sample MSP data.</span>
        <span style={{fontFamily: A.mono}}>/directory · v0.1 preview</span>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{color:"#fff", fontSize:13, fontWeight:600, marginBottom:14, textTransform:"uppercase", letterSpacing:"0.06em"}}>{title}</div>
      <ul style={{listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:9}}>
        {items.map(i=>(
          <li key={i}><a href="#" style={{color:"rgba(255,255,255,0.6)", textDecoration:"none", fontSize:13.5}}>{i}</a></li>
        ))}
      </ul>
    </div>
  );
}

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