// Small hook: read content from localStorage and re-render when it changes
// (covers same-tab updates posted from anywhere, plus cross-tab via 'storage').
const useSiteContent = () => {
  const [content, setContent] = React.useState(() =>
    (typeof window.getSiteContent === 'function') ? window.getSiteContent() : null
  );
  React.useEffect(() => {
    const refresh = () => setContent(window.getSiteContent());
    window.addEventListener('site-content-updated', refresh);
    return () => window.removeEventListener('site-content-updated', refresh);
  }, []);
  return content;
};

const Footer = () => {
  const content = useSiteContent();
  const hero = content?.hero || {};
  const hours = content?.hours || [];
  const [addr1, addr2] = window.addressLines ? window.addressLines(hero.address) : [hero.address, ''];
  const phone = hero.phone || '239-355-8787';
  return (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="brand-blk">
          <img src="./assets/logo-wordmark.svg" alt="Infinite Auto Garage" />
          <p>Fort Myers' honest garage. Diagnostics, repair, and a bay light that stays on until your car is right.</p>
        </div>
        <div>
          <h5>VISIT</h5>
          <ul>
            {addr1 && <li><a>{addr1}</a></li>}
            {addr2 && <li><a>{addr2}</a></li>}
            <li><a href={window.phoneToTel ? window.phoneToTel(phone) : `tel:${phone}`} style={{color:'var(--iag-amber)'}}>{phone}</a></li>
            {hours.length > 0 ? (
              hours.filter(h => !h.closed).slice(0, 2).map((h, i, arr) => {
                // Group weekdays vs weekend in a friendly line
                const fmt = (t) => {
                  if (!t) return '';
                  const [hh, mm] = t.split(':');
                  const h12 = ((+hh + 11) % 12) + 1;
                  const ampm = +hh >= 12 ? 'p' : 'a';
                  return `${h12}${mm !== '00' ? ':' + mm : ''}${ampm}`;
                };
                return <li key={h.day}><a>{h.day.slice(0,3)} {fmt(h.open)}–{fmt(h.close)}</a></li>;
              })
            ) : (
              <>
                <li><a>Mon–Fri 8a–6p</a></li>
                <li><a>Sat 8a–2p</a></li>
              </>
            )}
          </ul>
        </div>
        <div>
          <h5>SERVICES</h5>
          <ul>
            <li><a>Diagnostics</a></li>
            <li><a>Oil &amp; filters</a></li>
            <li><a>Brakes</a></li>
            <li><a>Engine work</a></li>
            <li><a>A/C &amp; heat</a></li>
            <li><a>Pre-purchase inspection</a></li>
          </ul>
        </div>
        <div className="newsletter">
          <h5>STAY IN THE LOOP</h5>
          <p style={{fontFamily:'var(--font-sans)',fontSize:13,color:'var(--fg-muted)',margin:'0 0 14px'}}>
            Service reminders, seasonal checklists, and the occasional honest opinion. No spam, ever.
          </p>
          <div className="row">
            <input type="email" placeholder="you@email.com" />
            <button className="btn btn-primary btn-sm">Subscribe</button>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© {new Date().getFullYear()} INFINITE AUTO GARAGE LLC · FORT MYERS, FL</div>
        <div className="footer-bottom-right">
          <a href="admin.html" className="owner-link" title="Owner sign-in">
            <svg width="11" height="11" viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <rect x="3" y="7" width="10" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
              <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" stroke="currentColor" strokeWidth="1.4"/>
            </svg>
            OWNER
          </a>
          <span>BAY 03 · LIGHTS ON</span>
        </div>
      </div>
    </div>
  </footer>
  );
};
window.Footer = Footer;