/* global React, lucide */
/* =======================================================================
   St Sampson Parish — shared UI: topstrip, masthead, footer
   ======================================================================= */

function TopStrip() {
  return (
    <div className="topstrip">
      <div className="topstrip-inner">
        <span className="date">{"\n"}</span>
        <span className="sep">{"\n"}</span>
        <span className="item"><i data-lucide="waves" /></span>
        <span className="item"><i data-lucide="sun" /></span>
        <span className="item"><i data-lucide="thermometer" /></span>
        <span className="spacer" />
        <span className="links">
          <a href="#">{"\n"}</a>
          <a href="#">{"\n"}</a>
        </span>
      </div>
    </div>
  );
}

function Masthead({ route, setRoute }) {
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'parish', label: 'The Parish' },
    { id: 'info', label: 'Information' },
    { id: 'news', label: 'News & Notices' },
    { id: 'contact', label: 'Contact' },
  ];
  return (
    <header className="mast">
      <div className="mast-inner">
        <a className="lockup" href="#" onClick={(e) => { e.preventDefault(); setRoute('home'); }}>
          <img src="assets/crest.png" alt="St Sampson crest" />
          <div>
            <div className="wm-line1">St Sampson</div>
            <div className="wm-line2">Parish of Guernsey · Since 1204</div>
          </div>
        </a>
        <nav className="mast-nav">
          {links.map((l) => (
            <a key={l.id} href="#"
               className={route === l.id ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); setRoute(l.id); }}>
              {l.label}
            </a>
          ))}
        </nav>
        <div className="mast-actions">
          <a className="btn btn-secondary" href="#" onClick={(e) => { e.preventDefault(); setRoute('info'); }}>
            <i data-lucide="trash-2" /> My bin night
          </a>
          <a className="btn btn-primary" href="#" onClick={(e) => { e.preventDefault(); setRoute('contact'); }}>
            Contact parish
          </a>
        </div>
      </div>
    </header>
  );
}

function SiteFooter({ setRoute }) {
  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="fb-lockup">
              <img src="assets/crest.png" alt="" />
              <div>
                <div className="fb-name">St Sampson</div>
                <div className="fb-sub">Parish of Guernsey · Since 1204</div>
              </div>
            </div>
            <p>“Serving the parishioners of St Sampson — the harbour, Bulwer Avenue, Delancey Park and the north coast.”</p>
          </div>

          <div className="footer-col">
            <h4>The Parish</h4>
            <ul>
              <li><a href="#" onClick={(e)=>{e.preventDefault();setRoute('parish');}}>Douzaine & Constables</a></li>
              <li><a href="#">Parish history</a></li>
              <li><a href="#">Accounts & minutes</a></li>
              <li><a href="#">Douzaine chamber</a></li>
              <li><a href="#">Elections</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Information</h4>
            <ul>
              <li><a href="#">Parish rates</a></li>
              <li><a href="#">Refuse & recycling</a></li>
              <li><a href="#">Hedges & streams</a></li>
              <li><a href="#">Bornements</a></li>
              <li><a href="#">Dog tax</a></li>
              <li><a href="#">Planning applications</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>La Chambre</h4>
            <ul>
              <li>Le Murier</li>
              <li>St Sampson</li>
              <li>Guernsey <span className="norman">GY2 4HQ</span></li>
              <li style={{marginTop: 16}}><a href="tel:+441481244130">+44 (0) 1481 244130</a></li>
              <li><a href="mailto:constables@stsampson.gg">constables@stsampson.gg</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© St Sampson Douzaine · 2019–2026</span>
          <div>
            <a href="#">Privacy</a>
            <a href="#">Accessibility</a>
            <a href="#">Sitemap</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.TopStrip = TopStrip;
window.Masthead = Masthead;
window.SiteFooter = SiteFooter;