/* global React */

// ============================================================
// Video CDN, What is (editorial split + clean delivery diagram)
// ============================================================
const VD_WHAT_CSS = `
.VD-what{position:relative;background:#fff;padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47}
.VD-what-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}

.VD-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;max-width:680px}
.VD-h2 .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

.VD-lede{margin-top:24px;font-size:17px;line-height:1.8;color:#475569;max-width:540px;text-wrap:pretty}
.VD-lede strong{color:#0F2A47;font-weight:600}
.VD-lede + .VD-lede{margin-top:18px}
.VD-lede.hl{position:relative;padding:22px 26px;background:linear-gradient(120deg,rgba(167,139,250,0.10) 0%,rgba(124,58,237,0.06) 100%);border-radius:14px;color:#3b2d59}
.VD-lede.hl::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:99px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%)}
.VD-lede.hl strong{color:#6D28D9}

/* Right, clean delivery diagram, no chrome */
.VD-flow{position:relative;width:100%;max-width:560px;justify-self:end}
.VD-flow-svg{width:100%;height:auto;display:block;overflow:visible}

@media (max-width: 1024px){
  .VD-what{padding:var(--section-pad-y-t) 0}
  .VD-what-inner{grid-template-columns:1fr;gap:40px}
  .VD-flow{justify-self:center;max-width:520px;width:100%}
}
@media (max-width: 640px){
  .VD-what{padding:var(--section-pad-y-m) 0}
  .VD-h2{font-size:32px;letter-spacing:-1px}
  .VD-lede{font-size:15.5px}
  .VD-flow{max-width:100%}
}
`;

// Clean 3-column delivery diagram: Origin → 3 edges → device cluster
function VDFlowDiagram() {
  const W = 480, H = 360;
  const origin = { x: 70, y: 180 };
  const edges = [
    { x: 240, y: 90,  label: '香港' },
    { x: 240, y: 180, label: '中國' },
    { x: 240, y: 270, label: '全球' },
  ];
  const cluster = { x: 410, y: 180 };

  const animPath = (e) => `M ${origin.x + 28} ${origin.y} L ${e.x - 32} ${e.y}`;

  return (
    <svg className="VD-flow-svg" viewBox={`0 0 ${W} ${H}`} role="img" aria-label="影片 CDN 邊緣節點交付：源站到多區域邊緣，再到各裝置觀眾">
      <defs>
        <radialGradient id="vd-orig" cx="40%" cy="35%" r="70%">
          <stop offset="0%" stopColor="#3b2d59" />
          <stop offset="100%" stopColor="#0F2A47" />
        </radialGradient>
        <radialGradient id="vd-edge" cx="40%" cy="35%" r="70%">
          <stop offset="0%" stopColor="#C4B5FD" />
          <stop offset="100%" stopColor="#7C3AED" />
        </radialGradient>
        <radialGradient id="vd-dev" cx="40%" cy="35%" r="70%">
          <stop offset="0%" stopColor="#FAFAFE" />
          <stop offset="100%" stopColor="#E2D8FB" />
        </radialGradient>
      </defs>

      {/* Connection lines + travelling photons */}
      {edges.map((e, i) => (
        <g key={`a-${i}`}>
          <line x1={origin.x + 28} y1={origin.y} x2={e.x - 32} y2={e.y}
            stroke="#A855F7" strokeOpacity="0.4" strokeWidth="1.8" strokeDasharray="4 6" />
          <circle r="4" fill="#7C3AED">
            <animateMotion dur="2.4s" repeatCount="indefinite" begin={`${i * 0.3}s`} path={animPath(e)} />
            <animate attributeName="opacity" values="0;1;0" dur="2.4s" begin={`${i * 0.3}s`} repeatCount="indefinite" />
          </circle>
        </g>
      ))}

      {/* Edge → cluster fan-out */}
      {edges.map((e, i) => {
        const p = `M ${e.x + 32} ${e.y} L ${cluster.x - 50} ${cluster.y}`;
        return (
          <g key={`b-${i}`}>
            <line x1={e.x + 32} y1={e.y} x2={cluster.x - 50} y2={cluster.y}
              stroke="#A855F7" strokeOpacity="0.28" strokeWidth="1.5" />
            <circle r="3" fill="#A855F7">
              <animateMotion dur="1.8s" repeatCount="indefinite" begin={`${i * 0.25}s`} path={p} />
              <animate attributeName="opacity" values="0;1;0" dur="1.8s" begin={`${i * 0.25}s`} repeatCount="indefinite" />
            </circle>
          </g>
        );
      })}

      {/* ORIGIN, big server stack */}
      <g>
        <circle cx={origin.x} cy={origin.y} r="46" fill="rgba(167,139,250,0.10)" />
        <circle cx={origin.x} cy={origin.y} r="32" fill="url(#vd-orig)" stroke="#A855F7" strokeWidth="1.5" />
        {/* server stack glyph */}
        <g stroke="#C4B5FD" strokeWidth="1.8" fill="none" strokeLinecap="round">
          <rect x={origin.x - 16} y={origin.y - 18} width="32" height="10" rx="2" />
          <rect x={origin.x - 16} y={origin.y - 5}  width="32" height="10" rx="2" />
          <rect x={origin.x - 16} y={origin.y + 8}  width="32" height="10" rx="2" />
          <circle cx={origin.x - 11} cy={origin.y - 13} r="1.4" fill="#22C55E" stroke="none" />
          <circle cx={origin.x - 11} cy={origin.y}     r="1.4" fill="#22C55E" stroke="none" />
          <circle cx={origin.x - 11} cy={origin.y + 13} r="1.4" fill="#22C55E" stroke="none" />
        </g>
        <text x={origin.x} y={origin.y + 62} fontFamily="'Noto Sans HK','Inter'" fontSize="14" fontWeight="700" fill="#0F2A47" textAnchor="middle">源站</text>
      </g>

      {/* EDGES, 3 big nodes with labels */}
      {edges.map((e, i) => (
        <g key={`e-${i}`}>
          <circle cx={e.x} cy={e.y} r="34" fill="rgba(167,139,250,0.12)">
            <animate attributeName="r" values="28;38;28" dur="3s"
              begin={`${i * 0.4}s`} repeatCount="indefinite" />
          </circle>
          <circle cx={e.x} cy={e.y} r="22" fill="url(#vd-edge)" stroke="#fff" strokeWidth="3" />
          {/* tiny lightning glyph */}
          <path d={`M ${e.x - 4} ${e.y - 8} L ${e.x - 7} ${e.y + 1} L ${e.x - 1} ${e.y + 1} L ${e.x + 4} ${e.y + 9} L ${e.x + 1} ${e.y - 1} L ${e.x + 7} ${e.y - 1} Z`} fill="#fff" />
          <text x={e.x + 46} y={e.y + 5} fontFamily="'Noto Sans HK','Inter'" fontSize="15" fontWeight="700" fill="#0F2A47" letterSpacing=".2">{e.label}</text>
        </g>
      ))}

      {/* VIEWER CLUSTER, large devices */}
      {/* TV */}
      <g transform={`translate(${cluster.x - 4} ${cluster.y - 64})`}>
        <rect width="42" height="28" rx="3" fill="url(#vd-dev)" stroke="#7C3AED" strokeWidth="1.8" />
        <rect x="6" y="5" width="30" height="18" rx="1.4" fill="#0F2A47" opacity="0.85" />
        <line x1="14" y1="32" x2="28" y2="32" stroke="#7C3AED" strokeWidth="1.8" strokeLinecap="round" />
        {/* play hint */}
        <polygon points="18,11 27,14 18,17" fill="#C4B5FD" />
      </g>
      {/* Phone */}
      <g transform={`translate(${cluster.x + 26} ${cluster.y - 18})`}>
        <rect width="22" height="38" rx="3.5" fill="url(#vd-dev)" stroke="#7C3AED" strokeWidth="1.8" />
        <rect x="2.5" y="4" width="17" height="26" rx="1.4" fill="#0F2A47" opacity="0.85" />
        <circle cx="11" cy="34" r="1.4" fill="#7C3AED" />
        <polygon points="8,15 16,18 8,21" fill="#C4B5FD" />
      </g>
      {/* Tablet */}
      <g transform={`translate(${cluster.x - 18} ${cluster.y + 20})`}>
        <rect width="36" height="48" rx="3.5" fill="url(#vd-dev)" stroke="#7C3AED" strokeWidth="1.8" />
        <rect x="3" y="4" width="30" height="40" rx="1.6" fill="#0F2A47" opacity="0.85" />
        <polygon points="14,20 24,24 14,28" fill="#C4B5FD" />
      </g>

      {/* Cluster label, below devices, centered */}
      <text x={cluster.x + 9} y={cluster.y + 92} fontFamily="'Noto Sans HK','Inter'" fontSize="14" fontWeight="700" fill="#0F2A47" textAnchor="middle">觀眾</text>
    </svg>
  );
}

function VideoWhat() {
  return (
    <>
      <style>{VD_WHAT_CSS}</style>
      <section className="VD-what" data-screen-label="02 What is Video CDN">
        <div className="container VD-what-inner">
          <div>
            <h2 className="VD-h2">甚麼是 <span className="accent">影片 CDN？</span></h2>
            <p className="VD-lede">
              影片 CDN 將你的<strong>直播訊號</strong>與<strong>點播檔案</strong>預先快取於分佈各地的邊緣節點。
              觀眾連線時從最就近的節點取得內容，大幅縮短緩衝時間並降低卡頓機率。
            </p>
            <p className="VD-lede hl">
              <strong>現代影片 CDN 不止是傳輸。</strong>
              集成多協定支援、自適應位元率、內容保護與邊緣安全，是現代影片業務的基本配置。
            </p>
          </div>
          <div className="VD-flow">
            <VDFlowDiagram />
          </div>
        </div>
      </section>
    </>
  );
}

window.VideoWhat = VideoWhat;