// App shell — header, footer, router, sticky mobile CTA.

const NAV = [
  { id: "home",     label: "Home" },
  { id: "services", label: "Services" },
  { id: "about",    label: "About" },
  { id: "area",     label: "Service Area" },
  { id: "reviews",  label: "Reviews" },
  { id: "contact",  label: "Contact" },
];

const Brand = () => (
  <div className="header__brand">
    <img src="assets/logo.jpg" alt="Daigle Electric logo" />
    <div className="header__wordmark">
      Daigle Electric
      <small>Barrington · NH</small>
    </div>
  </div>
);

const HamburgerIcon = ({ open }) => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
    {open
      ? <><path d="M6 6l12 12"/><path d="M18 6l-12 12"/></>
      : <><path d="M3 7h18"/><path d="M3 12h18"/><path d="M3 17h18"/></>}
  </svg>
);

const Header = ({ page, onNav }) => {
  const [open, setOpen] = React.useState(false);
  const go = (id) => { setOpen(false); onNav(id); };
  return (
    <>
      <header className="header" role="banner">
        <div className="header__inner">
          <a href="#home" onClick={(e) => { e.preventDefault(); go("home"); }} aria-label="Daigle Electric — Home">
            <Brand/>
          </a>
          <nav className="header__nav" aria-label="Primary">
            {NAV.map((n) => (
              <a key={n.id}
                 href={`#${n.id}`}
                 className={page === n.id ? "is-active" : ""}
                 onClick={(e) => { e.preventDefault(); go(n.id); }}>
                {n.label}
              </a>
            ))}
          </nav>
          <a href={PHONE_HREF} className="header__phone" aria-label={`Call ${PHONE_DISPLAY}`}>
            <PhoneIcon size={16}/> {PHONE_DISPLAY}
          </a>
          <button className="btn btn--primary header__cta" onClick={() => go("contact")}>
            Request a Quote
          </button>
          <button className="header__hamburger" aria-label="Open menu" onClick={() => setOpen(true)}>
            <HamburgerIcon/>
          </button>
        </div>
      </header>

      <div className={"drawer " + (open ? "is-open" : "")} aria-hidden={!open}>
        <div className="drawer__top">
          <Brand/>
          <button className="header__hamburger" style={{ display: "inline-flex" }} aria-label="Close menu" onClick={() => setOpen(false)}>
            <HamburgerIcon open/>
          </button>
        </div>
        <nav className="drawer__nav" aria-label="Mobile">
          {NAV.map((n) => (
            <a key={n.id} href={`#${n.id}`}
               className={page === n.id ? "is-active" : ""}
               onClick={(e) => { e.preventDefault(); go(n.id); }}>
              {n.label}
            </a>
          ))}
        </nav>
        <div className="drawer__foot">
          <a href={PHONE_HREF} className="btn btn--primary btn--xl btn--block"><PhoneIcon/> Call {PHONE_DISPLAY}</a>
          <button className="btn btn--ghost btn--xl btn--block" onClick={() => go("contact")}>
            Request a Quote <ArrowIcon/>
          </button>
        </div>
      </div>
    </>
  );
};

const Footer = ({ onNav }) => (
  <footer className="footer">
    <div className="wrap">
      <div className="footer__grid">
        <div>
          <Brand/>
          <p className="mt-16" style={{ color: "var(--ink-3)", maxWidth: 360 }}>
            Owner-operated electrical contractor serving NH, ME &amp; MA since 2000.
            Mike picks up. Mike shows up.
          </p>
          <div className="mt-16" style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink-2)" }}>
            <Stars/> <span>4.9 on Google</span>
          </div>
        </div>

        <div>
          <h4>Services</h4>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("services"); }}>Generator install</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("services"); }}>Service / panel upgrades</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("services"); }}>New construction</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("services"); }}>Renovations</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("services"); }}>Commercial</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("services"); }}>Emergency</a>
        </div>

        <div>
          <h4>Company</h4>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("about"); }}>About Mike</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("area"); }}>Service area</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("reviews"); }}>Reviews</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Request a Quote</a>
        </div>

        <div>
          <h4>Contact</h4>
          <a href={PHONE_HREF}>{PHONE_DISPLAY}</a>
          <a href={`mailto:${EMAIL}`}>{EMAIL}</a>
          <div style={{ padding: "4px 0", color: "var(--ink-3)" }}>{ADDRESS_LINE1}<br/>{ADDRESS_LINE2}</div>
          <div style={{ padding: "4px 0", color: "var(--ink-3)" }}>{HOURS_LINE1}</div>
        </div>
      </div>

      <hr className="rule mt-40"/>
      <div className="mt-24" style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, fontSize: 13, color: "var(--ink-3)" }}>
        <div>© {new Date().getFullYear()} Daigle Electric LLC. Licensed &amp; insured.</div>
        <div>Site by <a href="#" style={{ color: "var(--ink-2)" }}>Made-To-Measure</a> · <span>v1.0 mockup</span></div>
      </div>
    </div>
  </footer>
);

const StickyCta = ({ onNav }) => (
  <div className="sticky-cta">
    <a className="btn btn--primary" href={PHONE_HREF}><PhoneIcon size={14}/> Call</a>
    <button className="btn btn--ghost" onClick={() => onNav("contact")}>Request Quote <ArrowIcon size={14}/></button>
  </div>
);

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "accentColor": "#2D6BE4",
  "showProofPills": true,
  "headlineCopy": "Mike picks up. Mike shows up."
}/*EDITMODE-END*/;

// ===== App =====

const PAGES = {
  home: HomePage,
  services: ServicesPage,
  about: AboutPage,
  area: ServiceAreaPage,
  reviews: ReviewsPage,
  contact: ContactPage,
};

const App = () => {
  const initial = (typeof location !== "undefined" && location.hash.replace("#","")) || "home";
  const [page, setPage] = React.useState(PAGES[initial] ? initial : "home");
  const [heroVariant, setHeroVariant] = React.useState(TWEAK_DEFAULTS.heroVariant);

  const navigate = React.useCallback((id) => {
    if (!PAGES[id]) id = "home";
    setPage(id);
    window.scrollTo({ top: 0, behavior: "instant" });
    try { history.replaceState(null, "", "#" + id); } catch (e) {}
  }, []);

  React.useEffect(() => {
    window.__nav = navigate;
    const onHash = () => {
      const id = location.hash.replace("#","") || "home";
      if (PAGES[id]) setPage(id);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, [navigate]);

  // Subscribe to tweak changes to switch hero variant live
  React.useEffect(() => {
    const handler = (e) => {
      if (e?.data?.type === "__edit_mode_set_keys" && e.data.edits?.heroVariant) {
        setHeroVariant(e.data.edits.heroVariant);
      }
    };
    window.addEventListener("message", handler);
    return () => window.removeEventListener("message", handler);
  }, []);

  const PageComp = PAGES[page] || HomePage;
  const extra = page === "home" ? { heroVariant } : {};

  return (
    <>
      <Header page={page} onNav={navigate}/>
      <PageComp key={page} {...extra}/>
      <Footer onNav={navigate}/>
      <StickyCta onNav={navigate}/>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>);