// Areas We Serve
const { Button, Badge, SectionHeading, Icon } = window.OsegueraTreeServiceDesignSystem_8e9db9;

const AREAS = [
  { county: "Monterey County", note: "Our home county", cities: ["Salinas (county seat)","Carmel-by-the-Sea","Monterey","Pacific Grove","Seaside","Marina","Sand City","Del Rey Oaks","Soledad","Gonzales","Greenfield","King City"] },
  { county: "Santa Cruz County", note: "", cities: ["Santa Cruz","Watsonville","Capitola","Scotts Valley","Aptos","Ben Lomond","Boulder Creek","Felton","Soquel","La Selva Beach"] },
  { county: "San Benito County", note: "", cities: ["Hollister (county seat)","San Juan Bautista","Aromas","Tres Pinos","Ridgemark","Paicines"] },
];

function AreasPage({ nav }) {
  return (
    <div>
      <section style={{ position: "relative", overflow: "hidden" }}>
        <img src="assets/photos/team-group.jpg" alt="Crew standing by their truck and chipper" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(16,40,26,0.9), rgba(16,40,26,0.5))" }} />
        <div className="container" style={{ position: "relative", paddingBlock: 84, color: "#fff" }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ color: "var(--gold-300)" }}>Areas We Serve</div>
            <h1 className="h1" style={{ color: "#fff", marginTop: 14, fontSize: "clamp(2.2rem,5vw,3.6rem)" }}>Tree care across Monterey County & beyond</h1>
            <p className="lead" style={{ color: "rgba(255,255,255,0.9)", marginTop: 18 }}>Whether you're in a well-known city or a smaller neighborhood nearby, we're here to help with all your tree service needs.</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ display: "grid", gap: 24 }}>
          {AREAS.map((a) => (
            <div key={a.county} style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: 30, boxShadow: "var(--shadow-sm)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                <div style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--green-100)", color: "var(--green-700)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon data-lucide="map-pin" style={{ width: 22, height: 22 }} /></div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "1.7rem", fontWeight: 600, color: "var(--text-heading)", margin: 0 }}>{a.county}</h3>
                {a.note ? <Badge variant="gold">{a.note}</Badge> : null}
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {a.cities.map((c) => (
                  <span key={c} style={{ fontSize: 14, fontWeight: 600, color: "var(--text-body)", background: "var(--bone-100)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-pill)", padding: "6px 14px" }}>{c}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: "var(--green-800)" }} className="section">
        <div className="container" style={{ textAlign: "center", color: "#fff" }}>
          <h2 className="h2" style={{ color: "#fff" }}>Don't see your town? Give us a call.</h2>
          <p className="lead" style={{ color: "rgba(255,255,255,0.9)", marginTop: 14 }}>No matter where you are in the area, we have the experience and equipment to get the job done right.</p>
          <div style={{ marginTop: 26 }}><Button variant="accent" size="lg" icon="phone" href={window.TEL}>{window.PHONE}</Button></div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AreasPage });