// Testimonial Ads — content sections, part 2:
//   PcROI        real business ROI / +$690 value panel
//   PcFinalCTA   closing CTA band
//   PcFAQ        short Q&A
//   PcGlobal     global coverage
//   PcExplainer  "What is a Testimonial Ad" + About Sayso

const F2 = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
function Ic2Check({ s = 18 }) { return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7" /></svg>; }
function Ic2Globe({ s = 22 }) { return <svg width={s} height={s} viewBox="0 0 24 24" {...F2}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.6 2.5 4 5.7 4 9s-1.4 6.5-4 9c-2.6-2.5-4-5.7-4-9s1.4-6.5 4-9Z" /></svg>; }
function Ic2Plus({ s = 16 }) { return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>; }

const PC2_CSS = `
  .pc-faq { border-top:1px solid var(--line); }
  .pc-faq-item { border-bottom:1px solid var(--line); }
  .pc-faq-q { width:100%; appearance:none; background:none; border:none; cursor:pointer; text-align:left;
    display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 4px;
    font:600 clamp(18px,2vw,22px)/1.3 var(--font-sans); letter-spacing:-0.02em; color:var(--text-primary); }
  .pc-faq-q .ic { flex:none; width:30px; height:30px; border-radius:999px; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:transform .25s cubic-bezier(.2,0,0,1), background .2s, color .2s; }
  .pc-faq-item.open .pc-faq-q .ic { transform:rotate(45deg); background:var(--brand-600); color:#fff; border-color:var(--brand-600); }
  .pc-faq-a { overflow:hidden; max-height:0; transition:max-height .32s cubic-bezier(.2,0,0,1); }
  .pc-faq-item.open .pc-faq-a { max-height:280px; }
  .pc-faq-a p { margin:0; padding:0 4px 28px; font:400 17px/1.55 var(--font-sans); color:var(--text-secondary); max-width:60ch; }

  .pc-geos { display:flex; flex-wrap:wrap; gap:10px; }
  .pc-geo { display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:999px;
    background:#fff; border:1px solid var(--line); font:600 16px/1 var(--font-sans); color:var(--text-primary); }
  .pc-geo .d { width:7px; height:7px; border-radius:999px; background:var(--brand-600); }

  @media (max-width:900px) {
    .pc-roi-grid { grid-template-columns:1fr !important; }
    .pc-cta-meta { flex-direction:column !important; align-items:flex-start !important; gap:14px !important; }
  }

  @media (max-width:767px) {
    /* FAQ \u2014 compact accordion */
    .pc-faq-q { padding:17px 2px; font-size:17px !important; gap:16px; }
    .pc-faq-q .ic { width:26px; height:26px; }
    .pc-faq-a p { padding:0 2px 20px; font-size:15px; line-height:1.5; }
    .pc-faq-item.open .pc-faq-a { max-height:360px; }
    /* Definition / About \u2014 compact stacked cards */
    .pcx-m { display:flex; flex-direction:column; gap:12px; }
    .pcx-card { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card); padding:18px 18px 20px; }
    .pcx-h { font:600 19px/1.25 var(--font-sans); letter-spacing:-0.02em; color:var(--text-primary); margin:12px 0 0; }
    .pcx-p { font:400 14.5px/1.55 var(--font-sans); color:var(--text-secondary); margin:8px 0 0; }
  }

  /* ── Pricing tiers — direct continuation of the sayso.video pricing block ── */
  :root { --pcp-serif: Georgia, 'Times New Roman', serif; }
  .pcp-track { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; margin-top:54px; }
  .pcp-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
    display:flex; flex-direction:column; }
  .pcp-card.feat { border:2px solid var(--brand-600); background:linear-gradient(180deg,#fff 0%, #FFF4F8 100%); }
  .pcp-banner { display:flex; align-items:center; justify-content:center; gap:8px; background:var(--brand-600);
    color:#fff; font:600 15px/1 var(--font-sans); letter-spacing:-0.01em; padding:14px 0; }
  .pcp-body { display:flex; flex-direction:column; padding:28px 26px 24px; flex:1 1 auto; }
  .pcp-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
  .pcp-name { font:700 26px/1 var(--font-sans); letter-spacing:-0.025em; color:var(--text-primary); }
  .pcp-count { font:700 22px/1 var(--font-sans); letter-spacing:-0.02em; color:var(--brand-600); white-space:nowrap; }
  .pcp-desc { font:400 16px/1.4 var(--font-sans); color:var(--text-secondary); margin:12px 0 0; }
  .pcp-rule { height:1px; background:var(--line); margin:22px 0; }
  .pcp-card.feat .pcp-rule { background:rgba(255,35,140,0.18); }
  .pcp-priceLbl { font:400 18px/1 var(--pcp-serif); color:var(--text-secondary); }
  .pcp-price { display:flex; align-items:flex-end; gap:9px; margin-top:12px; }
  .pcp-amt { font:700 48px/0.92 var(--font-sans); letter-spacing:-0.035em; color:var(--text-primary); }
  .pcp-per { font:500 16px/1 var(--font-sans); color:var(--text-tertiary); padding-bottom:6px; }
  .pcp-inclLbl, .pcp-bestLbl { font:400 21px/1 var(--pcp-serif); color:var(--text-primary); }
  .pcp-list { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .pcp-item { display:flex; gap:12px; align-items:flex-start; font:400 15.5px/1.4 var(--font-sans); color:var(--text-primary); }
  .pcp-item.hl { font-weight:600; }
  .pcp-item .pcp-ck { color:var(--brand-600); flex:none; margin-top:1px; }
  .pcp-item strong { font-weight:700; }
  .pcp-best { display:flex; gap:12px; align-items:flex-start; margin:14px 0 0; font:400 16px/1.45 var(--font-sans); color:var(--text-secondary); }
  .pcp-best .pcp-bestIc { color:var(--brand-600); flex:none; margin-top:1px; }
  .pcp-cta { appearance:none; cursor:pointer; border:none; width:100%; margin-top:24px; height:54px; border-radius:999px;
    background:var(--brand-600); color:#fff; font:600 16px/1 var(--font-sans); letter-spacing:-0.01em;
    transition:background .18s cubic-bezier(.2,0,0,1), box-shadow .26s cubic-bezier(.2,0,0,1); }
  .pcp-cta:hover { background:var(--brand-700); box-shadow:0 10px 24px -8px rgba(255,35,140,0.45); }
  .pcp-cta:active { transform:scale(0.985); }
  .pcp-note { font:400 14px/1.4 var(--font-sans); color:var(--text-tertiary); text-align:center; margin:14px 0 0; }
  /* single-option (this page has one plan) — centered card in the same card design */
  .pcp-solo { width:100%; max-width:444px; margin:50px auto 0; }
  .pcp-sub { font:500 15px/1 var(--font-sans); color:var(--text-secondary); margin-top:11px; }
  .pcp-sub b { color:var(--text-primary); font-weight:700; }

  @media (max-width:900px) {
    .pcp-solo { margin-top:30px; max-width:none; }
    .pcp-track { display:flex; grid-template-columns:none; gap:14px; align-items:stretch; margin-top:34px;
      overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
      width:100vw; margin-left:calc(50% - 50vw);
      padding:6px max(7vw, calc((100vw - 340px)/2)) 10px; }
    .pcp-track::-webkit-scrollbar { display:none; }
    .pcp-card { flex:0 0 min(86vw,340px); scroll-snap-align:center; }
    .pcp-amt { font-size:44px; }
    .pcp-name { font-size:24px; }
  }

  /* ── Pink standards band — one bold colour moment for rhythm.
     Gradient matched to the Sayso ad creatives: bright magenta hotspot
     (~#D4317A) falling to deep bordeaux (#800932) at the edges. ── */
  .pcs { position:relative; overflow:hidden;
    background:
      radial-gradient(ellipse 96% 128% at 50% 44%, #F94C97 0%, #E81F7D 30%, #A81353 64%, #7C0A33 100%); }
  .pcs::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
    background-image:
      radial-gradient(2px 2px at 12% 26%, rgba(255,255,255,0.55), transparent),
      radial-gradient(2px 2px at 82% 18%, rgba(255,255,255,0.45), transparent),
      radial-gradient(1.5px 1.5px at 66% 72%, rgba(255,255,255,0.4), transparent),
      radial-gradient(1.5px 1.5px at 28% 78%, rgba(255,255,255,0.4), transparent),
      radial-gradient(1.5px 1.5px at 46% 12%, rgba(255,255,255,0.35), transparent),
      radial-gradient(1.5px 1.5px at 92% 60%, rgba(255,255,255,0.32), transparent); }
  .pcs-in { position:relative; z-index:1; max-width:1000px; margin:0 auto;
    padding:clamp(80px,9vw,116px) var(--pc-pad); text-align:center;
    display:flex; flex-direction:column; align-items:center; }
  .pcs-ic { width:92px; height:92px; border-radius:999px; background:#fff;
    display:flex; align-items:center; justify-content:center; color:var(--brand-600); }
  .pcs-h { font:700 clamp(34px,4.6vw,58px)/1.04 var(--font-sans); letter-spacing:-0.035em;
    color:#fff; margin:0; text-wrap:balance; max-width:17ch; }
  .pcs-sub { font:400 clamp(16px,1.8vw,20px)/1.5 var(--font-sans);
    color:rgba(255,255,255,0.82); margin:18px 0 0; max-width:52ch; text-wrap:pretty; }
  .pcs-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:42px; }
  .pcs-chip { display:inline-flex; align-items:center; gap:12px; text-align:left;
    background:rgba(255,255,255,0.13); border:1px solid rgba(255,255,255,0.18);
    border-radius:999px; padding:12px 22px 12px 14px; }
  .pcs-chip .ck { flex:none; width:24px; height:24px; border-radius:999px; background:#fff;
    color:var(--brand-600); display:flex; align-items:center; justify-content:center; }
  .pcs-chip .tx { font:400 15px/1.3 var(--font-sans); color:rgba(255,255,255,0.84); }
  .pcs-chip .tx b { color:#fff; font-weight:700; }
  @media (max-width:767px) {
    .pcs-chips { flex-direction:column; align-items:stretch; width:100%; gap:10px; }
    .pcs-chip { width:100%; }
  }
`;

// people / "best for" mark + lightning for the Most Popular banner
function Ic2Users({ s = 20 }) { return <svg width={s} height={s} viewBox="0 0 24 24" {...F2}><circle cx="9" cy="8.2" r="3.1" /><path d="M3.6 19c0-3 2.5-4.8 5.4-4.8s5.4 1.8 5.4 4.8" /><path d="M16.2 5.4a3 3 0 0 1 0 5.5M17.6 14.5c2 .5 3.4 2 3.4 4.5" /></svg>; }
function IcBolt({ s = 15 }) { return <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" /></svg>; }
function IcSparkle({ s = 40 }) { return <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M10.6 2 12 8 18 9.4 12 10.8 10.6 16.8 9.2 10.8 3.2 9.4 9.2 8Z" /><path d="M17.6 13.2 18.3 15.9 21 16.6 18.3 17.3 17.6 20 16.9 17.3 14.2 16.6 16.9 15.9Z" /></svg>; }

// ─── PRICING — Sayso pricing-card design, this page's single option ──────────
const PC_PLAN = {
  name: "Testimonial Ads", count: "3 Formats", desc: "Paid-ready clips cut from your existing testimonial shoot.",
  cta: "Add Testimonial Ads", note: "Most teams order 3–4 clips to test different angles.",
  bestFor: "Teams turning one testimonial into a paid-ads engine.",
  feats: [
    { t: "No new shoot required", b: true },
    "3 formats: 9:16 · 1:1 · 16:9",
    "Performance-focused scripting",
    "Safe-zone captions",
    "Review & revisions inside Sayso",
    { t: "One optimized marketing message", b: true },
  ],
};

function PcFeatLabel({ f }) {
  if (typeof f === "string") return f;
  if (f.strong) return <React.Fragment>{f.pre}<strong>{f.strong}</strong></React.Fragment>;
  return f.t;
}

function PcROI() {
  const [ref, shown] = usePcReveal();
  const p = PC_PLAN;
  return (
    <section className="pc-sec" id="pricing" style={{ background: "#F5F6F4" }}>
      <div ref={ref} className="pc-wrap" style={{ padding: "120px var(--pc-pad)" }}>
        <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto", ...rise(shown, 0) }}>
          <Cap>Pricing</Cap>
          <h2 className="pc-h2" style={{ marginTop: 18 }}>Add paid-ready clips to your <span className="pc-pink">testimonial shoot.</span></h2>
          <p className="pc-lead" style={{ margin: "14px auto 0" }}>First clip $690. Additional clips $590. No new shoot required.</p>
        </div>
        <div className="pcp-solo" style={rise(shown, 120, 24)}>
          <div className="pcp-card feat">
            <div className="pcp-banner"><IcBolt /> Testimonial Add-On</div>
            <div className="pcp-body">
              <div className="pcp-head">
                <span className="pcp-name">{p.name}</span>
                <span className="pcp-count">{p.count}</span>
              </div>
              <p className="pcp-desc">{p.desc}</p>
              <div className="pcp-rule" />
              <div className="pcp-priceLbl">Starting from</div>
              <div className="pcp-price"><span className="pcp-amt">$690</span><span className="pcp-per">/first clip</span></div>
              <div className="pcp-sub">then <b>$590</b> per additional clip</div>
              <div className="pcp-rule" />
              <div className="pcp-inclLbl">Includes:</div>
              <ul className="pcp-list">
                {p.feats.map((f, j) => (
                  <li key={j} className={"pcp-item" + (typeof f !== "string" && f.b ? " hl" : "")}>
                    <span className="pcp-ck"><Ic2Check s={17} /></span>
                    <span><PcFeatLabel f={f} /></span>
                  </li>
                ))}
              </ul>
              <div className="pcp-rule" />
              <div className="pcp-bestLbl">Best for:</div>
              <div className="pcp-best"><span className="pcp-bestIc"><Ic2Users /></span><span>{p.bestFor}</span></div>
              <button className="pcp-cta" type="button" onClick={() => window.pcGo(window.PC_LINKS.buyClips)}>{p.cta}</button>
              <p className="pcp-note">{p.note}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FINAL CTA ───────────────────────────────────────────────────────────────
function PcFinalCTA() {
  const [ref, shown] = usePcReveal();
  const meta = ["Global", "Fast", "Zero production management"];
  return (
    <section className="pc-sec" id="book" style={{ background: "#fff" }}>
      <div ref={ref} className="pc-wrap" style={{ padding: "130px var(--pc-pad)" }}>
        <div className="pc-card" style={{ position: "relative", overflow: "hidden", borderRadius: "var(--radius-xl,28px)", padding: "76px 56px", background: "var(--bg-black,#000)", borderColor: "transparent", textAlign: "center", ...rise(shown, 0) }}>
          <div className="pc-field" style={{ opacity: 0.5, filter: "invert(1)", WebkitMaskImage: "radial-gradient(80% 120% at 50% 0%, #000 25%, transparent 72%)", maskImage: "radial-gradient(80% 120% at 50% 0%, #000 25%, transparent 72%)" }} />
          <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", alignItems: "center" }}>
            <Cap dark>Start now</Cap>
            <h2 style={{ font: "700 clamp(36px,4.4vw,58px)/1.06 var(--font-sans)", letterSpacing: "-0.035em", color: "#fff", margin: "22px auto 0", maxWidth: "18ch", textWrap: "balance" }}>
              Turn your testimonial into <span className="pc-pink">campaign-ready video assets.</span>
            </h2>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, marginTop: 36 }}>
              <button className="pc-btn pc-btn-pri" type="button" style={{ height: 60, padding: "0 36px", fontSize: 17 }}>
                Add Testimonial Ads <ArrowUR s={18} />
              </button>
              <a href="#" style={{ font: "500 15px/1.5 var(--font-sans)", color: "rgba(255,255,255,0.62)", textDecoration: "none", borderBottom: "1px solid rgba(255,255,255,0.22)", paddingBottom: 2 }}>Don't have a testimonial yet? Book a 10-minute planning call</a>
            </div>
            <div className="pc-cta-meta" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 28, marginTop: 44, paddingTop: 30, borderTop: "1px solid rgba(255,255,255,0.12)", width: "100%", maxWidth: 560 }}>
              {meta.map((m, i) => (
                <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 9, font: "500 15px/1 var(--font-sans)", color: "rgba(255,255,255,0.82)" }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--brand-600)" }} />{m}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ─────────────────────────────────────────────────────────────────────
function PcFAQ() {
  const [ref, shown] = usePcReveal();
  const [open, setOpen] = React.useState(0);
  const [showAll, setShowAll] = React.useState(false);
  const isMobile = usePcIsMobile();
  // Four most important questions first; the rest stay collapsed behind the toggle.
  const qa = isMobile ? [
    ["Do we need to film anything new?", "No. We build Testimonial Ads entirely from the testimonial shoot materials."],
    ["Can we choose the message?", "Yes. You can choose from suggested directions, adjust one, or build your own."],
    ["How many ads should we order?", "Most teams start with 3–4 ads so they can test different angles."],
    ["Can Testimonial Ads run in paid ads?", "Yes. They are cut for paid, social, landing pages, and sales."],
    ["How long are the ads?", "Most are 25–45 seconds — long enough for a clear proof point, short enough to run in paid, social, landing pages, and sales follow-ups."],
    ["What formats do we receive?", "Each ad is delivered in 9:16 for vertical social, 1:1 for feed placements, and 16:9 for landing pages, sales, and LinkedIn."],
    ["What's the difference between a testimonial and an ad?", "The testimonial tells the full customer story. An ad takes one strong moment and recuts it into a focused clip for campaigns."],
    ["Do the ads include captions?", "Yes. Every ad ships with safe-zone captions, since most social and mobile viewers watch without sound."],
    ["Can we order ads after the testimonial is approved?", "Yes. Once the full testimonial is approved, we use the same shoot materials to cut shorter ads for marketing and sales."],
  ] : [
    ["Do we need to film anything new?", "No. We build Testimonial Ads entirely from the testimonial shoot materials."],
    ["Can we choose the message?", "Yes. You can choose from suggested scripts or build your own mix."],
    ["How many clips should we order?", "Most teams order 3–4 clips so they can test different angles and prevent ad fatigue."],
    ["Can Testimonial Ads run in paid ads?", "Yes. That's their main job — short, credible customer-led proof you can run across paid social, retargeting, landing pages, and campaign flows."],
    ["How long are the clips?", "Most Testimonial Ads are 25–45 seconds. Long enough to deliver a clear customer proof point, short enough to run in paid ads, social, landing pages, and sales follow-ups."],
    ["What formats do we receive?", "Each clip is delivered in 9:16 for vertical social, 1:1 for feed placements, and 16:9 for landing pages, sales, YouTube, and LinkedIn."],
    ["What's the difference between a testimonial and a Testimonial Ad?", "The testimonial tells the full customer story. A Testimonial Ad takes one strong moment and recuts it into a focused ad for campaigns."],
    ["Do the clips include captions?", "Yes. Every clip ships with safe-zone captions, since most social and mobile viewers watch without sound."],
    ["Can we order clips after the testimonial is approved?", "Yes. Once the full testimonial is approved, we use the same shoot materials to cut shorter clips for marketing and sales."],
  ];
  const PRIMARY = 4;
  const visible = showAll ? qa : qa.slice(0, PRIMARY);
  const remaining = qa.length - PRIMARY;
  return (
    <section className="pc-sec" id="faq" style={{ background: "#fff" }}>
      <div ref={ref} className="pc-wrap" style={{ padding: "130px var(--pc-pad) 150px" }}>
        <div style={{ maxWidth: 640, ...rise(shown, 0) }}>
          <Cap>FAQ</Cap>
          <h2 className="pc-h2">{isMobile ? "Questions? Short answers." : "Got questions? We keep answers short."}</h2>
        </div>
        <div className="pc-faq" style={{ marginTop: 44, ...rise(shown, 120) }}>
          {visible.map(([q, a], i) => (
            <div key={i} className={"pc-faq-item" + (open === i ? " open" : "")}>
              <button type="button" className="pc-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {q}<span className="ic"><Ic2Plus s={15} /></span>
              </button>
              <div className="pc-faq-a"><p>{a}</p></div>
            </div>
          ))}
        </div>
        {remaining > 0 && (
          <div style={{ marginTop: 30, ...rise(shown, 160) }}>
            <button type="button" className="pc-btn pc-btn-sec pc-btn-sm"
              onClick={() => { if (showAll) setOpen((o) => (o >= PRIMARY ? -1 : o)); setShowAll((v) => !v); }}>
              {showAll ? "Show fewer" : `More questions (${remaining})`}
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

// ─── GLOBAL COVERAGE ─────────────────────────────────────────────────────────
function PcGlobal() {
  const [ref, shown] = usePcReveal();
  const geos = ["USA", "UK", "Europe", "APAC", "Australia"];
  return (
    <section className="pc-sec" style={{ background: "#fff" }}>
      <div ref={ref} className="pc-wrap" style={{ padding: "130px var(--pc-pad) 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
          <div style={rise(shown, 0)}>
            <Cap>Global coverage</Cap>
            <h2 className="pc-h2" style={{ marginTop: 20 }}>Generated from footage captured anywhere.</h2>
            <p className="pc-lead">From Las Vegas to London, Berlin, Paris, New York, and Singapore — one vendor, one standard, worldwide.</p>
          </div>
          <div style={rise(shown, 140)}>
            <div style={{ font: "600 13px/1 var(--font-sans)", letterSpacing: ".06em", textTransform: "uppercase", color: "var(--text-tertiary)", marginBottom: 18 }}>Coverage includes</div>
            <div className="pc-geos">
              {geos.map((g, i) => <span key={i} className="pc-geo"><span className="d" />{g}</span>)}
            </div>
            <div style={{ display: "flex", gap: 28, marginTop: 34, flexWrap: "wrap" }}>
              {[["One", "vendor"], ["One", "standard"], ["", "Worldwide"]].map(([a, b], i) => (
                <div key={i}>
                  <div style={{ font: "700 26px/1 var(--font-sans)", letterSpacing: "-0.03em", color: "var(--text-primary)" }}>{a || b}</div>
                  {a && <div style={{ font: "400 14px/1 var(--font-sans)", color: "var(--text-tertiary)", marginTop: 5 }}>{b}</div>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── EXPLAINER — what is a testimonial ad + about ──────────────────────────
function PcExplainer() {
  const [ref, shown] = usePcReveal();
  const isMobile = usePcIsMobile();
  if (isMobile) {
    return (
      <section className="pc-sec" style={{ background: "#fff" }}>
        <div ref={ref} className="pc-wrap pcx-m">
          <div className="pcx-card" style={rise(shown, 0, 16)}>
            <Cap>Definition</Cap>
            <h3 className="pcx-h">What is a Testimonial Ad?</h3>
            <p className="pcx-p">A Testimonial Ad is a short customer-proof ad built from a real testimonial shoot, with the hook, pacing, captions, and framing shaped for paid, social, landing pages, or sales.</p>
          </div>
          <div className="pcx-card" style={rise(shown, 90, 16)}>
            <Cap>About</Cap>
            <h3 className="pcx-h">Built by Sayso</h3>
            <p className="pcx-p">Sayso helps B2B teams capture real customer stories and turn one shoot into the main testimonial plus short ads teams can actually run.</p>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section className="pc-sec" style={{ background: "#fff" }}>
      <div ref={ref} className="pc-wrap" style={{ padding: "130px var(--pc-pad) 130px" }}>
        <div className="pc-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
          <div style={rise(shown, 0)}>
            <Cap>Definition</Cap>
            <h3 style={{ font: "600 26px/1.25 var(--font-sans)", letterSpacing: "-0.02em", color: "var(--text-primary)", margin: "20px 0 0" }}>What is a Testimonial Ad?</h3>
            <p style={{ font: "400 17px/1.6 var(--font-sans)", color: "var(--text-secondary)", margin: "14px 0 0", maxWidth: "48ch" }}>
              A Testimonial Ad is a short ad or customer-proof clip built from the materials of a real testimonial shoot, with the hook, pacing, captions, and framing shaped for paid, social, landing pages, or sales.
            </p>
          </div>
          <div style={rise(shown, 140)}>
            <Cap>About</Cap>
            <h3 style={{ font: "600 26px/1.25 var(--font-sans)", letterSpacing: "-0.02em", color: "var(--text-primary)", margin: "20px 0 0" }}>Built by Sayso</h3>
            <p style={{ font: "400 17px/1.6 var(--font-sans)", color: "var(--text-secondary)", margin: "14px 0 0", maxWidth: "48ch" }}>
              Sayso helps B2B teams capture real customer stories and turn one shoot into the main testimonial plus short clips teams can actually run.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── STANDARDS BAND — bold pink rhythm moment after pricing ───────────────
function PcStandards() {
  const [ref, shown] = usePcReveal();
  const chips = [
    ["Real customer footage", "cut from real interviews, never stock."],
    ["3 formats, every time", "9:16 · 1:1 · 16:9, ready to run."],
    ["Safe-zone captions", "built for sound-off feeds."],
    ["Reviewed inside Sayso", "the same approval flow you already use."],
    ["No new shoot", "every ad from footage you already have."],
  ];
  return (
    <section className="pc-sec pcs">
      <div ref={ref} className="pcs-in">
        <h2 className="pcs-h" style={rise(shown, 0)}><span style={{ color: '#ffffff' }}>More ads.</span><br /><span style={{ color: '#fcf8f8' }}>Same real proof.</span></h2>
        <p className="pcs-sub" style={{ ...rise(shown, 90), textAlign: 'center' }}>Cut as many ads as you need from one testimonial. Every one carries the same real-customer credibility.</p>
        <div className="pcs-chips" style={rise(shown, 150)}>
          {chips.map(([t, d], i) => (
            <span key={i} className="pcs-chip"><span className="ck"><Ic2Check s={14} /></span><span className="tx"><b>{t}</b> {d}</span></span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PC2_CSS, PcROI, PcStandards, PcFinalCTA, PcFAQ, PcGlobal, PcExplainer });