/* global React */

// ============================================================
// Dynamic CDN, Capabilities (bento + protocol strip)
// Merges 「主要能力」+ trust elements per markdown V3
// ============================================================
const DY_CAP_CSS = `
.DY-cap{position:relative;background:#fff;padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47}
.DY-cap-head{max-width:820px;margin-bottom:52px}
.DY-cap-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-cap-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-cap-lede{margin-top:22px;font-size:17px;line-height:1.75;color:#475569;max-width:620px;text-wrap:pretty}

/* Protocol strip, sits between header & bento */
.DY-proto{margin-bottom:36px;padding:24px 28px;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);border:1px solid rgba(15,42,71,0.08);border-radius:18px;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center}
.DY-proto-lbl{display:flex;flex-direction:column;gap:4px;min-width:180px}
.DY-proto-lbl .v{font-size:18px;font-weight:700;color:#0F2A47;letter-spacing:-.3px;line-height:1.3}
.DY-proto-lbl .vs{font-size:14px;font-weight:500;color:#64748b;line-height:1.4}
.DY-proto-list{display:flex;flex-wrap:wrap;gap:8px}
.DY-proto-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:999px;font-family:'Inter','Noto Sans HK',sans-serif;font-size:14px;font-weight:700;color:#0F2A47;letter-spacing:-.1px;transition:all .15s}
.DY-proto-chip:hover{border-color:#7C3AED;color:#7C3AED;transform:translateY(-1px)}
.DY-proto-chip .dot{width:7px;height:7px;border-radius:50%;background:#7C3AED;flex:none}
.DY-proto-chip.alt .dot{background:#A855F7}

/* Bento grid, 1 hero (col span 2 row span 2) + 5 cards */
.DY-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:16px}
.DY-bx{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;padding:30px 30px 28px;display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden}
.DY-bx:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(124,58,237,0.10);border-color:rgba(124,58,237,0.30)}
.DY-bx-hero{grid-column:span 2;grid-row:span 2;background:radial-gradient(120% 120% at 88% 0%,#33215e 0%,#1a2347 45%,#0F2A47 100%);color:#fff;border-color:transparent;padding:40px 40px 36px}
.DY-bx-hero::before{content:'';position:absolute;top:-90px;right:-90px;width:280px;height:280px;background:radial-gradient(circle,rgba(167,139,250,0.42) 0%,transparent 70%);pointer-events:none}
.DY-bx-wide{grid-column:span 2}

.DY-bx-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#F3EEFE 0%,#E7DEFB 100%);color:#7C3AED;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(124,58,237,0.10)}
.DY-bx-hero .DY-bx-icon{background:linear-gradient(135deg,rgba(167,139,250,0.28) 0%,rgba(124,58,237,0.18) 100%);color:#d8caff;box-shadow:inset 0 0 0 1px rgba(196,181,253,0.22)}
.DY-bx-icon svg{width:28px;height:28px}
.DY-bx-h3{margin:0;font-size:21px;font-weight:700;letter-spacing:-.3px;line-height:1.3;color:#0F2A47;text-wrap:balance}
.DY-bx-hero .DY-bx-h3{color:#fff;font-size:26px}
.DY-bx-p{margin:0;font-size:14.8px;line-height:1.65;color:#475569;text-wrap:pretty;max-width:520px}
.DY-bx-hero .DY-bx-p{color:rgba(255,255,255,0.78);font-size:15.5px}
.DY-bx-p b{color:#0F2A47;font-weight:600}
.DY-bx-hero .DY-bx-p b{color:#fff}

/* Smart-routing diagram inside hero */
.DY-route{margin-top:auto;padding-top:14px}
.DY-route svg{width:100%;height:auto;display:block;max-height:160px}

@media (max-width: 1024px){
  .DY-cap{padding:var(--section-pad-y-t) 0}
  .DY-proto{grid-template-columns:1fr;gap:18px}
  .DY-bento{grid-template-columns:repeat(2,1fr)}
  .DY-bx-hero{grid-column:span 2;grid-row:auto}
  .DY-bx-wide{grid-column:span 2}
}
@media (max-width: 640px){
  .DY-cap{padding:var(--section-pad-y-m) 0}
  .DY-cap-head{margin-bottom:40px}
  .DY-cap-h2{font-size:32px;letter-spacing:-1px}
  .DY-bento{grid-template-columns:1fr}
  .DY-bx-hero,.DY-bx-wide{grid-column:auto}
  .DY-bx{padding:26px 24px 24px}
  .DY-bx-hero{padding:32px 26px 28px}
  .DY-bx-hero .DY-bx-h3{font-size:22px}
}
`;

const DyIc = {
  webSocket: () => (<svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
    <path d="M5 16 L11 10 L16 16 L21 10 L27 16 L21 22 L16 16 L11 22 Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    <circle cx="5" cy="16" r="2.2" fill="currentColor" />
    <circle cx="27" cy="16" r="2.2" fill="currentColor" />
  </svg>),
  route: () => (<svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
    <circle cx="6" cy="16" r="2.4" fill="currentColor" />
    <circle cx="26" cy="16" r="2.4" fill="currentColor" />
    <path d="M 8 16 Q 16 4 24 16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none" />
    <path d="M 8 16 Q 16 28 24 16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none" strokeDasharray="3 3" opacity=".55" />
  </svg>),
  globe: () => (<svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
    <circle cx="16" cy="16" r="11" stroke="currentColor" strokeWidth="2" />
    <ellipse cx="16" cy="16" rx="4.5" ry="11" stroke="currentColor" strokeWidth="1.7" />
    <line x1="5" y1="12" x2="27" y2="12" stroke="currentColor" strokeWidth="1.7" />
    <line x1="5" y1="20" x2="27" y2="20" stroke="currentColor" strokeWidth="1.7" />
  </svg>),
  prefetch: () => (<svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
    <rect x="5" y="8" width="16" height="16" rx="2" stroke="currentColor" strokeWidth="2" />
    <path d="M 21 16 L 27 16 M 24 13 L 27 16 L 24 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    <line x1="9" y1="13" x2="17" y2="13" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
    <line x1="9" y1="17" x2="17" y2="17" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
    <line x1="9" y1="21" x2="13" y2="21" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
  </svg>),
  shield: () => (<svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
    <path d="M 16 4 L 27 8 L 27 16 Q 27 24 16 28 Q 5 24 5 16 L 5 8 Z" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round" />
    <path d="M 11 16 L 14 19 L 21 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>),
  chat: () => (<svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
    <path d="M 5 8 L 5 22 Q 5 25 8 25 L 18 25 L 23 29 L 23 25 L 25 25 Q 28 25 28 22 L 28 8 Q 28 5 25 5 L 8 5 Q 5 5 5 8 Z" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round" />
    <circle cx="12" cy="15" r="1.6" fill="currentColor" />
    <circle cx="16.5" cy="15" r="1.6" fill="currentColor" />
    <circle cx="21" cy="15" r="1.6" fill="currentColor" />
  </svg>),
};

// Best-route diagram inside the hero bento
function DYRouteViz() {
  return (
    <div className="DY-route">
      <svg viewBox="0 -8 480 176" aria-hidden="true">
        <defs>
          <linearGradient id="dy-good" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0%" stopColor="#C4B5FD" />
            <stop offset="100%" stopColor="#A855F7" />
          </linearGradient>
        </defs>
        {/* endpoints */}
        <g>
          <circle cx="40" cy="80" r="14" fill="#0F2A47" stroke="#A855F7" strokeWidth="2" />
          <text x="40" y="112" textAnchor="middle" fontFamily="'Noto Sans HK','Inter',sans-serif" fontSize="11" fontWeight="700" fill="#fff">客戶端</text>
          <circle cx="440" cy="80" r="14" fill="#0F2A47" stroke="#A855F7" strokeWidth="2" />
          <text x="440" y="112" textAnchor="middle" fontFamily="'Noto Sans HK','Inter',sans-serif" fontSize="11" fontWeight="700" fill="#fff">源站</text>
        </g>

        {/* congested route (red, dashed, with X) */}
        <path d="M 54 80 Q 160 12 240 30 Q 330 50 426 76" fill="none" stroke="#ef4444" strokeWidth="1.8" strokeDasharray="5 5" opacity="0.55" />
        <g transform="translate(232,30)">
          <circle r="11" fill="#0F2A47" stroke="#ef4444" strokeWidth="1.8" />
          <line x1="-4" y1="-4" x2="4" y2="4" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" />
          <line x1="4" y1="-4" x2="-4" y2="4" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" />
          <g transform="translate(0,-19)">
            <rect x="-32" y="-11" width="64" height="20" rx="10" fill="#fff" stroke="#ef4444" strokeWidth="1.2" />
            <text x="0" y="3" textAnchor="middle" fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif" fontSize="11" fontWeight="700" fill="#ef4444">擠塞線路</text>
          </g>
        </g>

        {/* optimal route (purple, solid + travelling packet) */}
        <path id="dy-opt-path" d="M 54 80 Q 160 148 240 130 Q 330 110 426 84" fill="none" stroke="url(#dy-good)" strokeWidth="2.6" strokeLinecap="round" />
        <g transform="translate(232,131)">
          <rect x="-52" y="-13" width="104" height="24" rx="12" fill="#7C3AED" />
          <text x="0" y="4" textAnchor="middle" fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif" fontSize="12" fontWeight="700" fill="#fff">自動繞道</text>
        </g>
        <circle r="4.5" fill="#C4B5FD">
          <animateMotion dur="2.6s" repeatCount="indefinite">
            <mpath href="#dy-opt-path" />
          </animateMotion>
        </circle>
      </svg>
    </div>
  );
}

const DY_PROTOCOLS = [
  { k: 'WebSocket' }, { k: 'REST' }, { k: 'GraphQL' }, { k: 'gRPC' },
  { k: 'HTTP/3', alt: true }, { k: 'QUIC', alt: true },
  { k: 'TLS 1.3', alt: true }, { k: 'HTTP/2', alt: true },
];

function DynamicCapabilities() {
  return (
    <>
      <style>{DY_CAP_CSS}</style>
      <section className="DY-cap" data-screen-label="05 Capabilities">
        <div className="container">
          <div className="DY-cap-head">
            <h2 className="DY-cap-h2">為實時應用而設的<span className="accent">核心功能</span></h2>
            <p className="DY-cap-lede">
              即時通訊、實時交易、API 密集型應用都能直接接入使用，毋須變更現有架構。
            </p>
          </div>

          {/* Protocol badge strip */}
          <div className="DY-proto">
            <div className="DY-proto-lbl">
              <span className="v">支援主流協定</span>
              <span className="vs">原生支援，無須額外配置</span>
            </div>
            <div className="DY-proto-list">
              {DY_PROTOCOLS.map((p) => (
                <span key={p.k} className={`DY-proto-chip ${p.alt ? 'alt' : ''}`}>
                  <span className="dot" />{p.k}
                </span>
              ))}
            </div>
          </div>

          {/* Bento */}
          <div className="DY-bento">
            {/* HERO, Best route */}
            <article className="DY-bx DY-bx-hero">
              <div className="DY-bx-icon"><DyIc.route /></div>
              <h3 className="DY-bx-h3">最佳線路智能選擇</h3>
              <p className="DY-bx-p">
                實時偵測網絡擠塞點，<b>自動繞道</b>，配合 <b>99.99% 服務正常運行</b>承諾，業務全程在線。
              </p>
              <DYRouteViz />
            </article>

            {/* WebSocket */}
            <article className="DY-bx">
              <div className="DY-bx-icon"><DyIc.webSocket /></div>
              <h3 className="DY-bx-h3">WebSocket 與多協定原生支援</h3>
              <p className="DY-bx-p">
                邊緣節點完成 SSL / TLS termination，<b>毫秒級往返延遲</b>。
              </p>
            </article>

            {/* Multi-region */}
            <article className="DY-bx">
              <div className="DY-bx-icon"><DyIc.globe /></div>
              <h3 className="DY-bx-h3">多區域節點交付</h3>
              <p className="DY-bx-p">
                一個帳戶同時啟用<b>本港、中國內地、全球節點</b>，按用戶來源自動分配最佳線路。
              </p>
            </article>

            {/* Prefetch */}
            <article className="DY-bx">
              <div className="DY-bx-icon"><DyIc.prefetch /></div>
              <h3 className="DY-bx-h3">動態內容預擷取與連接管理</h3>
              <p className="DY-bx-p">
                針對可預測模式的請求主動 <b>prefetch</b>，配合持久連接優化，將下次請求延遲降到最低，用戶感受不到「冷啟動」。
              </p>
            </article>

            {/* Security */}
            <article className="DY-bx">
              <div className="DY-bx-icon"><DyIc.shield /></div>
              <h3 className="DY-bx-h3">邊緣安全免費內建</h3>
              <p className="DY-bx-p">
                免費憑證、網頁應用程式防火牆、阻斷服務攻擊防護。API 可額外設定<b>速率限制與 IP 白名單</b>。
              </p>
            </article>

            {/* Support */}
            <article className="DY-bx">
              <div className="DY-bx-icon"><DyIc.chat /></div>
              <h3 className="DY-bx-h3">24×7 香港本地中文支援</h3>
              <p className="DY-bx-p">
                電郵、電話與即時通訊全天候待命，<b>真人</b>中文回應，毋須輪候。
              </p>
            </article>
          </div>
        </div>
      </section>
    </>
  );
}

window.DynamicCapabilities = DynamicCapabilities;