// Site chrome: TopBar, Header (sticky nav), EmergencyBar, Footer.
const { Button, Badge, Icon } = window.OsegueraTreeServiceDesignSystem_8e9db9;
const PHONE = "(831) 238-1797";
const TEL = "tel:8312381797";

const NAV = [
  { key: "home", label: "Home" },
  { key: "removal", label: "Tree Removal" },
  { key: "trimming", label: "Tree Trimming" },
  { key: "areas", label: "Areas We Serve" },
  { key: "gallery", label: "Gallery" },
  { key: "contact", label: "Contact" },
];

function TopBar() {
  return (
    <div style={{ background: "var(--green-900)", color: "var(--bone-100)", fontSize: 13 }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "8px var(--gutter)", flexWrap: "wrap" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon data-lucide="badge-check" style={{ width: 15, height: 15, color: "var(--gold-300)" }} />CA Contractors Lic. #1127560</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon data-lucide="clock" style={{ width: 15, height: 15, color: "var(--gold-300)" }} />Available 24/7 · Weekend appointments</span>
        </div>
        <a href="https://g.page/r/CYsS21LzGVskEBM/review" target="_blank" rel="noreferrer" style={{ color: "var(--bone-100)", display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 700 }}>
          <Icon data-lucide="star" style={{ width: 15, height: 15, color: "var(--gold-300)", fill: "var(--gold-300)" }} />Leave a Google Review
        </a>
      </div>
    </div>
  );
}

function Header({ page, nav }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [openMenu, setOpenMenu] = React.useState(false);
  React.useEffect(() => {
    const el = document.getElementById("kit-scroll");
    const onScroll = () => setScrolled((el ? el.scrollTop : window.scrollY) > 8);
    (el || window).addEventListener("scroll", onScroll);
    return () => (el || window).removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50, background: scrolled ? "rgba(245,241,232,0.92)" : "var(--bone-50)", backdropFilter: scrolled ? "blur(10px)" : "none", borderBottom: "1px solid var(--border-subtle)", transition: "background var(--dur-base)" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, padding: "12px var(--gutter)" }}>
        <img src="assets/logo-wordmark-transparent.png" alt="Oseguera Tree Service" style={{ height: 46, cursor: "pointer" }} onClick={() => nav("home")} />
        <nav style={{ display: "flex", alignItems: "center", gap: 26 }} className="kit-nav">
          {NAV.map((n) => (
            <span key={n.key} className={"navlink" + (page === n.key ? " active" : "")} onClick={() => nav(n.key)}>{n.label}</span>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <Button variant="accent" icon="phone" href={TEL}>{PHONE}</Button>
        </div>
      </div>
    </header>
  );
}

function EmergencyBar() {
  return (
    <div style={{ background: "var(--orange-500)", color: "#fff" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14, padding: "10px var(--gutter)", flexWrap: "wrap", textAlign: "center" }}>
        <Icon data-lucide="triangle-alert" style={{ width: 18, height: 18 }} />
        <strong style={{ fontSize: 15 }}>Emergency Tree Service Available — storm damage, fallen or leaning trees.</strong>
        <a href={TEL} style={{ color: "#fff", fontWeight: 800, textDecoration: "underline", textUnderlineOffset: 3 }}>Call {PHONE} · 24/7</a>
      </div>
    </div>
  );
}

function Footer({ nav }) {
  const pays = ["Visa", "Mastercard", "Amex", "PayPal", "Zelle", "CareCredit", "Cash", "Money Order"];
  return (
    <footer style={{ background: "var(--green-900)", color: "var(--bone-100)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1.2fr", gap: 40, padding: "56px var(--gutter) 40px" }} id="kit-footer-grid">
        <div>
          <img src="assets/logo-wordmark-white.png" alt="Oseguera Tree Service" style={{ height: 54, marginBottom: 16 }} />
          <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(245,241,232,0.75)", maxWidth: 320, margin: 0 }}>
            Licensed, bonded & insured tree care for Salinas and all of Monterey County. Trim for elegance & future growth.
          </p>
          <div style={{ display: "flex", gap: 8, marginTop: 18, flexWrap: "wrap" }}>
            <Badge variant="gold" icon="shield-check">Lic. #1127560</Badge>
            <Badge variant="solid-accent" icon="clock">24/7</Badge>
          </div>
        </div>
        <div>
          <h4 style={{ fontFamily: "var(--font-body)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gold-300)", margin: "0 0 16px" }}>Quick Links</h4>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10, fontSize: 14 }}>
            {NAV.map((n) => (
              <li key={n.key}><span className="pilllink hoverline" style={{ color: "rgba(245,241,232,0.85)" }} onClick={() => nav(n.key)}>{n.label}</span></li>
            ))}
          </ul>
        </div>
        <div>
          <h4 style={{ fontFamily: "var(--font-body)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gold-300)", margin: "0 0 16px" }}>Contact</h4>
          <div style={{ display: "grid", gap: 12, fontSize: 14, color: "rgba(245,241,232,0.85)" }}>
            <a href={TEL} style={{ color: "#fff", display: "inline-flex", gap: 8, alignItems: "center", fontWeight: 700 }}><Icon data-lucide="phone" style={{ width: 16, height: 16 }} />{PHONE}</a>
            <a href="mailto:juan.oseguera1797@gmail.com" style={{ color: "rgba(245,241,232,0.85)", display: "inline-flex", gap: 8, alignItems: "center" }}><Icon data-lucide="mail" style={{ width: 16, height: 16 }} />juan.oseguera1797@gmail.com</a>
            <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}><Icon data-lucide="map-pin" style={{ width: 16, height: 16 }} />Salinas, CA · Monterey County</span>
          </div>
          <div style={{ marginTop: 20 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(245,241,232,0.55)", marginBottom: 8 }}>We accept</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {pays.map((p) => <span key={p} style={{ fontSize: 11, fontWeight: 700, background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.14)", borderRadius: "var(--radius-pill)", padding: "4px 10px" }}>{p}</span>)}
            </div>
          </div>
        </div>
      </div>
      <div style={{ borderTop: "1px solid rgba(255,255,255,0.12)" }}>
        <div className="container" style={{ padding: "16px var(--gutter)", fontSize: 12.5, color: "rgba(245,241,232,0.6)", display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <span>© {new Date().getFullYear()} Juan Oseguera Tree Service · Cal. State Contractors License #1127560</span>
          <span>Terms of Use · Privacy Policy</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, Header, EmergencyBar, Footer, NAV, PHONE, TEL });