/* global React */

// ============================================================
// Video CDN, Capabilities + Why UD (merged section)
// Editorial matrix (latency + protocols) + 6 cards mixing
// capabilities and UD differentiators.
// ============================================================
const VD_CAP_CSS = `
.VD-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}
.VD-cap-head{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:end;margin-bottom:48px}
.VD-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;max-width:680px}
.VD-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}
.VD-cap-lede{margin:0;font-size:16.5px;line-height:1.7;color:#475569;max-width:480px;text-wrap:pretty}
.VD-cap-lede strong{color:#0F2A47;font-weight:600}

/* ---------- Protocol matrix ---------- */
.VD-mx{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:28px}
.VD-mx-card{position:relative;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);border:1px solid rgba(15,42,71,0.08);border-radius:20px;padding:32px 32px 28px;overflow:hidden}
.VD-mx-card.dark{background:radial-gradient(120% 120% at 100% 0%,#1A3A5A 0%,#0F2A47 65%);color:#fff;border-color:transparent}
.VD-mx-card.dark::before{content:'';position:absolute;top:-90px;right:-90px;width:280px;height:280px;background:radial-gradient(circle,rgba(167,139,250,0.30) 0%,transparent 70%);pointer-events:none}

.VD-mx-cap{font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:2px;color:#6D28D9;text-transform:uppercase}
.VD-mx-card.dark .VD-mx-cap{color:#C4B5FD}
.VD-mx-h3{margin:10px 0 0;font-size:24px;font-weight:700;letter-spacing:-.4px;color:#0F2A47;line-height:1.3;text-wrap:balance}
.VD-mx-card.dark .VD-mx-h3{color:#fff}
.VD-mx-p{margin:10px 0 0;font-size:14.5px;line-height:1.7;color:#475569;text-wrap:pretty}
.VD-mx-card.dark .VD-mx-p{color:rgba(255,255,255,0.74)}
.VD-mx-p b{color:#0F2A47;font-weight:600}
.VD-mx-card.dark .VD-mx-p b{color:#fff}

/* Chip rows */
.VD-mx-rows{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.VD-mx-row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:14px 0;border-top:1px dashed rgba(15,42,71,0.14)}
.VD-mx-row:first-child{border-top:0;padding-top:0}
.VD-mx-row-label{font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:1.4px;color:#94a3b8;text-transform:uppercase}
.VD-mx-chips{display:flex;flex-wrap:wrap;gap:6px}
.VD-mx-chip{padding:6px 10px;font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.5px;color:#7C3AED;background:rgba(167,139,250,0.14);border:1px solid rgba(124,58,237,0.20);border-radius:7px;font-variant-numeric:tabular-nums}

/* Latency table in dark card */
.VD-lat{margin-top:24px;background:rgba(255,255,255,0.04);border:1px solid rgba(196,181,253,0.18);border-radius:12px;padding:6px 18px}
.VD-lat-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px 0;border-top:1px solid rgba(196,181,253,0.12);font-size:13px;color:rgba(255,255,255,0.78);align-items:center}
.VD-lat-row:first-of-type{border-top:0}
.VD-lat-row b{font-family:'Chakra Petch','Inter',sans-serif;font-size:15px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.VD-lat-row b .u{font-size:13px;color:rgba(196,181,253,0.7);margin-left:2px;font-weight:500}

/* ---------- Card grid (capabilities + UD differentiators) ---------- */
.VD-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.VD-cap-card{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;padding:30px 28px;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.VD-cap-card::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);opacity:0;transition:opacity .2s}
.VD-cap-card:hover{border-color:transparent;transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,58,237,0.12)}
.VD-cap-card:hover::after{opacity:1}
.VD-cap-icon{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,#F3EEFE 0%,#E7DEFB 100%);color:#7C3AED;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(124,58,237,0.10)}
.VD-cap-icon svg{width:24px;height:24px}
.VD-cap-card-h{margin:0;font-size:18px;font-weight:700;letter-spacing:-.2px;color:#0F2A47;line-height:1.35;text-wrap:balance}
.VD-cap-card-p{margin:0;font-size:14.5px;line-height:1.7;color:#475569;text-wrap:pretty}
.VD-cap-card-p b{color:#0F2A47;font-weight:600}

@media (max-width: 1024px){
  .VD-cap{padding:var(--section-pad-y-t) 0}
  .VD-cap-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .VD-mx{grid-template-columns:1fr}
  .VD-caps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .VD-cap{padding:var(--section-pad-y-m) 0}
  .VD-cap-h2{font-size:32px;letter-spacing:-1px}
  .VD-mx-card{padding:26px 22px 22px}
  .VD-mx-h3{font-size:21px}
  .VD-caps{grid-template-columns:1fr}
}
`;

// ---- icons ----
const IcRegion = () => <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.7" /><ellipse cx="12" cy="12" rx="4" ry="9" stroke="currentColor" strokeWidth="1.7" /><line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" strokeWidth="1.7" /></svg>;
const IcABR = () => <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="8" width="3.5" height="10" rx="1" fill="currentColor" /><rect x="8.5" y="5" width="3.5" height="13" rx="1" fill="currentColor" opacity=".75" /><rect x="14" y="10" width="3.5" height="8" rx="1" fill="currentColor" opacity=".55" /><rect x="19.5" y="3" width="3.5" height="15" rx="1" fill="currentColor" opacity=".35" /></svg>;
const IcLock = () => <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="4" y="10.5" width="16" height="10.5" rx="2" stroke="currentColor" strokeWidth="1.7" /><path d="M7 10.5V7a5 5 0 0 1 10 0v3.5" stroke="currentColor" strokeWidth="1.7" /><circle cx="12" cy="15.5" r="1.6" fill="currentColor" /></svg>;
const IcAnalytics = () => <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M3 19 L9 13 L13 16 L20 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /><circle cx="20" cy="7" r="2.2" fill="currentColor" /><path d="M3 21 L21 21" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" opacity=".4" /></svg>;
const IcUptime = () => <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="8.5" stroke="currentColor" strokeWidth="1.7" /><path d="M12 4 a 8 8 0 1 1 -7 4" stroke="currentColor" strokeWidth="2.4" fill="none" strokeLinecap="round" /><path d="M12 7 V 12 L 16 14" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" /></svg>;
const IcChat = () => <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 6 v 10 q 0 2 2 2 h 8 l 4 3 v -3 h 0 q 2 0 2 -2 v -10 q 0 -2 -2 -2 h -12 q -2 0 -2 2 z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round" /><circle cx="9" cy="11" r="1.1" fill="currentColor" /><circle cx="13" cy="11" r="1.1" fill="currentColor" /><circle cx="17" cy="11" r="1.1" fill="currentColor" /></svg>;

const VD_CARDS = [
  { icon: <IcRegion />,    h: '多區域節點交付',    p: '一個帳戶同時啟用 <b>本港、中國內地與全球</b>節點，按觀眾所在地分配最佳線路。' },
  { icon: <IcABR />,       h: '自適應位元率 (ABR)', p: '兼容主流串流伺服器與封裝器，自動將 <b>4K / 1080p / 720p / 480p</b> 多碼流推送至 CDN，觀眾端按網速自動切換。' },
  { icon: <IcLock />,      h: '內容保護與授權控制', p: '<b>簽名連結（Token URL）</b>、<b>防盜鏈</b>、<b>地區限制</b>三種授權機制，可單獨或組合使用。' },
  { icon: <IcAnalytics />, h: '即時觀看分析',       p: '控制台即時監察<b>並發人數、頻寬、命中率</b>，按地區與裝置分流，直播當日可實時調整。' },
  { icon: <IcUptime />,    h: '99.99% 正常運行',    p: '邊緣節點互為備援，直播當日節點異常會<b>自動切換</b>，業務不中斷。' },
  { icon: <IcChat />,      h: '24 × 7 香港本地中文支援', p: '電郵、電話及即時通訊全天候待命，直播當日突發狀況有<b>真人即時回應</b>。' },
];

function VideoCapabilities() {
  return (
    <>
      <style>{VD_CAP_CSS}</style>
      <section className="VD-cap" data-screen-label="07 Features &amp; Why UD">
        <div className="container">
          <div className="VD-cap-head">
            <h2 className="VD-cap-h2">影片業務所需，<span className="accent">UD 一站備齊</span></h2>
            <p className="VD-cap-lede">
              從<strong>協定、低延時、內容保護到本地中文支援</strong>，整合成一個影片 CDN 服務。
            </p>
          </div>

          {/* Editorial matrix: latency + protocol coverage */}
          <div className="VD-mx">
            <div className="VD-mx-card dark">
              <p className="VD-mx-cap">直播低延時</p>
              <h3 className="VD-mx-h3">針對 HLS 與 MPEG-DASH 邊緣 chunk 處理優化</h3>
              <p className="VD-mx-p">
                支援 <b>低延時直播配置（LL-HLS / LL-DASH）</b>，視乎客戶配置，端到端延遲可由 30 秒級壓縮至秒級。
              </p>
              <div className="VD-lat">
                <div className="VD-lat-row"><span>傳統 HLS / DASH</span><b>20 – 30<span className="u">秒</span></b></div>
                <div className="VD-lat-row"><span>UD ｜ 標準配置</span><b>6 – 12<span className="u">秒</span></b></div>
                <div className="VD-lat-row"><span>UD ｜ LL-HLS / LL-DASH</span><b style={{ color: '#86efac' }}>2 – 5<span className="u">秒</span></b></div>
              </div>
            </div>

            <div className="VD-mx-card">
              <p className="VD-mx-cap">多協定、多格式支援</p>
              <h3 className="VD-mx-h3">原生兼容主流播放器與裝置生態</h3>
              <p className="VD-mx-p">
                直播協定與點播檔案<b>全部原生支援</b>，毋須額外封裝器或編碼器整合。
              </p>
              <div className="VD-mx-rows">
                <div className="VD-mx-row">
                  <div className="VD-mx-row-label">直播</div>
                  <div className="VD-mx-chips">
                    <span className="VD-mx-chip">HLS</span>
                    <span className="VD-mx-chip">MPEG-DASH</span>
                    <span className="VD-mx-chip">MSS</span>
                    <span className="VD-mx-chip">HDS</span>
                  </div>
                </div>
                <div className="VD-mx-row">
                  <div className="VD-mx-row-label">點播</div>
                  <div className="VD-mx-chips">
                    <span className="VD-mx-chip">MP4</span>
                    <span className="VD-mx-chip">M3U8</span>
                    <span className="VD-mx-chip">MOV</span>
                    <span className="VD-mx-chip">WebM</span>
                    <span className="VD-mx-chip">AVI</span>
                    <span className="VD-mx-chip">FLV</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* 6 cards: capabilities + UD differentiators */}
          <div className="VD-caps">
            {VD_CARDS.map((c, i) => (
              <div className="VD-cap-card" key={i}>
                <div className="VD-cap-icon">{c.icon}</div>
                <h3 className="VD-cap-card-h">{c.h}</h3>
                <p className="VD-cap-card-p" dangerouslySetInnerHTML={{ __html: c.p }} />
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

window.VideoCapabilities = VideoCapabilities;