// FAQ — "The Index" v2 // Real questions scraped from mtsurfaceprotectors.com/faq, in original order. // Layout: sticky chapter rail + searchable index column on the left, // a "stage" reading panel on the right that holds the active answer. // On mobile the panel collapses inline like a classic accordion. const { useState: useFS, useEffect: useFE, useRef: useFR, useMemo: useFM, useLayoutEffect: useFL } = React; const FT = window.__TWEAKS__ || {}; // ============================================================ // CHAPTER PALETTE — every chapter gets its own personality // All accents share warm, refined tones that live in the existing palette // ============================================================ const CHAPTER_THEME = { "What It Is": { accent: "#6B1416", tint: "#F4E8E5", deep: "#4A0E10", label: "Maroon" }, "Looks & Finish": { accent: "#8B5A2B", tint: "#F2E8D8", deep: "#5C3C1D", label: "Bronze" }, "How It Performs": { accent: "#3B5A4A", tint: "#E2EBE3", deep: "#283D33", label: "Forest" }, "Living With It": { accent: "#3F4F6B", tint: "#DFE6EE", deep: "#2A3548", label: "Indigo" }, "The Install": { accent: "#9B4A2E", tint: "#F0E0D6", deep: "#6B331F", label: "Terracotta" }, "Our Promise": { accent: "#5A3550", tint: "#EBE0E7", deep: "#3D2436", label: "Plum" }, }; const themeFor = (cat) => CHAPTER_THEME[cat] || CHAPTER_THEME["What It Is"]; // ============================================================ // DATA — every question from the live FAQ page, exact wording for titles. // Answers are sourced from the M&T blog "Everything You Need to Know // About StoneGuard" + StoneGuard certified-installer materials, written // in M&T's voice. Chapters added by us so the rail has structure. // ============================================================ const FAQ_DATA = [ { 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, which is why our work and our pace look different from a general contractor.", 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 want to 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 that can wash out in daylight. We confirm the right product based on your slab's finish 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. Despite surface similarities, they aren't interchangeable, and PPF on stone tends to behave unpredictably over time.", 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. That's the only honest comparison.", 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. Wipe edge spills promptly, and avoid harsh industrial acids on the film, but for everyday kitchen life you can stop policing the countertop.", 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. Treat your stone like the natural material it is.", 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. Following the maintenance instructions minimizes wear, and when the film eventually shows its age it can be replaced without affecting the slab. A worn StoneGuard means it did its job.", 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. If you ever see lifting, call us; we stand behind the work.", 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. StoneGuard's Performance Guarantee is structured around long service life, and 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 or surfactant — we'll send you home with everything you need. 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. When in doubt, warm water and a microfiber wipes most things up.", 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. This is the same advice every stone fabricator gives for unprotected stone, too.", 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. For warm cookware off the stovetop, the film is fine.", 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. If you ever see something that looks like permanent discoloration, send us a photo.", 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, and we're trained to handle the stone prep, templating, application, and finish work in a single visit.", 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 and decide together whether removal makes sense — but it's the exception, not the rule.", 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. After that, go back to your normal kitchen life.", 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. We give you a firm time estimate before we start, not at the door.", 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 — that's a deliberate part of how we work.", 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. If you have specific concerns about a piece of art or stone you want extra protected, tell us beforehand.", 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. We hold a small number of priority slots for time-sensitive projects.", 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 — happy to discuss what works for your project.", 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, faster if a slot opens up.", 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. Edge-wicking from exposed edges is also not covered, which is why we ask you to wipe edge spills promptly. Refer to the warranty card we leave with you for full scope and the claim process, and call us anytime if something looks off.", 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 (resist etching and staining) over its service life. Together they cover the things we and StoneGuard control.", 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 (a guest dragged a cast iron skillet, an unusual chemical exposure), we'll still help you understand the options and quote a fair refresh. We're a small team and we stand behind every install we've done.", 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 — we like staying in touch.", tldr: "30-day check-in built in. Available afterward anytime." }, ] }, ]; // Flatten with global indices for stable keys + search const ALL_ITEMS = FAQ_DATA.flatMap((sec, sIdx) => sec.items.map((it, iIdx) => ({ ...it, cat: sec.cat, sIdx, iIdx, key: `${sIdx}-${iIdx}`, num: 0 })) ); // Assign sequential numbers across all questions (for the rail counter) ALL_ITEMS.forEach((it, i) => { it.num = i + 1; }); const TOTAL_Q = ALL_ITEMS.length; const CATS = FAQ_DATA.map(s => s.cat); // ============================================================ // HERO // ============================================================ function FaqHero() { return (
{/* Drifting marble vein layer */}
M&T · Frequently asked


{/* meta line */}
50+ Questions {CATS.length} Chapters Reviewed April 2026
{/* The actually-useful kicker — what people most want to know */}
What most people ask first
); } // One "most-asked" shortcut card. Click jumps to that question in the index. function Shortcut({ num, kicker, question, tldr, jumpKey, jumpCat, accent }) { const [hover, setHover] = useFS(false); const onClick = () => { window.dispatchEvent(new CustomEvent("faq:jump", { detail: { key: jumpKey, cat: jumpCat } })); }; return ( ); } function StatTile({ kicker, value, suffix, accent, live }) { return (
{live && } {kicker}
{value} {suffix && ( {suffix} )}
); } // ============================================================ // THE INDEX — three-column on desktop: // [chapter rail] [question list] [stage / answer panel] // On narrower screens, becomes a single-column inline accordion. // ============================================================ function FaqIndex() { const [activeKey, setActiveKey] = useFS(FT.openByDefault === "first" ? "0-0" : null); const [activeCat, setActiveCat] = useFS(CATS[0]); const [query, setQuery] = useFS(""); const [isMobile, setIsMobile] = useFS(false); useFE(() => { const check = () => setIsMobile(window.matchMedia("(max-width: 1080px)").matches); check(); window.addEventListener("resize", check); return () => window.removeEventListener("resize", check); }, []); // Listen for shortcut clicks from the hero — open the question and scroll into view. useFE(() => { const onJump = (e) => { const { key, cat } = e.detail || {}; if (cat) setActiveCat(cat); if (key) setActiveKey(key); setQuery(""); const el = document.getElementById("faq-index"); if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 40; window.scrollTo({ top, behavior: "smooth" }); } }; window.addEventListener("faq:jump", onJump); return () => window.removeEventListener("faq:jump", onJump); }, []); const filtered = useFM(() => { const q = query.trim().toLowerCase(); if (!q) return ALL_ITEMS; return ALL_ITEMS.filter(it => (it.q + " " + it.a).toLowerCase().includes(q)); }, [query]); // When searching, ignore chapter filter; otherwise show only active cat const visible = useFM(() => { if (query.trim()) return filtered; return filtered.filter(it => it.cat === activeCat); }, [filtered, activeCat, query]); const activeItem = useFM( () => ALL_ITEMS.find(it => it.key === activeKey) || null, [activeKey] ); return (
{/* COLUMN 1 — chapter rail (framed as a navigation card) */} {/* COLUMN 2 — question list */}
{!query.trim() && (() => { const t = themeFor(activeCat); return (
{String(CATS.indexOf(activeCat) + 1).padStart(2, "0")} · Chapter

{activeCat}

{FAQ_DATA.find(s => s.cat === activeCat)?.blurb}

); })()} {query.trim() && (
Searching · {filtered.length} match{filtered.length === 1 ? "" : "es"}

"{query}"

)} {visible.length === 0 && (
Nothing matches that.

Try a different word — or scroll down and ask us directly.

)}
    {visible.map((it) => ( setActiveKey(activeKey === it.key && isMobile ? null : it.key)} /> ))}
{/* COLUMN 3 — stage / reading panel (desktop only) */} {!isMobile && (
)}
); } // --- One row in the question list --- function FaqQuestion({ item, isActive, isMobile, query, onActivate }) { const [hover, setHover] = useFS(false); // Mobile expand uses the CSS grid-template-rows: 0fr / 1fr trick — no JS // height measurement needed, transitions reliably between collapsed/expanded. const expanded = isMobile && isActive; const numStr = String(item.num).padStart(2, "0"); return (
  • setHover(true)} onMouseLeave={() => setHover(false)} style={{ borderBottom: "1px solid var(--line)", position: "relative", }} > {/* chapter-color scrub line — drawn when active */}
    {/* left ribbon — chapter color flag, slides in when active */}
    {/* Mobile-only inline answer — uses grid-template-rows trick for reliable expand */}

    {query ? : item.a}

    • ); } // --- The right-side stage on desktop. Holds the active answer with // a key-based crossfade so switching questions feels like a page turn. function FaqStage({ item, query }) { const [renderKey, setRenderKey] = useFS(item ? item.key : "empty"); const [content, setContent] = useFS(item); const [phase, setPhase] = useFS("in"); // in | out // Crossfade when item changes useFE(() => { if (!item) { setPhase("out"); const t = setTimeout(() => { setContent(null); setRenderKey("empty"); setPhase("in"); }, 240); return () => clearTimeout(t); } if (item.key === renderKey) return; setPhase("out"); const t = setTimeout(() => { setContent(item); setRenderKey(item.key); setPhase("in"); }, 240); return () => clearTimeout(t); }, [item]); return (
    {/* corner serial */}
    {content ? `${String(content.num).padStart(2, "0")} / ${String(TOTAL_Q).padStart(2, "0")}` : "—"}
    {/* slow-draw corner mark — tonal, not maroon */}
    {!content && (
    Pick a question.

    Click any question on the left and the answer will land here.

    )} {content && ( <>
    {content.cat}

    {query ? : content.q}

    {query ? : content.a}

    The short version
    {content.tldr}
    )}
    ); } // Inline highlight function Highlighted({ text, q }) { const needle = q.trim(); if (!needle) return text; const re = new RegExp(`(${needle.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "ig"); const split = String(text).split(re); return split.map((p, i) => re.test(p) ? ( {p} ) : {p} ); } // ============================================================ // CLOSER — "still got questions?" // ============================================================ function FaqCloser({ onInquire }) { const prompts = ["red wine", "warranty", "honed marble", "the install", "edge details", "your kitchen"]; return (
    Still wondering?

    {" "}

    Send us a photo of your stone, a few details about your kitchen, and the one question that's been bugging you. Most replies come back the same day, and there's no obligation either way.

    Phone · +1 (908) 866-1919
    Service area · NY · NJ · PA
    ); } // ============================================================ // FOOTER // ============================================================ function FaqFooter() { return ( ); } // ============================================================ // APP // ============================================================ function FaqApp() { const [wizardOpen, setWizardOpen] = useFS(false); const onInquire = () => setWizardOpen(true); return ( <>