// AMS — shared chrome (header w/ sticky-shrink + animated underline + scroll-spy,
// staging banner, footer, lightbox, gallery, CTA strip, page hero, eyebrow).

const D = window.AMS_DATA;
const { useStickyShrink: useStickyShrinkC, Reveal: RevealC } = window.AMSPrim;

/* ───────── Staging banner ───────── */
function StagingBanner() {
  return (
    <div className="ams-staging" role="status" aria-label="Internal staging banner">
      <div className="ams-staging-inner">
        <span className="ams-staging-pill">REVELATION AGENCY</span>
        <span className="ams-staging-text">Staging draft for AMS Energy Solutions</span>
        <a className="ams-staging-back" href="#" onClick={(e) => e.preventDefault()}>← Back to Staging Hub</a>
      </div>
    </div>
  );
}

function LogoLockup() {
  return (
    <a
      href="#/"
      className="ams-logo"
      aria-label="AMS Energy Solutions — Home"
      onClick={(e) => { e.preventDefault(); window.location.hash = "#/"; }}
    >
      <img src="assets/logo/ams-logo-full.png?v=2" alt="AMS Energy Solutions" />
    </a>
  );
}

const NAV = [
  { slug: "", label: "Home" },
  { slug: "about", label: "About" },
  {
    label: "Services",
    children: [
      { slug: "solar-installation", label: "Solar Installation" },
      { slug: "solar-cleaning", label: "Solar Cleaning" },
      { slug: "roofing", label: "Roofing" },
      { slug: "maintenance", label: "Maintenance" },
    ],
  },
  { slug: "contact", label: "Contact" },
];

function NavItem({ item, current }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => { setOpen(false); }, [current]);

  React.useEffect(() => {
    if (!open) return;
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    function onKey(e) { if (e.key === "Escape") setOpen(false); }
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  if (item.children) {
    const childActive = item.children.some((c) => c.slug === current);
    return (
      <div ref={ref} className={"ams-nav-dropdown" + (open ? " is-open" : "")}>
        <button
          type="button"
          className={"ams-nav-link ams-nav-link-trigger" + (childActive ? " is-active" : "")}
          aria-haspopup="menu"
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}
        >
          <span>{item.label}</span>
          <span className="ams-nav-caret" aria-hidden="true">
            <svg viewBox="0 0 12 12" width="10" height="10" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 5l3 3 3-3" />
            </svg>
          </span>
          <span className="ams-nav-underline" aria-hidden="true" />
        </button>
        <div className="ams-nav-menu" role="menu">
          {item.children.map((c) => (
            <a
              key={c.slug}
              href={"#/" + c.slug}
              role="menuitem"
              className={"ams-nav-menu-link" + (current === c.slug ? " is-active" : "")}
              onClick={() => setOpen(false)}
            >
              {c.label}
            </a>
          ))}
        </div>
      </div>
    );
  }

  const active = current === item.slug;
  return (
    <a
      href={"#/" + item.slug}
      className={"ams-nav-link" + (active ? " is-active" : "")}
      aria-current={active ? "page" : undefined}
    >
      <span>{item.label}</span>
      <span className="ams-nav-underline" aria-hidden="true" />
    </a>
  );
}

function Header({ route }) {
  const [open, setOpen] = React.useState(false);
  const shrunk = useStickyShrinkC(28);
  React.useEffect(() => setOpen(false), [route]);
  const current = route || "";

  return (
    <header className={"ams-header" + (shrunk ? " is-shrunk" : "")}>
      <div className="ams-header-inner">
        <LogoLockup />
        <nav className="ams-nav" aria-label="Primary">
          {NAV.map((n, i) => (
            <NavItem key={n.slug != null ? (n.slug || "home") : ("group-" + i)} item={n} current={current} />
          ))}
        </nav>
        <a href={D.business.phoneHref} className="ams-header-cta">
          <span className="ams-header-cta-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
            </svg>
          </span>
          <span className="ams-header-cta-full">{D.business.phone}</span>
          <span className="ams-header-cta-short">Call now</span>
        </a>
        <button
          className="ams-burger"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}
        >
          <span /><span /><span />
        </button>
      </div>
      {open && (
        <div className="ams-mobile-nav">
          {NAV.map((n, idx) => {
            if (n.children) {
              return (
                <React.Fragment key={"sec-" + idx}>
                  <span className="ams-mobile-section">{n.label}</span>
                  {n.children.map((c) => (
                    <a
                      key={c.slug}
                      href={"#/" + c.slug}
                      className={"ams-mobile-link ams-mobile-sublink" + (current === c.slug ? " is-active" : "")}
                    >
                      {c.label}
                    </a>
                  ))}
                </React.Fragment>
              );
            }
            return (
              <a
                key={n.slug || "home"}
                href={"#/" + n.slug}
                className={"ams-mobile-link" + (current === n.slug ? " is-active" : "")}
              >
                {n.label}
              </a>
            );
          })}
          <a href={D.business.phoneHref} className="ams-mobile-call">
            Call {D.business.phone}
          </a>
        </div>
      )}
    </header>
  );
}

function Footer() {
  return (
    <footer className="ams-footer">
      <div className="ams-footer-inner">
        <div className="ams-footer-brand">
          <img src="assets/logo/ams-logo-full.png?v=2" alt="AMS Energy Solutions" className="ams-footer-logo" />
          <p className="ams-footer-tagline">
            Family-owned solar, cleaning, and roofing — {D.business.sinceCopy.toLowerCase()}.
          </p>
        </div>

        <div className="ams-footer-col">
          <h4 className="ams-footer-h">Services</h4>
          <ul>
            {D.services.map((s) => (
              <li key={s.slug}><a href={"#/" + s.slug}>{s.label}</a></li>
            ))}
          </ul>
        </div>

        <div className="ams-footer-col">
          <h4 className="ams-footer-h">Company</h4>
          <ul>
            <li><a href="#/about">About</a></li>
            <li><a href="#/contact">Contact</a></li>
            <li><a href={D.social.yelp} target="_blank" rel="noreferrer">Yelp reviews</a></li>
          </ul>
        </div>

        <div className="ams-footer-col">
          <h4 className="ams-footer-h">Get a quote</h4>
          <a href={D.business.phoneHref} className="ams-footer-phone">{D.business.phone}</a>
          <p className="ams-footer-meta">{D.business.hours}</p>
          <p className="ams-footer-meta">{D.business.serviceArea}</p>
          <div className="ams-social">
            <a href={D.social.yelp} target="_blank" rel="noreferrer" aria-label="Yelp"><span>Yelp</span></a>
            <a href={D.social.facebook} target="_blank" rel="noreferrer" aria-label="Facebook"><span>Facebook</span></a>
            <a href={D.social.instagram} target="_blank" rel="noreferrer" aria-label="Instagram"><span>Instagram</span></a>
          </div>
        </div>
      </div>

      <div className="ams-footer-bottom">
        <span>© AMS Energy Solutions · San Jose, CA · Family-owned</span>
        <span>Site by <a href="https://revelationagency.com" target="_blank" rel="noreferrer" className="ams-footer-credit-link">Revelation Agency</a></span>
      </div>
    </footer>
  );
}

/* ───────── Lightbox ───────── */
function Lightbox({ photos, index, onClose, onNav }) {
  React.useEffect(() => {
    function onKey(e) {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") onNav(1);
      if (e.key === "ArrowLeft") onNav(-1);
    }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose, onNav]);
  if (index == null) return null;
  const p = photos[index];
  return (
    <div className="ams-lightbox" role="dialog" aria-modal="true" aria-label={p.caption}>
      <button className="ams-lb-close" aria-label="Close" onClick={onClose}>×</button>
      <button className="ams-lb-prev" aria-label="Previous" onClick={() => onNav(-1)}>‹</button>
      <button className="ams-lb-next" aria-label="Next" onClick={() => onNav(1)}>›</button>
      <figure className="ams-lb-figure" onClick={(e) => e.stopPropagation()}>
        <img src={p.src} alt={p.caption} />
        <figcaption>
          <span className="ams-lb-cap">{p.caption}</span>
          <span className="ams-lb-counter">{index + 1} / {photos.length}</span>
        </figcaption>
      </figure>
      <div className="ams-lb-backdrop" onClick={onClose} />
    </div>
  );
}

function Gallery({ photos, columns = 3 }) {
  const [active, setActive] = React.useState(null);
  const onNav = (delta) => {
    setActive((i) => i == null ? i : (i + delta + photos.length) % photos.length);
  };
  return (
    <>
      <div className={"ams-gallery cols-" + columns}>
        {photos.map((p, i) => (
          <button
            key={p.src}
            className="ams-tile"
            onClick={() => setActive(i)}
            aria-label={"Open photo: " + p.caption}
          >
            <img src={p.src} alt={p.caption} loading="lazy" />
            {p.caption && <span className="ams-tile-cap">{p.caption}</span>}
          </button>
        ))}
      </div>
      <Lightbox photos={photos} index={active} onClose={() => setActive(null)} onNav={onNav} />
    </>
  );
}

function ServiceAreaMap() {
  return (
    <section className="ams-section ams-section-soft">
      <div className="ams-container">
        <div className="ams-section-head">
          <SectionEyebrow>Service area</SectionEyebrow>
          <h2 className="ams-h2">Based in San Jose. We come to you.</h2>
        </div>
        <div className="ams-map ams-map-real">
          <iframe
            title="AMS Energy Solutions service area — Sacramento to Bakersfield, Bay Area to Central Valley"
            src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3247000!2d-121.2!3d37.4!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1700000000000"
            width="100%"
            height="100%"
            style={{ border: 0 }}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            allowFullScreen=""
          />
          <div className="ams-map-legend">
            <strong>Coverage</strong>
            <span>San Jose · Bay Area · San Joaquin Valley</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTAStrip({ heading, sub }) {
  return (
    <section className="ams-cta-strip">
      <div className="ams-container ams-cta-strip-inner">
        <div>
          <h2 className="ams-cta-strip-h">{heading}</h2>
          {sub && <p className="ams-cta-strip-sub">{sub}</p>}
        </div>
        <div className="ams-cta-strip-actions">
          <a href={D.business.phoneHref} className="ams-btn ams-btn-primary">Call {D.business.phone}</a>
          <a href="#/contact" className="ams-btn ams-btn-ghost-light">Request a quote</a>
        </div>
      </div>
    </section>
  );
}

function PageHero({ eyebrow, title, lede, image }) {
  return (
    <section className="ams-page-hero">
      <div className="ams-container ams-page-hero-grid">
        <div>
          <p className="ams-eyebrow">{eyebrow}</p>
          <h1 className="ams-page-title">{title}</h1>
          <p className="ams-page-lede">{lede}</p>
        </div>
        {image && (<figure className="ams-page-hero-img"><img src={image} alt="" /></figure>)}
      </div>
    </section>
  );
}

function SectionEyebrow({ children }) {
  return <p className="ams-eyebrow"><span className="ams-eyebrow-rule" />{children}</p>;
}

window.AMSChrome = { StagingBanner, Header, Footer, Lightbox, Gallery, CTAStrip, PageHero, SectionEyebrow, ServiceAreaMap };