// components.jsx — shared building blocks for 941 Home Repair Help

// ── Icons (stroke = currentColor, fill = currentColor where needed) ──────────
const Icon = {
  Phone: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  Msg:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>,
  Cam:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>,
  Check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="20 6 9 17 4 12"/></svg>,
  Shield:(p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>,
  Star:  (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>,
  Pin:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  Clock: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
  Bolt:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
  Wrench:(p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2-2 2.6-2.6z"/></svg>,
  Brush: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9 19l-2 2-3-3 2-2"/><path d="M14 7l3 3"/><path d="M3 21l4-1 12-12a2.83 2.83 0 0 0-4-4L3 16z"/></svg>,
  Spray: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="4" y="9" width="10" height="12" rx="2"/><path d="M9 9V5h3V2h-4v3"/><path d="M17 5h2M17 8h3M17 11h2"/></svg>,
  Leaf:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.5c1 4.5.5 8.5-2.5 11.5a7 7 0 0 1-5.7 6z"/><path d="M2 21c0-3 1.85-5.36 5.08-6"/></svg>,
  Key:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="7.5" cy="15.5" r="4.5"/><path d="M11 12l9-9 2 2-2 2 2 2-3 3-2-2-2 2"/></svg>,
  Hammer:(p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M15 12l-8 8a2.83 2.83 0 0 1-4-4l8-8"/><path d="M17.64 15L22 10.64"/><path d="M20.91 11.7l-1.25-1.25c-.83-.83-.83-2.17 0-3l1.13-1.13c.83-.83.83-2.17 0-3l-1.5-1.5c-.83-.83-2.17-.83-3 0L15.16 3c-.83.83-.83 2.17 0 3l1.25 1.25"/></svg>,
  Drop:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>,
  ArrowR:(p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  Drag:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="15 5 21 12 15 19"/><polyline points="9 5 3 12 9 19"/></svg>,
  Plus:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>,
  Sun:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>,
};

// ── Brand Mark (used in header & hero card) ───────────────────────────────────
function BrandMark({ size = 38 }) {
  return (
    <div className="mark" style={{ width: size, height: size, borderRadius: Math.round(size*0.27), fontSize: Math.round(size*0.4) }}>
      941
    </div>
  );
}

// ── Header ────────────────────────────────────────────────────────────────────
function Header({ phone }) {
  const telHref = `tel:${phone.replace(/\D/g, '')}`;
  return (
    <header className="hdr" role="banner">
      <div className="hdr-inner">
        <a href="#top" className="hdr-logo" aria-label="941 Home Repair Help home">
          <BrandMark />
          <span className="name">
            <b>941 Home Repair</b>
            <span>Local · Reliable · Done Right</span>
          </span>
        </a>
        <nav className="hdr-nav" aria-label="Primary">
          <a href="#services">Services</a>
          <a href="#how">How it works</a>
          <a href="#gallery">Before / After</a>
          <a href="#areas">Areas</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a className="hdr-cta" href={telHref}>
          <Icon.Phone /> Call {phone.replace(/^\+?1?[\s-]?/, '')}
        </a>
      </div>
    </header>
  );
}

// ── Trust strip ─────────────────────────────────────────────────────────────
function TrustStrip() {
  const items = [
    { svg: <Icon.Pin />,    label: "Bradenton & Sarasota local" },
    { svg: <Icon.Bolt />,   label: "Same-day response" },
    { svg: <Icon.Shield />, label: "Insured local crews" },
    { svg: <Icon.Check />,  label: "Free quick estimates" },
    { svg: <span className="stars">★★★★★</span>, label: "5★ neighborhood-rated" },
  ];
  return (
    <div className="trust" aria-label="Trust badges">
      <div className="trust-row">
        {items.map((it, i) => (
          <div key={i} className="trust-item">{it.svg}<span>{it.label}</span></div>
        ))}
      </div>
    </div>
  );
}

// ── How it works ─────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: "01", icon: <Icon.Cam />,   title: "Snap a photo",          body: "Take a quick pic of the repair or area. Even a blurry shot helps — context is what we need.",   meta: "Takes 10 seconds" },
    { n: "02", icon: <Icon.Msg />,   title: "Text it to us",         body: "Send it to 941-315-5920 with a sentence on what's going on. A real local human reads it.",     meta: "Reply usually within 30 min" },
    { n: "03", icon: <Icon.Wrench />,title: "Get matched & scheduled", body: "We line you up with a vetted local crew for the job. You get a quote, a name, and a window.", meta: "Most jobs scheduled same week" },
  ];
  return (
    <section id="how" className="sect bone" data-screen-label="How it works">
      <div className="wrap">
        <div className="sect-head">
          <div className="eyebrow">How it works</div>
          <h2>Three texts and you're scheduled.</h2>
          <p>Built for homeowners who want a fix, not a sales pitch. No forms, no phone tag, no quote portals.</p>
        </div>
        <div className="hiw-grid">
          {steps.map((s) => (
            <div key={s.n} className="hiw-step">
              <div className="icon">{s.icon}</div>
              <div className="num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="meta"><Icon.Clock /> {s.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Services grid ────────────────────────────────────────────────────────────
function ServicesGrid() {
  const services = [
    { icon: <Icon.Brush />,  title: "Drywall repair",       blurb: "Holes, cracks, water damage, texture-match." },
    { icon: <Icon.Spray />,  title: "Interior & exterior painting", blurb: "Touch-ups to full repaints, clean lines, no drama." },
    { icon: <Icon.Wrench />, title: "Handyman repairs",     blurb: "The small jobs nobody else will show up for." },
    { icon: <Icon.Drop />,   title: "Pressure washing",     blurb: "Driveways, lanais, soffits, paver patios." },
    { icon: <Icon.Leaf />,   title: "Landscaping cleanup",  blurb: "Trimming, hauling, post-storm yard reset." },
    { icon: <Icon.Key />,    title: "Rental turnovers",     blurb: "Between-tenant punch-outs, fast and tidy." },
    { icon: <Icon.Hammer />, title: "Home maintenance",     blurb: "Quarterly checkups for owners and snowbirds." },
    { icon: <Icon.Bolt />,   title: "Storm & quick fixes",  blurb: "Tarps, board-ups, fence patches after weather." },
  ];
  return (
    <section id="services" className="sect white" data-screen-label="Services">
      <div className="wrap">
        <div className="sect-head">
          <div className="eyebrow">Popular services</div>
          <h2>Most jobs we run in Manatee &amp; Sarasota County.</h2>
          <p>If it's smaller than a remodel and bigger than changing a lightbulb, we probably handle it. Don't see yours? Text the photo anyway.</p>
        </div>
        <div className="svc-grid">
          {services.map((s, i) => (
            <a key={i} className="svc-card" href="#cta">
              <div className="icon">{s.icon}</div>
              <h4>{s.title}</h4>
              <p>{s.blurb}</p>
              <div className="more">Get a quote <Icon.ArrowR /></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Draggable Before/After comparison ────────────────────────────────────────
function CompareSlider({ before, after }) {
  const ref = React.useRef(null);
  const [pos, setPos] = React.useState(50);
  const [touched, setTouched] = React.useState(false);
  const dragging = React.useRef(false);

  const setFromClientX = (clientX) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const p = ((clientX - rect.left) / rect.width) * 100;
    setPos(Math.max(0, Math.min(100, p)));
    if (!touched) setTouched(true);
  };

  React.useEffect(() => {
    const onMove = (e) => {
      if (!dragging.current) return;
      const x = e.touches ? e.touches[0].clientX : e.clientX;
      setFromClientX(x);
    };
    const onUp = () => { dragging.current = false; };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
    window.addEventListener("touchmove", onMove, { passive: false });
    window.addEventListener("touchend", onUp);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("touchend", onUp);
    };
  }, [touched]);

  const onDown = (e) => {
    dragging.current = true;
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    setFromClientX(x);
  };

  return (
    <div
      ref={ref}
      className={"ba-compare" + (touched ? " touched" : "")}
      style={{ "--pos": pos + "%" }}
      onMouseDown={onDown}
      onTouchStart={onDown}
      role="slider"
      aria-label="Before and after comparison"
      aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(pos)}
    >
      <img className="before" src={before} alt="Before" loading="lazy" />
      <div className="after-clip">
        <img className="after" src={after} alt="After" loading="lazy" />
      </div>
      <div className="handle">
        <div className="handle-knob"><Icon.Drag /></div>
      </div>
      <div className="hint"><Icon.Drag /> Drag to compare</div>
    </div>
  );
}

// ── Before/After gallery ─────────────────────────────────────────────────────
function BeforeAfterGallery() {
  const pairs = [
    { label: "Drywall repair & texture-match",  area: "Bradenton",      zip: "34209", crew: "Marco's crew",  date: "Mar '26", duration: "Same day",      before: "assets/ba2-drywall-before.jpg",  after: "assets/ba2-drywall-after.jpg"  },
    { label: "Interior repaint, 1 bedroom",     area: "Sarasota",       zip: "34232", crew: "Diego & Luis",  date: "Feb '26", duration: "1 day",         before: "assets/ba2-interior-before.jpg", after: "assets/ba2-interior-after.jpg" },
    { label: "Soffit repair & exterior paint",  area: "Palmetto",       zip: "34221", crew: "Ray's crew",    date: "Jan '26", duration: "2 days",        before: "assets/ba2-exterior-before.jpg", after: "assets/ba2-exterior-after.jpg" },
    { label: "Driveway pressure wash",          area: "Lakewood Ranch", zip: "34211", crew: "Jamal P.",      date: "Feb '26", duration: "Same day · 3 hr", before: "assets/ba2-pressure-before.jpg", after: "assets/ba2-pressure-after.jpg" },
  ];
  const railRef = React.useRef(null);
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const rail = railRef.current;
    if (!rail) return;
    const onScroll = () => {
      const cards = rail.querySelectorAll(".ba-card");
      const center = rail.scrollLeft + rail.clientWidth / 2;
      let best = 0, bestD = Infinity;
      cards.forEach((c, i) => {
        const mid = c.offsetLeft + c.clientWidth / 2;
        const d = Math.abs(mid - center);
        if (d < bestD) { bestD = d; best = i; }
      });
      setActive(best);
    };
    rail.addEventListener("scroll", onScroll, { passive: true });
    return () => rail.removeEventListener("scroll", onScroll);
  }, []);

  const scrollBy = (dir) => {
    const rail = railRef.current;
    if (!rail) return;
    const card = rail.querySelector(".ba-card");
    if (!card) return;
    rail.scrollBy({ left: dir * (card.clientWidth + 14), behavior: "smooth" });
  };

  return (
    <section id="gallery" className="sect bone" data-screen-label="Before & After">
      <div className="wrap">
        <div className="sect-head sect-head-flex">
          <div>
            <div className="eyebrow">Before / After</div>
            <h2>Drag the slider. See the difference.</h2>
            <p>Recent jobs completed by our local crews across Manatee &amp; Sarasota County. Real homes, real homeowners, no stock photos.</p>
          </div>
          <div className="ba-rail-nav" aria-hidden="true">
            <button className="ba-nav-btn" onClick={() => scrollBy(-1)} aria-label="Previous">
              <Icon.ArrowR style={{ transform: "rotate(180deg)" }} />
            </button>
            <button className="ba-nav-btn" onClick={() => scrollBy(1)} aria-label="Next">
              <Icon.ArrowR />
            </button>
          </div>
        </div>
      </div>
      <div className="wrap">
        <div className="ba-rail" ref={railRef}>
          {pairs.map((p, i) => (
            <article className="ba-card" key={i}>
              <div className="ba-card-top">
                <span className="ba-verified">
                  <span className="vchk"><Icon.Check /></span>
                  Verified local job
                </span>
                <span className="ba-jobno">Job #{String(2410 + i)}</span>
              </div>
              <div className="ba-card-frame">
                <CompareSlider before={p.before} after={p.after} />
              </div>
              <div className="ba-card-body">
                <h4 className="ba-label">{p.label}</h4>
                <div className="ba-meta-row">
                  <span className="ba-meta-cell"><Icon.Pin /> {p.area} · {p.zip}</span>
                  <span className="ba-meta-cell"><Icon.Clock /> {p.duration}</span>
                </div>
                <div className="ba-card-foot">
                  <div className="ba-crew">
                    <div className="ava">{p.crew[0]}</div>
                    <div>
                      <b>{p.crew}</b>
                      <span>Completed {p.date}</span>
                    </div>
                  </div>
                  <a className="ba-cta" href="#cta">Get a quote <Icon.ArrowR /></a>
                </div>
              </div>
            </article>
          ))}
        </div>
        <div className="ba-foot-row">
          <div className="ba-dots">
            {pairs.map((_, i) => <div key={i} className={"dot" + (active === i ? " on" : "")} />)}
          </div>
          <div className="ba-count">{active + 1} <span>/ {pairs.length}</span></div>
        </div>
      </div>
    </section>
  );
}

// ── Service areas ────────────────────────────────────────────────────────────
function ServiceAreas() {
  const areas = [
    { city: "Bradenton",       zips: "34203 · 34205 · 34207 · 34209" },
    { city: "Sarasota",        zips: "34231 · 34232 · 34238 · 34240" },
    { city: "Lakewood Ranch",  zips: "34202 · 34211 · 34212" },
    { city: "Palmetto",        zips: "34221" },
    { city: "Parrish",         zips: "34219" },
    { city: "Manatee County",  zips: "Anywhere we can drive to" },
  ];
  return (
    <section id="areas" className="sect white" data-screen-label="Service Areas">
      <div className="wrap">
        <div className="sect-head">
          <div className="eyebrow">Local Florida service</div>
          <h2>Boots-on-ground from Palmetto to Sarasota.</h2>
          <p>Our crews live here. Same county, same weather, same building codes. That's why response times stay short.</p>
        </div>
        <div className="areas-wrap">
          <div className="areas-list">
            {areas.map((a, i) => (
              <div className="area-chip" key={i}>
                <span className="pin"><Icon.Pin /></span>
                <span className="col">
                  {a.city}
                  <small>{a.zips}</small>
                </span>
              </div>
            ))}
          </div>
          <div className="area-map" aria-hidden="true">
            <div className="badge"><span className="dot"></span> Serving the 941</div>
            <FloridaMap />
          </div>
        </div>
      </div>
    </section>
  );
}

// Stylized SW Florida map (Bradenton/Sarasota region)
function FloridaMap() {
  // simplified coastline path — Tampa Bay area down to Venice
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="seaGlow" cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="#1A2D54" />
          <stop offset="100%" stopColor="#06122A" />
        </radialGradient>
        <pattern id="dotGrid" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.8" fill="rgba(255,255,255,0.06)" />
        </pattern>
      </defs>
      <rect x="0" y="0" width="400" height="300" fill="url(#seaGlow)" />
      <rect x="0" y="0" width="400" height="300" fill="url(#dotGrid)" />

      {/* Gulf side coastline + barrier islands */}
      <path d="M 60 10 Q 110 60 130 110 Q 138 145 132 175 Q 124 215 142 260 Q 160 290 200 295 L 400 295 L 400 10 Z"
            fill="rgba(248,244,236,0.08)" stroke="rgba(248,244,236,0.5)" strokeWidth="1.5" />
      {/* Anna Maria / Longboat key */}
      <path d="M 88 100 Q 96 130 102 165 Q 105 195 110 230" fill="none" stroke="rgba(248,244,236,0.5)" strokeWidth="1.2" />
      <path d="M 96 100 Q 104 132 110 168 Q 113 200 118 235" fill="none" stroke="rgba(248,244,236,0.18)" strokeWidth="1" />

      {/* Service-area pins */}
      {[
        { x: 170, y: 110, name: "Palmetto" },
        { x: 175, y: 145, name: "Bradenton" },
        { x: 245, y: 155, name: "Lakewood Ranch" },
        { x: 215, y: 130, name: "Parrish" },
        { x: 190, y: 210, name: "Sarasota" },
      ].map((p) => (
        <g key={p.name}>
          <circle cx={p.x} cy={p.y} r="14" fill="rgba(242,107,31,0.18)" />
          <circle cx={p.x} cy={p.y} r="6" fill="#F26B1F" stroke="white" strokeWidth="1.5" />
          <text x={p.x + 12} y={p.y + 4} fontFamily="Manrope, sans-serif" fontSize="11" fontWeight="700" fill="rgba(255,255,255,0.92)">{p.name}</text>
        </g>
      ))}

      {/* compass rose */}
      <g transform="translate(355,40)" opacity="0.7">
        <circle r="14" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="1" />
        <path d="M 0 -10 L 3 0 L 0 10 L -3 0 Z" fill="#F26B1F" />
        <text x="0" y="-18" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="8" fontWeight="700" fill="rgba(255,255,255,0.7)">N</text>
      </g>
    </svg>
  );
}

// ── Testimonials (Google-style review cards, locally-grounded) ───────────────
// NOTE FOR OWNER: When real Google reviews come in, replace each `reviews[i]`
// entry below with the verbatim quote, reviewer's name as shown on Google,
// and the platform's own date. Keep the same shape and styling.
function Testimonials({ show }) {
  if (!show) return null;
  const reviews = [
    {
      name: "Mike R.",
      initials: "M",
      color: "#E07B39",
      area: "Bradenton, FL",
      reviews: "3 reviews",
      stars: 5,
      date: "2 weeks ago",
      service: "Drywall repair",
      source: "google",
      body: "Texted photos of a doorknob-sized hole in our drywall and got a response within minutes. Marco's crew came out the same afternoon, patched it, matched the orange-peel texture perfectly, and you genuinely cannot tell where it was. Honest pricing, no upsell. Already booked them for a popcorn ceiling fix.",
    },
    {
      name: "Jennifer L.",
      initials: "J",
      color: "#5B7FDB",
      area: "Sarasota · 34232",
      reviews: "1 review",
      stars: 5,
      date: "3 weeks ago",
      service: "Interior painting",
      source: "google",
      body: "We had our main living room and hallway repainted before listing the house. Diego and Luis showed up exactly when they said they would, taped everything cleanly, and finished in one day. Walls look brand new. So much easier than chasing down five separate handymen on Nextdoor.",
    },
    {
      name: "Carlos M.",
      initials: "C",
      color: "#1F8A5B",
      area: "Lakewood Ranch · 34211",
      reviews: "5 reviews",
      stars: 5,
      date: "1 month ago",
      service: "Handyman repairs",
      source: "google",
      body: "Had a stuck sliding lanai door, a leaking hose bib, and two crooked closet shelves nobody else wanted to drive out for. Texted a few photos and they bundled it all into one visit. Fair quote upfront, finished in under two hours. This is the small-jobs service Bradenton-Sarasota has been missing.",
    },
    {
      name: "Susan B.",
      initials: "S",
      color: "#7A5AE0",
      area: "Palmetto · 34221",
      reviews: "2 reviews",
      stars: 5,
      date: "1 month ago",
      service: "Pressure washing",
      source: "google",
      body: "Our paver driveway and lanai had not been washed in years and looked terrible. Jamal came out, gave a quote on the spot, and three hours later the driveway looked nearly new. He was careful around our landscaping and even hit the front walkway at no extra cost. Absolutely will use again.",
    },
    {
      name: "Pat K.",
      initials: "P",
      color: "#D9534F",
      area: "Parrish · 34219",
      reviews: "4 reviews",
      stars: 5,
      date: "6 weeks ago",
      service: "Soffit & exterior paint",
      source: "google",
      body: "Hurricane left paint peeling and a soffit panel hanging on our garage. Ray's crew matched the existing color, replaced the soffit cleanly, and were done in two days. Texts kept us informed the whole time. Honest, professional, and finally a contractor who shows up when they say they will.",
    },
    {
      name: "Diane W.",
      initials: "D",
      color: "#0B1B3A",
      area: "Bradenton · 34209",
      reviews: "1 review",
      stars: 5,
      date: "2 months ago",
      service: "Rental turnover",
      source: "google",
      body: "We manage three rentals in Manatee County and a turnover usually means juggling four contractors. 941 Home Repair Help handled the patch-and-paint, replaced a damaged baseboard, hauled off two truckloads of yard debris, and pressure-washed the lanai — one text, one quote, four days. New tenant moved in on time.",
    },
  ];

  return (
    <section id="reviews" className="sect bone-2" data-screen-label="Testimonials">
      <div className="wrap">
        <div className="sect-head reviews-head">
          <div>
            <div className="eyebrow">Reviews</div>
            <h2>Trusted by neighbors across the 941.</h2>
            <p>Real homeowners across Bradenton, Sarasota, Lakewood Ranch, Palmetto, and Parrish &mdash; texted photos, got their fix, and came back to say so.</p>
          </div>
          <div className="reviews-summary">
            <div className="rs-rating">4.9</div>
            <div className="rs-stars" aria-label="4.9 of 5 stars">
              {[0,1,2,3,4].map((s) => <Icon.Star key={s} />)}
            </div>
            <div className="rs-meta">
              <GoogleG />
              <span>Based on local Google &amp; Facebook reviews</span>
            </div>
          </div>
        </div>

        <div className="tests-grid">
          {reviews.map((r, i) => (
            <article className="g-review" key={i}>
              <div className="g-review-head">
                <div className="g-avatar" style={{ background: r.color }}>{r.initials}</div>
                <div className="g-meta">
                  <div className="g-name">
                    {r.name}
                    <span className="g-verify" title="Verified homeowner">
                      <Icon.Check />
                    </span>
                  </div>
                  <div className="g-sub">{r.area} · {r.reviews}</div>
                </div>
                <div className="g-source" aria-label="Google review">
                  <GoogleG />
                </div>
              </div>
              <div className="g-stars-row">
                <div className="g-stars" aria-label={`${r.stars} stars`}>
                  {Array.from({length: r.stars}).map((_, s) => <Icon.Star key={s} />)}
                </div>
                <div className="g-date">{r.date}</div>
              </div>
              <div className="g-service-tag">{r.service}</div>
              <p className="g-body">{r.body}</p>
              <div className="g-foot">
                <span className="g-verified-badge">
                  <span className="vchk"><Icon.Check /></span>
                  Verified homeowner
                </span>
                <span className="g-platform">via Google</span>
              </div>
            </article>
          ))}
        </div>

        <div className="reviews-cta">
          <div className="reviews-cta-inner">
            <div>
              <div className="reviews-cta-eyebrow">Your repair is next</div>
              <div className="reviews-cta-title">Need help with a repair? <em>Text us photos now.</em></div>
            </div>
            <div className="reviews-cta-btns">
              <a className="btn btn-primary" href="#cta"><Icon.Msg /> Text Photos Now</a>
              <a className="btn btn-secondary" href="tel:9413155920"><Icon.Phone /> Call 941-315-5920</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function GoogleG() {
  return (
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <path fill="#4285F4" d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.3h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.75h3.57c2.09-1.92 3.22-4.74 3.22-8.09z"/>
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.75c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A10.99 10.99 0 0 0 12 23z"/>
      <path fill="#FBBC05" d="M5.84 14.12A6.6 6.6 0 0 1 5.5 12c0-.74.13-1.46.34-2.12V7.04H2.18A11 11 0 0 0 1 12c0 1.78.43 3.46 1.18 4.96l3.66-2.84z"/>
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.2 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.04l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"/>
    </svg>
  );
}
function FacebookF() {
  return (
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <rect width="24" height="24" rx="5" fill="#1877F2"/>
      <path d="M13.5 22V13h2.9l.4-3.4h-3.3V7.5c0-1 .27-1.7 1.7-1.7h1.8V2.8c-.3 0-1.4-.13-2.7-.13-2.6 0-4.4 1.6-4.4 4.5v2.5H7v3.4h2.9V22h3.6z" fill="#fff"/>
    </svg>
  );
}

Object.assign(window, { GoogleG, FacebookF });

// ── FAQ ──────────────────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    { q: "Can I text photos for a repair estimate?",
      a: "Yes — texting photos is the fastest way to get a real local estimate from 941 Home Repair Help. Send a clear photo (or short video) of the issue to 941-315-5920 with a sentence on what's happening. A local team member reads every message, asks any follow-up questions, and replies with a ballpark range and next steps. No forms, no quote portals, no chatbots." },
    { q: "What areas do you serve in Bradenton and Sarasota?",
      a: "We serve homeowners across Manatee and Sarasota County in Southwest Florida — including Bradenton, Sarasota, Lakewood Ranch, Palmetto, Parrish, Ellenton, Bayshore Gardens, and surrounding 941 zip codes. If you're nearby and unsure, send a photo and your zip — we'll tell you quickly." },
    { q: "Do you handle small jobs?",
      a: "Yes — small jobs are our specialty. One-hour drywall patches, a single sticky door, a leaking hose bib, a popped baseboard, a shutter that won't latch. These are the jobs other contractors won't drive out for, and they're exactly what we line up for local homeowners." },
    { q: "Are your crews licensed and insured?",
      a: "Yes. Every crew we connect homeowners with carries general liability insurance. For licensed trades — plumbing, electrical, HVAC, roofing — we match you with appropriately licensed Florida contractors. We'll share license and insurance details on request before any work begins." },
    { q: "How fast can someone respond?",
      a: "Most texts are answered within 30 minutes during business hours (Mon–Sat). Small jobs are typically scheduled the same week, often next-day. Storm patches, leak stops, board-ups, and rental turnover emergencies get prioritized for same-day response when possible." },
    { q: "What types of repairs do you help with?",
      a: "Drywall repair and texture-matching, interior and exterior painting, handyman repairs, pressure washing, landscaping cleanup, rental turnovers, small home maintenance, light plumbing fixes, roof patches, fence repairs, soffit and fascia work, screen and lanai repairs. If it's smaller than a remodel and bigger than a lightbulb, we probably handle it." },
    { q: "Do you help landlords and rental turnovers?",
      a: "Absolutely. Rental turnovers between tenants are a core service — drywall patching, full interior repaint, hardware swaps, pressure wash, lanai screen repair, yard cleanup, and trash haul-off, all bundled into one quick scope. We work with Bradenton, Sarasota, and Lakewood Ranch property managers and individual landlords." },
    { q: "Do you serve Lakewood Ranch and Sarasota?",
      a: "Yes — Lakewood Ranch and Sarasota are two of our most active service areas. Crews regularly run jobs in 34202, 34211, 34212 (Lakewood Ranch) and 34231, 34232, 34238, 34240 (Sarasota). Same-day reply, often same-week scheduling for small to mid-size jobs." },
    { q: "What repairs usually do not require permits in Florida?",
      a: "In Manatee and Sarasota County, most cosmetic and minor maintenance work is permit-exempt: drywall patching, interior and exterior painting, pressure washing, fence repair under a set length, screen replacement, minor landscaping, replacing fixtures like faucets or light fixtures, and most handyman-scale repairs. Structural changes, roof replacement, electrical panel work, gas lines, and additions do require permits. When permits are needed, we route the job to a licensed contractor who pulls them. (This is general guidance — your local building department has the final word.)" },
    { q: "How are estimates calculated?",
      a: "We start with a quick ballpark from your photo, then confirm a firm written estimate after a brief look. No surprise fees, no door-to-door upsells, no high-pressure sales tactics. You see the price before any work begins." },
  ];
  const [open, setOpen] = React.useState(0);

  // FAQ Schema.org JSON-LD for AEO/GEO visibility
  const schema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": items.map((it) => ({
      "@type": "Question",
      "name": it.q,
      "acceptedAnswer": { "@type": "Answer", "text": it.a },
    })),
  };

  return (
    <section id="faq" className="sect bone" data-screen-label="FAQ">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />
      <div className="wrap" style={{ maxWidth: 880 }}>
        <div className="sect-head">
          <div className="eyebrow">Frequently asked</div>
          <h2>Honest answers, no upsells.</h2>
          <p>The questions Bradenton, Sarasota, and Manatee County homeowners ask before they text us. Tap a question to read the answer.</p>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="plus"><Icon.Plus /></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="faq-foot">
          <span>Still have questions?</span>
          <a href="#cta" className="faq-foot-cta">Text us a photo <Icon.ArrowR /></a>
        </div>
      </div>
    </section>
  );
}

// ── Final CTA ────────────────────────────────────────────────────────────────
function FinalCTA({ phone }) {
  const tel = phone.replace(/\D/g, "");
  const sms = `sms:${tel}?&body=${encodeURIComponent("Hi — sending a photo of a repair, can you help?")}`;
  return (
    <section id="cta" className="final-cta" data-screen-label="Final CTA">
      <div className="wrap">
        <div className="eyebrow on-navy">Stop waiting on quotes</div>
        <h2>Text us the photo. <em>We'll handle the rest.</em></h2>
        <p>One message starts it. A real local human will read it, ask the right questions, and line you up with a crew you can trust.</p>
        <div className="final-cta-ctas">
          <a className="btn btn-primary" href={sms}><Icon.Msg /> Text Photos Now</a>
          <a className="btn btn-ghost-navy" href="#how"><Icon.Check /> Get a Free Estimate</a>
        </div>
        <div className="phone-line">
          <Icon.Phone /> Or call us: <a href={`tel:${tel}`}>{phone}</a>
        </div>
      </div>
    </section>
  );
}

// ── Footer ───────────────────────────────────────────────────────────────────
function Footer({ phone }) {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <div className="row">
              <BrandMark size={36} />
              <div className="name">941 Home Repair Help</div>
            </div>
            <p className="blurb">Connecting homeowners across Bradenton, Sarasota and Manatee County with reliable local crews for small jobs and fast home maintenance.</p>
            <p className="blurb"><b style={{color:"white"}}>Text us:</b> {phone}</p>
          </div>
          <div>
            <h5>Services</h5>
            <ul>
              <li><a href="#services">Drywall repair</a></li>
              <li><a href="#services">Painting</a></li>
              <li><a href="#services">Handyman repairs</a></li>
              <li><a href="#services">Pressure washing</a></li>
              <li><a href="#services">Landscaping cleanup</a></li>
              <li><a href="#services">Rental turnovers</a></li>
            </ul>
          </div>
          <div>
            <h5>Service areas</h5>
            <ul>
              <li>Bradenton, FL</li>
              <li>Sarasota, FL</li>
              <li>Lakewood Ranch, FL</li>
              <li>Palmetto, FL</li>
              <li>Parrish, FL</li>
              <li>Manatee County</li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#gallery">Before / After</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#cta">Get a quote</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© {new Date().getFullYear()} 941 Home Repair Help. Locally owned & operated.</span>
          <span>Bradenton · Sarasota · Lakewood Ranch · Palmetto · Parrish</span>
        </div>
      </div>
    </footer>
  );
}

// ── Sticky mobile CTA ────────────────────────────────────────────────────────
function StickyCTA({ phone, enabled }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    if (!enabled) { setShow(false); return; }
    const onScroll = () => {
      // appear after scrolled past hero (approx 70vh)
      const trigger = window.innerHeight * 0.7;
      setShow(window.scrollY > trigger);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [enabled]);
  if (!enabled) return null;
  const tel = phone.replace(/\D/g, "");
  const sms = `sms:${tel}?&body=${encodeURIComponent("Hi — sending a photo of a repair, can you help?")}`;
  return (
    <div className={"sticky-cta" + (show ? " show" : "")} role="region" aria-label="Quick contact">
      <a className="btn btn-primary" href={sms}><Icon.Msg /> Text Photos</a>
      <a className="btn btn-secondary" href={`tel:${tel}`}><Icon.Phone /> Call</a>
    </div>
  );
}

Object.assign(window, {
  Icon, BrandMark,
  Header, TrustStrip, HowItWorks, ServicesGrid,
  BeforeAfterGallery, ServiceAreas, Testimonials, FAQ,
  FinalCTA, Footer, StickyCTA,
});
