/* global React */

// ============================================================
// Dynamic CDN, "What is" (rev 3)
// Right column: industry highlight (gaming / finance heroes + chips)
// ============================================================
const DY_WHAT_CSS = `
.DY-what{position:relative;background:#fff;padding:var(--section-pad-y-d) 0;font-family:'Noto Sans HK','Noto Sans TC','Inter',sans-serif;color:#0F2A47}
.DY-what-inner{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center}

.DY-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:780px}
.DY-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-lede{margin-top:24px;font-size:17px;line-height:1.8;color:#475569;max-width:560px;text-wrap:pretty}
.DY-lede strong{color:#0F2A47;font-weight:600}
.DY-lede + .DY-lede{margin-top:18px}
.DY-lede.DY-lede-hl{position:relative;margin-top:22px;padding:22px 26px;background:linear-gradient(120deg,rgba(167,139,250,0.10) 0%,rgba(124,58,237,0.07) 100%);border-radius:14px;color:#3b2d59}
.DY-lede.DY-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%)}
.DY-lede.DY-lede-hl strong{color:#6D28D9}

/* ---------- Industry showcase ---------- */
.DY-ind{justify-self:end;width:100%;max-width:580px;display:flex;flex-direction:column;gap:14px}
.DY-ind-cap{margin:0 0 4px;font-size:14px;font-weight:600;color:#7C3AED;line-height:1.4}
.DY-ind-heroes{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.DY-h{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.DY-h:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,58,237,0.10);border-color:rgba(124,58,237,0.30)}
.DY-h.dark{background:radial-gradient(120% 120% at 88% 0%,#33215e 0%,#1a2347 45%,#0F2A47 100%);color:#fff;border-color:transparent}
.DY-h.dark::before{content:'';position:absolute;top:-60px;right:-60px;width:160px;height:160px;background:radial-gradient(circle,rgba(167,139,250,0.40) 0%,transparent 70%);pointer-events:none}
.DY-h-top{display:flex;align-items:center;gap:10px}
.DY-h-ic{width:38px;height:38px;border-radius:10px;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-h.dark .DY-h-ic{background:linear-gradient(135deg,rgba(167,139,250,0.28),rgba(124,58,237,0.18));color:#C4B5FD;box-shadow:inset 0 0 0 1px rgba(196,181,253,0.22)}
.DY-h-ic svg{width:22px;height:22px}
.DY-h-t{margin:0;font-size:17px;font-weight:700;color:inherit;letter-spacing:-.2px;line-height:1.25}
.DY-h-viz{height:74px;display:flex;align-items:center;justify-content:center}
.DY-h-viz svg{width:100%;height:100%;display:block;overflow:visible}
.DY-h-p{margin:0;font-size:13.5px;line-height:1.55;color:#64748b;text-wrap:pretty}
.DY-h.dark .DY-h-p{color:rgba(255,255,255,0.72)}
.DY-h-p b{color:#0F2A47;font-weight:600}
.DY-h.dark .DY-h-p b{color:#fff}

/* Chip row */
.DY-ind-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.DY-ch{background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;transition:all .15s}
.DY-ch:hover{border-color:rgba(124,58,237,0.30);background:#FAFAFE;transform:translateY(-1px)}
.DY-ch-ic{width:30px;height:30px;border-radius:8px;background:#F3EEFE;color:#7C3AED;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.DY-ch-ic svg{width:18px;height:18px}
.DY-ch-t{margin:0;font-size:14.5px;font-weight:600;color:#0F2A47;letter-spacing:-.1px;line-height:1.3}

@media (max-width: 1024px){
  .DY-what{padding:var(--section-pad-y-t) 0}
  .DY-what-inner{grid-template-columns:1fr;gap:52px}
  .DY-ind{justify-self:start;max-width:580px}
}
@media (max-width: 640px){
  .DY-what{padding:var(--section-pad-y-m) 0}
  .DY-h2{font-size:32px;letter-spacing:-1px}
  .DY-lede{font-size:15.5px}
}
`;

// ----- Industry icons -----
const DyInd = {
  finance: () => (<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M5 18 L 10 13 L 14 16 L 19 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    <path d="M14 8 L19 8 L19 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>),
  game: () => (<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <rect x="2.5" y="8" width="19" height="10" rx="5" stroke="currentColor" strokeWidth="1.8" />
    <line x1="7" y1="11" x2="7" y2="15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
    <line x1="5" y1="13" x2="9" y2="13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
    <circle cx="16" cy="12" r="1.4" fill="currentColor" />
    <circle cx="18.5" cy="14.5" r="1.4" fill="currentColor" />
  </svg>),
  chat: () => (<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M 4 6 L 4 16 Q 4 18 6 18 L 13 18 L 17 21 L 17 18 L 18 18 Q 20 18 20 16 L 20 6 Q 20 4 18 4 L 6 4 Q 4 4 4 6 Z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round" />
    <circle cx="9" cy="11" r="1.1" fill="currentColor" />
    <circle cx="12" cy="11" r="1.1" fill="currentColor" />
    <circle cx="15" cy="11" r="1.1" fill="currentColor" />
  </svg>),
  live: () => (<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <rect x="3" y="5" width="14" height="10" rx="2" stroke="currentColor" strokeWidth="1.8" />
    <path d="M17 8 L 21 6 L 21 14 L 17 12" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round" />
    <circle cx="6.5" cy="8.5" r="1.5" fill="currentColor" />
  </svg>),
  collab: () => (<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <circle cx="8" cy="9" r="3" stroke="currentColor" strokeWidth="1.8" />
    <circle cx="16" cy="9" r="3" stroke="currentColor" strokeWidth="1.8" />
    <path d="M3 19 Q 3 14 8 14 Q 11 14 12 16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none" />
    <path d="M12 16 Q 13 14 16 14 Q 21 14 21 19" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none" />
  </svg>),
  iot: () => (<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <circle cx="12" cy="12" r="2.2" fill="currentColor" />
    <path d="M 12 4 Q 16 8 16 12 Q 16 16 12 20" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" />
    <path d="M 12 4 Q 8 8 8 12 Q 8 16 12 20" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" />
    <path d="M 4 12 L 20 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
  </svg>),
};

// Finance mini-viz: rising candlestick chart with live price ticker
function FinanceViz() {
  return (
    <svg viewBox="0 0 220 74" aria-hidden="true">
      {/* baseline grid */}
      <line x1="0" y1="58" x2="220" y2="58" stroke="rgba(196,181,253,0.18)" strokeDasharray="2 4" />
      {/* candles, rising trend */}
      {[
        { x: 12,  o: 50, c: 44, h: 40, l: 54, up: true },
        { x: 32,  o: 44, c: 38, h: 34, l: 46, up: true },
        { x: 52,  o: 38, c: 42, h: 36, l: 44, up: false },
        { x: 72,  o: 42, c: 32, h: 28, l: 44, up: true },
        { x: 92,  o: 32, c: 26, h: 22, l: 34, up: true },
        { x: 112, o: 26, c: 30, h: 24, l: 32, up: false },
        { x: 132, o: 30, c: 20, h: 16, l: 32, up: true },
        { x: 152, o: 20, c: 14, h: 10, l: 22, up: true },
      ].map((c, i) => (
        <g key={i}>
          <line x1={c.x} y1={c.h} x2={c.x} y2={c.l} stroke={c.up ? '#22d3ee' : '#f472b6'} strokeWidth="1.2" opacity=".75" />
          <rect x={c.x - 4} y={Math.min(c.o, c.c)} width="8" height={Math.abs(c.o - c.c)}
            fill={c.up ? '#22d3ee' : '#f472b6'} opacity=".9" rx="1" />
        </g>
      ))}
      {/* live price box */}
      <g transform="translate(180, 12)">
        <rect x="-4" y="-12" width="40" height="22" rx="6" fill="#5EEAD4" />
        <text x="16" y="3" textAnchor="middle"
          fontFamily="'Inter',sans-serif" fontSize="11" fontWeight="700" fill="#0F2A47">+2.4%</text>
        <circle cx="2" cy="-1" r="2" fill="#0F2A47">
          <animate attributeName="opacity" values="1;0.3;1" dur="1.2s" repeatCount="indefinite" />
        </circle>
      </g>
    </svg>
  );
}

// Gaming mini-viz: ping bars with a live ping number
function GameViz() {
  const bars = 10;
  return (
    <svg viewBox="0 0 220 74" aria-hidden="true">
      {/* ping bars, short = low latency */}
      {Array.from({ length: bars }).map((_, i) => {
        const h = 8 + Math.abs(Math.sin(i * 0.9)) * 16 + (i % 3) * 2;
        const x = 6 + i * 12;
        return (
          <rect key={i} x={x} y={50 - h} width="7" height={h} rx="1.5"
            fill="#A855F7" opacity={0.55 + (i % 3) * 0.15} />
        );
      })}
      {/* ping readout, placed clear of bars */}
      <g transform="translate(212, 30)">
        <text textAnchor="end" fontFamily="'Inter',sans-serif" fontSize="30" fontWeight="800" fill="#fff" letterSpacing="-1">18</text>
        <text textAnchor="end" y="18" fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif" fontSize="11" fontWeight="700" fill="#C4B5FD">毫秒</text>
      </g>
    </svg>
  );
}

function DynamicWhat() {
  return (
    <>
      <style>{DY_WHAT_CSS}</style>
      <section className="DY-what" data-screen-label="02 What is Dynamic CDN">
        <div className="container DY-what-inner">
          <div>
            <h2 className="DY-h2">甚麼是<br /><span className="accent">動態 CDN？</span></h2>
            <p className="DY-lede">
              動態 CDN 專為實時數據與動態內容加速而設。在邊緣節點建立<strong>持久 WebSocket 連接</strong>並完成 TLS 終結，
              使客戶端與源站之間的請求與回應，以最短延遲、最穩定路線完成往返。
            </p>
            <p className="DY-lede DY-lede-hl">
              <strong>動態 CDN 不止是加速。</strong>它集成雙向連接、API 加速、最佳線路自動選擇、
              動態內容預擷取與邊緣安全，是現代實時應用的基本配置。
            </p>
          </div>

          <div className="DY-ind">
            <p className="DY-ind-cap">最常用此方案的行業</p>

            <div className="DY-ind-heroes">
              <article className="DY-h">
                <div className="DY-h-top">
                  <div className="DY-h-ic"><DyInd.finance /></div>
                  <h3 className="DY-h-t">金融科技</h3>
                </div>
                <div className="DY-h-viz"><FinanceViz /></div>
                <p className="DY-h-p">外匯、加密貨幣交易報價以<b>毫秒</b>決定盈虧。</p>
              </article>

              <article className="DY-h dark">
                <div className="DY-h-top">
                  <div className="DY-h-ic"><DyInd.game /></div>
                  <h3 className="DY-h-t">線上遊戲</h3>
                </div>
                <div className="DY-h-viz"><GameViz /></div>
                <p className="DY-h-p">玩家操作即時同步，<b>低 ping</b> 才能贏。</p>
              </article>
            </div>

            <div className="DY-ind-chips">
              <div className="DY-ch">
                <div className="DY-ch-ic"><DyInd.chat /></div>
                <h4 className="DY-ch-t">即時通訊與視訊會議</h4>
              </div>
              <div className="DY-ch">
                <div className="DY-ch-ic"><DyInd.live /></div>
                <h4 className="DY-ch-t">直播互動與帶貨</h4>
              </div>
              <div className="DY-ch">
                <div className="DY-ch-ic"><DyInd.collab /></div>
                <h4 className="DY-ch-t">即時協作與 SaaS</h4>
              </div>
              <div className="DY-ch">
                <div className="DY-ch-ic"><DyInd.iot /></div>
                <h4 className="DY-ch-t">IoT 與雲端 API</h4>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.DynamicWhat = DynamicWhat;