// Mid sections: Process, Reviews, Service Areas.
function Process() {
  const w = useW();
  const mobile = w < 640;
  const steps = [
    ["01", "Free on-site consult", "We measure, listen, and talk through sun, style, and budget — no pressure."],
    ["02", "Custom design & quote", "You get a design built for your space and a clear, itemized quote that holds."],
    ["03", "Final selections & order", "We lock in your color, finish, and details, then order your custom-cut materials to spec."],
    ["04", "Install & walkthrough", "A clean, detail-obsessed install — then we walk it together before we leave."],
  ];
  return (
    <Section id="process">
      <Reveal>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 20, marginBottom: mobile ? 36 : 56 }}>
          <div>
            <Kicker>How It Works</Kicker>
            <h2 style={{ fontFamily: FONT.disp, fontWeight: 700, fontSize: "clamp(36px,4.2vw,52px)", textTransform: "uppercase",
              letterSpacing: "-0.015em", color: NP.textL, margin: "20px 0 0", lineHeight: 1.02 }}>
              Four steps to shade.
            </h2>
          </div>
          <p style={{ fontFamily: FONT.body, fontSize: 16, lineHeight: 1.6, color: NP.textL2, maxWidth: 360 }}>
            Most projects go from first call to finished install in a matter of weeks — not months.
          </p>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "repeat(2,1fr)" : "repeat(4,1fr)", gap: mobile ? "32px 20px" : 0 }}>
        {steps.map(([n, t, d], i) => (
          <Reveal key={n} delay={i * 90}>
            <div style={{ paddingRight: mobile ? 0 : 28, borderTop: `2px solid ${NP.gold}`, paddingTop: 20 }}>
              <div style={{ fontFamily: FONT.disp, fontWeight: 800, fontSize: mobile ? 32 : 40, color: NP.gold, letterSpacing: "-0.02em" }}>{n}</div>
              <div style={{ fontFamily: FONT.body, fontSize: mobile ? 16 : 19, fontWeight: 700, color: NP.textL, marginTop: 12 }}>{t}</div>
              <p style={{ fontFamily: FONT.body, fontSize: 14.5, lineHeight: 1.6, color: NP.textL2, marginTop: 8 }}>{d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

const REVIEWS = [
  { q: "NorthPoint built us a louvered cover that completely changed how we use our backyard. The craftsmanship is genuinely better than two other bids we got.", n: "Marissa & Tom D.", c: "Scottsdale", },
  { q: "Honest pricing, showed up when they said, and the finish detail is spotless. Our patio is finally usable in July. Couldn't recommend them more.", n: "Eric P.", c: "Gilbert" },
  { q: "From the first measure to the walkthrough, it felt custom — because it was. The insulated roof dropped our patio temp noticeably.", n: "Dana R.", c: "Queen Creek" },
];
function Reviews() {
  return (
    <Section id="reviews" bg={NP.bone}>
      <Reveal>
        <div style={{ textAlign: "center", maxWidth: 700, margin: "0 auto 52px" }}>
          <Kicker center dark={false}>Reviews</Kicker>
          <h2 style={{ fontFamily: FONT.serif, fontWeight: 500, fontSize: "clamp(42px,5vw,64px)", color: NP.textD, margin: "16px 0 14px", lineHeight: 1.02 }}>
            Homeowners who beat the heat.
          </h2>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <Stars size={17} color={NP.goldDeep} />
            <span style={{ fontFamily: FONT.body, fontSize: 15, fontWeight: 600, color: NP.textD2 }}>5.0 average · Google & Yelp</span>
          </div>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 }}>
        {REVIEWS.map((r, i) => (
          <Reveal key={i} delay={i * 90}>
            <div style={{ background: "#fff", border: `1px solid ${NP.lineD}`, borderRadius: 5, padding: "34px 32px 32px", height: "100%", boxSizing: "border-box" }}>
              <Stars size={15} color={NP.goldDeep} />
              <p style={{ fontFamily: FONT.serif, fontSize: 23, lineHeight: 1.4, color: NP.textD, margin: "18px 0 26px", letterSpacing: "-0.005em" }}>"{r.q}"</p>
              <div style={{ fontFamily: FONT.body, fontSize: 15, fontWeight: 700, color: NP.textD }}>{r.n}</div>
              <div style={{ fontFamily: FONT.body, fontSize: 13.5, color: NP.textD2, marginTop: 2 }}>{r.c}, Arizona</div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

const CITIES = ["Chandler", "Gilbert", "Queen Creek", "Phoenix", "Mesa", "Tempe", "Scottsdale", "Rio Verde"];
function Areas() {
  const w = useW();
  const mobile = w < 768;
  return (
    <Section id="areas">
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: mobile ? 40 : 72, alignItems: "center" }}>
        <Reveal>
          <Kicker>Service Areas</Kicker>
          <h2 style={{ fontFamily: FONT.disp, fontWeight: 700, fontSize: "clamp(36px,4.2vw,52px)", textTransform: "uppercase",
            letterSpacing: "-0.015em", color: NP.textL, margin: "20px 0 18px", lineHeight: 1.03 }}>
            Proudly serving<br />the Valley.
          </h2>
          <p style={{ fontFamily: FONT.body, fontSize: 17, lineHeight: 1.65, color: NP.textL2, maxWidth: 430 }}>
            Based in the East Valley and covering the greater Phoenix metro. Not sure if you're in range? Just ask — we travel for the right project.
          </p>
          <div style={{ marginTop: 28, maxWidth: 470 }}>
            {[CITIES.slice(0, 4), CITIES.slice(4, 8)].map((row, ri) => (
              <div key={ri} style={{ display: "flex", alignItems: "center", marginTop: ri ? 12 : 0 }}>
                {row.map((c, i) => (
                  <React.Fragment key={c}>
                    {i > 0 && <span style={{ width: 1, height: 15, background: NP.gold, opacity: 0.55, margin: "0 14px", flex: "0 0 auto" }} />}
                    <span style={{ fontFamily: FONT.body, fontSize: 15.5, fontWeight: 600, color: NP.textL, letterSpacing: "0.01em", padding: "5px 0" }}>{c}</span>
                  </React.Fragment>
                ))}
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ height: mobile ? 260 : 440, borderRadius: 5, overflow: "hidden", border: `1px solid ${NP.lineL}`, position: "relative" }}>
            <NPImg src="assets/img/IMG_0703.png" label="service area" dark />
            <div style={{ position: "absolute", left: 18, bottom: 18, fontFamily: FONT.body, fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: NP.textL, background: "rgba(21,17,13,0.7)", border: `1px solid ${NP.lineL}`, padding: "7px 13px", borderRadius: 3 }}>Lakeside install · East Valley</div>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function CTABand({ onQuote, showSeal, showNote }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: NP.panel, borderTop: `1px solid ${NP.lineL}` }}>
      <div style={{ position: "absolute", inset: 0 }}><NPImg src="assets/img/IMG_3503.png" label="closing band" dark /></div>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(21,17,13,0.88) 0%, rgba(21,17,13,0.7) 100%)" }} />
      <div style={{ position: "absolute", top: "-40px", left: "50%", transform: "translateX(-50%)", width: 360, height: 180, borderRadius: "360px 360px 0 0",
        background: "radial-gradient(180px 180px at 50% 100%, rgba(200,174,118,0.22), rgba(200,174,118,0) 70%)" }} />
      <div style={{ position: "relative", maxWidth: 860, margin: "0 auto", padding: "80px 20px", textAlign: "center" }}>
        <Reveal>
          <Kicker center>Free · No Pressure</Kicker>
          <h2 style={{ fontFamily: FONT.disp, fontWeight: 800, fontSize: "clamp(44px,6vw,76px)", textTransform: "uppercase",
            letterSpacing: "-0.02em", color: NP.textL, margin: "22px 0 22px", lineHeight: 0.98 }}>
            Let's design<br />your shade.
          </h2>
          <p style={{ fontFamily: FONT.body, fontSize: 18.5, lineHeight: 1.6, color: "rgba(243,237,227,0.82)", maxWidth: 540, margin: "0 auto 36px" }}>
            Free on-site consultation and a measured, no-obligation quote. Most projects installed within weeks.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <Btn variant="solid" onClick={onQuote}>Request a Free Quote</Btn>
            <Btn variant="outline" onClick={() => (window.location.href = "tel:6233309095")}>Call (623) 330-9095</Btn>
          </div>
          {showNote && (
            <div style={{ display: "flex", gap: 20, justifyContent: "center", flexWrap: "wrap", marginTop: 24 }}>
              {["Free on-site consultation", "No pressure, no obligation", "Most quotes within 48 hours"].map((t, i) => (
                <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: FONT.body, fontSize: 13.5, fontWeight: 600, color: "rgba(243,237,227,0.7)" }}>
                  <span style={{ color: NP.gold }}>✓</span>{t}
                </span>
              ))}
            </div>
          )}
          {showSeal && (
            <div style={{ display: "flex", justifyContent: "center", marginTop: 44 }}>
              <GuaranteeSeal size={168} />
            </div>
          )}
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Process, Reviews, Areas, CTABand });