// site/shared.jsx — Nav, Footer, shared atoms
const { useState, useEffect, useRef } = React;

/* ── Scroll-reveal hook (used by all page files) ─────────── */
function useReveal(rootMargin = "0px 0px -70px 0px") {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (!("IntersectionObserver" in window)) { el.classList.add("is-visible"); return; }
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { el.classList.add("is-visible"); obs.unobserve(el); } },
      { rootMargin }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return ref;
}

/* ── TopNav ────────────────────────────────────────────────── */
function TopNav({ route, onNavigate }) {
  const items = [
    { label: "Home",           route: "/" },
    { label: "About",          route: "/about" },
    { label: "Services",       route: "/services" },
    { label: "Case Studies",   route: "/case-studies" },
    { label: "Testimonials",   route: "/testimonials" },
    { label: "Why It Matters", route: "/why-it-matters" },
    { label: "Contact Us",     route: "/contact" },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a
          className="nav-logo"
          href="#/"
          onClick={(e) => { e.preventDefault(); onNavigate("/"); }}
          aria-label="Rai Wealth Management — home"
        >
          <img
            src="./assets/logo/rai-lockup-gold-transparent.png"
            alt="Rai Wealth Management — Ethics · Expertise · Excellence"
          />
        </a>
        <div className="nav-links">
          {items.map((it) => (
            <a
              key={it.route}
              href={`#${it.route}`}
              onClick={(e) => { e.preventDefault(); onNavigate(it.route); }}
              className={"nav-link" + (route === it.route ? " is-active" : "")}
            >
              {it.label}
            </a>
          ))}
        </div>
      </div>
    </nav>
  );
}

/* ── PageHeading — gold on white, used on inner pages ─────── */
function PageHeading({ eyebrow, title, sub }) {
  return (
    <section className="page-heading" data-comment-anchor={`page-heading-${title}`}>
      <div className="container">
        {eyebrow && <span className="ph-eyebrow">{eyebrow}</span>}
        <h1>{title}</h1>
        <span className="ph-rule" aria-hidden="true"></span>
        {sub && <div className="ph-sub">{sub}</div>}
      </div>
    </section>
  );
}

/* ── SectionHead — gold on navy ───────────────────────────── */
function NavySectionHead({ eyebrow, title, lede }) {
  return (
    <div className="s-head">
      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
      <h2>{title}</h2>
      <span className="rule" aria-hidden="true"></span>
      {lede && <div className="lede">{lede}</div>}
    </div>
  );
}

/* ── Footer ───────────────────────────────────────────────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-left">
          <div className="f-name">Abhineet Rai</div>
          <div className="f-row">
            Mobile&nbsp;—&nbsp;
            <a href="tel:+447456010413">07456 010413</a>
          </div>
          <div className="f-row">
            Email&nbsp;—&nbsp;
            <a href="mailto:abhineetrai@raiwm.co.uk">abhineetrai@raiwm.co.uk</a>
          </div>
        </div>
        <div className="footer-right">
          <a
            className="linkedin"
            href="https://www.linkedin.com/in/abhineet-rai-8501aa4/"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="LinkedIn — Abhineet Rai"
            title="LinkedIn"
          >
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/>
            </svg>
          </a>
          <div className="f-meta">© {new Date().getFullYear()} &nbsp;·&nbsp; Rai Wealth Management</div>
        </div>
      </div>
    </footer>
  );
}

/* ── Editorial photo block ───────────────────────────────── */
function EditorialPhoto({ src, alt, ratio = "16 / 10" }) {
  return (
    <figure className="ed-photo" style={{ aspectRatio: ratio }}>
      <img
        src={src}
        alt={alt}
        loading="lazy"
        referrerPolicy="no-referrer"
        onError={(e) => {
          e.currentTarget.style.display = "none";
          e.currentTarget.parentElement.classList.add("ed-photo--missing");
        }}
      />
      <span className="ed-photo-fallback">{alt}</span>
      <span className="ed-photo-scrim" aria-hidden="true"></span>
    </figure>
  );
}

Object.assign(window, {
  TopNav,
  PageHeading,
  NavySectionHead,
  Footer,
  EditorialPhoto,
  useReveal,
});