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

const NAV_ITEMS = [
  { id: "services", label: "Services" },
  { id: "about", label: "About" },
  { id: "sustainability", label: "Sustainability" },
  { id: "news", label: "News" },
  { id: "contact", label: "Contact" },
];

function Brand({ onNavigate }) {
  return (
    <a className="brand-mark" onClick={(e) => { e.preventDefault(); onNavigate("home"); }} href="#home">
      <span className="word">Raise<em>print</em></span>
      <span className="dot" aria-hidden="true"></span>
    </a>
  );
}

function Nav({ page, onNavigate }) {
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [page]);

  return (
    <header className="nav">
      <div className="shell nav-inner">
        <Brand onNavigate={onNavigate} />
        <div className="nav-links">
          {NAV_ITEMS.map(item => (
            <a key={item.id}
               className={page === item.id ? "active" : ""}
               onClick={(e) => { e.preventDefault(); onNavigate(item.id); }}
               href={`#${item.id}`}>{item.label}</a>
          ))}
          <a className="nav-cta" onClick={(e) => { e.preventDefault(); onNavigate("contact"); }} href="#contact">
            Request a quote
          </a>
          <button className="menu-btn" onClick={() => setOpen(true)} aria-label="Open menu">
            <span className="bars" aria-hidden="true"></span>
            Menu
          </button>
        </div>
      </div>
      <div className={`mobile-menu ${open ? "open" : ""}`}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <Brand onNavigate={onNavigate} />
          <button className="menu-btn" onClick={() => setOpen(false)} style={{ display: "inline-flex" }}>
            <span style={{ fontSize: 20 }}>×</span> Close
          </button>
        </div>
        <nav>
          {NAV_ITEMS.map(item => (
            <a key={item.id} onClick={(e) => { e.preventDefault(); onNavigate(item.id); setOpen(false); }} href={`#${item.id}`}>{item.label}</a>
          ))}
        </nav>
      </div>
    </header>
  );
}

function Footer({ onNavigate }) {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <h4>Raiseprint LLP</h4>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, opacity: 0.85, maxWidth: 360 }}>
              Bespoke printed packaging, made in Yorkshire since 1981. We make boxes that brands are proud to put their products inside.
            </p>
            <a className="linkish" style={{ marginTop: 24, color: "var(--cream)", borderColor: "rgba(239,233,221,0.4)" }}
               onClick={(e) => { e.preventDefault(); onNavigate("contact"); }} href="#contact">
              Start a project →
            </a>
          </div>
          <div>
            <h4>Explore</h4>
            <ul>
              {NAV_ITEMS.map(item => (
                <li key={item.id}><a onClick={(e) => { e.preventDefault(); onNavigate(item.id); }} href={`#${item.id}`}>{item.label}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>Visit</h4>
            <ul>
              <li><a>Raiseprint House</a></li>
              <li><a>Royd Way, Keighley</a></li>
              <li><a>England, BD21 3LG</a></li>
            </ul>
          </div>
          <div>
            <h4>Reach us</h4>
            <ul>
              <li><a href="tel:01535681452">01535 681452</a></li>
              <li><a href="mailto:info@raiseprint.com">info@raiseprint.com</a></li>
              <li><a>LinkedIn</a></li>
              <li><a>Instagram</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-mark">Raise<em>print.</em></div>
        <div className="footer-bottom">
          <span>© 2026 Raiseprint Ltd · Co. No. 03364673</span>
          <span>Yorkshire · UK</span>
          <span>FSC® · ISO 14001 · Carbon Balanced</span>
        </div>
      </div>
    </footer>
  );
}

/* Reveal-on-scroll helper */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    // Safety net: regardless of IO support / firing, every reveal becomes visible after 1.2s
    const safety = setTimeout(() => {
      els.forEach(el => el.classList.add("in"));
    }, 1200);

    if (typeof IntersectionObserver === "undefined") {
      els.forEach(el => el.classList.add("in"));
      return () => clearTimeout(safety);
    }

    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.05, rootMargin: "0px 0px -5% 0px" });
    els.forEach(el => {
      // If element is already in viewport on mount (above the fold), reveal immediately.
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight && r.bottom > 0) {
        el.classList.add("in");
      } else {
        io.observe(el);
      }
    });
    return () => { clearTimeout(safety); io.disconnect(); };
  });
}

Object.assign(window, { Nav, Footer, Brand, NAV_ITEMS, useReveal });