// Service pages (Tree Removal, Tree Trimming) — shared template
const { Button, Badge, SectionHeading, Accordion, Icon } = window.OsegueraTreeServiceDesignSystem_8e9db9;

function ServiceHero({ eyebrow, title, intro, image, alt }) {
  return (
    <section style={{ position: "relative", overflow: "hidden" }}>
      <img src={image} alt={alt} 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) 0%, rgba(16,40,26,0.55) 60%, rgba(16,40,26,0.25) 100%)" }} />
      <div className="container" style={{ position: "relative", paddingBlock: 92, color: "#fff" }}>
        <div style={{ maxWidth: 620 }}>
          <div className="eyebrow" style={{ color: "var(--gold-300)" }}>{eyebrow}</div>
          <h1 className="h1" style={{ color: "#fff", marginTop: 14, fontSize: "clamp(2.2rem,5vw,3.6rem)" }}>{title}</h1>
          <p className="lead" style={{ color: "rgba(255,255,255,0.9)", marginTop: 18 }}>{intro}</p>
          <div style={{ marginTop: 26 }}>
            <Button variant="accent" size="lg" icon="phone" href={window.TEL}>Call {window.PHONE} — Free Quote</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function TwoCol({ children, reverse, images }) {
  return (
    <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 52, alignItems: "center", direction: reverse ? "rtl" : "ltr" }}>
      <div style={{ direction: "ltr" }}>{children}</div>
      <div style={{ direction: "ltr", display: "grid", gap: 14, gridTemplateColumns: images.length > 1 ? "1fr 1fr" : "1fr" }}>
        {images.map((im, i) => <img key={i} src={`assets/photos/${im.src}`} alt={im.alt} style={{ borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-md)", width: "100%", aspectRatio: images.length > 1 ? "3/4" : "4/3", objectFit: "cover" }} />)}
      </div>
    </div>
  );
}

function ProcessSteps({ steps }) {
  return (
    <div className="grid" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
      {steps.map((s, i) => (
        <div key={i} style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: 26, boxShadow: "var(--shadow-sm)" }}>
          <div style={{ width: 40, height: 40, borderRadius: "var(--radius-pill)", background: "var(--green-700)", color: "#fff", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>{i + 1}</div>
          <h4 style={{ fontFamily: "var(--font-display)", fontSize: "1.3rem", fontWeight: 600, color: "var(--text-heading)", margin: "0 0 6px" }}>{s.t}</h4>
          <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6 }}>{s.d}</p>
        </div>
      ))}
    </div>
  );
}

function ClosingCTA({ nav, title }) {
  return (
    <section style={{ background: "var(--green-800)" }} className="section">
      <div className="container" style={{ textAlign: "center", color: "#fff" }}>
        <h2 className="h2" style={{ color: "#fff", maxWidth: 720, margin: "0 auto" }}>{title}</h2>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 28, 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 a free estimate</Button>
        </div>
      </div>
    </section>
  );
}

function RemovalPage({ nav }) {
  return (
    <div>
      <ServiceHero eyebrow="Tree Removal & Stump Grinding" title="Expert tree removal in Salinas, CA"
        intro="When it's time to remove a hazardous, dead, or unwanted tree, trust the professionals. Fast, safe, and affordable removals across Monterey County."
        image="assets/photos/crew-stump.jpg" alt="Crew standing near a large tree stump" />

      <section className="section">
        <TwoCol images={[{ src: "trim-solar.jpg", alt: "Removing branches near a building with solar panels" }]}>
          <SectionHeading eyebrow="When It's Necessary" title="Common reasons we remove a tree" />
          <ul className="checklist" style={{ marginTop: 22 }}>
            {["Dead or dying trees","Storm-damaged or fallen trees","Trees leaning toward homes, power lines, or fences","Overcrowded or invasive growth","Roots damaging driveways, sidewalks, or plumbing","Disease or pest infestation"].map((t) => (
              <li key={t}><Icon data-lucide="check" style={{ width: 18, height: 18 }} />{t}</li>
            ))}
          </ul>
          <p className="muted" style={{ marginTop: 18, fontSize: 14.5, lineHeight: 1.6 }}>Not sure? Our crew inspects the situation and offers honest recommendations based on your safety and long-term property health.</p>
        </TwoCol>
      </section>

      <section style={{ background: "var(--surface-sunken)" }} className="section">
        <div className="container" style={{ marginBottom: 36 }}>
          <SectionHeading align="center" eyebrow="Our Process" title="Careful planning, precise execution" intro="We handle each removal to avoid property damage and ensure safety." />
        </div>
        <div className="container">
          <ProcessSteps steps={[
            { t: "Site inspection & estimate", d: "A free on-site assessment of size, location, and risk." },
            { t: "Safe dismantling", d: "Rigging, climbing gear, and cutting equipment—limb by limb." },
            { t: "Clean-up & haul-away", d: "Thorough debris removal or on-site chipping, per your request." },
          ]} />
        </div>
      </section>

      <section className="section">
        <TwoCol reverse images={[{ src: "stump-grinder-yard.jpg", alt: "Yellow stump grinder in a yard" }, { src: "skidsteer-vermeer.jpg", alt: "Operator on a Vermeer stump grinder" }]}>
          <Badge variant="green" icon="tree-pine">Stump Services</Badge>
          <h2 className="h2" style={{ marginTop: 14 }}>Stump removal & grinding</h2>
          <p className="lead" style={{ marginTop: 14 }}>Once the tree is gone, the stump can still be a tripping hazard, attract insects, or interfere with landscaping. We use commercial-grade grinders that reduce stumps well below ground level.</p>
          <p className="muted" style={{ marginTop: 12, fontSize: 14.5, lineHeight: 1.6 }}>Available as an add-on to any removal or as a standalone service. Full root removal is available for construction or major landscape changes.</p>
        </TwoCol>
      </section>

      <section style={{ background: "var(--surface-sunken)" }} className="section">
        <div className="container" style={{ maxWidth: 820 }}>
          <div style={{ marginBottom: 28 }}><SectionHeading align="center" eyebrow="FAQs" title="Tree removal questions" /></div>
          <Accordion items={[
            { q: "Do I need a permit to remove a tree in Salinas, CA?", a: "Permit requirements vary depending on location and tree size. We'll help you understand local regulations and assist with paperwork if needed." },
            { q: "What happens to the wood and debris?", a: "We can haul away all debris or leave firewood or mulch behind—your choice. Everything is cleaned up thoroughly." },
            { q: "How long does it take to remove a tree?", a: "Most removals take 2–6 hours depending on size and location. Complex jobs may take longer, and we'll let you know in advance." },
            { q: "Is tree removal dangerous?", a: "Yes—but we're trained to handle it. Our crew uses safety equipment and advanced rigging techniques to bring down trees safely, even in tight spaces." },
          ]} />
        </div>
      </section>

      <ClosingCTA nav={nav} title="Dealing with a problem tree? Let's make it simple, safe, and stress-free." />
    </div>
  );
}

function TrimmingPage({ nav }) {
  return (
    <div>
      <ServiceHero eyebrow="Tree Trimming, Pruning & Planting" title="Professional tree trimming in Salinas, CA"
        intro="Your trees need regular care to grow strong, stay healthy, and maintain a clean, attractive shape. Trim for elegance & future growth."
        image="assets/photos/arborist-sunlight.jpg" alt="Arborist trimming a large tree in sunlight" />

      <section className="section">
        <TwoCol images={[{ src: "arborist-chainsaw.jpg", alt: "Arborist using a chainsaw in a tall tree" }]}>
          <SectionHeading eyebrow="Why It Matters" title="Benefits of regular trimming" />
          <ul className="checklist" style={{ marginTop: 22 }}>
            {["Improved tree health by removing dead or diseased limbs","Safer surroundings near roofs, power lines, and walkways","Better growth structure through thinning and shaping","More sunlight for your lawn and garden","Increased property value with a manicured landscape"].map((t) => (
              <li key={t}><Icon data-lucide="check" style={{ width: 18, height: 18 }} />{t}</li>
            ))}
          </ul>
        </TwoCol>
      </section>

      <section style={{ background: "var(--surface-sunken)" }} className="section">
        <div className="container" style={{ marginBottom: 36 }}>
          <SectionHeading align="center" eyebrow="Trimming vs. Pruning" title="The right approach for every tree" intro="We follow seasonal best practices and ANSI A300 pruning standards to protect your trees and property." />
        </div>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: 28, boxShadow: "var(--shadow-sm)" }}>
            <h4 style={{ fontFamily: "var(--font-display)", fontSize: "1.5rem", fontWeight: 600, color: "var(--text-heading)", margin: "0 0 8px" }}>Trimming</h4>
            <p style={{ margin: 0, lineHeight: 1.6 }}>Removing overgrowth to improve appearance and control size.</p>
          </div>
          <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: 28, boxShadow: "var(--shadow-sm)" }}>
            <h4 style={{ fontFamily: "var(--font-display)", fontSize: "1.5rem", fontWeight: 600, color: "var(--text-heading)", margin: "0 0 8px" }}>Pruning</h4>
            <p style={{ margin: 0, lineHeight: 1.6 }}>Focused on internal health—removing deadwood, crossing branches, or diseased areas.</p>
          </div>
        </div>
      </section>

      <section className="section">
        <TwoCol reverse images={[{ src: "banner-crew.jpg", alt: "Crew posing with a banner by their truck" }]}>
          <Badge variant="green" icon="sprout">Tree Planting</Badge>
          <h2 className="h2" style={{ marginTop: 14 }}>Planting for a greener property</h2>
          <p className="lead" style={{ marginTop: 14 }}>Adding new trees increases shade, beauty, and long-term value—if they're planted correctly. We help you select the right species, location, and planting method.</p>
          <p style={{ marginTop: 14, fontWeight: 700, color: "var(--text-heading)" }}>Great choices for Salinas:</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
            {["California live oak","Fruit trees","Red maple","Sycamore","Crape myrtle","Evergreen shade trees"].map((t) => <Badge key={t} variant="neutral">{t}</Badge>)}
          </div>
        </TwoCol>
      </section>

      <ClosingCTA nav={nav} title="Book regular trimming—or plant something new. Get your free quote today." />
    </div>
  );
}

Object.assign(window, { RemovalPage, TrimmingPage });