// Klombic shared components
const KlombicMark = ({ size = 24, variant = "two-tone" }) => {
  const inkFill = variant === "paper" ? "#FAFAFA" : variant === "ink" ? "#1A1A1A" : "#1A1A1A";
  const segFill = variant === "paper" ? "#FAFAFA" : variant === "ink" ? "#1A1A1A" : "#1F4E3D";
  return (
    <svg width={size} height={size} viewBox="0 0 240 240" aria-hidden="true">
      <rect x="24" y="84" width="192" height="24" fill={inkFill}/>
      <rect x="24" y="132" width="100" height="24" fill={segFill}/>
      <rect x="136" y="132" width="52" height="24" fill={segFill}/>
      <rect x="200" y="132" width="16" height="24" fill={segFill}/>
    </svg>
  );
};

const Logo = ({ size = 22, variant = "two-tone", color }) => (
  <span className="logo" style={{color}}>
    <KlombicMark size={size} variant={variant} />
    <span>Klombic</span>
  </span>
);

const Nav = ({ go, page }) => (
  <nav className="nav">
    <div className="nav-inner">
      <a href="#" onClick={(e)=>{e.preventDefault();go('home')}}><Logo /></a>
      <div className="nav-links">
        <a href="#" onClick={(e)=>{e.preventDefault();go('how')}}>How it works</a>
        <a href="#" onClick={(e)=>{e.preventDefault();go('sample')}}>Sample report</a>
        <a href="#" onClick={(e)=>{e.preventDefault();go('pricing')}}>Pricing</a>
        <a href="#" onClick={(e)=>{e.preventDefault();go('order')}}>Order</a>
      </div>
      <a href="#" className="nav-cta" onClick={(e)=>{e.preventDefault();go('order')}}>Run a check ↗</a>
    </div>
  </nav>
);

const Footer = ({ go }) => (
  <footer>
    <div className="footer-inner">
      <div className="footer-col">
        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:14}}>
          <KlombicMark size={20}/>
          <span style={{fontSize:16,fontWeight:500,letterSpacing:'-0.02em'}}>Klombic</span>
        </div>
        <p style={{fontSize:13,lineHeight:1.6,color:'var(--ink-2)',margin:0,maxWidth:280}}>Brand-name due diligence for indie founders. Six checks, one PDF, four hours, from $9.99.</p>
      </div>
      <div className="footer-col">
        <h5>Product</h5>
        <a href="#" onClick={(e)=>{e.preventDefault();go('how')}}>How it works</a>
        <a href="#" onClick={(e)=>{e.preventDefault();go('sample')}}>Sample report</a>
        <a href="#" onClick={(e)=>{e.preventDefault();go('pricing')}}>Pricing</a>
        <a href="#" onClick={(e)=>{e.preventDefault();go('order')}}>Order</a>
      </div>
      <div className="footer-col">
        <h5>Company</h5>
        <a href="#">Changelog</a>
        <a href="#">Twitter</a>
        <a href="#">IndieHackers</a>
        <a href="mailto:hello@klombic.com">hello@klombic.com</a>
      </div>
      <div className="footer-col">
        <h5>Legal</h5>
        <a href="#" onClick={(e)=>{e.preventDefault();go('terms')}}>Terms</a>
        <a href="#" onClick={(e)=>{e.preventDefault();go('privacy')}}>Privacy</a>
        <a href="#" onClick={(e)=>{e.preventDefault();go('refund')}}>Refunds</a>
      </div>
    </div>
    <div className="footer-bottom">
      <span>© 2026 Klombic · Built by one founder in the US</span>
      <span>v1.0 · 28 Apr 2026</span>
    </div>
  </footer>
);

window.KlombicMark = KlombicMark;
window.Logo = Logo;
window.Nav = Nav;
window.Footer = Footer;