/* global React */

// ============================================================
// Hong Kong CDN, "What is" (editorial split + bottleneck viz)
// ============================================================
const HK_WHAT_CSS = `
.HK-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}
.HK-what-inner{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center}

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

.HK-lede{margin-top:24px;font-size:17px;line-height:1.8;color:#475569;max-width:540px;text-wrap:pretty}
.HK-lede strong{color:#0F2A47;font-weight:600}
.HK-lede + .HK-lede{margin-top:18px}
.HK-lede.HK-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}
.HK-lede.HK-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%)}
.HK-lede.HK-lede-hl strong{color:#6D28D9}

/* ---------- Right column: bottleneck → edge comparison ---------- */
.HK-cmp{position:relative;width:100%;max-width:560px;justify-self:end;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);border:1px solid rgba(15,42,71,0.08);border-radius:20px;padding:28px 28px 24px;overflow:hidden}
.HK-cmp-title{margin:0 0 18px;font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:2px;color:#6D28D9;text-transform:uppercase}
.HK-cmp-row{display:grid;grid-template-columns:1fr;gap:8px;padding:18px 0;border-top:1px dashed rgba(15,42,71,0.12)}
.HK-cmp-row:first-of-type{border-top:0;padding-top:0}
.HK-cmp-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.HK-cmp-row-lbl{font-size:14px;font-weight:600;color:#0F2A47;letter-spacing:-.1px}
.HK-cmp-row-lbl small{display:block;font-family:'Chakra Petch',monospace;font-size:13px;font-weight:600;letter-spacing:1.2px;color:#94a3b8;text-transform:uppercase;margin-top:3px}
.HK-cmp-row-ms{font-family:'Chakra Petch','Inter',sans-serif;font-size:30px;font-weight:600;color:#94a3b8;letter-spacing:-.6px;line-height:1;font-variant-numeric:tabular-nums}
.HK-cmp-row.fast .HK-cmp-row-ms{color:#7C3AED}
.HK-cmp-row-ms .u{font-size:14px;color:inherit;opacity:.7;margin-left:2px}
.HK-cmp-bar{position:relative;height:8px;background:rgba(15,42,71,0.06);border-radius:99px;overflow:hidden}
.HK-cmp-bar span{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:#cbd5e1;transition:width .6s}
.HK-cmp-row.fast .HK-cmp-bar span{background:linear-gradient(135deg,#A855F7,#7C3AED)}

/* visualization strip: dotted detour vs short direct hop */
.HK-cmp-viz{position:relative;margin-top:6px;height:32px}
.HK-cmp-viz svg{width:100%;height:100%;display:block;overflow:visible}

.HK-cmp-foot{margin-top:14px;padding-top:18px;border-top:1px solid rgba(15,42,71,0.10);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.HK-cmp-foot-it b{display:block;font-family:'Chakra Petch','Inter',sans-serif;font-size:22px;font-weight:600;color:#7C3AED;letter-spacing:-.4px;line-height:1;font-variant-numeric:tabular-nums}
.HK-cmp-foot-it span{display:block;margin-top:6px;font-size:13px;color:#64748b;letter-spacing:.2px;line-height:1.4}

@media (max-width: 1024px){
  .HK-what{padding:var(--section-pad-y-t) 0}
  .HK-what-inner{grid-template-columns:1fr;gap:48px}
  .HK-cmp{justify-self:start;max-width:560px}
}
@media (max-width: 640px){
  .HK-what{padding:var(--section-pad-y-m) 0}
  .HK-h2{font-size:32px;letter-spacing:-1px}
  .HK-lede{font-size:15.5px}
  .HK-cmp{padding:22px 20px 20px}
  .HK-cmp-row-ms{font-size:24px}
}
`;

function HKWhatComparison() {
  return (
    <div className="HK-cmp">
      <p className="HK-cmp-title">本港用戶首屏載入時間</p>

      <div className="HK-cmp-row slow">
        <div className="HK-cmp-row-head">
          <span className="HK-cmp-row-lbl">沒有 CDN<small>單一源站直接服務</small></span>
          <span className="HK-cmp-row-ms">3.8<span className="u">s</span></span>
        </div>
        <div className="HK-cmp-bar"><span style={{ width: '92%' }} /></div>
        <div className="HK-cmp-viz">
          <svg viewBox="0 0 480 32" preserveAspectRatio="none" aria-hidden="true">
            <circle cx="6" cy="16" r="4" fill="#94a3b8" />
            <circle cx="474" cy="16" r="4" fill="#94a3b8" />
            <path d="M 6 16 Q 60 -2 120 16 T 240 16 T 360 16 T 474 16" stroke="#94a3b8" strokeWidth="1.8" strokeDasharray="4 5" fill="none" opacity="0.85" />
          </svg>
        </div>
      </div>

      <div className="HK-cmp-row fast">
        <div className="HK-cmp-row-head">
          <span className="HK-cmp-row-lbl">UD 香港 CDN<small>邊緣節點就近交付</small></span>
          <span className="HK-cmp-row-ms">&lt;1<span className="u">s</span></span>
        </div>
        <div className="HK-cmp-bar"><span style={{ width: '22%' }} /></div>
        <div className="HK-cmp-viz">
          <svg viewBox="0 0 480 32" preserveAspectRatio="none" aria-hidden="true">
            <circle cx="6" cy="16" r="4" fill="#7C3AED" />
            <circle cx="118" cy="16" r="4" fill="#7C3AED" />
            <line x1="6" y1="16" x2="118" y2="16" stroke="#7C3AED" strokeWidth="2.4" />
            <circle r="3" fill="#fff" stroke="#7C3AED" strokeWidth="2">
              <animateMotion dur="1.6s" repeatCount="indefinite" path="M 6 16 L 118 16" />
            </circle>
            <text x="130" y="20" fontFamily="'Chakra Petch',monospace" fontSize="10" fontWeight="600" fill="#94a3b8" letterSpacing="1.4">EDGE HIT</text>
          </svg>
        </div>
      </div>

    </div>
  );
}

function HongKongWhat() {
  return (
    <>
      <style>{HK_WHAT_CSS}</style>
      <section className="HK-what" data-screen-label="02 What is HK CDN">
        <div className="container HK-what-inner">
          <div>
            <h2 className="HK-h2">甚麼是 <span className="accent">香港 CDN？</span></h2>
            <p className="HK-lede">
              香港 CDN 將你的網站內容快取於分佈香港各區的邊緣節點，本地用戶<strong>從最就近的節點直接取得內容</strong>，大幅縮短載入時間，並讓源站專注處理動態請求。
            </p>
            <p className="HK-lede HK-lede-hl">
              <strong>即使源站位於香港，仍然需要 CDN。</strong>
              單一伺服器在流量集中時會成為樽頸；現代 CDN 同時隱藏源站 IP、整合 WAF 與 DDoS 防護，已是企業網站的基本防線。
            </p>
          </div>
          <HKWhatComparison />
        </div>
      </section>
    </>
  );
}

window.HongKongWhat = HongKongWhat;