/* global React */
const { useState, useEffect, useRef } = React;

/* ─────────────────────────────────────────────────────────
   useReveal — IntersectionObserver fade-up on scroll
   ───────────────────────────────────────────────────────── */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    el.querySelectorAll('.reveal').forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}
window.useReveal = useReveal;

/* ─────────────────────────────────────────────────────────
   Placeholder — labelled image slot
   ───────────────────────────────────────────────────────── */
function PH({ label }) {
  return (
    <div className="ph">
      <div className="ph-ring">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
          <rect x="3" y="3" width="18" height="18" rx="2"/>
          <circle cx="8.5" cy="8.5" r="1.5"/>
          <path d="M21 15l-5-5L5 21"/>
        </svg>
      </div>
      <span className="ph-text">{label}</span>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
   Nav
   ───────────────────────────────────────────────────────── */
function Nav({ page, go, mobileOpen, setMobileOpen }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const goAndClose = (p) => { go(p); setMobileOpen(false); };

  return (
    <>
      <nav id="main-nav" className={scrolled ? 'scrolled' : ''}>
        <div className="nav-logo" onClick={() => goAndClose('home')}>
          Salt <span>Voice</span>
        </div>
        <div className="nav-links">
          {['home', 'about', 'services', 'contact'].map((p) => (
            <button
              key={p}
              className={'nav-link' + (page === p ? ' active' : '')}
              onClick={() => go(p)}
            >
              {p[0].toUpperCase() + p.slice(1)}
            </button>
          ))}
          <button className="nav-cta" onClick={() => go('contact')}>Get In Touch</button>

          <button
            className={'nav-burger' + (mobileOpen ? ' open' : '')}
            onClick={() => setMobileOpen((v) => !v)}
            aria-label="Menu"
          >
            <span /><span /><span />
          </button>
        </div>
      </nav>

      <div className={'mobile-menu' + (mobileOpen ? ' open' : '')}>
        {['home', 'about', 'services', 'contact'].map((p) => (
          <button
            key={p}
            className={page === p ? 'active' : ''}
            onClick={() => goAndClose(p)}
          >
            {p[0].toUpperCase() + p.slice(1)}
          </button>
        ))}
      </div>
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────── */
function Footer({ go }) {
  return (
    <footer className="site-footer" data-screen-label="Footer">
      <div>
        <div className="footer-logo">Salt <span>Voice</span></div>
        <p className="footer-tagline">Find Your Voice Again</p>
      </div>
      <nav className="footer-nav">
        <button onClick={() => go('home')}>Home</button>
        <button onClick={() => go('about')}>About</button>
        <button onClick={() => go('services')}>Services</button>
        <button onClick={() => go('contact')}>Contact</button>
      </nav>
      <div className="footer-right">
        <p className="footer-email">saltspeechtherapy@gmail.com</p>
        <p className="footer-small">© 2024 SALT Voice<br/>Health and Care Professions Council (HCPC)<br/>North London &amp; Online</p>
      </div>
    </footer>
  );
}

/* ─────────────────────────────────────────────────────────
   CTA Banner
   ───────────────────────────────────────────────────────── */
function CTABanner({ title, button, go }) {
  return (
    <div className="cta-banner">
      <h2>{title}</h2>
      <button className="btn-sage" onClick={() => go('contact')}>{button}</button>
    </div>
  );
}

Object.assign(window, { useReveal, PH, Nav, Footer, CTABanner });