/* ==============================================================
   Jacksonville Site Works — Services + Process + Fleet/Map strip
   ============================================================== */

/* ------------------------------------------------------------------ */
/*  SERVICES — 5 services in a heavy editorial list                     */
/* ------------------------------------------------------------------ */
function Services() {
  const items = [
    {
      n: "01",
      title: "Land Clearing",
      blurb: "Whole-lot clearing for new builds, pasture, or expansion. Trees, brush, debris — gone.",
      tag: "Most requested",
      ph: window.PHOTOS.svcClearing,
      phLabel: "BEFORE/AFTER ⋅ NASSAU CO. ⋅ 12 AC",
      bullets: ["1–100+ acre tracts", "Burn or haul-off", "Survey-stake friendly"],
    },
    {
      n: "02",
      title: "Forestry Mulching",
      blurb: "One-pass underbrush removal. Leaves the topsoil intact. No burn piles, no hauling.",
      tag: "Eco-friendly",
      ph: window.PHOTOS.svcMulching,
      phLabel: "CAT 279D3 ⋅ 100M MULCHER",
      bullets: ["Selective clearing", "Trails & firebreaks", "Low-impact"],
    },
    {
      n: "03",
      title: "Tree Removal",
      blurb: "From a single hazard oak to a hundred pines. ISA-trained crew, fully insured.",
      tag: "Same-week service",
      ph: window.PHOTOS.svcTree,
      phLabel: "UPROOTED OAK ⋅ RESIDENTIAL REMOVAL",
      bullets: ["Hazard removals", "Crane-assist available", "Cleanup included"],
    },
    {
      n: "04",
      title: "Stump Grinding",
      blurb: "Ground 6–12 inches below grade. Mulch left on-site or hauled — your call.",
      tag: "Add-on or standalone",
      ph: window.PHOTOS.svcStump,
      phLabel: "BEFORE/AFTER ⋅ LAKESIDE GRIND",
      bullets: ["Any diameter", "Root flare cleanup", "Sod-ready finish"],
    },
    {
      n: "05",
      title: "Excavation",
      blurb: "Pads, ponds, swales, drainage. Cut & fill done by operators who hit grade the first time.",
      tag: "Build-ready",
      ph: window.PHOTOS.svcExcavation,
      phLabel: "PAD CUT ⋅ STAKED & GRADING",
      bullets: ["Building pads", "Drainage & culverts", "Pond construction"],
    },
  ];

  const [active, setActive] = useState(0);

  return (
    <section id="services" className="services section-pad">
      <div className="container">
        <div className="section-header">
          <div>
            <div className="eyebrow"><span className="dot" />Services / 01</div>
            <h2 className="h-display" style={{ marginTop: 20 }}>
              Five things,<br/>done right.
            </h2>
          </div>
          <p className="lede">
            We don't sub out the dirty work. Same crew, same equipment, same standard —
            from a half-acre driveway to a 100-acre development.
          </p>
        </div>

        <div className="svc-grid">
          <ul className="svc-list" role="tablist">
            {items.map((it, i) => (
              <li key={it.n}>
                <button
                  role="tab"
                  aria-selected={active === i}
                  className={`svc-row ${active === i ? "is-active" : ""}`}
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  onClick={() => setActive(i)}
                >
                  <span className="svc-n mono">{it.n}</span>
                  <span className="svc-title h-display">{it.title}</span>
                  <span className="svc-tag mono">{it.tag}</span>
                  <span className="svc-arrow">↗</span>
                </button>
                {active === i && (
                  <div className="svc-detail-mobile">
                    <Photo src={it.ph} label={it.phLabel} className="svc-photo-m" />
                    <p>{it.blurb}</p>
                  </div>
                )}
              </li>
            ))}
          </ul>

          <div className="svc-preview" aria-live="polite">
            {items.map((it, i) => (
              <div
                key={it.n}
                className={`svc-card ${active === i ? "is-on" : ""}`}
                aria-hidden={active !== i}
              >
                <Photo src={it.ph} label={it.phLabel} className="svc-photo" />
                <div className="svc-card-body">
                  <div className="mono svc-cn">{it.n} ⋅ {it.tag}</div>
                  <h3 className="h-head svc-ct">{it.title}</h3>
                  <p className="svc-cd">{it.blurb}</p>
                  <ul className="svc-bullets">
                    {it.bullets.map(b => (
                      <li key={b}>
                        <span className="bx" aria-hidden="true">×</span>{b}
                      </li>
                    ))}
                  </ul>
                  <a href="#quote" className="svc-link mono">
                    Request a quote →
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .services { background: var(--bg); color: var(--ink); }

        .svc-grid {
          display: grid;
          grid-template-columns: 1.1fr 1fr;
          gap: 80px;
          align-items: start;
        }

        .svc-list { list-style: none; margin: 0; padding: 0; }
        .svc-row {
          display: grid;
          grid-template-columns: 60px 1fr auto 24px;
          align-items: center;
          gap: 24px;
          width: 100%;
          padding: 32px 0;
          background: transparent;
          border: none;
          border-top: 1px solid var(--line);
          color: var(--ink-3);
          text-align: left;
          cursor: pointer;
          transition: color .2s ease, padding .2s ease;
        }
        .svc-list li:last-child .svc-row { border-bottom: 1px solid var(--line); }
        .svc-row:hover, .svc-row.is-active {
          color: var(--ink);
          padding-left: 12px;
        }
        .svc-row.is-active { background: linear-gradient(90deg, rgba(217,119,6,0.06), transparent 60%); }
        .svc-n {
          font-size: 12px; letter-spacing: 0.16em; color: var(--ink-4);
        }
        .svc-row.is-active .svc-n { color: var(--clay); }
        .svc-title {
          font-size: clamp(36px, 4.4vw, 64px);
          color: inherit;
          line-height: 0.9;
        }
        .svc-tag {
          font-size: 10px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--ink-4);
          padding: 6px 10px;
          border: 1px solid var(--line-2);
        }
        .svc-row.is-active .svc-tag { color: var(--clay); border-color: var(--clay); }
        .svc-arrow { color: var(--ink-4); transition: transform .2s ease, color .2s ease; }
        .svc-row.is-active .svc-arrow { color: var(--clay); transform: translate(4px, -4px); }

        .svc-preview {
          position: sticky;
          top: 100px;
          height: 560px;
          background: var(--bg-3);
          border: 1px solid var(--line);
        }
        .svc-card {
          position: absolute;
          inset: 0;
          opacity: 0;
          transition: opacity .35s ease, transform .35s ease;
          transform: translateY(8px);
          pointer-events: none;
        }
        .svc-card.is-on {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }
        .svc-photo { height: 320px; }
        .svc-card-body { padding: 28px; }
        .svc-cn { font-size: 11px; letter-spacing: 0.18em; color: var(--clay); margin-bottom: 14px; }
        .svc-ct { font-size: 28px; margin: 0 0 12px; }
        .svc-cd { color: var(--ink-2); margin: 0 0 18px; max-width: 50ch; }
        .svc-bullets {
          list-style: none; padding: 0; margin: 0 0 22px;
          display: grid; gap: 8px;
        }
        .svc-bullets li {
          display: flex; align-items: center; gap: 12px;
          font-size: 14px; color: var(--ink-2);
          padding-bottom: 8px;
          border-bottom: 1px dashed var(--line);
        }
        .bx { color: var(--clay); font-family: var(--mono); }
        .svc-link {
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--clay);
          border-bottom: 1px solid var(--clay);
          padding-bottom: 4px;
        }

        .svc-detail-mobile { display: none; }

        @media (max-width: 900px) {
          .svc-grid { grid-template-columns: 1fr; gap: 0; }
          .svc-preview { display: none; }
          .svc-row { grid-template-columns: 40px 1fr auto; padding: 22px 0; }
          .svc-tag { display: none; }
          .svc-detail-mobile { display: block; padding: 16px 0 24px; }
          .svc-detail-mobile .svc-photo-m { height: 220px; }
          .svc-detail-mobile p { color: var(--ink-2); margin-top: 16px; }
        }
      `}</style>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/*  PROCESS — 4 steps, vertical timeline w/ horizontal markers          */
/* ------------------------------------------------------------------ */
function Process() {
  const steps = [
    {
      n: "01",
      label: "Call or text",
      time: "Day 0",
      body: "Tell us the address, acreage, and what you want gone. No forms, no salespeople.",
    },
    {
      n: "02",
      label: "On-site walk",
      time: "Within 48 hrs",
      body: "We walk the property with you. Flag boundaries, mark keepers, identify hazards. Fixed-price quote on the spot.",
    },
    {
      n: "03",
      label: "Clear &amp; haul",
      time: "Scheduled in 1–3 weeks",
      body: "Our crew shows up on time with the right equipment. Daily progress photos. No surprises.",
    },
    {
      n: "04",
      label: "Final walk",
      time: "Day of completion",
      body: "We walk it again together. You don't pay until you're satisfied with how the dirt looks.",
    },
  ];

  return (
    <section id="process" className="process section-pad">
      <div className="container">
        <div className="section-header">
          <div>
            <div className="eyebrow"><span className="dot" />Process / 02</div>
            <h2 className="h-display" style={{ marginTop: 20 }}>
              Four steps.<br/>No runaround.
            </h2>
          </div>
          <p className="lede">
            We hate getting bid-and-ghosted as much as you do. Here's exactly what happens
            from the first call to final walk-through.
          </p>
        </div>

        <ol className="proc-grid">
          {steps.map((s, i) => (
            <li key={s.n} className="proc-step">
              <div className="proc-head">
                <span className="proc-n h-display">{s.n}</span>
                <span className="proc-time mono">{s.time}</span>
              </div>
              <div className="proc-rail">
                <span className="proc-dot" />
                {i < steps.length - 1 && <span className="proc-line" />}
              </div>
              <div className="proc-body">
                <h3 className="h-head proc-label" dangerouslySetInnerHTML={{__html: s.label}} />
                <p>{s.body}</p>
              </div>
            </li>
          ))}
        </ol>

        <div className="proc-foot">
          <div className="mono proc-foot-k">Average turnaround</div>
          <div className="proc-foot-v">
            <span className="h-display">3 weeks</span>
            <span>from first call to a build-ready site</span>
          </div>
          <a href="#quote" className="btn">
            Start step 01
            <span className="arrow" />
          </a>
        </div>
      </div>

      <style>{`
        .process { background: var(--bg-2); border-top: 1px solid var(--line); }

        .proc-grid {
          list-style: none; padding: 0; margin: 0;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
        }
        .proc-step {
          padding: 0 28px;
          border-left: 1px solid var(--line);
          position: relative;
        }
        .proc-step:last-child { border-right: 1px solid var(--line); }

        .proc-head {
          display: flex; align-items: baseline; justify-content: space-between;
          margin-bottom: 24px;
        }
        .proc-n {
          font-size: clamp(72px, 8vw, 120px);
          color: var(--clay);
          line-height: 1;
        }
        .proc-time {
          font-size: 11px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--ink-3);
        }
        .proc-rail {
          position: relative;
          height: 28px;
          margin-bottom: 22px;
        }
        .proc-dot {
          width: 14px; height: 14px;
          background: var(--clay);
          display: block;
          position: relative;
          z-index: 2;
        }
        .proc-line {
          position: absolute;
          top: 6px; left: 22px; right: -28px;
          height: 2px;
          background: repeating-linear-gradient(90deg, var(--clay) 0 6px, transparent 6px 12px);
        }

        .proc-label {
          font-size: 22px;
          margin: 0 0 10px;
          color: var(--ink);
        }
        .proc-body p { color: var(--ink-2); margin: 0; max-width: 28ch; }

        .proc-foot {
          margin-top: 80px;
          padding: 36px;
          background: var(--bg);
          border: 1px solid var(--line);
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: center;
          gap: 32px;
        }
        .proc-foot-k {
          font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--ink-3);
        }
        .proc-foot-v {
          display: flex; align-items: baseline; gap: 18px;
          color: var(--ink-2);
        }
        .proc-foot-v .h-display { color: var(--clay); font-size: 64px; }

        @media (max-width: 900px) {
          .proc-grid { grid-template-columns: 1fr; }
          .proc-step { padding: 28px 0; border-left: none; border-top: 1px solid var(--line); }
          .proc-step:last-child { border-right: none; border-bottom: 1px solid var(--line); }
          .proc-line { display: none; }
          .proc-foot { grid-template-columns: 1fr; text-align: left; gap: 18px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Services, Process });
