// Mobile FAQ page — full content parity with desktop (7 categories, 45 questions, TL;DRs)

const { useState: fqS, useEffect: fqE, useRef: fqR, useMemo: fqM } = React;

const FAQ = [
  {
    cat: "What It Is",
    blurb: "What StoneGuard actually is, and where we work.",
    items: [
      { q: "What areas do you cover?",
        a: "We're based in the tri-state and serve homes across New York, New Jersey, and Pennsylvania. Most installs are within a comfortable drive of NYC, but we travel further regularly — get in touch with your address and we'll confirm scheduling and travel for your project.",
        tldr: "NY · NJ · PA. Travel further on request." },
      { q: "What is StoneGuard® & how is it different from sealers?",
        a: "StoneGuard® is a patented, multi-layer protective film engineered specifically for natural stone — about 5 mils thick, with a nano-coated top layer that takes the brunt of everyday wear. Sealers are a different category entirely: they're liquid chemicals that soak into the pores of the stone, require periodic reapplication, and offer limited protection against acidic spills. StoneGuard is a physical barrier that lives on top of the stone, blocks etching and stains in real time, and can simply be replaced when it ages.",
        tldr: "A physical film, not a liquid sealer. Stops etching." },
      { q: "Why choose StoneGuard instead of other films?",
        a: "StoneGuard was engineered from every layer specifically for stone — including a gas-permeable adhesive that lets the slab breathe. Most \"competing\" countertop films are repurposed automotive paint protection film or window tint, originally designed for glass and metal, not calcite. Repurposed films can seal the pores of the stone or behave unpredictably over time. StoneGuard's technology and its application to stone are protected by patent, and we're trained and certified to install it.",
        tldr: "Built for stone from the ground up. Patented." },
      { q: "Who is M&T Surface Protectors?",
        a: "We're a family-run, certified StoneGuard installation company based in the tri-state. Michael and the team have spent years specializing in one thing — protecting and restoring high-end natural stone in private residences. We don't do flooring, we don't do tile contracting on the side. Stone surfaces are the entire business.",
        tldr: "Family-run, certified, focused only on stone surfaces." },
      { q: "What stones does StoneGuard work on?",
        a: "Marble, quartzite, granite, soapstone, limestone, travertine, onyx, and engineered quartz — essentially any natural or man-made stone slab with a relatively smooth surface. Highly textured leathered or rough-hewn finishes can be a challenge for adhesion; we'll evaluate your specific slab during the consultation and tell you honestly whether StoneGuard is the right call.",
        tldr: "Most stones — marble, quartzite, granite, quartz, soapstone, more." },
      { q: "Where can StoneGuard be installed in my home?",
        a: "Anywhere there's a flat stone surface that takes daily use: kitchen counters and islands, bathroom vanities, bar tops, dining tables, fireplace surrounds, conference tables, and waterfall edges. We've also done coffee tables and built-in desks. If it's stone and you use it, it's a candidate.",
        tldr: "Counters, islands, vanities, bars, tables, fireplaces." },
      { q: "Can StoneGuard be used outdoors?",
        a: "No — StoneGuard was developed and tested for indoor use only. Outdoor exposure introduces temperature swings, moisture cycles, and UV intensity that the film isn't engineered for. If you have an outdoor kitchen or patio bar that needs protection, give us a call and we'll point you toward the right product for that environment.",
        tldr: "Indoor only. Outdoor stone needs a different product." },
    ],
  },
  {
    cat: "Looks & Finish",
    blurb: "How it'll look on your stone — polished, honed, or otherwise.",
    items: [
      { q: "Do I need to get my stone restored before StoneGuard is applied?",
        a: "If your stone already has etching, staining, or surface damage, yes — the film bonds to whatever's underneath, so we start from a clean canvas. We handle the restoration ourselves: honing, polishing, stain removal, and prep all happen on the same project. If your stone is in good shape, we go straight to install. We'll tell you honestly which camp you're in during the consultation.",
        tldr: "Yes if the stone is damaged. We restore it on the same job." },
      { q: "Is StoneGuard® available for honed or polished surfaces?",
        a: "Yes — both. StoneGuard Clear is engineered for polished, glossy stones; it preserves the reflective look and enhances the natural gloss by up to 300%. StoneGuard Satin is engineered for honed and matte stones; it preserves the soft tactile finish while bringing out the depth and color. We confirm the right product during the consult.",
        tldr: "Clear for polished. Satin for honed." },
      { q: "Will StoneGuard® change the look of my stone?",
        a: "Not in a bad way. Once cured, the film is nearly invisible — most clients can't see it unless they're looking at a glancing angle. What it does change is the depth: Clear adds gloss to polished stone, Satin enhances color and variation in honed stone. Both finishes were tuned to look like stone, not like a film over stone.",
        tldr: "Nearly invisible. Enhances depth and color." },
      { q: "Is StoneGuard® the same as PPF?",
        a: "No. PPF (paint protection film) was developed for car paint — it's flexible, optimized for curved metal panels, and uses adhesives that work against painted surfaces. StoneGuard was developed from the top layer down for stone: the topcoat chemistry, the carrier film, and the gas-permeable adhesive are all specific to porous, calcite-based materials.",
        tldr: "No. PPF is for cars; StoneGuard is for stone." },
      { q: "Will the seams be visible?",
        a: "Almost never. We template each surface as a single piece wherever possible, and where seams are unavoidable — long runs, L-shapes around an island — we place them along natural breakpoints in the slab and align the cut so the film edge disappears into the stone's veining. You'd have to know exactly where to look.",
        tldr: "Rarely. We hide seams in the veining." },
      { q: "Will it look glossy or fake?",
        a: "No. Both Clear and Satin were specifically engineered to read as stone, not as plastic. Clear matches the depth of a polished slab; Satin holds the soft, low-sheen feel of honed stone. The film has no orange-peel texture, no visible thickness at the edge, and no shine that doesn't belong.",
        tldr: "No. It reads as stone, not plastic." },
      { q: "Can I see a sample before I commit?",
        a: "Because StoneGuard is a professional-only product, we don't ship loose samples — they wouldn't represent how the film looks once it's bonded to your specific stone. What we can do is bring sample boards to your in-home consultation and place them on your countertop so you can see Clear and Satin against your actual slab in your actual lighting.",
        tldr: "Yes — we bring samples to the in-home consultation." },
    ],
  },
  {
    cat: "How It Performs",
    blurb: "What it actually stops — chemicals, heat, scratches, wear.",
    items: [
      { q: "What chemicals can StoneGuard® protect counter surfaces from?",
        a: "Common kitchen acids and dyes: white vinegar, coffee, citrus, bleach, red wine, tomato — plus a long list of other organic liquids that ruin natural stone. StoneGuard is the sacrificial layer; it takes the chemical hit in place of the slab.",
        tldr: "Wine, citrus, vinegar, coffee, bleach, tomato — handled." },
      { q: "Is StoneGuard® heat resistant?",
        a: "StoneGuard is engineered for heat tolerance, but the natural stone underneath can suffer thermal shock from oven-hot items — that's true protected or unprotected. Best practice still applies: use trivets or hot pads under hot cookware when temperatures reach the upper limit of around 420°F.",
        tldr: "Yes, up to ~420°F. Still use trivets for oven-hot pans." },
      { q: "Will the film get damaged over time?",
        a: "StoneGuard is a consumable layer by design — that's the whole point. It absorbs scratches, chemical exposure, and wear so the stone underneath stays exactly as it was the day we installed it. When the film eventually shows its age it can be replaced without affecting the slab.",
        tldr: "It's meant to. The stone underneath stays new." },
      { q: "Will StoneGuard® peel?",
        a: "Not under normal use. The adhesive system is engineered for long-term bonding to stone, and our installations carry a Limited Lifetime Warranty against bubbling, fading, and natural delamination. Where film occasionally lifts is at exposed edges that get repeatedly soaked — which is why we recommend wiping edge spills promptly.",
        tldr: "No, under normal use. Warrantied against natural delamination." },
      { q: "How long does StoneGuard last?",
        a: "Most of our installations look new well past a decade with normal use. Because it's a replaceable consumable, even when the film eventually shows its age the fix is a refresh — not a re-do of your stone. We've returned to clients seven and eight years later and the film still looks tight.",
        tldr: "10+ years with normal use, before refresh is even a question." },
      { q: "Is it scratch-proof?",
        a: "It's scratch-resistant, not scratch-proof — and the difference matters. The nano-coated topcoat shrugs off everyday contact: dragging plates, sliding small appliances, stacking pans. It is not knife-proof, so we always recommend a cutting board. The film handles the rest of normal kitchen life without showing.",
        tldr: "Resistant, not proof. Use a cutting board." },
      { q: "What about UV / sunlight from my windows?",
        a: "StoneGuard has built-in UVA/UVB inhibitors and is engineered for installations near windows. The film stays clear and stable under sun exposure and won't yellow over time the way cheaper repurposed films can. If your stone sits in direct afternoon sun, that's exactly the scenario it was built for.",
        tldr: "UV-stable. Won't yellow near windows." },
      { q: "Will it trap moisture in my stone?",
        a: "No. The top of the film is impermeable — that's how it blocks spills — but the adhesive layer underneath is gas-permeable, so the stone can naturally outgas and breathe. This was a deliberate engineering choice and one of the main reasons StoneGuard works on stone where window film and PPF don't.",
        tldr: "No. The adhesive is gas-permeable; stone breathes." },
      { q: "Is StoneGuard food-safe?",
        a: "Yes. The film is non-toxic, antimicrobial, and tested to comply with low-VOC indoor air-quality standards. You can prep food directly on it the way you would on any sealed countertop — though we still recommend a cutting board for the sake of the topcoat (and your knives).",
        tldr: "Yes — non-toxic, antimicrobial, low-VOC." },
    ],
  },
  {
    cat: "Living With It",
    blurb: "Day-to-day cleaning, what's safe, what to avoid.",
    items: [
      { q: "How do I maintain StoneGuard®?",
        a: "Use warm water or a pH-neutral, stone-safe cleaner with a clean microfiber towel, and dry the surface after cleaning to reduce spotting. For tougher residues, use an approved StoneGuard cleaner. Avoid abrasive scrubbing pads and powders, and don't use knives directly on the surface. That's the entire maintenance routine.",
        tldr: "Warm water + microfiber. Dry after. That's it." },
      { q: "What cleaners should I avoid?",
        a: "Skip anything abrasive — scouring pads, powders, magic erasers — and skip harsh industrial chemicals like concentrated acids or solvents. Common household sprays (Windex, 409, etc.) won't damage the film for occasional use, but a stone-safe pH-neutral cleaner is what we recommend day-to-day.",
        tldr: "No abrasives, no harsh acids. pH-neutral is best." },
      { q: "Can I cut directly on it?",
        a: "Please don't. The topcoat is scratch-resistant, but a sharp knife under pressure will mark any surface — film, stone, sealer, or otherwise. Use a cutting board, both for the film and for your knives.",
        tldr: "No. Always use a cutting board." },
      { q: "Can I put hot pots and pans directly on it?",
        a: "We don't recommend it. StoneGuard tolerates heat up to about 420°F, but the stone underneath can crack from thermal shock independently of the film. A trivet costs five dollars and removes the question entirely.",
        tldr: "No — use a trivet for oven-hot cookware." },
      { q: "What happens if I spill red wine and don't notice for hours?",
        a: "Nothing. That's the whole point of StoneGuard. Wine, coffee, balsamic, lemon juice — they sit on the film and wipe up clean whenever you get to it. The stone underneath never sees the spill. The one place to be a little more attentive is the very edge of the counter, where exposed stone meets the film; wipe edge spills when you notice them.",
        tldr: "Nothing. That's literally what it's for." },
      { q: "Will it stain over time?",
        a: "The film itself is stain-resistant by design and shouldn't discolor under normal use. Some installations near gas cooktops can develop a faint film of cooking residue over years — that's a cleaning issue, not a staining issue, and it wipes off with the recommended StoneGuard surfactant.",
        tldr: "No, under normal use. Cooking residue cleans off." },
      { q: "Can I use StoneGuard cleaner on the rest of my stone?",
        a: "Yes — the cleaner we provide is pH-neutral and stone-safe, so it's fine on bare marble, granite, or quartzite as well as on the film. Many of our clients use it as their default kitchen counter cleaner across the whole space.",
        tldr: "Yes. It's stone-safe everywhere." },
    ],
  },
  {
    cat: "The Install",
    blurb: "What to expect when we show up to do the work.",
    items: [
      { q: "Can I install StoneGuard® myself?",
        a: "No — StoneGuard is a professional-only application. Proper adhesion, seamwork, and finish all require certified installation, and DIY isn't recommended (or warrantied). M&T Surface Protectors are certified StoneGuard specialists; we install across NY, NJ, and PA.",
        tldr: "No. Pro install only — that's how the warranty works." },
      { q: "Do fixtures, like the faucet, have to be removed for an installation?",
        a: "Most installs don't require fixtures to be removed. We template carefully around faucets, soap dispensers, and cooktops so the film follows the cutout cleanly. If a fixture is unusually tight or sits flush against the stone, we'll flag that during the consultation.",
        tldr: "Usually no. We template around them." },
      { q: "How long after installation can the countertops be used?",
        a: "Light use the same day, full use the next morning. The film is touch-dry by the time we leave, but the adhesive needs a few hours to fully bond to the stone — so we ask you to keep liquids and heavy use off the surface overnight.",
        tldr: "Same day for light use. Next morning for full use." },
      { q: "How long does an install take?",
        a: "Most kitchens are completed in a single day — typically four to eight hours, depending on square footage, stone condition, and how many surfaces are getting protected. Large multi-surface projects (kitchen + bathrooms + bar) can stretch into a second day.",
        tldr: "One day for most kitchens. We confirm in advance." },
      { q: "Is the install messy?",
        a: "Less than you'd think. We work with a small amount of water and surfactant during application, and we tape off and protect adjacent cabinetry before we begin. By the time we leave, the kitchen is cleaner than when we arrived.",
        tldr: "Minimal mess. We protect cabinetry and clean as we go." },
      { q: "Do I need to be home during the install?",
        a: "Briefly at the beginning so we can walk the surfaces together and confirm scope, and ideally at the end for the final walkthrough — but you don't need to hover. Most clients hand us a key or a code, head to work, and come home to protected stone.",
        tldr: "Briefly at start and end. Not in between." },
      { q: "How do I prep the kitchen before you arrive?",
        a: "Clear the counters of small appliances, knife blocks, fruit bowls, and anything that lives on the surface. Move heavy items off the cooktop and out of the sink area. We bring everything else: tools, tape, drop cloths, the film itself, and our cleaning kit.",
        tldr: "Clear the counters. We bring everything else." },
      { q: "Can StoneGuard be removed?",
        a: "Yes — the film is removable, which is one of its quietest advantages. If you renovate or sell the home and the next owner doesn't want it, we can remove the film and the stone underneath comes back exactly as it was. It's not permanent, and that's by design.",
        tldr: "Yes. The stone underneath is unchanged." },
      { q: "Can it be replaced if it gets damaged?",
        a: "Yes — that's the whole model. If the film gets scratched, scorched, or worn after years of use, we remove that section and re-install fresh film. The stone underneath is untouched. Most clients never need this, but knowing it's possible is part of why StoneGuard is the right call for high-end stone.",
        tldr: "Yes. We remove and refresh; stone stays new." },
    ],
  },
  {
    cat: "Cost & Booking",
    blurb: "Quotes, scheduling, and what the process feels like.",
    items: [
      { q: "How much does StoneGuard cost?",
        a: "We charge a flat rate per square foot, with the exact rate depending on your location, the stone, and whether any restoration is needed before we install. Most kitchen projects fall in a predictable band, and we always send a written quote before any commitment. Reach out with rough dimensions and a photo or two and we'll send back a real number — usually the same day.",
        tldr: "Flat rate per sq ft. Free written quote before you commit." },
      { q: "Are quotes free?",
        a: "Yes. We do a remote quote based on photos and rough dimensions, and we'll come out for a free in-home consultation when the project is the right fit. There's no obligation either way — many people get a quote, sit on it for a few months, and book later.",
        tldr: "Yes. Remote and in-home consultations are free." },
      { q: "How far in advance should I book?",
        a: "We're typically booked about a month out, sometimes more during spring and fall. If you have a specific date in mind — a renovation deadline, a move-in, hosting a holiday — reach out as early as you can and we'll do our best to fit it in.",
        tldr: "Usually one month out. Earlier for specific dates." },
      { q: "Do you do new construction and renovations?",
        a: "Yes — frequently. Many of our installs are coordinated with a kitchen renovation or new build, where the slab is fabricated, set, and then we come in before the homeowner moves back into the space. We work directly with designers, GCs, and stone fabricators when that's helpful.",
        tldr: "Yes. We coordinate with builders, GCs, and fabricators." },
      { q: "Do you offer financing or payment plans?",
        a: "We accept standard payments and can break larger multi-surface projects into milestone payments tied to the work. We don't currently offer in-house financing, but plenty of clients use a home-improvement card or HELOC for larger jobs.",
        tldr: "Milestone payments on large jobs. No in-house financing." },
      { q: "What's the consultation process?",
        a: "It usually goes: text or email with rough info → quick remote quote → in-home consultation if it's a fit → written final quote → schedule the install. The whole process from first message to install is typically two to four weeks for a standard kitchen.",
        tldr: "Message → quote → consult → schedule. 2-4 weeks typical." },
    ],
  },
  {
    cat: "Our Promise",
    blurb: "What's covered, for how long, and what happens if something goes wrong.",
    items: [
      { q: "What is StoneGuard®'s warranty?",
        a: "StoneGuard comes with a Limited Lifetime Warranty against bubbling, fading, and natural delamination, plus a Performance Guarantee on the protective film itself. Normal wear and tear are excluded — that's the consumable layer doing what it's designed to do. Refer to the warranty card we leave with you for full scope and the claim process.",
        tldr: "Limited Lifetime + Performance Guarantee. Wear excluded." },
      { q: "What's covered, exactly?",
        a: "The warranty covers manufacturing defects, bubbling, fading, and natural delamination — meaning the film coming away from the stone on its own without an external cause. The Performance Guarantee separately covers the film's ability to do its job over its service life.",
        tldr: "Defects, bubbling, fading, natural delamination, performance." },
      { q: "What's NOT covered?",
        a: "Normal wear and tear — small scratches, dulling at high-use spots, eventual replacement need. Edge-wicking caused by repeated soaking at exposed countertop edges. Damage from misuse: cutting directly on the film, harsh industrial chemicals, items above the stated heat threshold. We're transparent about this up front so there are no surprises later.",
        tldr: "Wear, edge-wicking, misuse damage." },
      { q: "Is the warranty transferable?",
        a: "Warranty terms are tied to the original installation. If you're selling your home, contact us — we'll walk you and the buyer through the specifics so the next owner knows exactly what's protecting their stone, and so you can hand off the documentation cleanly.",
        tldr: "Tied to original install. Call us if you're selling." },
      { q: "What if something goes wrong?",
        a: "Call or text us. Send photos. We respond same-day on weekdays in almost every case. If it's a warrantable issue, we come back out and make it right at no charge. If it's something outside the warranty, we'll still help you understand the options and quote a fair refresh.",
        tldr: "Call us. Same-day response. We make it right." },
      { q: "Do you do follow-up visits?",
        a: "We do a check-in with every install around the 30-day mark, just to confirm everything looks the way it should. After that we're a phone call away. Some clients we've installed for over the years have us back periodically for refreshes or to add coverage to new surfaces.",
        tldr: "30-day check-in built in. Available afterward anytime." },
    ],
  },
];

const FAQ_TOTAL = FAQ.reduce((n, s) => n + s.items.length, 0);

// "Most asked" shortcut tiles — link to the relevant cat/question
const SHORTCUTS = [
  { num: "01", kicker: "The price question",   q: "How much does StoneGuard cost?",                 cat: "Cost & Booking", tldr: "Flat rate per sq ft. Free written quote." },
  { num: "02", kicker: "The fear question",    q: "Will it look glossy or fake?",                   cat: "Looks & Finish", tldr: "No. Engineered to read as stone, not film." },
  { num: "03", kicker: "The install question", q: "How long does an install take?",                 cat: "The Install",    tldr: "One day for most kitchens." },
];

// ─────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────
function FaqHero({ onSelectShortcut }) {
  return (
    <section style={{
      paddingTop: "calc(var(--nav-h) + 32px)",
      paddingBottom: 32,
      background: `
        radial-gradient(ellipse 110% 70% at 80% 15%, rgba(232,212,168,0.35) 0%, transparent 55%),
        radial-gradient(ellipse 90% 60% at 12% 90%, rgba(107,20,22,0.08) 0%, transparent 55%),
        linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%)
      `,
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Marble vein decoration */}
      <svg aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.12, pointerEvents: "none" }} viewBox="0 0 400 600" preserveAspectRatio="none">
        <defs>
          <linearGradient id="vein-m" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#6B1416" stopOpacity="0"/>
            <stop offset="50%" stopColor="#6B1416" stopOpacity="0.7"/>
            <stop offset="100%" stopColor="#6B1416" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d="M-20 200 Q 100 140, 200 200 T 420 220" stroke="url(#vein-m)" strokeWidth="1.2" fill="none">
          <animate attributeName="d" dur="20s" repeatCount="indefinite"
            values="M-20 200 Q 100 140, 200 200 T 420 220;
                    M-20 220 Q 100 180, 200 210 T 420 200;
                    M-20 200 Q 100 140, 200 200 T 420 220"/>
        </path>
        <path d="M-20 440 Q 120 380, 220 450 T 420 400" stroke="url(#vein-m)" strokeWidth="0.8" fill="none" opacity="0.6"/>
      </svg>

      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <LineEyebrow style={{ marginBottom: 20 }}>FAQ · Frequently asked</LineEyebrow>
        <h1 className="serif" style={{ fontSize: 50, lineHeight: 0.96, letterSpacing: "-0.025em", marginBottom: 22 }}>
          <Reveal>The questions we get,</Reveal>
          <Reveal delay={140}>
            <span style={{
              background: "linear-gradient(95deg, #6B1416 0%, #8B1C1E 35%, #9B4A2E 75%, #8B5A2B 100%)",
              WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent",
              fontStyle: "italic", display: "block",
            }}>
              answered honestly.
            </span>
          </Reveal>
        </h1>
        <Reveal delay={320}>
          <div className="mono" style={{
            display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap",
            fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--mute)",
            marginBottom: 26,
          }}>
            <span>{FAQ_TOTAL}+ Questions</span>
            <span style={{ width: 3, height: 3, borderRadius: 99, background: "var(--mute)", opacity: 0.5 }}/>
            <span>{FAQ.length} Chapters</span>
            <span style={{ width: 3, height: 3, borderRadius: 99, background: "var(--mute)", opacity: 0.5 }}/>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{
                width: 5, height: 5, borderRadius: 99, background: "#3B5A4A",
                animation: "faq-pulse 2.2s cubic-bezier(.4,.0,.6,1) infinite",
              }}/>
              Reviewed Apr 2026
            </span>
          </div>
          <style>{`@keyframes faq-pulse { 0%,100%{opacity:0.5; transform:scale(1);} 50%{opacity:1; transform:scale(1.4);} }`}</style>
        </Reveal>

        {/* Most-asked shortcuts */}
        <Reveal delay={450}>
          <div className="mono" style={{ fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink-2)", marginBottom: 12 }}>
            What most people ask first
          </div>
          <div style={{ display: "grid", gap: 10 }}>
            {SHORTCUTS.map((s) => (
              <button
                key={s.num}
                onClick={() => onSelectShortcut(s)}
                style={{
                  textAlign: "left",
                  background: "var(--bone)",
                  border: "1px solid var(--line)",
                  padding: "16px 18px",
                  display: "flex", alignItems: "flex-start", gap: 14,
                  transition: "all .25s ease",
                }}
              >
                <div className="mono" style={{
                  fontSize: 10, letterSpacing: "0.18em", color: "var(--maroon)", fontVariantNumeric: "tabular-nums",
                  paddingTop: 3,
                }}>
                  {s.num}
                </div>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--mute)", marginBottom: 4 }}>
                    {s.kicker}
                  </div>
                  <div className="serif" style={{ fontSize: 17, letterSpacing: "-0.01em", lineHeight: 1.2, marginBottom: 6 }}>
                    {s.q}
                  </div>
                  <div className="body-sm" style={{ fontSize: 12 }}>
                    {s.tldr}
                  </div>
                </div>
                <svg width="13" height="13" viewBox="0 0 14 14" fill="none" style={{ marginTop: 10, color: "var(--mute)", flexShrink: 0 }}>
                  <path d="M1 7h12m0 0L7 1m6 6L7 13" stroke="currentColor" strokeWidth="1.3"/>
                </svg>
              </button>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// CONTENT — search + chips + accordion
// ─────────────────────────────────────────────
function FaqContent({ jumpTo }) {
  const [query, setQuery] = fqS("");
  const [cat, setCat] = fqS("All");
  const cats = ["All", ...FAQ.map(s => s.cat)];

  // jumpTo: { cat, q } → expand and scroll that question
  fqE(() => {
    if (!jumpTo) return;
    setCat(jumpTo.cat);
    setQuery(""); // clear any existing search so the row is visible
    requestAnimationFrame(() => {
      const id = `faq-${jumpTo.cat}-${jumpTo.q}`.replace(/[^\w]/g, "-");
      const el = document.getElementById(id);
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 130;
        window.scrollTo({ top: y, behavior: "smooth" });
        el.click(); // expand
      }
    });
  }, [jumpTo]);

  const filtered = fqM(() => {
    let pool = [];
    FAQ.forEach(section => {
      pool = pool.concat(section.items.map(it => ({ ...it, cat: section.cat })));
    });
    if (cat !== "All") pool = pool.filter(it => it.cat === cat);
    if (query.trim()) {
      const q = query.toLowerCase();
      pool = pool.filter(it =>
        it.q.toLowerCase().includes(q) ||
        it.a.toLowerCase().includes(q) ||
        (it.tldr && it.tldr.toLowerCase().includes(q))
      );
    }
    return pool;
  }, [query, cat]);

  const activeBlurb = FAQ.find(s => s.cat === cat)?.blurb;

  return (
    <section style={{ background: "var(--bone)", paddingBottom: 60 }}>
      {/* Sticky search + chips */}
      <div style={{
        position: "sticky",
        top: "var(--nav-h)", zIndex: 30,
        background: "rgba(245,242,237,0.96)",
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
        borderBottom: "1px solid var(--line)",
        paddingTop: 14,
      }}>
        <div className="container" style={{ paddingBottom: 12 }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            border: "1px solid var(--line)",
            background: "var(--cream)",
            padding: "12px 14px",
          }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, color: "var(--mute)" }}>
              <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.3"/>
              <path d="M11 11l4 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
            </svg>
            <input
              type="search"
              value={query}
              onChange={e => setQuery(e.target.value)}
              placeholder="Search the FAQ…"
              style={{
                flex: 1, fontSize: 14,
                background: "transparent", border: "none", outline: "none",
                color: "var(--ink)", padding: 0,
              }}
            />
            {query && (
              <button onClick={() => setQuery("")} aria-label="Clear" style={{ color: "var(--mute)", padding: 0 }}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
                </svg>
              </button>
            )}
          </div>
        </div>
        <div className="no-scrollbar" style={{
          display: "flex", gap: 8,
          overflowX: "auto",
          padding: "0 var(--gutter) 14px",
        }}>
          {cats.map(c => {
            const isActive = cat === c;
            const count = c === "All" ? FAQ_TOTAL : FAQ.find(s => s.cat === c)?.items.length || 0;
            return (
              <button
                key={c}
                onClick={() => setCat(c)}
                style={{
                  padding: "8px 14px",
                  fontSize: 12, letterSpacing: "0.02em",
                  border: "1px solid " + (isActive ? "var(--ink)" : "var(--line)"),
                  background: isActive ? "var(--ink)" : "transparent",
                  color: isActive ? "var(--bone)" : "var(--ink)",
                  whiteSpace: "nowrap", flexShrink: 0,
                  borderRadius: 99,
                  transition: "all .25s ease",
                  display: "inline-flex", alignItems: "center", gap: 8,
                }}
              >
                {c}
                <span className="mono" style={{
                  fontSize: 9, opacity: isActive ? 0.7 : 0.5, fontVariantNumeric: "tabular-nums",
                }}>{count}</span>
              </button>
            );
          })}
        </div>
      </div>

      {/* Active category blurb */}
      {activeBlurb && cat !== "All" && (
        <div className="container" style={{ paddingTop: 22, paddingBottom: 4 }}>
          <p className="body-sm" style={{ fontSize: 13, color: "var(--mute)", fontStyle: "italic" }}>{activeBlurb}</p>
        </div>
      )}

      {/* Questions */}
      <div className="container" style={{ paddingTop: 22 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--mute)", marginBottom: 12 }}>
          {filtered.length} {filtered.length === 1 ? "question" : "questions"}
          {cat !== "All" && ` · ${cat}`}
        </div>
        {filtered.length === 0 ? (
          <div style={{ padding: "40px 0", textAlign: "center" }}>
            <div className="serif" style={{ fontSize: 26, marginBottom: 8, letterSpacing: "-0.01em" }}>No matches.</div>
            <p className="body-sm">Try a different keyword, or message Michael directly.</p>
          </div>
        ) : (
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {filtered.map((it, i) => (
              <FaqRow key={`${it.cat}-${i}-${it.q}`} item={it} query={query} />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

function FaqRow({ item, query }) {
  const [open, setOpen] = fqS(false);
  const id = `faq-${item.cat}-${item.q}`.replace(/[^\w]/g, "-");
  return (
    <div style={{ borderBottom: "1px solid var(--line)" }}>
      <button
        id={id}
        onClick={() => setOpen(o => !o)}
        style={{
          width: "100%", padding: "18px 0", textAlign: "left",
          display: "flex", alignItems: "flex-start", gap: 12,
        }}
      >
        <span style={{ flex: 1 }}>
          <span className="mono" style={{
            display: "inline-block", fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--maroon)", marginBottom: 6,
          }}>
            {item.cat}
          </span>
          <span className="serif" style={{
            display: "block",
            fontSize: 18, lineHeight: 1.25, letterSpacing: "-0.01em", color: "var(--ink)",
            marginBottom: 6,
          }}>
            <Highlight text={item.q} q={query} />
          </span>
          {item.tldr && (
            <span style={{
              display: "block",
              fontSize: 13, lineHeight: 1.45, color: "var(--mute)", fontStyle: "italic",
            }}>
              <Highlight text={item.tldr} q={query} />
            </span>
          )}
        </span>
        <span style={{
          flexShrink: 0, marginTop: 26,
          width: 14, height: 14, position: "relative",
          transition: "transform .3s",
          transform: open ? "rotate(45deg)" : "rotate(0deg)",
        }} aria-hidden="true">
          <span style={{ position: "absolute", top: "50%", left: 0, right: 0, height: 1.2, background: "var(--ink)", transform: "translateY(-0.6px)" }}/>
          <span style={{ position: "absolute", left: "50%", top: 0, bottom: 0, width: 1.2, background: "var(--ink)", transform: "translateX(-0.6px)" }}/>
        </span>
      </button>
      <div style={{
        display: "grid",
        gridTemplateRows: open ? "1fr" : "0fr",
        transition: "grid-template-rows .35s cubic-bezier(.2,.7,.2,1)",
      }}>
        <div style={{ overflow: "hidden" }}>
          <p className="body" style={{ fontSize: 14, paddingBottom: 20, paddingRight: 22 }}>
            <Highlight text={item.a} q={query} />
          </p>
        </div>
      </div>
    </div>
  );
}

function Highlight({ text, q }) {
  const needle = (q || "").trim();
  if (!needle) return text;
  const re = new RegExp(`(${needle.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")})`, "ig");
  const parts = text.split(re);
  return parts.map((p, i) =>
    p.toLowerCase() === needle.toLowerCase()
      ? <mark key={i} style={{ background: "var(--bronze)", color: "var(--ink)", padding: "0 2px" }}>{p}</mark>
      : <React.Fragment key={i}>{p}</React.Fragment>
  );
}

// ─────────────────────────────────────────────
// CLOSER
// ─────────────────────────────────────────────
function FaqCloser({ onInquire }) {
  return (
    <section style={{ padding: "60px 0", background: "var(--cream)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <Reveal>
          <LineEyebrow style={{ marginBottom: 14 }}>Still wondering?</LineEyebrow>
          <h2 className="serif" style={{ fontSize: 32, lineHeight: 1.04, letterSpacing: "-0.02em", marginBottom: 14 }}>
            Text Michael directly.
          </h2>
          <p className="body" style={{ marginBottom: 22 }}>
            If your question isn't here, send a quick text or call. Real answers, usually within a few hours.
          </p>
          <a href="sms:+19088661919" className="btn btn-primary btn-block" style={{ marginBottom: 10 }}>
            Text (908) 866-1919
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M1 7h12m0 0L7 1m6 6L7 13" stroke="currentColor" strokeWidth="1.3"/></svg>
          </a>
          <button onClick={onInquire} className="btn btn-ghost btn-block">
            Or start an inquiry
          </button>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { FaqHero, FaqContent, FaqCloser, FAQ });
