// Platform Stats & Proof — a cinematic visual pause between The Real Problem
// and The Fix. Wide testimonial still, dark gradient, headline + subcopy, and
// three editorial proof cards: two platform stats + the Guesty quote.
// Pink is rationed to the stat numbers + accents per the Sayso system.

const PLT_CSS = `
  .plt-sec { position:relative; overflow:hidden; background:#0c0a09; isolation:isolate; }
  .plt-bg { position:absolute; inset:0; z-index:0; }
  .plt-bg img { width:100%; height:100%; object-fit:cover; object-position:center 30%; }
  .plt-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(8,6,5,0.92) 0%, rgba(8,6,5,0.64) 38%, rgba(8,6,5,0.28) 64%, rgba(8,6,5,0.12) 100%),
      linear-gradient(0deg, rgba(8,6,5,0.96) 0%, rgba(8,6,5,0.4) 30%, rgba(8,6,5,0.12) 56%, rgba(8,6,5,0.34) 100%); }
  .plt-wrap { position:relative; z-index:2; max-width:var(--pc-max); margin:0 auto;
    padding:124px var(--pc-pad) 110px; }
  .plt-head { max-width:680px; }
  .plt-h2 { font:700 clamp(34px,4.2vw,56px)/1.06 var(--font-sans); letter-spacing:-0.035em;
    color:#fff; margin:20px 0 0; max-width:16ch; text-wrap:balance; }
  .plt-sub { font:400 clamp(17px,1.8vw,20px)/1.5 var(--font-sans); letter-spacing:-0.01em;
    color:rgba(255,255,255,0.74); margin:18px 0 0; max-width:54ch; text-wrap:pretty; }

  .plt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
  .plt-card { position:relative; display:flex; flex-direction:column; border-radius:16px;
    background:rgba(20,16,14,0.46); border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    padding:28px 28px 30px; box-shadow:0 24px 60px -28px rgba(0,0,0,0.6); }
  .plt-lbl { display:inline-flex; align-items:center; gap:9px; font:600 12px/1 var(--font-sans);
    letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,0.72); }
  .plt-lbl .d { width:6px; height:6px; border-radius:999px; background:var(--brand-600); flex:none; }
  .plt-stat { font:700 clamp(40px,3.6vw,52px)/1.0 var(--font-sans); letter-spacing:-0.04em;
    color:#fff; margin:20px 0 0; }
  .plt-stat em { font-style:normal; color:var(--brand-600); }
  .plt-body { font:400 15px/1.5 var(--font-sans); color:rgba(255,255,255,0.62);
    margin:14px 0 0; text-wrap:pretty; }

  /* quote card */
  .plt-card.quote { justify-content:space-between; }
  .plt-qmark { color:var(--brand-600); display:inline-flex; }
  .plt-q { font:600 19px/1.4 var(--font-sans); letter-spacing:-0.015em; color:#fff;
    margin:2px 0 0; text-wrap:pretty; }
  /* oversized solid quotation marks as a design element */
  .plt-qd { color:var(--brand-600); font:700 40px/0 var(--font-sans); vertical-align:-0.30em; }
  .plt-qd--o { margin-right:3px; }
  .plt-qd--c { margin-left:2px; }
  .plt-attr { display:flex; align-items:center; gap:13px; margin-top:26px;
    padding-top:22px; border-top:1.5px solid rgba(255,255,255,0.22); }
  .plt-attr img { width:46px; height:46px; border-radius:999px; object-fit:cover;
    border:1px solid rgba(255,255,255,0.2); flex:none; }
  .plt-attr img.plt-blogo { width:auto; height:21px; border-radius:0; object-fit:contain;
    border:0; margin-left:auto; flex:none; }
  .plt-attr .nm { font:600 15px/1.2 var(--font-sans); color:#fff; }
  .plt-attr .rl { font:400 13px/1.3 var(--font-sans); color:rgba(255,255,255,0.56); margin-top:2px; }

  .plt-src { font:400 13.5px/1.55 var(--font-sans); color:rgba(255,255,255,0.55);
    margin:30px 0 0; max-width:70ch; }

  @media (max-width:900px) {
    .plt-grid { grid-template-columns:1fr; gap:14px; }
    .plt-wrap { padding:84px var(--pc-pad) 80px; }
    .plt-bg img { object-position:center 22%; }
    .plt-scrim { background:
      linear-gradient(0deg, rgba(8,6,5,0.97) 8%, rgba(8,6,5,0.66) 40%, rgba(8,6,5,0.3) 70%, rgba(8,6,5,0.5) 100%); }
    .plt-card { padding:24px 22px 26px; }
    .plt-attr img.plt-blogo { height:19px; }
  }
  .plt-mbr { display:none; }

  @media (max-width:767px) {
    .plt-wrap { padding:50px var(--pc-pad) 48px; }
    /* PLATFORM PROOF — plain left-aligned label, no rule */
    .plt-head .pc-cap .d { display:none !important; }
    .plt-mbr { display:inline; }   /* break Meta metric: "34.5% lower cost" / "per result" */
    /* slightly stronger, more even scrim so white text wins over the photo */
    .plt-scrim { background:
      linear-gradient(0deg, rgba(8,6,5,0.97) 6%, rgba(8,6,5,0.76) 38%, rgba(8,6,5,0.54) 66%, rgba(8,6,5,0.66) 100%); }
    .plt-h2 { font-size:29px !important; line-height:1.08 !important; margin-top:13px; }
    .plt-sub { font-size:15.5px !important; line-height:1.5 !important; margin-top:13px; max-width:34ch; }
    .plt-grid { gap:10px; margin-top:30px; }
    .plt-card { padding:18px 18px 19px; }
    .plt-lbl { font-size:11px; }
    .plt-stat { font-size:30px !important; margin-top:12px; }
    .plt-body { font-size:13.5px; line-height:1.45; margin-top:9px; }
    /* compact quote card */
    .plt-q { font-size:16.5px; line-height:1.38; }
    .plt-attr { margin-top:15px; padding-top:14px; gap:11px; }
    .plt-attr img { width:40px; height:40px; }
    .plt-attr img.plt-blogo { height:17px; }
    .plt-attr .nm { font-size:14px; }
    .plt-attr .rl { font-size:12px; }
    .plt-src { margin-top:20px; font-size:12px; }
  }
`;

function PltQuoteMark({ s = 30 }) {
  return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 7H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h3v2a3 3 0 0 1-3 3" /><path d="M19 7h-4a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h3v2a3 3 0 0 1-3 3" /></svg>;
}

function PcPlatformProof() {
  const [ref, shown] = usePcReveal();
  const isMobile = usePcIsMobile();
  return (
    <section className="pc-sec plt-sec" ref={ref}>
      <div className="plt-bg"><img src="assets/footage/main-testimonial.png" alt="" draggable="false" /></div>
      <div className="plt-scrim"></div>
      <div className="plt-wrap">
        <div className="plt-head">
          <div style={rise(shown, 0)}><Cap dark>Platform Proof</Cap></div>
          <h2 className="plt-h2" style={rise(shown, 60)}>Built like creative that has to perform.</h2>
          <p className="plt-sub" style={rise(shown, 110)}>{isMobile ? "We recut the message, pacing, captions, and framing for paid and social." : "We don't just crop the testimonial. We recut the message, pacing, captions, and framing for paid and social placements."}</p>
        </div>

        <div className="plt-grid">
          <div className="plt-card" style={rise(shown, 170, 22)}>
            <span className="plt-lbl"><span className="d"></span>Meta</span>
            <div className="plt-stat"><em>34.5%</em> lower cost <br className="plt-mbr" />per result</div>
            <p className="plt-body">for Reels ads using 9:16 video, audio, and key messages in the safe zone compared to image ads.</p>
          </div>

          <div className="plt-card" style={rise(shown, 230, 22)}>
            <span className="plt-lbl"><span className="d"></span>LinkedIn</span>
            <div className="plt-stat"><em>30%</em> more comments per impression</div>
            <p className="plt-body">for video ads compared with static images in the feed.</p>
          </div>

          <div className="plt-card quote" style={rise(shown, 290, 22)}>
            <div>
              <p className="plt-q"><span className="plt-qd plt-qd--o">“</span>The clips gave us real customer proof we could use immediately, without opening another production.<span className="plt-qd plt-qd--c">”</span></p>
            </div>
            <div className="plt-attr">
              <img src="assets/people/gal-givoly.png" alt="Gal Givoly" />
              <div>
                <div className="nm">Gal Givoly</div>
                <div className="rl">Customer Marketing Specialist</div>
              </div>
              <img className="plt-blogo" src="assets/logos/guesty-white.png" alt="Guesty" />
            </div>
          </div>
        </div>

        <p className="plt-src" style={rise(shown, 340)}>Sources: Meta Reels Guidance, LinkedIn Marketing Solutions. Platform results are not guaranteed Sayso outcomes.</p>
      </div>
    </section>
  );
}

Object.assign(window, { PLT_CSS, PcPlatformProof });