/* global React, ReactDOM, HomePage, ServicesPage, AboutPage, GalleryPage, ReviewsPage, AreasPage, FAQPage, ContactPage, Logo, Icon, Button */
const { useState, useEffect } = React;

const NAV = [
  ["home", "Home"],
  ["services", "Services"],
  ["about", "About"],
  ["gallery", "Gallery"],
  ["reviews", "Reviews"],
  ["areas", "Areas"],
  ["faq", "FAQ"],
  ["contact", "Contact"],
];

function Header({ page, nav }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", h);
    return () => window.removeEventListener("scroll", h);
  }, []);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(250,247,242,0.75)" : "rgba(250,247,242,0.95)",
      backdropFilter: "blur(16px) saturate(1.4)",
      WebkitBackdropFilter: "blur(16px) saturate(1.4)",
      borderBottom: scrolled ? "1px solid var(--border-subtle)" : "1px solid transparent",
      transition: "border-color var(--dur-base) var(--ease-out)",
    }}>
      <div style={{
        maxWidth: "var(--container)", margin: "0 auto",
        padding: "14px var(--gutter)",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
      }}>
        <div style={{ flexShrink: 0 }}><Logo /></div>
        <nav aria-label="Main navigation" style={{ display: "flex", gap: 2, flexWrap: "nowrap", minWidth: 0 }}>
          {NAV.map(([id, label]) => (
            <button key={id} onClick={() => nav(id)} aria-current={page === id ? "page" : undefined} style={{
              background: "transparent", border: 0, padding: "8px 12px",
              fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 500,
              color: page === id ? "var(--fg-1)" : "var(--fg-3)",
              cursor: "pointer", borderRadius: 6,
              position: "relative", whiteSpace: "nowrap",
            }}>
              {label}
              {page === id && <span style={{
                position: "absolute", left: 12, right: 12, bottom: 2, height: 1,
                background: "var(--fg-accent)",
              }}/>}
            </button>
          ))}
        </nav>
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexShrink: 0 }}>
          <a href={"tel:" + (window.HP_PHONE_RAW || "")} title={window.HP_PHONE || ""} style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg-2)",
            textDecoration: "none", padding: "8px 10px", whiteSpace: "nowrap",
          }}>
            <Icon name="phone" size={14} /> <span className="hp-phone-full">{window.HP_PHONE || ""}</span>
          </a>
          <Button onClick={() => nav("contact")} style={{ padding: "10px 16px", fontSize: 14 }}>Book</Button>
        </div>
      </div>
    </header>
  );
}

function Footer({ nav }) {
  return (
    <footer style={{ background: "var(--bg-inverse)", color: "rgba(255,255,255,0.8)", padding: "80px 0 32px", marginTop: 0 }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48 }}>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "#fff", letterSpacing: "-0.02em", marginBottom: 12 }}>{window.HP_BUSINESS_NAME || "Our Services"}</div>
            <div style={{ fontSize: 14, lineHeight: 1.7, color: "rgba(255,255,255,0.65)", maxWidth: 340 }}>
              {window.HP_TAGLINE || ""}
            </div>
            <div style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--font-mono)", fontSize: 13, color: "#fff" }}>
              <Icon name="phone" size={14} style={{ color: "var(--fg-accent)" }} />
              {window.HP_PHONE || ""}
            </div>
          </div>
          <FooterCol title="Explore" items={NAV.slice(0, 4)} nav={nav} />
          <FooterCol title="More" items={NAV.slice(4)} nav={nav} />
          <div>
            <div style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.18em", color: "rgba(255,255,255,0.55)", marginBottom: 14 }}>Credentials</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, lineHeight: 1.9, color: "rgba(255,255,255,0.75)" }}>
              {window.HP_LICENSE_LINE && <>{window.HP_LICENSE_LINE}<br/></>}
              {window.HP_INSURANCE_LINE && <>{window.HP_INSURANCE_LINE}<br/></>}
              {window.HP_EXEMPTION_LINE && <>{window.HP_EXEMPTION_LINE}<br/></>}
              {window.HP_LANGUAGES || 'EN'}
            </div>
          </div>
        </div>
        <div style={{ marginTop: 60, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.12)", display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 12, color: "rgba(255,255,255,0.5)" }}>
          <span>© {new Date().getFullYear()} {window.HP_BUSINESS_NAME || "Our Services"} · {window.HP_REGION || ""}</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 16 }}>
            <a href="/terms/" style={{ color: "rgba(255,255,255,0.45)", textDecoration: "none", fontFamily: "var(--font-mono)", fontSize: 12 }}>Terms</a>
            <a href="/privacy/" style={{ color: "rgba(255,255,255,0.45)", textDecoration: "none", fontFamily: "var(--font-mono)", fontSize: 12 }}>Privacy</a>
            <a href="/accessibility/" style={{ color: "rgba(255,255,255,0.45)", textDecoration: "none", fontFamily: "var(--font-mono)", fontSize: 12 }}>Accessibility</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

const FooterCol = ({ title, items, nav }) => (
  <div>
    <div style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.18em", color: "rgba(255,255,255,0.55)", marginBottom: 14 }}>{title}</div>
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {items.map(([id, l]) => (
        <button key={id} onClick={() => nav(id)} style={{ background: "transparent", border: 0, color: "rgba(255,255,255,0.8)", fontSize: 14, cursor: "pointer", textAlign: "left", padding: 0, fontFamily: "var(--font-sans)" }}>{l}</button>
      ))}
    </div>
  </div>
);

function App() {
  const [page, setPage] = useState(() => {
    try { return localStorage.getItem("hp_page") || "home"; } catch (e) { return "home"; }
  });
  const nav = (id) => {
    setPage(id);
    try { localStorage.setItem("hp_page", id); } catch (e) {}
    window.scrollTo({ top: 0, behavior: "instant" });
    // Re-render icons
    setTimeout(() => window.lucide && window.lucide.createIcons(), 30);
  };

  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  const Page = {
    home: HomePage, services: ServicesPage, about: AboutPage, gallery: GalleryPage,
    reviews: ReviewsPage, areas: AreasPage, faq: FAQPage, contact: ContactPage,
  }[page];

  return (
    <div data-screen-label={page} style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <a href="#main-content" className="skip-link">Skip to main content</a>
      <Header page={page} nav={nav} />
      <main id="main-content" tabIndex="-1" style={{ flex: 1 }}>
        <Page nav={nav} />
      </main>
      <Footer nav={nav} />
    </div>
  );
}

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