// VARIATION A — "Pressure Cooker"
// Bold editorial promo. Oversized $120, magazine grid, cyan as structure, orange as conversion.

function VariationA({ primary = "#00C6F3", accent = "#FF5B1F" }) {
  const cd = useCountdown();
  const [open, setOpen] = React.useState(null);

  const ink = "#0A1628";
  const surface = "#F4F6F7";
  const surface2 = "#EAEEF0";

  return (
    <div style={{
      width: "100%",
      maxWidth: 1200,
      fontFamily: "'Inter', system-ui, sans-serif",
      color: ink,
      background: "#fff",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* ============== TOP STRIP ============== */}
      <div className="v-topstrip" style={{
        background: ink, color: "#fff",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "10px 32px",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 12, letterSpacing: 1.4, textTransform: "uppercase",
      }}>
        <span style={{ display: "flex", gap: 24, alignItems: "center" }}>
          <span style={{ background: primary, color: ink, padding: "3px 8px", borderRadius: 3, fontWeight: 700 }}>LIVE OFFER</span>
          <span style={{ color: "#9aa6b2" }}>Birmingham · Hoover · Vestavia · +16 more</span>
        </span>
        <span style={{ display: "flex", gap: 6, alignItems: "center" }}>
          <Icon name="phone" size={13} color={primary} />
          <a href={PHONE_HREF} style={{ color: "#fff", textDecoration: "none", fontWeight: 600 }}>{PHONE_DISPLAY}</a>
        </span>
      </div>

      {/* ============== HERO ============== */}
      <section className="v-hero" style={{ padding: "40px 56px 56px", position: "relative" }}>
        {/* Brand mark */}
        <div className="v-brand" style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 32 }}>
          <img src="assets/logo.png" alt="Extreme Services" style={{ height: 56, width: "auto", display: "block" }} />
          <span className="v-brand-tag" style={{ marginLeft: 4, fontSize: 11, color: "#6b7785", fontFamily: "'JetBrains Mono', monospace", letterSpacing: 1.5, paddingLeft: 14, borderLeft: `1px solid ${surface2}` }}>EST. ALABAMA · IICRC CERTIFIED</span>
        </div>

        <div className="v-hero-grid" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 40, alignItems: "stretch" }}>
          {/* LEFT — copy + price */}
          <div>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              background: `${primary}1f`, color: ink, padding: "6px 12px", borderRadius: 999,
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.5, fontWeight: 600,
              marginBottom: 24,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: accent, animation: "pulse 1.6s infinite" }} />
              TODAY ONLY · 24 HOURS LEFT
            </div>

            <h1 className="v-h1" style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              fontSize: 84, lineHeight: 0.92, letterSpacing: -3.5,
              fontWeight: 800, margin: "0 0 24px",
              fontVariationSettings: "'wdth' 85",
            }}>
              Two rooms.<br/>
              Pro-cleaned.<br/>
              <span style={{ color: primary }}>For one-twenty.</span>
            </h1>

            <p style={{ fontSize: 19, lineHeight: 1.5, color: "#3a4856", maxWidth: 520, margin: "0 0 32px" }}>
              Eco-friendly hot-water extraction. Same-day slots open across the Birmingham metro. Carpets dry in 1–2 hours, not days.
            </p>

            {/* Massive price block */}
            <div className="v-price-block" style={{
              display: "flex", alignItems: "flex-end", gap: 24, padding: "20px 24px",
              background: ink, borderRadius: 16, color: "#fff",
              marginBottom: 28,
            }}>
              <div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: 1.8, color: "#9aa6b2", marginBottom: 4 }}>FLAT RATE · 2 ROOMS</div>
                <div className="v-price" style={{
                  fontFamily: "'Bricolage Grotesque', sans-serif",
                  fontSize: 96, lineHeight: 0.85, fontWeight: 800,
                  color: primary, letterSpacing: -4,
                }}>
                  $120
                </div>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, paddingBottom: 8, flex: 1 }}>
                {["No hidden fees", "Free spot retreatment", "Insured & certified"].map(t => (
                  <div key={t} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "#cdd6df" }}>
                    <Icon name="check" size={16} color={primary} strokeWidth={2.5} />{t}
                  </div>
                ))}
              </div>
            </div>

            {/* CTAs */}
            <div className="v-cta-row" style={{ display: "flex", gap: 12, marginBottom: 28 }}>
              <a href="#book" style={{
                background: accent, color: "#fff",
                padding: "20px 32px", borderRadius: 10,
                fontSize: 17, fontWeight: 700, textDecoration: "none",
                display: "inline-flex", alignItems: "center", gap: 10,
                boxShadow: `0 12px 24px -8px ${accent}88`,
                flex: 1, justifyContent: "center",
              }}>
                Claim My $120 Deal
                <Icon name="arrow" size={18} strokeWidth={2.5} />
              </a>
              <a href={PHONE_HREF} style={{
                background: "#fff", color: ink, border: `2px solid ${ink}`,
                padding: "18px 24px", borderRadius: 10,
                fontSize: 17, fontWeight: 700, textDecoration: "none",
                display: "inline-flex", alignItems: "center", gap: 10,
              }}>
                <Icon name="phone" size={18} strokeWidth={2.5} />
                Call now
              </a>
            </div>

            {/* Trust row */}
            <div className="v-trust-row" style={{ display: "flex", alignItems: "center", gap: 24, paddingTop: 20, borderTop: `1px solid ${surface2}` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 600 }}>
                <Icon name="badge" size={18} color={primary} />IICRC certified
              </div>
              <span style={{ width: 1, height: 24, background: surface2 }} />
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 600 }}>
                <Icon name="shield" size={18} color={primary} />Fully insured
              </div>
              <span style={{ width: 1, height: 24, background: surface2 }} />
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 600 }}>
                <Icon name="pin" size={18} color={primary} />Locally owned
              </div>
            </div>
          </div>

          {/* RIGHT — visual stack */}
          <div className="v-hero-right" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {/* Countdown card */}
            <div className="v-countdown" style={{
              background: primary, borderRadius: 16, padding: "20px 24px",
              display: "flex", alignItems: "center", justifyContent: "space-between",
            }}>
              <div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: 1.8, color: ink, opacity: 0.75, marginBottom: 4 }}>OFFER ENDS IN</div>
                <div style={{ fontSize: 14, fontWeight: 700, color: ink }}>Lock in $120 pricing</div>
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                {[["HRS", cd.h], ["MIN", cd.m], ["SEC", cd.s]].map(([l, v]) => (
                  <div key={l} style={{
                    background: ink, color: primary, borderRadius: 8,
                    padding: "8px 12px", minWidth: 56, textAlign: "center",
                    fontFamily: "'JetBrains Mono', monospace",
                  }}>
                    <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1 }}>{v}</div>
                    <div style={{ fontSize: 9, color: "#9aa6b2", letterSpacing: 1.5, marginTop: 2 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Hero photo */}
            <div className="v-hero-photo" style={{
              position: "relative",
              borderRadius: 16,
              overflow: "hidden",
              background: `linear-gradient(135deg, ${primary}14 0%, ${primary}05 100%)`,
              minHeight: 420,
              display: "flex", alignItems: "center", justifyContent: "center",
              padding: 12,
            }}>
              {/* decorative dotted ring backdrop */}
              <svg width="100%" height="100%" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet"
                style={{ position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.4 }}>
                <circle cx="260" cy="180" r="170" fill="none" stroke={primary} strokeWidth="1.2" strokeDasharray="3 6" />
                <circle cx="110" cy="320" r="70" fill="none" stroke={primary} strokeWidth="1" strokeDasharray="3 6" />
              </svg>
              <img src="assets/hero-cleaner.png" alt="Professional carpet cleaning in progress"
                style={{
                  position: "relative",
                  width: "100%", height: "auto", maxHeight: 460,
                  objectFit: "contain", display: "block",
                }} />
              {/* Floating badge */}
              <div style={{
                position: "absolute", bottom: 18, left: 18,
                background: "#fff", borderRadius: 10, padding: "10px 14px",
                boxShadow: "0 12px 28px -10px rgba(10,22,40,0.25)",
                display: "flex", alignItems: "center", gap: 10,
                border: `1px solid ${surface2}`,
              }}>
                <Icon name="shield" size={20} color={primary} strokeWidth={2.2} />
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: ink, lineHeight: 1.1 }}>Eco-friendly</div>
                  <div style={{ fontSize: 10, color: "#6b7785", fontFamily: "'JetBrains Mono', monospace", letterSpacing: 1, marginTop: 2 }}>KID & PET SAFE</div>
                </div>
              </div>
            </div>

            {/* Caption strip */}
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
              color: "#6b7785", letterSpacing: 1.2,
            }}>
              <span>FIG.01 — TRUCK-MOUNTED HOT-WATER EXTRACTION</span>
              <span>BIRMINGHAM METRO</span>
            </div>
          </div>
        </div>
      </section>

      {/* ============== TICKER ============== */}
      <div style={{
        background: ink, color: "#fff", overflow: "hidden",
        padding: "16px 0", borderTop: `4px solid ${primary}`,
      }}>
        <div style={{
          display: "flex", gap: 48, whiteSpace: "nowrap",
          fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 22, letterSpacing: -0.5,
          animation: "marquee 30s linear infinite",
        }}>
          {Array.from({ length: 2 }).map((_, k) => (
            <React.Fragment key={k}>
              {["DEEP STAINS REMOVED", "★", "PET ODORS NEUTRALIZED", "★", "DRIES IN 1–2 HOURS", "★", "ECO-FRIENDLY SOLUTIONS", "★", "SAFE FOR KIDS & PETS", "★", "CERTIFIED TECHNICIANS", "★"].map((t, i) => (
                <span key={`${k}-${i}`} style={{ color: t === "★" ? primary : "#fff" }}>{t}</span>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* ============== BENEFITS ============== */}
      <section className="v-section" style={{ padding: "80px 56px", background: surface }}>
        <div className="v-section-header" style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 56, alignItems: "start", marginBottom: 48 }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.8, color: "#6b7785", marginBottom: 12 }}>§ 02 — WHY US</div>
            <h2 className="v-h2" style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              fontSize: 56, lineHeight: 0.95, letterSpacing: -2, fontWeight: 800, margin: 0,
            }}>
              Built for<br/>busy households.
            </h2>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: "#3a4856", margin: 0, paddingTop: 24 }}>
            Truck-mounted hot-water extraction pulls 90% of the moisture back out, so you can walk on your carpets in two hours. Solutions are non-toxic, kid-safe, pet-safe, and rinse-clean — no sticky residue that re-attracts dirt.
          </p>
        </div>

        <div className="v-cards-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {[
            { icon: "spray", n: "01", t: "Deep stains gone", d: "Wine, coffee, mud, pet accidents — pulled from the fiber, not just the surface." },
            { icon: "leaf", n: "02", t: "Safe for kids & pets", d: "Plant-based solutions, no harsh chemicals, no lingering smell." },
            { icon: "clock", n: "03", t: "Dries in 1–2 hours", d: "High-extraction process means no soggy carpet, no day-long wait." },
            { icon: "badge", n: "04", t: "Certified techs", d: "IICRC-trained, background-checked, in branded trucks. Always on time." },
          ].map((b) => (
            <div key={b.n} style={{
              background: "#fff", borderRadius: 14, padding: "28px 24px",
              border: `1px solid ${surface2}`,
              display: "flex", flexDirection: "column", gap: 16, minHeight: 220,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div style={{
                  width: 48, height: 48, background: ink, borderRadius: 10,
                  display: "grid", placeItems: "center",
                }}>
                  <Icon name={b.icon} size={22} color={primary} strokeWidth={2} />
                </div>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#6b7785", letterSpacing: 1.5 }}>{b.n}</span>
              </div>
              <h3 style={{ fontSize: 20, fontWeight: 700, margin: 0, letterSpacing: -0.4 }}>{b.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: "#5a6877", margin: 0 }}>{b.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ============== HOW IT WORKS ============== */}
      <section className="v-section" style={{ padding: "80px 56px", background: "#fff" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.8, color: "#6b7785", marginBottom: 12 }}>§ 03 — PROCESS</div>
            <h2 className="v-h2" style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              fontSize: 56, lineHeight: 0.95, letterSpacing: -2, fontWeight: 800, margin: 0,
            }}>
              Three steps. Done by lunch.
            </h2>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <div style={{
            position: "absolute", top: 36, left: "12%", right: "12%", height: 2,
            background: `repeating-linear-gradient(90deg, ${primary} 0 8px, transparent 8px 16px)`,
          }} />
          <div className="v-process" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, position: "relative" }}>
            {[
              { n: "01", icon: "calendar", t: "Book in 60 seconds", d: "Pick a window online or call. Instant confirmation, no quote-runaround." },
              { n: "02", icon: "truck", t: "We arrive on time", d: "Live ETA tracking. Insured tech in a branded truck — no surprises at the door." },
              { n: "03", icon: "check", t: "Clean carpets, fast", d: "Deep extraction, dry in 1–2 hrs. Walk barefoot the same afternoon." },
            ].map(s => (
              <div key={s.n} style={{ textAlign: "center", padding: "0 16px" }}>
                <div style={{
                  width: 72, height: 72, borderRadius: "50%", background: "#fff",
                  border: `3px solid ${primary}`, margin: "0 auto 24px",
                  display: "grid", placeItems: "center", position: "relative",
                }}>
                  <Icon name={s.icon} size={28} color={ink} strokeWidth={1.8} />
                  <span style={{
                    position: "absolute", bottom: -8, right: -8,
                    background: ink, color: primary, fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 10, fontWeight: 700, letterSpacing: 1, padding: "3px 7px", borderRadius: 4,
                  }}>{s.n}</span>
                </div>
                <h3 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 10px", letterSpacing: -0.4 }}>{s.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: "#5a6877", margin: 0, maxWidth: 280, marginInline: "auto" }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== CREDIBILITY + GUARANTEE ============== */}
      <section className="v-section" style={{ padding: "80px 56px", background: ink, color: "#fff" }}>
        <div className="v-section-header" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 56, alignItems: "flex-start", marginBottom: 56 }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.8, color: primary, marginBottom: 12 }}>§ 04 — WHY TRUST US</div>
            <h2 className="v-h2" style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              fontSize: 56, lineHeight: 0.95, letterSpacing: -2, fontWeight: 800, margin: 0,
            }}>
              Credentials over<br/>
              <span style={{ color: primary }}>claims.</span>
            </h2>
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "#cdd6df", margin: 0, paddingTop: 8 }}>
            We're a locally-owned cleaning company serving the Birmingham metro. No flashy promises, no inflated review counts — just verifiable credentials, real licenses, and a written guarantee that backs every job.
          </p>
        </div>

        {/* Credibility grid */}
        <div className="v-cards-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 16 }}>
          {[
            { icon: "badge",  k: "IICRC",       l: "Certified technicians", d: "Trained to industry standard for textile cleaning & water restoration." },
            { icon: "shield", k: "INSURED",     l: "Fully covered",          d: "Liability + bonded. Your home is protected on every visit." },
            { icon: "pin",    k: "LOCAL",       l: "Owned in Birmingham",    d: "Family-owned and operated across the AL metro — not a national franchise." },
            { icon: "check",  k: "GUARANTEE",   l: "100% re-clean promise",  d: "Not happy with a spot? We come back free within 7 days. No questions." },
          ].map((c) => (
            <div key={c.k} style={{
              background: "rgba(255,255,255,0.04)",
              border: "1px solid rgba(255,255,255,0.1)",
              borderRadius: 14, padding: "28px 24px",
              display: "flex", flexDirection: "column", gap: 14, minHeight: 220,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div style={{
                  width: 48, height: 48, background: primary, borderRadius: 10,
                  display: "grid", placeItems: "center",
                }}>
                  <Icon name={c.icon} size={22} color={ink} strokeWidth={2.2} />
                </div>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: primary, letterSpacing: 1.6, fontWeight: 700 }}>{c.k}</span>
              </div>
              <h3 style={{ fontSize: 19, fontWeight: 700, margin: 0, letterSpacing: -0.4, color: "#fff" }}>{c.l}</h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "#9aa6b2", margin: 0 }}>{c.d}</p>
            </div>
          ))}
        </div>

        {/* Big guarantee bar */}
        <div className="v-guarantee-bar" style={{
          background: primary, color: ink, borderRadius: 16,
          padding: "32px 40px",
          display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center",
        }}>
          <div style={{
            width: 88, height: 88, borderRadius: "50%",
            background: ink, color: primary,
            display: "grid", placeItems: "center",
            position: "relative",
            border: `4px solid ${ink}`,
            boxShadow: `0 0 0 4px ${primary}`,
          }}>
            <div style={{ textAlign: "center", lineHeight: 1 }}>
              <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontSize: 28, fontWeight: 800, letterSpacing: -1 }}>100%</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8, letterSpacing: 1.4, marginTop: 2 }}>GUARANTEE</div>
            </div>
          </div>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.8, color: ink, opacity: 0.65, marginBottom: 6 }}>OUR PROMISE</div>
            <h3 style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              fontSize: 32, fontWeight: 800, letterSpacing: -1, lineHeight: 1.05, margin: 0, color: ink,
            }}>
              100% Re-Clean Guarantee · No questions asked · 7-day window
            </h3>
            <p style={{ fontSize: 14, color: ink, opacity: 0.75, margin: "8px 0 0", maxWidth: 640 }}>
              If a spot lifts back up, a stain comes back, or you're simply not happy — call us within 7 days and we'll re-clean it free. In writing on every invoice.
            </p>
          </div>
          <a href="#book" style={{
            background: ink, color: primary,
            padding: "18px 24px", borderRadius: 10,
            fontSize: 15, fontWeight: 700, textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 10, whiteSpace: "nowrap",
          }}>
            Book with confidence
            <Icon name="arrow" size={16} strokeWidth={2.5} />
          </a>
        </div>
      </section>

      {/* ============== FORM + MAP ============== */}
      <section id="book" className="v-section" style={{ padding: "80px 56px", background: surface }}>
        <div className="v-form-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 48, alignItems: "start" }}>
          {/* Form */}
          <div className="v-form" style={{
            background: "#fff", borderRadius: 20, padding: "40px",
            border: `1px solid ${surface2}`,
            position: "relative", overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", top: 0, left: 0, right: 0, height: 6, background: primary,
            }} />
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.8, color: "#6b7785", marginBottom: 8 }}>§ 05 — BOOK YOUR SLOT</div>
            <h2 style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              fontSize: 44, lineHeight: 0.95, letterSpacing: -1.5, fontWeight: 800, margin: "0 0 8px",
            }}>
              Lock in $120 pricing.
            </h2>
            <p style={{ fontSize: 15, color: "#5a6877", margin: "0 0 28px" }}>
              Takes 30 seconds. We'll text you a confirmation within 5 minutes.
            </p>

            <div className="v-form-fields" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              {[
                { label: "Full name", placeholder: "Jordan Reeves", span: 2 },
                { label: "Phone", placeholder: "(205) 555-0142", span: 1 },
                { label: "Email", placeholder: "you@example.com", span: 1 },
                { label: "Address", placeholder: "123 Main St, Birmingham AL", span: 2 },
                { label: "Number of rooms", select: ["1 room — $80", "2 rooms — $120 (save $30)", "3 rooms — $165", "4 rooms — $210", "5+ rooms — get a quote"], span: 2 },
              ].map((f, i) => (
                <div key={i} style={{ gridColumn: `span ${f.span}` }}>
                  <label style={{ display: "block", fontSize: 12, fontWeight: 600, marginBottom: 6, color: "#3a4856", letterSpacing: 0.2 }}>{f.label}</label>
                  {f.select ? (
                    <select defaultValue={f.select[1]} style={inp(surface2, primary)}>
                      {f.select.map(o => <option key={o}>{o}</option>)}
                    </select>
                  ) : (
                    <input placeholder={f.placeholder} style={inp(surface2, primary)} />
                  )}
                </div>
              ))}
            </div>

            <div className="v-form-cta" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 14 }}>
              <button style={{
                background: accent, color: "#fff", border: "none",
                padding: "20px", borderRadius: 12, fontSize: 17, fontWeight: 700,
                cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                boxShadow: `0 12px 24px -8px ${accent}88`,
              }}>
                Claim My $120 Deal
                <Icon name="arrow" size={18} strokeWidth={2.5} />
              </button>
              <a href={PHONE_HREF} style={{
                background: "#fff", color: ink, border: `2px solid ${ink}`,
                padding: "18px", borderRadius: 12, fontSize: 17, fontWeight: 700,
                textDecoration: "none", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
              }}>
                <Icon name="phone" size={18} strokeWidth={2.5} />
                {PHONE_DISPLAY}
              </a>
            </div>
            <p style={{ fontSize: 12, color: "#6b7785", marginTop: 16, textAlign: "center", display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
              <Icon name="shield" size={14} color={primary} />
              No spam. No obligation. Your info stays with us.
            </p>
          </div>

          {/* Map */}
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.8, color: "#6b7785", marginBottom: 12 }}>§ 06 — SERVICE AREA</div>
            <h3 style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              fontSize: 36, lineHeight: 1, letterSpacing: -1.2, fontWeight: 800, margin: "0 0 20px",
            }}>
              Serving 19 cities across<br/>the Birmingham metro.
            </h3>
            <ServiceMap primary={primary} />
            <div style={{
              marginTop: 16, display: "flex", flexWrap: "wrap", gap: 6,
            }}>
              {SERVICE_AREAS.map(a => (
                <span key={a} style={{
                  fontSize: 12, padding: "5px 11px", borderRadius: 999,
                  background: "#fff", border: `1px solid ${surface2}`, color: "#3a4856",
                  fontWeight: 500,
                }}>{a}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============== FAQ ============== */}
      <section className="v-section" style={{ padding: "80px 56px", background: "#fff" }}>
        <div className="v-faq-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 56 }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.8, color: "#6b7785", marginBottom: 12 }}>§ 07 — FAQ</div>
            <h2 className="v-h2" style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              fontSize: 56, lineHeight: 0.95, letterSpacing: -2, fontWeight: 800, margin: "0 0 24px",
            }}>
              Asked & answered.
            </h2>
            <p style={{ fontSize: 15, color: "#5a6877", lineHeight: 1.6, marginBottom: 28 }}>
              Still have questions? Call <a href={PHONE_HREF} style={{ color: ink, fontWeight: 600 }}>{PHONE_DISPLAY}</a> — a real person picks up, 7 days a week.
            </p>
          </div>
          <div>
            {[
              { q: "What counts as a room?", a: "A standard room is up to 250 sq ft. Living rooms, bedrooms, dens — all count as one room. Hallways, closets, and stairs are billed separately at flat rates we'll quote upfront." },
              { q: "Are there extra charges I should know about?", a: "No. The $120 is the price. The only add-ons are optional: pet enzyme treatment, scotch-guarding, and stairs. Every add-on is quoted in writing before we start." },
              { q: "How long does the cleaning take?", a: "Two rooms takes about 45 minutes to an hour. Carpets are dry to the touch in 1–2 hours thanks to high-extraction equipment." },
              { q: "Do you move furniture?", a: "We move light furniture (chairs, end tables, lightweight sofas) at no charge. We don't move beds, dressers, electronics, or anything fragile — but we'll clean carefully around them." },
              { q: "What if I'm not satisfied?", a: "We re-clean any spot you're not happy with for free, within 7 days. No arguing, no fine print." },
            ].map((f, i) => (
              <div key={i} style={{
                borderTop: `1px solid ${surface2}`,
                borderBottom: i === 4 ? `1px solid ${surface2}` : "none",
                padding: "20px 0",
              }}>
                <button onClick={() => setOpen(open === i ? null : i)} style={{
                  width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center",
                  background: "none", border: "none", padding: 0, cursor: "pointer", textAlign: "left",
                  fontSize: 18, fontWeight: 600, color: ink, letterSpacing: -0.3,
                }}>
                  <span>{f.q}</span>
                  <Icon name={open === i ? "minus" : "plus"} size={20} color={primary} strokeWidth={2} />
                </button>
                {open === i && (
                  <p style={{ fontSize: 15, lineHeight: 1.6, color: "#5a6877", margin: "12px 0 0", maxWidth: 600 }}>{f.a}</p>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== FINAL CTA ============== */}
      <section className="v-section v-final" style={{
        padding: "80px 56px", background: primary,
        position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          background: `radial-gradient(circle at 80% 20%, rgba(10,22,40,0.15), transparent 40%)`,
        }} />
        <div style={{ position: "relative", maxWidth: 900, margin: "0 auto", textAlign: "center" }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.8, color: ink, marginBottom: 16, opacity: 0.7 }}>
            ★ FINAL CALL ★ {cd.h}:{cd.m}:{cd.s} REMAINING ★
          </div>
          <h2 className="v-final-h2" style={{
            fontFamily: "'Bricolage Grotesque', sans-serif",
            fontSize: 88, lineHeight: 0.9, letterSpacing: -3.5, fontWeight: 800, margin: "0 0 24px", color: ink,
          }}>
            Two rooms. $120.<br/>Today.
          </h2>
          <p style={{ fontSize: 19, color: ink, opacity: 0.75, maxWidth: 540, margin: "0 auto 36px" }}>
            Slots fill fast. Lock yours in before the timer hits zero.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="#book" style={{
              background: ink, color: primary,
              padding: "22px 36px", borderRadius: 10,
              fontSize: 18, fontWeight: 700, textDecoration: "none",
              display: "inline-flex", alignItems: "center", gap: 12,
            }}>Book online <Icon name="arrow" size={18} strokeWidth={2.5} /></a>
            <a href={PHONE_HREF} style={{
              background: accent, color: "#fff",
              padding: "22px 36px", borderRadius: 10,
              fontSize: 18, fontWeight: 700, textDecoration: "none",
              display: "inline-flex", alignItems: "center", gap: 12,
            }}><Icon name="phone" size={18} strokeWidth={2.5} />{PHONE_DISPLAY}</a>
          </div>
        </div>
      </section>

      {/* ============== FOOTER ============== */}
      <footer className="v-footer" style={{ background: ink, color: "#9aa6b2", padding: "32px 56px", fontSize: 12, fontFamily: "'JetBrains Mono', monospace", letterSpacing: 0.5 }}>
        <div className="v-footer-row" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span>© 2026 EXTREME SERVICES · BIRMINGHAM AL</span>
          <span>LICENSED · INSURED · IICRC #042-9412</span>
        </div>
      </footer>
    </div>
  );
}

const inp = (border, focus) => ({
  width: "100%", padding: "14px 16px",
  fontSize: 16, fontFamily: "'Inter', sans-serif",
  border: `1.5px solid ${border}`, borderRadius: 10,
  background: "#fff", color: "#0A1628",
  outline: "none", boxSizing: "border-box",
});

window.VariationA = VariationA;