// Social proof suite — replaces the old CaseStudies + Testimonials
// Sections (top → bottom):
//   1. Results strip — aggregate numbers
//   2. Featured operator stories (3 long-form cards w/ before → after)
//   3. More operator wins grid (6 quick cards)
//   4. Screenshot wall (ad dashboard placeholders)
//   5. Testimonial grid (9 quotes)
//   6. Review bar (5-star + source logos)

const { useState: useProofS, useEffect: useProofE, useRef: useProofR } = React;

// ---- local useInView (duplicate-safe with unique name) ----
const useProofInView = (opts = { threshold: 0.12 }) => {
  const ref = useProofR(null);
  const [seen, setSeen] = useProofS(false);
  useProofE(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, seen];
};

// ==================== 1. RESULTS STRIP ====================
const ResultsStrip = () => (
  <section style={{
    borderTop: "1px solid var(--line)",
    borderBottom: "1px solid var(--line)",
    background: "var(--bg)"
  }}>
    <div className="results-strip" style={{
      maxWidth: 1400, margin: "0 auto",
      display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
      borderLeft: "1px solid var(--line)"
    }}>
      {[
        ["$4.2M+", "Booked for partners"],
        ["312", "Qualified jobs sent"],
        ["$34", "Avg. cost per call"],
        ["4.9/5", "Partner rating"],
        ["14", "Active operators"],
      ].map(([n,l]) => (
        <div key={l} style={{
          padding: "32px 24px",
          borderRight: "1px solid var(--line)",
          textAlign: "left"
        }}>
          <div className="mono" style={{
            fontSize: "clamp(26px, 2.6vw, 38px)", lineHeight: 1,
            fontWeight: 500, letterSpacing: "-0.02em", marginBottom: 10
          }}>
            {n}
          </div>
          <div style={{
            fontSize: 12, color: "var(--ink-faint)",
            textTransform: "uppercase", letterSpacing: "0.1em"
          }}>
            {l}
          </div>
        </div>
      ))}
    </div>
  </section>
);

// ==================== 2. FEATURED STORIES ====================
const FeaturedStory = ({ idx, name, loc, title, headline, before, after, metrics, quote, photo, photoSrc, photoTone, accent }) => {
  const [ref, seen] = useProofInView();
  const flip = idx % 2 === 1;
  return (
    <article ref={ref} style={{
      borderTop: "1px solid var(--line)", padding: "80px 0",
      opacity: seen ? 1 : 0, transform: seen ? "translateY(0)" : "translateY(28px)",
      transition: "opacity 0.7s ease, transform 0.7s ease"
    }}>
      <div className="story-grid" style={{
        display: "grid", gridTemplateColumns: flip ? "1fr 1.05fr" : "1.05fr 1fr",
        gap: 56, alignItems: "start"
      }}>
        <div style={{ order: flip ? 2 : 1 }} className="story-copy">
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24 }}>
            <span className="mono" style={{
              fontSize: 11, color: "var(--ink-faint)",
              letterSpacing: "0.14em", textTransform: "uppercase"
            }}>
              Case {String(idx+1).padStart(2,"0")} / {name.toUpperCase()}
            </span>
            <span style={{ flex: 1, height: 1, background: "var(--line)" }}/>
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-faint)",
              letterSpacing: "0.08em" }}>
              {loc}
            </span>
          </div>

          <div className="mono" style={{
            fontSize: 12, color: "var(--flame)", letterSpacing: "0.14em",
            textTransform: "uppercase", marginBottom: 14
          }}>
            {title}
          </div>

          <h3 style={{
            fontSize: "clamp(28px, 3.2vw, 42px)", lineHeight: 1.02,
            letterSpacing: "-0.02em", fontWeight: 500, marginBottom: 28,
            maxWidth: "20ch"
          }}>
            {headline}
          </h3>

          <div className="ba-grid" style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1,
            background: "var(--line)", border: "1px solid var(--line)", marginBottom: 28
          }}>
            <div style={{ background: "var(--bg)", padding: "18px 20px" }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-faint)",
                letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8 }}>
                ▸ Before
              </div>
              <div style={{ fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.5 }}>
                {before}
              </div>
            </div>
            <div style={{ background: "var(--bg)", padding: "18px 20px",
              borderLeft: "2px solid var(--flame)" }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--flame)",
                letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8 }}>
                ▸ After Firebrand
              </div>
              <div style={{ fontSize: 14, color: "var(--ink)", lineHeight: 1.5 }}>
                {after}
              </div>
            </div>
          </div>

          <div style={{
            paddingTop: 24, borderTop: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20
          }} className="story-metrics">
            {metrics.map(m => (
              <div key={m.l}>
                <div className="mono" style={{
                  fontSize: "clamp(20px, 1.8vw, 26px)", fontWeight: 500,
                  color: "var(--ink)", lineHeight: 1, letterSpacing: "-0.02em",
                  marginBottom: 6
                }}>{m.n}</div>
                <div style={{
                  fontSize: 10, color: "var(--ink-faint)",
                  textTransform: "uppercase", letterSpacing: "0.1em", lineHeight: 1.3
                }}>{m.l}</div>
              </div>
            ))}
          </div>

          <blockquote style={{
            marginTop: 28, paddingLeft: 20,
            borderLeft: `2px solid var(--flame)`,
            fontSize: 16, lineHeight: 1.5,
            color: "var(--ink)", fontStyle: "italic"
          }}>
            "{quote}"
            <div style={{
              marginTop: 10, fontStyle: "normal",
              fontSize: 11, color: "var(--ink-faint)",
              letterSpacing: "0.08em", textTransform: "uppercase",
              fontFamily: "'IBM Plex Mono', monospace"
            }}>
              — {name}, {loc}
            </div>
          </blockquote>
        </div>

        <div style={{ order: flip ? 1 : 2, position: "relative" }} className="story-photo">
          {photoSrc ? (
            <div style={{ aspectRatio: "1 / 1", width: "100%", overflow: "hidden", background: "#000" }}>
              <img src={photoSrc} alt={photo} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }}/>
            </div>
          ) : (
            <PhotoPlaceholder label={photo} tone={photoTone} scene="machinery" ratio="4/5"/>
          )}
          <div style={{
            position: "absolute", bottom: -1, left: -1,
            background: "var(--flame)", color: "#000",
            padding: "12px 16px",
            fontFamily: "'IBM Plex Mono', monospace",
            fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
            fontWeight: 500
          }}>
            {accent}
          </div>
        </div>
      </div>
    </article>
  );
};

const FeaturedStories = () => (
  <section id="work" style={{ padding: "140px 32px 0", maxWidth: 1400, margin: "0 auto" }}>
    <div style={{
      display: "flex", justifyContent: "space-between",
      alignItems: "flex-end", marginBottom: 60, gap: 40, flexWrap: "wrap"
    }}>
      <div>
        <div className="mono" style={{
          display: "flex", alignItems: "center", gap: 14,
          fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--flame)", marginBottom: 40
        }}>
          <span style={{ color: "var(--ink-faint)" }}>03</span>
          <span style={{ width: 24, height: 1, background: "var(--flame)" }}/>
          Top performing campaigns
        </div>
        <h2 style={{
          fontSize: "clamp(40px, 5.5vw, 80px)", lineHeight: 0.95,
          letterSpacing: "-0.03em", fontWeight: 500, maxWidth: "16ch"
        }}>
          Real operators.<br/>
          <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--ink-dim)" }}>
            Receipts on the table.
          </span>
        </h2>
      </div>
      <p style={{ fontSize: 16, color: "var(--ink-dim)", maxWidth: 380 }}>
        Our top performing clients — the exact spend, leads, and revenue their Firebrand systems generated.
      </p>
    </div>

    {[
      {
        name: "Christopher",
        loc: "Lancaster, PA",
        title: "Scaled $0 → $40K · First 30 days",
        headline: "From word-of-mouth to a $40K month on $988 of ad spend.",
        before: "Relying on word-of-mouth and referrals. Burned by two other agencies. $6–8K months were a good month.",
        after: "42 qualified estimates, $40,100 booked, crew scheduled 6 weeks out. Now running Firebrand for 14 months straight.",
        metrics: [
          { n: "$40,100", l: "Booked / 30 days" },
          { n: "42", l: "Qualified estimates" },
          { n: "31%", l: "Close rate" },
          { n: "$14.3K", l: "Avg. ticket" },
        ],
        quote: "I'd tried three other marketing companies. Nothing worked — until these guys. First two weeks I had $21K closed.",
        photo: "Christopher — Lancaster, PA",
        photoSrc: "photos/case-christopher.png",
        photoTone: "ember",
        accent: "+40× ROAS"
      },
      {
        name: "Rigoberto",
        loc: "Tulsa, OK",
        title: "Ceiling broken · First 60 days",
        headline: "Broke the $10K/mo ceiling in under 60 days.",
        before: "Stuck on Angi's List. Couldn't crack $10K/mo. One crew, running solo most days.",
        after: "+$29,000 in extra booked revenue. Two active crews. Left Angi's List entirely.",
        metrics: [
          { n: "+$29,000", l: "Added / 60 days" },
          { n: "38", l: "Estimates booked" },
          { n: "29%", l: "Close rate" },
          { n: "2×", l: "Crews now" },
        ],
        quote: "First time in my life the phone rang more than my cousins calling. Real jobs, real money.",
        photo: "Rigoberto — Tulsa, OK",
        photoSrc: "photos/case-rigoberto.png",
        photoTone: "warm",
        accent: "+$29K / 60d"
      },
      {
        name: "Marshal",
        loc: "Upstate SC",
        title: "Max capacity · Month 1",
        headline: "Booked out a month and a half — paused ads to catch up.",
        before: "A couple phone calls a week. Surviving on word-of-mouth. Crew idle half the week.",
        after: "45+ day backlog. $22,750 booked in month one. Had to pause ads — crew maxed.",
        metrics: [
          { n: "$22,750", l: "Booked / month 1" },
          { n: "42", l: "Qualified leads" },
          { n: "34%", l: "Close rate" },
          { n: "$988", l: "Ad spend" },
        ],
        quote: "I literally had to ask them to turn the ads off. Good problem to have.",
        photo: "Marshal — Upstate SC",
        photoSrc: "photos/case-marshal.png",
        photoTone: "green",
        accent: "Ads paused — max capacity"
      },
    ].map((s, i) => <FeaturedStory key={s.name} idx={i} {...s} />)}
    <div style={{ borderTop: "1px solid var(--line)" }}/>
  </section>
);

// ==================== 3. MORE OPERATOR WINS ====================
const MoreWins = () => {
  const wins = [
    { name: "Neomi & Roberto", loc: "San Antonio, TX", headline: "67 leads, $14,800 closed in month 1 — plus a $10K job on deck.", spend: "$980", roas: "15×", photo: "photos/more-win-01.jpg" },
    { name: "Derek", loc: "Ocala, FL", headline: "From 3 calls a week to a 30-day backlog.", spend: "$1,420", roas: "11×", photo: "photos/more-win-02.jpg" },
    { name: "Terrance", loc: "Augusta, GA", headline: "Closed his largest contract ever — $89,000 — off a Meta lead.", spend: "$2,200", roas: "22×", photo: "photos/more-win-03.jpg" },
    { name: "Whitney Land Co.", loc: "Wilmington, NC", headline: "Filled the off-season. 42 jobs booked in Q1.", spend: "$4,800", roas: "9×", photo: "photos/more-win-04.webp" },
    { name: "Jackson", loc: "Little Rock, AR", headline: "First $50K month after 6 years in business.", spend: "$3,600", roas: "14×", photo: "photos/more-win-05.webp" },
    { name: "BlackDirt Clearing", loc: "Shreveport, LA", headline: "Scaled from 1 skid steer to 3 in under 8 months.", spend: "$5,200", roas: "10×", photo: "photos/more-win-06.webp" },
  ];
  return (
    <section style={{ padding: "120px 32px", background: "var(--bg-2)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div className="mono" style={{
          display: "flex", alignItems: "center", gap: 14,
          fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--flame)", marginBottom: 28
        }}>
          <span style={{ color: "var(--ink-faint)" }}>04</span>
          <span style={{ width: 24, height: 1, background: "var(--flame)" }}/>
          More wins
        </div>
        <h2 style={{
          fontSize: "clamp(36px, 4.5vw, 60px)", lineHeight: 1,
          letterSpacing: "-0.03em", fontWeight: 500, marginBottom: 60, maxWidth: "18ch"
        }}>
          Results from every corner of the South.
        </h2>

        <div className="wins-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1,
          background: "var(--line)"
        }}>
          {wins.map((w, i) => (
            <div key={w.name} style={{
              background: "var(--bg-2)", padding: 28,
              display: "grid", gridTemplateRows: "auto 1fr auto", gap: 20,
              minHeight: 360
            }}>
              <div style={{
                position: "relative", aspectRatio: "16 / 9",
                overflow: "hidden", background: "#000"
              }}>
                <img
                  src={w.photo}
                  alt={`${w.name} land clearing project`}
                  loading="lazy"
                  style={{
                    width: "100%", height: "100%", objectFit: "cover",
                    objectPosition: "center", display: "block"
                  }}
                />
              </div>
              <div>
                <div className="mono" style={{
                  fontSize: 11, color: "var(--ink-faint)", letterSpacing: "0.1em",
                  textTransform: "uppercase", marginBottom: 10,
                  display: "flex", justifyContent: "space-between"
                }}>
                  <span>{w.name}</span>
                  <span>{w.loc}</span>
                </div>
                <div style={{
                  fontSize: 18, lineHeight: 1.3, letterSpacing: "-0.01em",
                  color: "var(--ink)"
                }}>
                  {w.headline}
                </div>
              </div>
              <div style={{
                paddingTop: 14, borderTop: "1px solid var(--line)",
                display: "flex", justifyContent: "space-between"
              }}>
                <div>
                  <div className="mono" style={{ fontSize: 18, fontWeight: 500 }}>{w.spend}</div>
                  <div style={{ fontSize: 10, color: "var(--ink-faint)",
                    letterSpacing: "0.08em", textTransform: "uppercase" }}>Spend / mo</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="mono" style={{ fontSize: 18, fontWeight: 500, color: "var(--flame)" }}>{w.roas}</div>
                  <div style={{ fontSize: 10, color: "var(--ink-faint)",
                    letterSpacing: "0.08em", textTransform: "uppercase" }}>Return</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ==================== 4. SCREENSHOT WALL ====================
// Stylized ad-dashboard-style placeholders — no real data / no copyrighted UI
const DashShot = ({ label, bars, accent }) => (
  <div style={{
    background: "#0a0a0a", border: "1px solid var(--line)",
    padding: 18, aspectRatio: "4/3", display: "flex", flexDirection: "column", gap: 10
  }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-faint)",
        letterSpacing: "0.1em", textTransform: "uppercase" }}>
        {label}
      </div>
      <div style={{ display: "flex", gap: 4 }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--flame)" }}/>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--line)" }}/>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--line)" }}/>
      </div>
    </div>
    <div className="mono" style={{ fontSize: 24, fontWeight: 500, letterSpacing: "-0.02em", color: accent || "var(--ink)" }}>
      {bars.total}
    </div>
    <div style={{ flex: 1, display: "flex", alignItems: "flex-end", gap: 3 }}>
      {bars.heights.map((h, i) => (
        <div key={i} style={{
          flex: 1,
          height: `${h}%`,
          background: i === bars.heights.length - 1 ? "var(--flame)" : "var(--line)"
        }}/>
      ))}
    </div>
    <div style={{ display: "flex", justifyContent: "space-between",
      fontFamily: "'IBM Plex Mono', monospace", fontSize: 9, color: "var(--ink-faint)",
      letterSpacing: "0.06em" }}>
      <span>{bars.xStart}</span>
      <span style={{ color: "var(--flame)" }}>▲ {bars.delta}</span>
      <span>{bars.xEnd}</span>
    </div>
  </div>
);

const ScreenshotWall = () => (
  <section style={{ padding: "120px 32px" }}>
    <div style={{ maxWidth: 1400, margin: "0 auto" }}>
      <div className="mono" style={{
        display: "flex", alignItems: "center", gap: 14,
        fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
        color: "var(--flame)", marginBottom: 24
      }}>
        <span style={{ color: "var(--ink-faint)" }}>05</span>
        <span style={{ width: 24, height: 1, background: "var(--flame)" }}/>
        Inside the ad accounts
      </div>
      <h2 style={{
        fontSize: "clamp(36px, 4.5vw, 60px)", lineHeight: 1,
        letterSpacing: "-0.03em", fontWeight: 500, marginBottom: 14, maxWidth: "20ch"
      }}>
        The numbers don't lie.
      </h2>
      <p style={{ fontSize: 16, color: "var(--ink-dim)", maxWidth: 540, marginBottom: 56 }}>
        Month-over-month performance snapshots from live operator ad accounts. Campaign names and identifiable details redacted.
      </p>

      <div className="shot-grid" style={{
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16
      }}>
        <DashShot label="Leads / 30d" bars={{
          total: "178", heights: [20, 28, 35, 45, 52, 60, 78, 88],
          xStart: "Week 1", xEnd: "Week 8", delta: "+340%"
        }}/>
        <DashShot label="Cost per lead" bars={{
          total: "$27", heights: [90, 82, 70, 62, 54, 48, 38, 30],
          xStart: "Week 1", xEnd: "Week 8", delta: "−67%"
        }} accent="var(--flame)"/>
        <DashShot label="Booked calls" bars={{
          total: "61", heights: [15, 22, 30, 38, 44, 52, 68, 82],
          xStart: "Week 1", xEnd: "Week 8", delta: "+446%"
        }}/>
        <DashShot label="Closed revenue" bars={{
          total: "$127K", heights: [10, 18, 28, 40, 55, 66, 80, 94],
          xStart: "Week 1", xEnd: "Week 8", delta: "+8.4×"
        }} accent="var(--flame)"/>
      </div>

      <div className="mono" style={{
        marginTop: 20, fontSize: 10, color: "var(--ink-faint)",
        letterSpacing: "0.08em", textTransform: "uppercase", textAlign: "center"
      }}>
        ▲ Aggregate of 14 active operator accounts · Jan–Mar 2026 · Meta Ads Manager
      </div>
    </div>
  </section>
);

// ==================== 5. TESTIMONIAL WALL ====================
const Stars = () => (
  <div style={{ display: "flex", gap: 2, marginBottom: 14 }}>
    {[0,1,2,3,4].map(i => (
      <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="var(--flame)">
        <path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17.6 5.7 21.2l1.7-7L2 9.5l7.1-.6z"/>
      </svg>
    ))}
  </div>
);

const TestimonialWall = () => {
  const quotes = [
    { q: "Within three weeks the phone was ringing so much we had to pause ads to catch up.", a: "Marcus Hollis", r: "Ironwood Land Co. · Tyler, TX" },
    { q: "Firebrand is the only agency that actually understood what a qualified land clearing lead looks like.", a: "DeShawn Rivers", r: "Palmetto Ground Works · Charleston, SC" },
    { q: "I was burned by two other marketing companies before these guys. They're different — you pay when it works.", a: "Tucker Reid", r: "Deep South Clearing · Valdosta, GA" },
    { q: "Went from $8K months to $32K months in my second quarter. Crew is booked out through fall.", a: "Christopher J.", r: "Lancaster, PA" },
    { q: "The weekly Loom from my account lead is worth the fee alone. I finally understand what I'm paying for.", a: "Terrance B.", r: "Augusta, GA" },
    { q: "Closed my largest contract in six years off a Facebook lead. I didn't think that was real.", a: "Jackson W.", r: "Little Rock, AR" },
    { q: "Every other agency wanted a 12-month lock. Firebrand said 'pay when you're happy.' That sold me.", a: "Whitney Grant", r: "Whitney Land Co. · NC" },
    { q: "I run two crews now. A year ago I was wondering if I could make payroll.", a: "Rigoberto M.", r: "Tulsa, OK" },
    { q: "Best money I spend every month, hands down. I tell every operator I know.", a: "Derek S.", r: "Ocala, FL" },
  ];

  return (
    <section style={{ padding: "120px 32px", background: "var(--bg-2)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div className="mono" style={{
          display: "flex", alignItems: "center", gap: 14,
          fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--flame)", marginBottom: 28
        }}>
          <span style={{ color: "var(--ink-faint)" }}>06</span>
          <span style={{ width: 24, height: 1, background: "var(--flame)" }}/>
          Hear it from them
        </div>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          marginBottom: 60, gap: 32, flexWrap: "wrap"
        }}>
          <h2 style={{
            fontSize: "clamp(36px, 4.5vw, 60px)", lineHeight: 1,
            letterSpacing: "-0.03em", fontWeight: 500, maxWidth: "18ch"
          }}>
            Nine operators. One common theme.
          </h2>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <Stars/>
            <div style={{ fontSize: 14 }}>
              <strong>4.9 / 5</strong>
              <span style={{ color: "var(--ink-dim)" }}> · 47 verified reviews</span>
            </div>
          </div>
        </div>

        <div className="testwall-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1,
          background: "var(--line)"
        }}>
          {quotes.map((t, i) => (
            <figure key={i} style={{
              background: "var(--bg-2)", padding: 28,
              display: "flex", flexDirection: "column", gap: 14,
              minHeight: 260
            }}>
              <Stars/>
              <blockquote style={{
                flex: 1, fontSize: 16, lineHeight: 1.5,
                letterSpacing: "-0.005em", color: "var(--ink)"
              }}>
                "{t.q}"
              </blockquote>
              <figcaption style={{
                paddingTop: 14, borderTop: "1px solid var(--line)"
              }}>
                <div style={{ fontSize: 14, marginBottom: 3 }}>{t.a}</div>
                <div className="mono" style={{
                  fontSize: 10, color: "var(--ink-faint)",
                  letterSpacing: "0.08em", textTransform: "uppercase"
                }}>
                  {t.r}
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
};

// ==================== 6. REVIEW BAR ====================
const ReviewBar = () => (
  <section style={{ padding: "80px 32px", borderTop: "1px solid var(--line)" }}>
    <div style={{ maxWidth: 1400, margin: "0 auto",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      gap: 32, flexWrap: "wrap"
    }} className="reviewbar">
      <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
        <div style={{ display: "flex", gap: 2 }}>
          {[0,1,2,3,4].map(i => (
            <svg key={i} width="24" height="24" viewBox="0 0 24 24" fill="var(--flame)">
              <path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17.6 5.7 21.2l1.7-7L2 9.5l7.1-.6z"/>
            </svg>
          ))}
        </div>
        <div>
          <div style={{ fontSize: 24, letterSpacing: "-0.01em", fontWeight: 500 }}>
            4.9 out of 5
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)",
            letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }}>
            47 verified operator reviews
          </div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 32, alignItems: "center", flexWrap: "wrap" }}>
        {["Trustpilot ✓", "Google Biz ✓", "Facebook ✓", "BBB A+"].map(l => (
          <div key={l} className="mono" style={{
            fontSize: 12, color: "var(--ink-dim)", letterSpacing: "0.12em",
            textTransform: "uppercase",
            padding: "8px 14px", border: "1px solid var(--line)"
          }}>
            {l}
          </div>
        ))}
      </div>
      <a href="#contact" className="btn-primary">
        Become the next story <span>→</span>
      </a>
    </div>
  </section>
);

// ==================== WRAPPER ====================
const SocialProof = () => (
  <>
    <ResultsStrip />
    <FeaturedStories />
    <MoreWins />
    <ScreenshotWall />
    <TestimonialWall />
    <ReviewBar />
  </>
);

Object.assign(window, { SocialProof });