// Home page
const { Button, Badge, ServiceCard, SectionHeading, Card, Icon } = window.OsegueraTreeServiceDesignSystem_8e9db9;

const SERVICES = [
  { icon: "axe", tone: "orange", title: "Tree Removal", key: "removal", desc: "Fast, safe removal of hazardous, dead, or unwanted trees—of any size, even in tight spaces." },
  { icon: "scissors", tone: "green", title: "Tree Trimming & Pruning", key: "trimming", desc: "Crown reduction, thinning, and shaping for healthier trees and a cleaner property." },
  { icon: "tree-pine", tone: "sky", title: "Stump Removal & Grinding", key: "removal", desc: "Commercial-grade grinding below ground level—haul away the chips or keep them as mulch." },
  { icon: "sprout", tone: "green", title: "Tree Planting", key: "trimming", desc: "Right species, right spot. We help you plant new trees that thrive in Salinas' climate." },
  { icon: "trash-2", tone: "gold", title: "Job Clean-Ups", key: "contact", desc: "Thorough debris removal and on-site chipping. We leave your property clean and safe." },
  { icon: "triangle-alert", tone: "orange", title: "Emergency Service", key: "contact", desc: "Storms and high winds? We respond quickly, 24/7, to secure your property." },
];

function Hero({ nav }) {
  return (
    <section style={{ position: "relative", minHeight: 620, display: "flex", alignItems: "center", overflow: "hidden" }}>
      <img src="assets/photos/hero-lift-bluesky.jpg" alt="Arborist in a lift trimming a tall tree against a blue sky" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(100deg, rgba(16,40,26,0.86) 0%, rgba(16,40,26,0.62) 42%, rgba(16,40,26,0.15) 100%)" }} />
      <div className="container" style={{ position: "relative" }}>
        <div style={{ maxWidth: 640, color: "#fff", paddingBlock: 72 }}>
          <div className="eyebrow" style={{ color: "var(--gold-300)" }}>Salinas, CA · Serving Monterey County</div>
          <h1 className="h1" style={{ color: "#fff", marginTop: 16 }}>Trim for elegance<br />& future growth.</h1>
          <p className="lead" style={{ color: "rgba(255,255,255,0.9)", marginTop: 20, maxWidth: 540 }}>
            Licensed, bonded & insured tree removal, trimming, and stump grinding from a local crew that leaves your property clean, safe, and beautiful.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 30, flexWrap: "wrap" }}>
            <Button variant="accent" size="lg" icon="phone" href={window.TEL}>Call for a Free Estimate</Button>
            <Button variant="on-photo" size="lg" iconRight="arrow-right" onClick={() => nav("removal")}>Our Services</Button>
          </div>
          <div style={{ display: "flex", gap: 22, marginTop: 34, flexWrap: "wrap", color: "rgba(255,255,255,0.92)", fontSize: 14, fontWeight: 700 }}>
            <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}><Icon data-lucide="shield-check" style={{ width: 18, height: 18, color: "var(--gold-300)" }} />Licensed & Insured</span>
            <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}><Icon data-lucide="clock" style={{ width: 18, height: 18, color: "var(--gold-300)" }} />Available 24/7</span>
            <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}><Icon data-lucide="hand-coins" style={{ width: 18, height: 18, color: "var(--gold-300)" }} />Free On-Site Quotes</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ nav }) {
  return (
    <div>
      <Hero nav={nav} />

      <section className="section">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 44 }}>
            <SectionHeading align="center" eyebrow="What We Do" title="Complete tree care for your property" intro="From routine trimming to emergency removals, our experienced crew handles trees of every size across Monterey County." />
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }} id="svc-grid">
            {SERVICES.map((s, i) => (
              <ServiceCard key={i} icon={s.icon} tone={s.tone} title={s.title} description={s.desc} href="#" linkLabel="Learn more" />
            ))}
          </div>
        </div>
      </section>

      {/* About */}
      <section style={{ background: "var(--surface-sunken)" }} className="section">
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} id="about-grid">
          <div style={{ position: "relative" }}>
            <img src="assets/photos/team-chipper.jpg" alt="The Oseguera crew with their wood chipper" style={{ borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", width: "100%", aspectRatio: "4/3", objectFit: "cover" }} />
            <div style={{ position: "absolute", right: -18, bottom: -18, background: "var(--white)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-md)", padding: "16px 20px", display: "flex", gap: 14, alignItems: "center" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 700, color: "var(--green-600)", lineHeight: 1 }}>100%</div>
              <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.3, color: "var(--text-body)" }}>Licensed,<br />bonded & insured</div>
            </div>
          </div>
          <div>
            <SectionHeading eyebrow="About Us" title="A local, family-run crew you can trust" intro="Juan Oseguera Tree Service is locally owned and operated in Salinas, CA. We follow OSHA safety standards and ANSI A300 pruning practices, and we take pride in leaving your property clean and safe—with minimal disruption." />
            <ul className="checklist" style={{ marginTop: 24 }}>
              <li><Icon data-lucide="check" style={{ width: 18, height: 18 }} />Honest recommendations based on your safety and long-term tree health</li>
              <li><Icon data-lucide="check" style={{ width: 18, height: 18 }} />Clean, respectful crews that leave no mess behind</li>
              <li><Icon data-lucide="check" style={{ width: 18, height: 18 }} />Affordable pricing and free estimates</li>
            </ul>
            <div style={{ marginTop: 28 }}>
              <Button variant="primary" iconRight="arrow-right" onClick={() => nav("areas")}>See where we work</Button>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery preview */}
      <section className="section">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 28, gap: 20, flexWrap: "wrap" }}>
            <SectionHeading eyebrow="Recent Work" title="On the job across Monterey County" />
            <Button variant="secondary" iconRight="arrow-right" onClick={() => nav("gallery")}>View the gallery</Button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }} id="gal-preview">
            {["arborist-sunlight","skidsteer-vermeer","truck-trim-road","stump-grinder-yard"].map((p) => (
              <img key={p} src={`assets/photos/${p}.jpg`} alt="Tree service work" style={{ borderRadius: "var(--radius-md)", aspectRatio: "1", objectFit: "cover", boxShadow: "var(--shadow-sm)" }} />
            ))}
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section style={{ position: "relative", overflow: "hidden" }}>
        <img src="assets/photos/eucalyptus-powerlines.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "var(--scrim-full)" }} />
        <div className="container" style={{ position: "relative", textAlign: "center", paddingBlock: 80, color: "#fff" }}>
          <h2 className="h2" style={{ color: "#fff", maxWidth: 720, margin: "0 auto" }}>Have a problem tree? Get a free on-site quote today.</h2>
          <p className="lead" style={{ color: "rgba(255,255,255,0.9)", maxWidth: 560, margin: "16px auto 0" }}>We make tree and stump removal simple, safe, and stress-free.</p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 30, flexWrap: "wrap" }}>
            <Button variant="accent" size="lg" icon="phone" href={window.TEL}>{window.PHONE}</Button>
            <Button variant="on-photo" size="lg" onClick={() => nav("contact")}>Request an estimate</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, SERVICES });