/* global React, ReactDOM, Nav, Hero, TrustBar, ServiceCard, ServicesSection, AboutSection, ReviewsSection, ZonesSection, CTABanner, ContactSection, MobileSticky, Icon, Button, Logo */
const { useEffect } = React;

const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth" }); };

function Footer() {
  const LINKS = [["hero","Home"],["services","Services"],["about","About"],["reviews","Reviews"],["zones","Service Area"],["contact","Contact"]];
  return (
    <footer style={{ background: "var(--gs-charcoal-deep)", color: "rgba(255,255,255,0.8)", padding: "80px 0 32px" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 48 }}>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "#fff", letterSpacing: "-0.02em", marginBottom: 12 }}>Grace Services</div>
            <div style={{ fontSize: 14, lineHeight: 1.7, color: "rgba(255,255,255,0.65)", maxWidth: 320 }}>
              White glove handyman for the SF Peninsula and South Bay. Insured. Same-day.
            </div>
            <div style={{ marginTop: 20, display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--font-mono)", fontSize: 13, color: "#fff" }}>
              <Icon name="phone" size={14} style={{ color: "var(--gs-blue)" }} />(669) 280-5858
            </div>
          </div>
          <div>
            <div style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.18em", color: "rgba(255,255,255,0.55)", marginBottom: 14 }}>Navigate</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {LINKS.map(([id, l]) => (
                <button key={id} onClick={() => scrollTo(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>
          <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)" }}>
              GL $1M · per occ.<br/>CA handyman exempt (§7048.5, under $1,000 cap)
            </div>
          </div>
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.08)", fontFamily: "var(--font-mono)", fontSize: 11.5, color: "rgba(255,255,255,0.5)", lineHeight: 1.9 }}>
          <div style={{ marginBottom: 4, textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 10.5, color: "rgba(255,255,255,0.4)" }}>Services</div>
          <div style={{ marginBottom: 16 }}>
            <a href="/services/tv-mounting/"        style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>TV Mounting</a>
            <a href="/services/furniture-assembly/" style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Furniture Assembly</a>
            <a href="/services/wall-drywall/"       style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Drywall Repair</a>
            <a href="/services/fixtures-hardware/"  style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Fixtures & Hardware</a>
            <a href="/services/smart-home-lighting/" style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Smart Home</a>
            <a href="/services/faucet-toilet-repair/" style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none" }}>Faucet & Toilet</a>
          </div>
          <div style={{ marginBottom: 4, textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 10.5, color: "rgba(255,255,255,0.4)" }}>Areas</div>
          <div>
            <a href="/areas/palo-alto/"      style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Palo Alto</a>
            <a href="/areas/menlo-park/"     style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Menlo Park</a>
            <a href="/areas/mountain-view/"  style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Mountain View</a>
            <a href="/areas/sunnyvale/"      style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Sunnyvale</a>
            <a href="/areas/cupertino/"      style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Cupertino</a>
            <a href="/areas/san-mateo/"      style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>San Mateo</a>
            <a href="/areas/burlingame/"     style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Burlingame</a>
            <a href="/areas/redwood-city/"   style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none", marginRight: 14 }}>Redwood City</a>
            <a href="/areas/san-jose-south/" style={{ color: "rgba(255,255,255,0.75)", textDecoration: "none" }}>South San Jose</a>
          </div>
        </div>
        <div style={{ marginTop: 32, 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>&copy; 2026 Grace Services &middot; San Francisco Peninsula</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 16 }}>
            <a href="/terms/" style={{ color: "rgba(255,255,255,0.5)", textDecoration: "none" }}>Terms</a>
            <a href="/privacy/" style={{ color: "rgba(255,255,255,0.5)", textDecoration: "none" }}>Privacy</a>
            <a href="/accessibility/" style={{ color: "rgba(255,255,255,0.5)", textDecoration: "none" }}>Accessibility</a>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--gs-blue)" }} />
              Built with care in Palo Alto
            </span>
          </span>
        </div>
      </div>
      <div style={{ paddingTop: 12, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,0.45)" }}>
        ⚠️ AI-assisted booking suggestions. AI may make mistakes — verify before use.
      </div>
    </footer>
  );
}

function App() {
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <div style={{ minHeight: "100vh" }}>
      <Nav />
      <main>
        <Hero />
        <TrustBar />
        <ServicesSection />
        <AboutSection />
        <ReviewsSection />
        <ZonesSection />
        <CTABanner />
        <ContactSection />
      </main>
      <Footer />
      <MobileSticky />
    </div>
  );
}

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