/* global React */

// ============================================================
// Hong Kong CDN, Why UD (6 cards) + inline trust stat strip
// Trust merged into Why per MD spec (no separate Trust block).
// ============================================================
const HK_WHY_CSS = `
.HK-why{position:relative;background:#fff;padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47;border-top:1px solid rgba(15,42,71,0.06)}
.HK-why-head{margin-bottom:48px}
.HK-why-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-why-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-why-lede{margin:18px 0 0;font-size:16.5px;line-height:1.7;color:#475569;max-width:560px;text-wrap:pretty}

/* inline 4-stat trust strip, in the header right column */
.HK-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);border:1px solid rgba(124,58,237,0.18);border-radius:18px;padding:6px;min-width:480px}
.HK-trust-it{padding:18px 18px;border-radius:14px;background:#fff;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.HK-trust-it b{font-family:'Chakra Petch','Inter',sans-serif;font-size:30px;font-weight:600;color:#0F2A47;letter-spacing:-.8px;line-height:1;font-variant-numeric:tabular-nums}
.HK-trust-it b .u{font-size:14px;font-weight:600;color:#7C3AED;margin-left:2px;letter-spacing:-.2px}
.HK-trust-it span{font-size:13px;font-weight:600;color:#475569;letter-spacing:-.05px;line-height:1.4}

/* 4 cards, one "flag" card spans differently for editorial rhythm */
.HK-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.HK-why-card{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;padding:34px 30px 32px;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.HK-why-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}
.HK-why-card:hover{border-color:transparent;box-shadow:0 18px 40px rgba(124,58,237,0.13);transform:translateY(-3px)}
.HK-why-card:hover::after{opacity:1}
.HK-why-card.flag{background:radial-gradient(120% 120% at 85% 0%,#33215e 0%,#0F2A47 65%);color:#fff;border-color:transparent;grid-column:span 3;display:grid;grid-template-columns:1fr 0.85fr;gap:48px;align-items:center;padding:42px 44px}
.HK-why-card.flag .HK-why-icon{grid-column:1;grid-row:1}
.HK-why-card.flag .HK-why-h3{grid-column:1;grid-row:2}
.HK-why-card.flag .HK-why-p{grid-column:1;grid-row:3;margin:0}
.HK-why-card.flag .HK-why-flag-viz{grid-column:2;grid-row:1 / span 3;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 40px;border-left:1px solid rgba(196,181,253,0.20);border-top:0;gap:18px}
.HK-why-card.flag .HK-why-flag-viz > .row{display:flex;align-items:center;gap:14px}
.HK-why-card.flag .HK-why-flag-viz .row span:not(.dot){font-family:'Noto Sans HK','Inter',sans-serif;font-size:14.5px;color:#fff;letter-spacing:.2px;font-weight:500}
.HK-why-card.flag .HK-why-flag-viz .dot{width:8px;height:8px;border-radius:50%;background:#C4B5FD;box-shadow:0 0 0 3px rgba(196,181,253,0.18);flex:none}
.HK-why-card.flag::after{display:none}
.HK-why-card.flag::before{content:'';position:absolute;top:-90px;right:-90px;width:280px;height:280px;background:radial-gradient(circle,rgba(167,139,250,0.40) 0%,transparent 70%);pointer-events:none}
.HK-why-card.flag:hover{box-shadow:0 22px 50px rgba(124,58,237,0.40);transform:translateY(-3px)}
.HK-why-card.flag .HK-why-h3{font-size:26px;max-width:480px}

.HK-why-num{position:absolute;top:26px;right:28px;font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:1px;color:rgba(124,58,237,0.75);font-variant-numeric:tabular-nums}
.HK-why-card.flag .HK-why-num{color:rgba(196,181,253,0.75)}
.HK-why-icon{width:54px;height:54px;border-radius:15px;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)}
.HK-why-card.flag .HK-why-icon{background:linear-gradient(135deg,rgba(167,139,250,0.28) 0%,rgba(124,58,237,0.18) 100%);color:#C4B5FD;box-shadow:inset 0 0 0 1px rgba(196,181,253,0.22)}
.HK-why-icon svg{width:30px;height:30px;overflow:visible}

.HK-why-h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.3;text-wrap:balance;color:inherit}
.HK-why-p{margin:0;font-size:15px;line-height:1.7;color:#475569;text-wrap:pretty}
.HK-why-card.flag .HK-why-p{color:rgba(255,255,255,0.80);max-width:520px}
.HK-why-p b{color:#0F2A47;font-weight:600}
.HK-why-card.flag .HK-why-p b{color:#fff}

/* Mini node strip inside the flag card */
.HK-why-flag-viz{margin-top:auto;display:flex;gap:10px;align-items:center;padding-top:18px;border-top:1px solid rgba(196,181,253,0.18);font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;color:rgba(196,181,253,0.7);letter-spacing:1.2px;flex-wrap:wrap}
.HK-why-flag-viz .dot{width:10px;height:10px;border-radius:50%;background:#C4B5FD;box-shadow:0 0 0 3px rgba(196,181,253,0.18)}

@media (max-width: 1080px){
  .HK-why{padding:var(--section-pad-y-t) 0}
  .HK-why-head{margin-bottom:40px}
  .HK-why-grid{grid-template-columns:repeat(2,1fr)}
  .HK-why-card.flag{grid-column:span 2;grid-template-columns:1fr;gap:22px}
  .HK-why-card.flag .HK-why-flag-viz{grid-column:1;grid-row:auto;border-left:0;border-top:1px solid rgba(196,181,253,0.20);padding:18px 0 0;flex-direction:row;flex-wrap:wrap;gap:12px 22px;justify-content:flex-start}
}
@media (max-width: 700px){
  .HK-why{padding:var(--section-pad-y-m) 0}
  .HK-why-grid{grid-template-columns:1fr}
  .HK-why-card.flag{grid-column:auto;padding:32px 26px}
  .HK-why-card.flag .HK-why-h3{font-size:22px}
}
`;

const HkGlyphServers = () => (<svg viewBox="0 0 40 40" fill="none" aria-hidden="true"><rect x="6" y="6" width="28" height="9" rx="2" stroke="currentColor" strokeWidth="2" /><rect x="6" y="17" width="28" height="9" rx="2" stroke="currentColor" strokeWidth="2" /><rect x="6" y="28" width="28" height="9" rx="2" stroke="currentColor" strokeWidth="2" /><circle cx="11" cy="10.5" r="1.2" fill="currentColor" /><circle cx="11" cy="21.5" r="1.2" fill="currentColor" /><circle cx="11" cy="32.5" r="1.2" fill="currentColor" /></svg>);
const HkGlyphUptime = () => (<svg viewBox="0 0 40 40" fill="none" aria-hidden="true"><circle cx="20" cy="20" r="14" stroke="currentColor" strokeWidth="2" /><path d="M 20 8 A 12 12 0 1 1 8 20" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" /><path d="M 20 12 L 20 20 L 26 24" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none" /></svg>);
const HkGlyphPrice = () => (<svg viewBox="0 0 40 40" fill="none" aria-hidden="true"><path d="M 5 5 L 18 5 L 35 22 L 22 35 L 5 18 Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" fill="none" /><circle cx="12.5" cy="12.5" r="2.2" fill="currentColor" /><path d="M 14 26 q 4 -3 8 0" stroke="currentColor" strokeWidth="1.7" fill="none" strokeLinecap="round" /></svg>);
const HkGlyphShield = () => (<svg viewBox="0 0 40 40" fill="none" aria-hidden="true"><path d="M 20 5 L 33 10 L 33 20 Q 33 30 20 35 Q 7 30 7 20 L 7 10 Z" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round" /><path d="M 14 20 L 18 24 L 26 16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" /></svg>);
const HkGlyphChat = () => (<svg viewBox="0 0 40 40" fill="none" aria-hidden="true"><path d="M 6 10 L 6 26 Q 6 30 10 30 L 22 30 L 28 35 L 28 30 L 30 30 Q 34 30 34 26 L 34 10 Q 34 6 30 6 L 10 6 Q 6 6 6 10 Z" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round" /><circle cx="14" cy="18" r="1.8" fill="currentColor" /><circle cx="20" cy="18" r="1.8" fill="currentColor" /><circle cx="26" cy="18" r="1.8" fill="currentColor" /></svg>);
const HkGlyphInvoice = () => (<svg viewBox="0 0 40 40" fill="none" aria-hidden="true"><path d="M 9 5 L 31 5 L 31 35 L 25 31 L 20 35 L 15 31 L 9 35 Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" fill="none" /><line x1="14" y1="14" x2="26" y2="14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /><line x1="14" y1="20" x2="26" y2="20" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /><line x1="14" y1="26" x2="22" y2="26" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>);

const HK_WHY_CARDS = [
  {
    flag: true,
    icon: <HkGlyphServers />,
    title: '5 個本港數據中心，100Gb+ 本地頻寬',
    body: '邊緣節點覆蓋港島、九龍、新界，配備超過 <b>100Gb 本港專用頻寬</b>。大型推廣、流量突發時自動分散負載，平均載入時間維持於 1 秒內。',
    viz: ['MEGA-i', 'MEGA Plus', 'HKCOLO', 'NTT HK', 'EQUINIX'],
  },
  { icon: <HkGlyphUptime />, title: '99.99% 正常運行承諾', body: '本港節點互為備援，單一節點異常時流量<b>自動切換至最近可用節點</b>，業務不中斷。' },
  { icon: <HkGlyphShield />, title: '內建免費安全防護', body: '自動隱藏源站位址，內建 <b>Let\'s Encrypt 證書、WAF 與 DDoS 防護</b>，毋須額外加購。' },
  { icon: <HkGlyphChat />, title: '24 × 7 香港本地中文支援', body: '電郵、電話、即時通訊全天候待命。香港團隊<b>以中文即時回應</b>，毋須跨時區。' },
];

function HongKongWhy() {
  return (
    <>
      <style>{HK_WHY_CSS}</style>
      <section className="HK-why" data-screen-label="05 Why UD HK CDN">
        <div className="container">
          <div className="HK-why-head">
            <div>
              <h2 className="HK-why-h2">為何選擇 <span className="accent">UD 香港 CDN</span></h2>
              <p className="HK-why-lede">本地頻寬、節點覆蓋、安全防護與本地支援，整合成一套即裝即用的方案。</p>
            </div>
          </div>

          <div className="HK-why-grid">
            {HK_WHY_CARDS.map((c, i) => (
              <div key={i} className={`HK-why-card ${c.flag ? 'flag' : ''}`}>
                <div className="HK-why-icon">{c.icon}</div>
                <h3 className="HK-why-h3">{c.title}</h3>
                <p className="HK-why-p" dangerouslySetInnerHTML={{ __html: c.body }} />
                {c.viz && (
                  <div className="HK-why-flag-viz">
                    {c.viz.map((v, j) => (
                      <div key={j} className="row">
                        <span className="dot" />
                        <span>{v}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

window.HongKongWhy = HongKongWhy;