/* global React */

// ============================================================
// Dynamic CDN, Benefits (rev 2)
// Editorial layout, Chinese-only, no eyebrows / small captions
// ============================================================
const DY_BEN_CSS = `
.DY-ben{position:relative;background:linear-gradient(180deg,#F6F4FB 0%,#FAFAFE 100%);padding:var(--section-pad-y-d) 0;font-family:'Noto Sans HK','Noto Sans TC','Inter',sans-serif;color:#0F2A47;border-top:1px solid rgba(15,42,71,0.06);border-bottom:1px solid rgba(15,42,71,0.06)}
.DY-ben-head{max-width:780px;margin-bottom:56px}
.DY-ben-h2{margin:0;font-size:clamp(36px,4.2vw,56px);line-height:1.08;font-weight:700;letter-spacing:-1.6px;color:#0F2A47;text-wrap:balance}
.DY-ben-h2 .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.DY-ben-lede{margin-top:18px;font-size:17px;line-height:1.7;color:#475569;max-width:560px;text-wrap:pretty}

.DY-ben-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:20px}
.DY-ben-col{display:flex;flex-direction:column;gap:20px}

/* Big story card */
.DY-big{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:22px;padding:38px 40px 36px;overflow:hidden;display:flex;flex-direction:column;gap:20px;transition:transform .2s,box-shadow .2s,border-color .2s}
.DY-big:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(124,58,237,0.10);border-color:rgba(124,58,237,0.30)}
.DY-big.dark{background:radial-gradient(120% 120% at 88% 0%,#33215e 0%,#1a2347 45%,#0F2A47 100%);color:#fff;border-color:transparent;min-height:340px}
.DY-big.dark::before{content:'';position:absolute;top:-90px;right:-90px;width:240px;height:240px;background:radial-gradient(circle,rgba(167,139,250,0.42) 0%,transparent 70%);pointer-events:none}
.DY-big-metric{display:flex;align-items:baseline;gap:10px;font-family:'Inter',sans-serif;font-weight:700;color:#0F2A47;line-height:1;letter-spacing:-2.2px;font-variant-numeric:tabular-nums}
.DY-big.dark .DY-big-metric{color:#fff}
.DY-big-metric .v{font-size:84px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.DY-big.dark .DY-big-metric .v{background:linear-gradient(135deg,#C4B5FD 0%,#A855F7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.DY-big-metric .u{font-size:24px;font-weight:600;letter-spacing:-.3px;color:#7C3AED}
.DY-big.dark .DY-big-metric .u{color:#C4B5FD}
.DY-big-h3{margin:0;font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.25;color:inherit;text-wrap:balance}
.DY-big-p{margin:0;font-size:15.5px;line-height:1.7;color:#475569;text-wrap:pretty}
.DY-big.dark .DY-big-p{color:rgba(255,255,255,0.78)}
.DY-big-p b{color:#0F2A47;font-weight:600}
.DY-big.dark .DY-big-p b{color:#fff}

/* Inline metric card */
.DY-inl{background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;padding:28px 30px;display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s,border-color .2s}
.DY-inl:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,58,237,0.08);border-color:rgba(124,58,237,0.30)}
.DY-inl-v{font-family:'Inter',sans-serif;font-weight:700;line-height:1;letter-spacing:-1.4px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.DY-inl-v .n{font-size:48px}
.DY-inl-v .u{font-size:20px;font-weight:700}
.DY-inl-h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.2px;line-height:1.35;color:#0F2A47;text-wrap:balance}
.DY-inl-p{margin:0;font-size:14.5px;line-height:1.65;color:#64748b;text-wrap:pretty}
.DY-inl-p b{color:#0F2A47;font-weight:600}

/* Live latency mini-chart (dark big card) */
.DY-chart{margin-top:6px;padding:14px 16px;background:rgba(0,0,0,0.22);border:1px solid rgba(196,181,253,0.18);border-radius:12px}
.DY-chart svg{width:100%;height:62px;display:block}

/* Mid CTA, full-width ribbon */
.DY-mid{margin-top:48px;background:#0F2A47;color:#fff;border-radius:22px;padding:32px 40px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;overflow:hidden}
.DY-mid::before{content:'';position:absolute;top:-100px;right:-50px;width:300px;height:300px;background:radial-gradient(circle,rgba(167,139,250,0.32) 0%,transparent 70%);pointer-events:none}
.DY-mid-t{margin:0;font-size:23px;font-weight:700;letter-spacing:-.3px;line-height:1.35;text-wrap:balance;position:relative;z-index:1}
.DY-mid-t .ac{background:linear-gradient(135deg,#C4B5FD 0%,#A855F7 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.DY-mid-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;font-size:15px;font-weight:700;color:#0F2A47;background:#fff;border-radius:999px;text-decoration:none;white-space:nowrap;transition:all .15s}
.DY-mid-btn:hover{background:#C4B5FD;transform:translateY(-1px)}

@media (max-width: 1024px){
  .DY-ben{padding:var(--section-pad-y-t) 0}
  .DY-ben-grid{grid-template-columns:1fr;gap:18px}
}
@media (max-width: 640px){
  .DY-ben{padding:var(--section-pad-y-m) 0}
  .DY-ben-head{margin-bottom:40px}
  .DY-ben-h2{font-size:32px;letter-spacing:-1px}
  .DY-big{padding:30px 26px 28px}
  .DY-big-metric .v{font-size:64px}
  .DY-big-h3{font-size:22px}
  .DY-inl{padding:22px 22px}
  .DY-inl-v .n{font-size:40px}
  .DY-mid{grid-template-columns:1fr;gap:18px;padding:26px 24px}
  .DY-mid-btn{justify-self:start}
}
`;

// Live latency sparkline, minimal, no labels
function DYLatencyChart() {
  const pts = [22,18,21,19,24,20,23,21,18,22,19,21,17,20,18,22,19,21,18,20,22,19,21,18];
  const W = 320, H = 62, n = pts.length;
  const max = 40;
  const xy = pts.map((v, i) => [
    (i / (n - 1)) * W,
    H - (v / max) * (H - 8) - 4,
  ]);
  const d = xy.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
  const area = d + ` L ${W} ${H} L 0 ${H} Z`;
  return (
    <div className="DY-chart">
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="dy-spark" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#A855F7" stopOpacity="0.45" />
            <stop offset="100%" stopColor="#A855F7" stopOpacity="0" />
          </linearGradient>
        </defs>
        <line x1="0" y1={H - (20 / max) * (H - 8) - 4} x2={W} y2={H - (20 / max) * (H - 8) - 4} stroke="rgba(196,181,253,0.25)" strokeDasharray="2 4" />
        <path d={area} fill="url(#dy-spark)" />
        <path d={d} fill="none" stroke="#C4B5FD" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        {xy.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="1.8" fill="#C4B5FD" />)}
      </svg>
    </div>
  );
}

function DynamicBenefits() {
  return (
    <>
      <style>{DY_BEN_CSS}</style>
      <section className="DY-ben" data-screen-label="03 Benefits">
        <div className="container">
          <div className="DY-ben-head">
            <h2 className="DY-ben-h2">啟用後，<span className="accent">實時業務的轉變</span></h2>
            <p className="DY-ben-lede">
              交易、操作、聊天等對延遲極度敏感的場景，由邊緣節點以毫秒級往返完成，用戶留得住，連線不掉。
            </p>
          </div>

          <div className="DY-ben-grid">
            <div className="DY-ben-col">
              {/* BIG #1, dark, with live mini-chart */}
              <article className="DY-big dark">
                <div className="DY-big-metric"><span className="v">&lt; 20</span><span className="u">毫秒</span></div>
                <h3 className="DY-big-h3">毫秒級回應，留住即時用戶</h3>
                <p className="DY-big-p">
                  交易撮合、遊戲操作、即時聊天，邊緣節點以<b>毫秒級往返</b>完成請求，
                  避免因卡頓而流失用戶或交易。
                </p>
                <DYLatencyChart />
              </article>

              {/* INLINE #3 */}
              <article className="DY-inl">
                <div className="DY-inl-v"><span className="n">3</span><span className="u">區域節點</span></div>
                <h3 className="DY-inl-h3">跨境延遲穩定，全球一致體驗</h3>
                <p className="DY-inl-p">本港、中國、全球三套節點同時運作，海外用戶與本港用戶獲得<b>一致水準</b>的即時回應。</p>
              </article>
            </div>

            <div className="DY-ben-col">
              {/* BIG #2, light */}
              <article className="DY-big">
                <div className="DY-big-metric"><span className="v">99.99</span><span className="u">%</span></div>
                <h3 className="DY-big-h3">連接不中斷，業務全程在線</h3>
                <p className="DY-big-p">
                  持久 WebSocket 連接配合<b>最佳線路自動切換</b>，網絡擠塞時自動繞道，
                  保障長時段連線不掉線。
                </p>
                {/* uptime visualisation, pure bars, no caption */}
                <div style={{ marginTop: 6 }}>
                  <div style={{ display: 'flex', gap: 3, height: 36, alignItems: 'flex-end' }}>
                    {Array.from({ length: 30 }).map((_, i) => (
                      <div key={i} style={{
                        flex: 1,
                        height: i === 14 ? '60%' : '100%',
                        background: 'linear-gradient(135deg,#A855F7,#7C3AED)',
                        borderRadius: 2, opacity: i === 14 ? 0.5 : 0.9,
                      }} />
                    ))}
                  </div>
                </div>
              </article>

              {/* INLINE #4 */}
              <article className="DY-inl">
                <div className="DY-inl-v"><span className="n">−60</span><span className="u">%</span></div>
                <h3 className="DY-inl-h3">源站負擔分流，基建成本下降</h3>
                <p className="DY-inl-p">動態內容由邊緣處理 prefetch 與連接終止，源站<b>只承擔核心邏輯</b>，毋須因用戶增長而頻繁擴容。</p>
              </article>
            </div>
          </div>

          {/* mid CTA */}
        </div>
      </section>
    </>
  );
}

window.DynamicBenefits = DynamicBenefits;