// Contact / Book a Service page
const { Button, Badge, SectionHeading, BookingWizard, Icon } = window.OsegueraTreeServiceDesignSystem_8e9db9;

function InfoRow({ icon, label, children }) {
  return (
    <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
      <div style={{ width: 42, height: 42, flex: "none", borderRadius: "var(--radius-md)", background: "var(--green-100)", color: "var(--green-700)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon data-lucide={icon} style={{ width: 20, height: 20 }} /></div>
      <div>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)" }}>{label}</div>
        <div style={{ fontSize: 16, fontWeight: 600, color: "var(--text-heading)", marginTop: 2 }}>{children}</div>
      </div>
    </div>
  );
}

function ContactPage() {
  return (
    <div>
      <section style={{ background: "var(--surface-sunken)", paddingBlock: 52 }}>
        <div className="container"><SectionHeading align="center" eyebrow="Book a Service" title="Request your free site visit" intro="Tell us about the job and pick a time — we'll confirm your visit and email you a copy. Emergency service is available 24/7." /></div>
      </section>

      <section className="section" style={{ paddingBlock: 56 }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "0.8fr 1.4fr", gap: 44, alignItems: "start" }} id="contact-grid">
          <div>
            <div style={{ display: "grid", gap: 22 }}>
              <InfoRow icon="phone" label="Call / Text">
                <a href={window.TEL} style={{ color: "var(--green-700)" }}>{window.PHONE}</a>
              </InfoRow>
              <InfoRow icon="mail" label="Email">juan.oseguera1797@gmail.com</InfoRow>
              <InfoRow icon="map-pin" label="Service Area">Salinas, CA · all of Monterey County</InfoRow>
              <InfoRow icon="clock" label="Hours">24/7 · weekend appointments available</InfoRow>
              <InfoRow icon="badge-check" label="License">CA Contractors Lic. #1127560</InfoRow>
            </div>
            <div style={{ marginTop: 26, display: "flex", flexWrap: "wrap", gap: 8 }}>
              <Badge variant="green" icon="shield-check">Licensed & Insured</Badge>
              <Badge variant="solid-accent" icon="triangle-alert">24/7 Emergency</Badge>
              <Badge variant="gold" icon="star">Google Reviewed</Badge>
            </div>
            <div style={{ marginTop: 26 }}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 10 }}>Payments accepted</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {["Visa", "Mastercard", "Amex", "PayPal", "Zelle", "CareCredit", "Cash", "Money Order"].map((p) => <span key={p} style={{ fontSize: 12, fontWeight: 700, background: "var(--bone-100)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-pill)", padding: "5px 12px", color: "var(--text-body)" }}>{p}</span>)}
              </div>
            </div>
          </div>
          <BookingWizard onSubmit={(r) => console.log("LEAD", r)} />
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ContactPage });