// Trust-building sections: niche positioning, mechanism, qualification criteria, objections

const { useState: useTrustS, useEffect: useTrustE, useRef: useTrustR } = React;

// ===================== NICHE POSITIONING BAR =====================
const NicheBar = () => (
  <section style={{
    padding: "40px 32px",
    borderTop: "1px solid var(--line)",
    borderBottom: "1px solid var(--line)",
    background: "var(--bg)"
  }}>
    <div className="niche-bar" style={{
      maxWidth: 1400, margin: "0 auto",
      display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr", gap: 40, alignItems: "center"
    }}>
      <div className="mono" style={{
        fontSize: 13, color: "var(--flame)",
        letterSpacing: "0.14em", textTransform: "uppercase"
      }}>
        ●  Land clearing only. Always.
      </div>
      {[
        ["Forestry mulching", "Pine · hardwood · mixed"],
        ["Lot & land clearing", "Rural · suburban · ag"],
        ["Right-of-way & fence line", "Utilities · ranches"],
      ].map(([h, s]) => (
        <div key={h} style={{ borderLeft: "1px solid var(--line)", paddingLeft: 20 }}>
          <div style={{ fontSize: 15, color: "var(--ink)", marginBottom: 2 }}>{h}</div>
          <div className="mono" style={{
            fontSize: 10, color: "var(--ink-faint)",
            letterSpacing: "0.1em", textTransform: "uppercase"
          }}>{s}</div>
        </div>
      ))}
    </div>
    <div style={{
      maxWidth: 1400, margin: "20px auto 0", display: "flex",
      justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap",
      fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
      letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-faint)"
    }}>
      <span>One operator per service area — <span style={{ color: "var(--ink)" }}>we never split your market</span></span>
      <span>Currently serving TX · FL · GA · NC · SC · OK · LA · PA</span>
    </div>
  </section>
);

// ===================== MECHANISM: JobStack Engine System =====================
const Mechanism = () => {
  const steps = [
    {
      n: "01",
      label: "Attract",
      title: "Jobsite-shot Meta ads built for landowners.",
      what: "Not stock footage. Not canned templates. We shoot your crew, your equipment, your finished jobs — and target the exact property owners in your service area who want your service.",
      proof: [
        ["2-3d", "new ad creatives / mo"],
        ["50mi", "geo-fenced radius"],
        ["2-3d", "first estimate booked"],
      ]
    },
    {
      n: "02",
      label: "Filter",
      title: "Extensive qualification layers kills bad leads before they hit your phone.",
      what: "Every inquiry goes through several layers of qualification on the Facebook form, an instant SMS + Human callback. We ask about acreage, service type, timeline, and budget — and we only forward leads that match your criteria.",
      proof: [
        ["<60s", "SMS response time"],
        ["83%", "junk filtered out"],
        ["4", "qualifier questions"],
      ]
    },
    {
      n: "03",
      label: "Book",
      title: "Direct-to-calendar booking — no back-and-forth tag.",
      what: "Qualified leads get booked straight to your on-site estimate calendar. We confirm by SMS the night before and the morning of. You show up, you quote, you close.",
      proof: [
        ["62%", "lead-to-booked rate"],
        ["24hr", "avg. booking window"],
        ["0", "phone tag required"],
      ]
    },
    {
      n: "04",
      label: "Show",
      title: "We confirm every appointment so you don't drive to a no-show.",
      what: "Every booking gets 3 confirmation touchpoints. If a lead no-shows or cancels without 24-hour notice, we don't charge. That's the appointment guarantee.",
      proof: [
        ["88%", "show-up rate"],
        ["3×", "SMS confirmations"],
        ["FREE", "no-show replacement"],
      ]
    },
  ];

  return (
    <section id="mechanism" style={{ padding: "140px 32px", background: "var(--bg)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between",
          alignItems: "flex-end", marginBottom: 60, gap: 40, flexWrap: "wrap" }}>
          <div>
            <div className="mono" style={{
              display: "flex", alignItems: "center", gap: 14,
              fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
              color: "var(--flame)", marginBottom: 36
            }}>
              <span style={{ color: "var(--ink-faint)" }}>02·A</span>
              <span style={{ width: 24, height: 1, background: "var(--flame)" }}/>
              The system
            </div>
            <h2 style={{
              fontSize: "clamp(40px, 5.5vw, 80px)", lineHeight: 0.95,
              letterSpacing: "-0.03em", fontWeight: 500, maxWidth: "18ch"
            }}>
              The <span style={{ color: "var(--flame)", fontStyle: "italic", fontWeight: 400 }}>
                JobStack Engine™
              </span> System
            </h2>
          </div>
          <p style={{ fontSize: 16, color: "var(--ink-dim)", maxWidth: 420 }}>
            Four stages. Every lead you get has been attracted, filtered, booked, and confirmed — before it hits your crew's schedule.
          </p>
        </div>

        <div className="mech-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1,
          background: "var(--line)", border: "1px solid var(--line)"
        }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              background: "var(--bg)", padding: 32,
              display: "flex", flexDirection: "column",
              borderTop: `2px solid var(--flame)`
            }}>
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 24 }}>
                <span className="mono" style={{
                  fontSize: 11, color: "var(--flame)",
                  letterSpacing: "0.14em", textTransform: "uppercase"
                }}>{s.n} · {s.label}</span>
                {i < 3 && <span style={{ color: "var(--ink-faint)", fontSize: 14 }} className="mech-arrow">→</span>}
              </div>
              <h3 style={{
                fontSize: 22, lineHeight: 1.2, letterSpacing: "-0.01em",
                fontWeight: 500, marginBottom: 16
              }}>
                {s.title}
              </h3>
              <p style={{ fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.6, marginBottom: 24, flex: 1 }}>
                {s.what}
              </p>
              <div style={{
                display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10,
                paddingTop: 18, borderTop: "1px solid var(--line)"
              }}>
                {s.proof.map(([n, l]) => (
                  <div key={l}>
                    <div className="mono" style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.01em", marginBottom: 4 }}>
                      {n}
                    </div>
                    <div style={{ fontSize: 10, color: "var(--ink-faint)",
                      textTransform: "uppercase", letterSpacing: "0.08em", lineHeight: 1.3 }}>
                      {l}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40, padding: "24px 32px", background: "var(--bg-2)",
          border: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 20, flexWrap: "wrap"
        }}>
          <div className="mono" style={{
            fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--ink)"
          }}>
            Guaranteed: <span style={{ color: "var(--flame)" }}>10 qualified booked estimates in your first 30 days</span> — or you don't pay.
          </div>
          <a href="#contact" className="btn-primary">Claim your territory <span>→</span></a>
        </div>
      </div>
    </section>
  );
};

// ===================== WHAT COUNTS AS A BOOKED APPOINTMENT =====================
const Criteria = () => {
  const yes = [
    ["Property owner", "Property owner"],
    ["Inside your service area", "Within the 50-mile geo-fence you defined."],
    ["Acreage ≥ your minimum", "You set the floor — 1 acre, 5 acres, 20 acres. We enforce it."],
    ["Timeline ≤ 90 days", "Ready to hire, not 'maybe next year.'"],
    ["Confirmed for a specific time", "On your calendar with 3 SMS confirmations sent."],
    ["Shows up — or gets replaced", "No-shows within 24hr notice = replacement at zero cost."],
  ];
  const no = [
    "Renters, tenants, or tire-kickers",
    "Out-of-area inquiries",
    "Single tree removals or stump-only",
    "\"Just getting quotes\" with no timeline",
    "Competitors or mystery shoppers",
    "Anyone not pre-qualified by our AI layer",
  ];

  return (
    <section id="criteria" style={{ padding: "140px 32px", background: "var(--bg-2)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div className="mono" style={{
          display: "flex", alignItems: "center", gap: 14,
          fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--flame)", marginBottom: 32
        }}>
          <span style={{ color: "var(--ink-faint)" }}>02·B</span>
          <span style={{ width: 24, height: 1, background: "var(--flame)" }}/>
          What counts as a delivered appointment
        </div>
        <div style={{ display: "flex", justifyContent: "space-between",
          alignItems: "flex-end", marginBottom: 48, gap: 32, flexWrap: "wrap" }}>
          <h2 style={{
            fontSize: "clamp(36px, 4.8vw, 64px)", lineHeight: 1,
            letterSpacing: "-0.03em", fontWeight: 500, maxWidth: "18ch"
          }}>
            We're brutal about what counts as a qualified lead.
          </h2>
          <p style={{ fontSize: 15, color: "var(--ink-dim)", maxWidth: 420 }}>
            So you don't get billed for garbage. So you don't waste a truck drive on a tire-kicker. So every number you see on your dashboard is a number you can bank on.
          </p>
        </div>

        <div className="criteria-grid" style={{
          display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 1,
          background: "var(--line)", border: "1px solid var(--line)"
        }}>
          <div style={{ background: "var(--bg-2)", padding: 40 }}>
            <div className="mono" style={{
              fontSize: 11, color: "var(--flame)", letterSpacing: "0.14em",
              textTransform: "uppercase", marginBottom: 20
            }}>
              ✓ All 6 must be true
            </div>
            <div style={{ display: "grid", gap: 20 }}>
              {yes.map(([h, s], i) => (
                <div key={h} style={{
                  display: "grid", gridTemplateColumns: "32px 1fr", gap: 16,
                  paddingBottom: 20, borderBottom: i < yes.length - 1 ? "1px solid var(--line)" : "none"
                }}>
                  <div style={{
                    width: 28, height: 28, background: "var(--flame)", color: "#000",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 14, fontWeight: 600
                  }}>✓</div>
                  <div>
                    <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.01em", marginBottom: 4 }}>
                      {h}
                    </div>
                    <div style={{ fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.5 }}>
                      {s}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ background: "var(--bg)", padding: 40 }}>
            <div className="mono" style={{
              fontSize: 11, color: "var(--ink-faint)", letterSpacing: "0.14em",
              textTransform: "uppercase", marginBottom: 20
            }}>
              ✕ You will never be billed for
            </div>
            <ul style={{ listStyle: "none", display: "grid", gap: 12 }}>
              {no.map(l => (
                <li key={l} style={{
                  display: "flex", gap: 12, fontSize: 15, color: "var(--ink-dim)",
                  paddingBottom: 12, borderBottom: "1px solid var(--line)"
                }}>
                  <span style={{ color: "var(--ink-faint)", flexShrink: 0 }}>—</span>
                  {l}
                </li>
              ))}
            </ul>
            <div style={{
              marginTop: 28, padding: 18, background: "var(--bg-2)",
              borderLeft: "2px solid var(--flame)"
            }}>
              <div className="mono" style={{
                fontSize: 10, color: "var(--flame)",
                letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 6
              }}>
                Guarantee
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: "var(--ink)" }}>
                If a lead doesn't meet all 6 criteria, it's not sent to you and you don't pay. Period.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ===================== OBJECTION HANDLING =====================
const Objections = () => {
  const obj = [
    {
      q: "\"Are these actually real leads — or bots?\"",
      a: "Every lead comes from Meta's ad platform with a verified phone, name, and property ZIP. Our AI layer then calls/texts within 60 seconds to verify they're a human property owner with a real parcel. Bots don't make it past step 2.",
      stat: ["98.3%", "human-verified"]
    },
    {
      q: "\"Will they be tiny jobs — just tree trimming?\"",
      a: "We set your acreage floor during onboarding. If you only want jobs ≥ 5 acres, you'll never see a homeowner asking about one tree or small requests. The ad creative, targeting, and qualifier questions all filter for the job size you actually want.",
      stat: ["$14.8K", "avg. ticket"]
    },
    {
      q: "\"Will they actually show up to the estimate?\"",
      a: "88% show-up rate across all active accounts. We send 3 SMS confirmations — 24 hours, 2 hours, and 30 minutes before. If they no-show without notice, we replace the appointment free.",
      stat: ["88%", "show rate"]
    },
    {
      q: "\"Are you selling this to every operator in my city?\"",
      a: "One operator per service area. Period. We geo-fence your territory during onboarding, and we won't take another client within 50 miles. If a competitor reaches out, they go on a waitlist until you leave.",
      stat: ["1", "operator / area"]
    },
    {
      q: "\"What if I can't afford the high ad budgets?\"",
      a: "We've started operators at $20/day ($600/mo) in ad spend. That's real. At that level you're looking at 15-22 qualified estimates in month one. As you close jobs and cash flow improves, we scale.",
      stat: ["$600", "min. to start"]
    },
    {
      q: "\"I've been burned by agencies before. How is this different?\"",
      a: "Three ways: (1) We work on performance — no results in month one, no management fee that month. (2) Month-to-month. No 12-month lock-ins. (3) We're land clearing specialists only — we know what a qualified parcel looks like because we've seen 312 of them booked.",
      stat: ["M2M", "no lock-in"]
    },
  ];

  return (
    <section id="objections" style={{ padding: "140px 32px" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div className="mono" style={{
          display: "flex", alignItems: "center", gap: 14,
          fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--flame)", marginBottom: 32
        }}>
          <span style={{ color: "var(--ink-faint)" }}>07</span>
          <span style={{ width: 24, height: 1, background: "var(--flame)" }}/>
          Straight answers
        </div>
        <div style={{ display: "flex", justifyContent: "space-between",
          alignItems: "flex-end", marginBottom: 60, gap: 32, flexWrap: "wrap" }}>
          <h2 style={{
            fontSize: "clamp(40px, 5.5vw, 80px)", lineHeight: 0.95,
            letterSpacing: "-0.03em", fontWeight: 500, maxWidth: "16ch"
          }}>
            Every concern,<br/>
            <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--ink-dim)" }}>
              answered cold.
            </span>
          </h2>
          <p style={{ fontSize: 16, color: "var(--ink-dim)", maxWidth: 400 }}>
            If you've been pitched by agencies before, you already have these questions. Here are the real answers.
          </p>
        </div>

        <div className="obj-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1,
          background: "var(--line)", border: "1px solid var(--line)"
        }}>
          {obj.map((o, i) => (
            <div key={i} style={{
              background: "var(--bg)", padding: 36,
              display: "grid", gridTemplateColumns: "1fr 120px", gap: 24,
              minHeight: 220
            }}>
              <div>
                <div style={{
                  fontSize: 19, lineHeight: 1.3, letterSpacing: "-0.01em",
                  color: "var(--ink)", marginBottom: 16, fontWeight: 500
                }}>
                  {o.q}
                </div>
                <div style={{
                  fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.6
                }}>
                  {o.a}
                </div>
              </div>
              <div style={{
                borderLeft: "1px solid var(--line)", paddingLeft: 20,
                display: "flex", flexDirection: "column", justifyContent: "center"
              }}>
                <div className="mono" style={{
                  fontSize: 24, fontWeight: 500, color: "var(--flame)",
                  letterSpacing: "-0.02em", marginBottom: 4
                }}>
                  {o.stat[0]}
                </div>
                <div style={{
                  fontSize: 10, color: "var(--ink-faint)",
                  textTransform: "uppercase", letterSpacing: "0.1em", lineHeight: 1.3
                }}>
                  {o.stat[1]}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { NicheBar, Mechanism, Criteria, Objections });