/* global React, Icon, Reveal, LogoMark */
const { useState, useEffect } = React;

/* ============================================
   Header / Nav
   ============================================ */
const Header = ({ route, navigate }) => {
  const [open, setOpen] = useState(false);
  const links = [
    { to: "features", label: "Features" },
    { to: "pricing", label: "Pricing" },
    { to: "about", label: "Features" },
    { to: "contact", label: "Contact" }
  ];
  return (
    <header className="site-header">
      <div className="container site-header__inner">
        <a href="#home" className="logo-mark" onClick={(e) => { e.preventDefault(); navigate("home"); }}>
          <img src="assets/logo-mark.png" alt="Breach Monitor logo" style={{ height: 24 }} />
          <span>Breach Monitor</span>
        </a>
        <nav className="nav" aria-label="Primary">
          {links.map(l => (
            <a key={l.to}
               href={`#${l.to}`}
               className={route === l.to ? "active" : ""}
               onClick={(e) => { e.preventDefault(); navigate(l.to); }}>
              {l.label}
            </a>
          ))}
        </nav>
        <div className="nav-actions">
          <a href="#pricing" className="btn btn-ghost btn-sm" onClick={(e) => { e.preventDefault(); navigate("pricing"); }}>Sign in</a>
          <a href="#pricing" className="btn btn-primary btn-sm" onClick={(e) => { e.preventDefault(); navigate("pricing"); }}>Get started</a>
          <button className="mobile-toggle" aria-label="Menu" onClick={() => setOpen(!open)}>
            <Icon name="menu" size={20} />
          </button>
        </div>
      </div>
      <div className={`mobile-drawer ${open ? "open" : ""}`}>
        {links.map(l => (
          <a key={l.to} href={`#${l.to}`}
             onClick={(e) => { e.preventDefault(); setOpen(false); navigate(l.to); }}>
            {l.label}
          </a>
        ))}
        <a href="#pricing" onClick={(e) => { e.preventDefault(); setOpen(false); navigate("pricing"); }}>
          Get started →
        </a>
      </div>
    </header>
  );
};

/* ============================================
   Footer
   ============================================ */
const Footer = ({ navigate }) => (
  <footer className="site-footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-col">
          <a href="#home" className="logo-mark" onClick={(e) => { e.preventDefault(); navigate("home"); }}>
            <img src="assets/logo-mark.png" alt="" style={{ height: 22 }} />
            <span>Breach Monitor</span>
          </a>
          <p className="footer-tag">
            Proactive breach intelligence for organizations of every size. Built by offensive security professionals.
          </p>
        </div>
        <div className="footer-col">
          <h4>Product</h4>
          <ul>
            <li><a href="#features" onClick={(e) => { e.preventDefault(); navigate("features"); }}>Features</a></li>
            <li><a href="#pricing" onClick={(e) => { e.preventDefault(); navigate("pricing"); }}>Pricing</a></li>
            <li><a href="https://protect.breachmonitor.app">Sign in</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="#about" onClick={(e) => { e.preventDefault(); navigate("about"); }}>About</a></li>
            <li><a href="#contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }}>Contact</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Get in touch</h4>
          <ul>
            <li><a href="mailto:hello@breachmonitor.app">hello@breachmonitor.app</a></li>
            <li><a href="tel:8772625835">877-262-5835</a></li>
            <li><span style={{ color: "var(--fg-muted)" }}>235 Harrison St. Suite 128, Syracuse, NY 13202</span></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Breach Monitor. All rights reserved.</span>
      </div>
    </div>
  </footer>
);

window.Header = Header;
window.Footer = Footer;