/* eslint-disable */
// Montana Scammers — marketing site components

const Logo = ({ size = 44 }) => (
  <a href="#" className="ms-header__brand" onClick={(e) => e.preventDefault()}>
    <img src="assets/icon-circle.png" alt="Montana Scammers" style={{ height: size, width: size }} />
    <span className="wm">
      <span className="top">MONTANA</span>
      <span className="sub">Scammers</span>
    </span>
  </a>
);

const Header = ({ active = 'home', onNav }) => (
  <header className="ms-header">
    <div className="ms-header__inner">
      <Logo />
      <nav className="ms-nav">
        <a href="#" className={active === 'home' ? 'active' : ''} onClick={(e) => { e.preventDefault(); onNav?.('home'); }}>Home</a>
        <a href="#" className={active === 'how' ? 'active' : ''} onClick={(e) => { e.preventDefault(); onNav?.('how'); }}>How it works</a>
        <a href="#" className={active === 'faq' ? 'active' : ''} onClick={(e) => { e.preventDefault(); onNav?.('faq'); }}>FAQ</a>
        <a href="#" className={active === 'about' ? 'active' : ''} onClick={(e) => { e.preventDefault(); onNav?.('about'); }}>About</a>
        <a href="#" className="ms-nav__cta" onClick={(e) => { e.preventDefault(); onNav?.('report'); }}>Report a Vehicle</a>
      </nav>
    </div>
  </header>
);

const Footer = () => (
  <footer className="footer">
    <div className="ms-container">
      <div className="footer__top">
        <div className="footer__brand">
          <img src="assets/logo-mono-white.png" alt="Montana Scammers" />
          <p>A civic reporting tool for documenting suspected vehicle-related tax evasion in California. Reports are routed to the appropriate authorities for review.</p>
        </div>
        <div>
          <h5>Report</h5>
          <ul>
            <li><a href="#">Report a Vehicle</a></li>
            <li><a href="#">What to report</a></li>
            <li><a href="#">CHP guidance</a></li>
            <li><a href="#">Status look-up</a></li>
          </ul>
        </div>
        <div>
          <h5>Learn</h5>
          <ul>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Privacy & safety</a></li>
            <li><a href="#">Press</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <ul>
            <li><a href="#">Support</a></li>
            <li><a href="#">Report a bug</a></li>
            <li><a href="#">Legal</a></li>
            <li><a href="#">Accessibility</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span className="star">Operated independently. Not affiliated with the California Highway Patrol or any government agency.</span>
        <span>© 2026 Montana Scammers</span>
      </div>
    </div>
  </footer>
);

const StepCard = ({ n, title, body }) => (
  <div className="step-card">
    <span className="num">{n}</span>
    <h4>{title}</h4>
    <p>{body}</p>
  </div>
);

const Divider = () => (
  <div className="divider">
    <span className="line"></span>
    <span>★</span>
    <span className="line"></span>
  </div>
);

const FaqItem = ({ q, a, open }) => (
  <details className="faq-item" open={open}>
    <summary>{q}</summary>
    <p>{a}</p>
  </details>
);

Object.assign(window, { Logo, Header, Footer, StepCard, Divider, FaqItem });