/* nav.jsx — site header + footer */
const { useEffect, useState } = React;

const NAV_PAGES = [
  { id: "home", label: "Home" },
  { id: "services", label: "Services" },
  { id: "portfolio", label: "Portfolio" },
  { id: "about", label: "About" },
  { id: "contact", label: "Contact" },
];

const SiteHeader = ({ page, navigate, lightOnHero = true }) => {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Lock page on hero of home for light overlay; on other pages, header is light-colored against light bg
  const lightHeader = !lightOnHero;

  return (
    <>
      <header className={"site-header " + (scrolled ? "is-scrolled" : (lightHeader ? "is-light" : ""))}>
        <div className="brandmark" onClick={() => navigate("home")}>
          <BrandMark color="currentColor" />
          <span>Coastline <span className="italic">Blooms</span></span>
        </div>
        <nav>
          <ul className="nav-list">
            {NAV_PAGES.slice(0, -1).map(p => (
              <li key={p.id}>
                <span
                  className={"nav-link" + (page === p.id ? " is-active" : "")}
                  onClick={() => navigate(p.id)}
                >
                  {p.label}
                </span>
              </li>
            ))}
          </ul>
        </nav>
        <span className="nav-cta hide-mobile" onClick={() => navigate("contact")}>Inquire</span>
        <button className="nav-toggle show-mobile" onClick={() => setMenuOpen(true)} aria-label="Open menu">
          <span className="bars" />
          Menu
        </button>
      </header>

      <div className={"mobile-menu" + (menuOpen ? " is-open" : "")}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div className="brandmark" onClick={() => { navigate("home"); setMenuOpen(false); }}>
            <BrandMark />
            <span>Coastline <span className="italic">Blooms</span></span>
          </div>
          <button className="nav-toggle" onClick={() => setMenuOpen(false)} style={{ fontSize: 13, padding: "8px 0" }}>✕ Close</button>
        </div>
        <ul className="mm-list">
          {NAV_PAGES.slice(0, -1).map(p => (
            <li key={p.id} onClick={() => { navigate(p.id); setMenuOpen(false); }}
              style={{ WebkitTapHighlightColor: "transparent" }}>{p.label}</li>
          ))}
        </ul>
        <div style={{ marginTop: "auto", paddingTop: 32, borderTop: "1px solid var(--hairline-soft)", fontSize: 12, color: "var(--plum-soft)", letterSpacing: "0.1em" }}>
          <a href="mailto:coastlineblooms@gmail.com" style={{ display: "block", marginBottom: 8, color: "inherit" }}>coastlineblooms@gmail.com</a>
          <a href="https://www.tiktok.com/@coastline.blooms" target="_blank" rel="noopener noreferrer" style={{ color: "inherit" }}>@coastline.blooms</a>
        </div>
      </div>
    </>
  );
};

const SiteFooter = ({ navigate }) => (
  <footer className="site-footer">
    <div className="ft-grid">
      <div>
        <div className="brandmark" style={{ color: "var(--ivory)", marginBottom: 18 }}>
          <BrandMark />
          <span>Coastline <span className="italic">Blooms</span></span>
        </div>
        <p style={{ color: "rgba(251,244,235,0.62)", fontSize: 14, lineHeight: 1.7, maxWidth: 320 }}>
          A California floral events studio designing romantic, refined arrangements for weddings,
          private gatherings, and coastal celebrations.
        </p>
        <div style={{ marginTop: 28, display: "flex", gap: 12, alignItems: "center", color: "rgba(251,244,235,0.54)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>
          <span>Los Angeles</span><span style={{ opacity: 0.4 }}>·</span><span>San Diego</span><span style={{ opacity: 0.4 }}>·</span><span>Inland Empire</span>
        </div>
      </div>
      <div>
        <h4>Studio</h4>
        <ul className="ft-list">
          <li onClick={() => navigate("about")}>About</li>
          <li onClick={() => navigate("services")}>Services</li>
          <li onClick={() => navigate("portfolio")}>Portfolio</li>
          <li onClick={() => navigate("contact")}>Inquire</li>
        </ul>
      </div>
      <div>
        <h4>Services</h4>
        <ul className="ft-list">
          <li onClick={() => navigate("services")}>Weddings</li>
          <li onClick={() => navigate("services")}>Private Events</li>
          <li onClick={() => navigate("services")}>Corporate</li>
          <li onClick={() => navigate("services")}>Installations</li>
        </ul>
      </div>
      <div>
        <h4>Connect</h4>
        <ul className="ft-list">
          <li><a href="mailto:coastlineblooms@gmail.com" style={{ color: "inherit" }}>coastlineblooms@gmail.com</a></li>
          <li><a href="https://www.tiktok.com/@coastline.blooms" target="_blank" rel="noopener noreferrer" style={{ color: "inherit" }}>@coastline.blooms — TikTok</a></li>
          <li>By appointment</li>
        </ul>
      </div>
    </div>
    <div className="ft-bottom">
      <span>© 2026 Coastline Blooms</span>
      <span>Designed in Southern California</span>
    </div>
  </footer>
);

/* Reveal-on-scroll wrapper */
const Reveal = ({ children, delay = 0, as = "div", className = "", style = {}, ...rest }) => {
  const ref = React.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("is-in");
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: "0px 0px -10% 0px", threshold: 0.05 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={"reveal " + className} data-delay={delay} style={style} {...rest}>
      {children}
    </Tag>
  );
};

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