/* global React */
// Shared site chrome -- header + footer + bottom CTA.

const SiteHeader = ({ active }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [menuOpen]);

  // "Book demo" anchors locally on home, otherwise jumps to home + #book-demo.
  const onHome = active === '' || active === 'home' || active === 'product';
  const demoHref = onHome ? '#book-demo' : 'index.html#book-demo';

  const navLinks = [
    { label: 'Product',    href: 'index.html',      key: 'product' },
    { label: 'Industries', href: 'industries.html', key: 'industries' },
    { label: 'Pricing',    href: 'pricing.html',    key: 'pricing' },
    { label: 'Support',    href: 'support.html',    key: 'support' },
  ];

  return (
    <header className="site-header">
      <div className="container site-header__inner">
        <a className="site-header__brand" href="index.html" aria-label="SiteSign — home">
          <img
            src="assets/brand/sitesign-logo.png"
            alt="SiteSign"
            style={{ height: 28, filter: 'brightness(0) invert(1)' }}
          />
        </a>

        <nav className="site-header__nav" aria-label="Primary">
          {navLinks.map(l => (
            <a key={l.key} href={l.href} className={active === l.key ? 'is-active' : ''}>{l.label}</a>
          ))}
        </nav>

        <div className="site-header__cta">
          <a className="btn btn--cta btn--sm" href={demoHref}>Book a 15-min demo</a>
          <button
            className="site-header__menu-btn"
            aria-label="Open menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <IconMenu size={20}/>
          </button>
        </div>
      </div>

      {menuOpen && (
        <div style={{
          background: 'var(--ss-midnight-hover)',
          padding: '12px 24px 18px',
          display: 'flex',
          flexDirection: 'column',
          gap: 8,
        }}>
          {navLinks.map(l => (
            <a key={l.key}
               href={l.href}
               onClick={() => setMenuOpen(false)}
               style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'none', padding: '10px 0', fontWeight: 600, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
              {l.label}
            </a>
          ))}
          <a
            href={demoHref}
            onClick={() => setMenuOpen(false)}
            className="btn btn--cta btn--sm"
            style={{ marginTop: 12, justifyContent: 'center' }}
          >Book a 15-min demo</a>
        </div>
      )}
    </header>
  );
};

/* ---------- Bottom CTA: lives on every page above the footer ---------- */

const BottomCTA = () => {
  // Always link to the demo form on the home page (only place the form lives).
  return (
    <section className="section section--midnight" id="bottom-cta">
      <div className="container" style={{ maxWidth: 840, textAlign: 'center' }}>
        <span className="t-eyebrow t-eyebrow--accent" style={{ color: 'rgba(255,255,255,0.7)' }}>Get started</span>
        <h2 className="t-h1" style={{ color: '#fff', marginTop: 14 }}>Try SiteSign on one site for 30 days, free.</h2>
        <p className="t-lead" style={{ color: 'rgba(255,255,255,0.85)', marginTop: 8, marginBottom: 28 }}>
          We help you set up. You decide if it stays.
        </p>
        <a className="btn btn--cta btn--lg" href="index.html#book-demo">
          Book a 15-min demo
          <IconArrowRight size={18}/>
        </a>
      </div>
    </section>
  );
};

/* ---------- Footer ---------- */

const SiteFooter = () => (
  <footer className="site-footer">
    <div className="container">
      <div className="site-footer__brand" style={{ marginBottom: 28 }}>
        <img
          src="assets/brand/sitesign-logo.png"
          alt="SiteSign"
          style={{ height: 26, filter: 'brightness(0) invert(1)' }}
        />
      </div>

      <div className="site-footer__grid">
        <div>
          <h4>Product</h4>
          <ul>
            <li><a href="index.html#pillars">Time &amp; Attendance</a></li>
            <li><a href="index.html#pillars">Face + GPS Verification</a></li>
            <li><a href="index.html#pillars">Audit-Safe Records</a></li>
            <li><a href="index.html#pillars">Auto-close</a></li>
            <li><a href="index.html#pillars">Payroll Export</a></li>
          </ul>
        </div>
        <div>
          <h4>Industries</h4>
          <ul>
            <li><a href="industries.html#construction">Construction</a></li>
            <li><a href="industries.html#mining">Mining</a></li>
            <li><a href="industries.html#manufacturing">Manufacturing</a></li>
            <li><a href="industries.html#agriculture">Agriculture</a></li>
            <li><a href="industries.html#warehousing">Warehousing &amp; Logistics</a></li>
            <li><a href="industries.html#fmcg">FMCG Distribution</a></li>
          </ul>
        </div>
        <div>
          <h4>Resources</h4>
          <ul>
            <li><a href="pricing.html">Pricing</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="index.html#book-demo">Book a demo</a></li>
            <li><a href="support.html#contact">Contact us</a></li>
          </ul>
        </div>
      </div>

      <div className="site-footer__bottom">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          <span>© 2026 SiteSign. All rights reserved.</span>
          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>A Gridstone Holdings product</span>
        </div>
        <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href="privacy.html">Privacy Policy</a>
          <span style={{ color: 'rgba(255,255,255,0.25)' }}>|</span>
          <a href="privacy.html">POPIA Notice</a>
        </div>
        <div style={{ minWidth: 36 }} aria-hidden="true"/>
      </div>
    </div>
  </footer>
);

Object.assign(window, { SiteHeader, SiteFooter, BottomCTA });