/* global React */

// ============================================================
// Hong Kong CDN, Outcomes (5 benefits) + mid CTA
// Asymmetric editorial: 1 feature outcome (large with mini-viz)
// + 4 secondary outcomes in compact stack.
// ============================================================
const HK_BEN_CSS = `
.HK-ben{position:relative;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);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);border-bottom:1px solid rgba(15,42,71,0.06)}
.HK-ben-head{max-width:820px;margin-bottom:52px}
.HK-ben-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}
.HK-ben-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-ben-lede{margin-top:22px;font-size:17px;line-height:1.7;color:#475569;max-width:640px;text-wrap:pretty}

/* asymmetric grid: feature card + secondary stack */
.HK-ben-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:stretch}

/* Featured outcome, large card with inline metric chart */
.HK-feat{position:relative;background:radial-gradient(120% 120% at 100% 0%,#1A3A5A 0%,#0F2A47 65%);color:#fff;border-radius:24px;padding:44px 44px 40px;overflow:hidden;display:flex;flex-direction:column;gap:24px}
.HK-feat::before{content:'';position:absolute;top:-120px;right:-90px;width:340px;height:340px;background:radial-gradient(circle,rgba(167,139,250,0.32) 0%,transparent 70%);pointer-events:none}
.HK-feat-num{font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:2.2px;color:#C4B5FD;text-transform:uppercase}
.HK-feat-h3{margin:0;font-size:34px;font-weight:700;letter-spacing:-.8px;line-height:1.15;color:#fff;text-wrap:balance;max-width:380px}
.HK-feat-h3 .accent{background:linear-gradient(135deg,#C4B5FD 0%,#A855F7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.HK-feat-p{margin:0;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,0.74);max-width:420px;text-wrap:pretty}

/* tiny chart inside feature card */
.HK-feat-chart{margin-top:auto;background:rgba(255,255,255,0.04);border:1px solid rgba(196,181,253,0.18);border-radius:14px;padding:22px 22px 20px;backdrop-filter:blur(2px)}
.HK-feat-chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.HK-feat-chart-lbl{font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:1.6px;color:rgba(196,181,253,0.6);text-transform:uppercase}
.HK-feat-chart-v{font-family:'Chakra Petch','Inter',sans-serif;font-size:22px;font-weight:600;color:#C4B5FD;letter-spacing:-.4px;line-height:1;font-variant-numeric:tabular-nums}
.HK-feat-bars{display:flex;align-items:flex-end;gap:6px;height:62px}
.HK-feat-bar{flex:1;border-radius:3px 3px 0 0;position:relative;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);min-height:8px}
.HK-feat-bar.dim{background:linear-gradient(180deg,#475569 0%,#334155 100%);opacity:.6}
.HK-feat-axis{margin-top:8px;display:flex;justify-content:space-between;font-family:'Chakra Petch',monospace;font-size:13px;color:rgba(196,181,253,0.75);letter-spacing:.6px}

/* Secondary outcomes, compact list */
.HK-sec{display:flex;flex-direction:column;gap:14px}
.HK-sec-it{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:16px;padding:22px 24px 22px 78px;transition:border-color .2s,transform .2s,box-shadow .2s}
.HK-sec-it:hover{border-color:#A855F7;box-shadow:0 12px 28px rgba(124,58,237,0.10);transform:translateY(-1px)}
.HK-sec-ic{position:absolute;left:24px;top:22px;width:38px;height:38px;border-radius:11px;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)}
.HK-sec-ic svg{width:22px;height:22px}
.HK-sec-h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.3;color:#0F2A47}
.HK-sec-p{margin:6px 0 0;font-size:14.5px;line-height:1.65;color:#475569;text-wrap:pretty}
.HK-sec-p b{color:#0F2A47;font-weight:600}

/* Mid CTA banner */
.HK-midcta{margin-top:40px;position:relative;background:#fff;border:1px solid rgba(124,58,237,0.18);border-radius:14px;padding:18px 22px 18px 26px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;overflow:hidden}
.HK-midcta::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%)}
.HK-midcta-text{padding-left:10px}
.HK-midcta-t{margin:0;font-size:16px;font-weight:600;color:#0F2A47;letter-spacing:-.2px;line-height:1.4;text-wrap:balance}
.HK-midcta-t .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.HK-midcta-s{margin:3px 0 0;font-size:13px;color:#64748b;font-family:'Chakra Petch','Inter',sans-serif;letter-spacing:.5px}
.HK-midcta-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff;font-size:13px;font-weight:600;border-radius:999px;text-decoration:none;letter-spacing:.2px;box-shadow:0 4px 12px rgba(124,58,237,0.22);transition:all .15s;white-space:nowrap}
.HK-midcta-btn:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);transform:translateY(-1px);box-shadow:0 6px 16px rgba(124,58,237,0.32)}

@media (max-width: 1024px){
  .HK-ben{padding:var(--section-pad-y-t) 0}
  .HK-ben-grid{grid-template-columns:1fr;gap:18px}
  .HK-feat-h3{font-size:30px}
}
@media (max-width: 640px){
  .HK-ben{padding:var(--section-pad-y-m) 0}
  .HK-ben-head{margin-bottom:40px}
  .HK-ben-h2{font-size:32px;letter-spacing:-1px}
  .HK-feat{padding:32px 26px 28px}
  .HK-feat-h3{font-size:26px}
  .HK-sec-it{padding:20px 20px 20px 70px}
  .HK-sec-ic{left:20px;top:20px;width:34px;height:34px}
  .HK-midcta{grid-template-columns:1fr;padding:14px 14px 14px 16px;gap:10px;border-radius:12px}
  .HK-midcta::before{width:2px}
  .HK-midcta-text{padding-left:6px}
  .HK-midcta-t{font-size:14px;line-height:1.4}
  .HK-midcta-s{font-size:13px;letter-spacing:.3px}
  .HK-midcta-btn{padding:7px 12px;font-size:13px;font-weight:600;letter-spacing:0;gap:4px;justify-self:start;box-shadow:none}
}
`;

// ---- icons ----
const HkIconCoin = () => <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><ellipse cx="12" cy="6" rx="8" ry="2.6" stroke="currentColor" strokeWidth="1.8" /><path d="M4 6v6c0 1.4 3.6 2.6 8 2.6s8-1.2 8-2.6V6" stroke="currentColor" strokeWidth="1.8" fill="none" /><path d="M4 12v6c0 1.4 3.6 2.6 8 2.6s8-1.2 8-2.6v-6" stroke="currentColor" strokeWidth="1.8" fill="none" /></svg>;
const HkIconSurge = () => <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M3 18 L8 13 L12 16 L16 9 L21 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /><circle cx="16" cy="9" r="2" fill="currentColor" /></svg>;
const HkIconShield = () => <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3 L20 6 L20 12 Q20 18 12 21 Q4 18 4 12 L4 6 Z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" /><path d="M9 12 L11 14 L15 10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" /></svg>;
const HkIconSearch = () => <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5" stroke="currentColor" strokeWidth="1.8" /><line x1="15.5" y1="15.5" x2="21" y2="21" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /><line x1="7" y1="10.5" x2="14" y2="10.5" stroke="currentColor" strokeWidth="1.4" /></svg>;

const HK_SECONDARY = [
{ icon: <HkIconCoin />, t: '節省頻寬與成本', p: '圖片、影片等靜態內容改由邊緣節點派送，源站只需處理核心請求，<b>大幅減省本地頻寬開支，無須頻繁擴容</b>。' },
{ icon: <HkIconSurge />, t: '從容應對突發流量', p: '新品開售、節日促銷、政府公告或媒體熱話，人流湧入時 CDN <b>自動分擔負載</b>，源站依然穩定運作、不會中斷。' },
{ icon: <HkIconShield />, t: '保安防護一應俱全', p: '自動隱藏源站真實位址，並內建<b>免費 SSL、WAF 與 DDoS 防護</b>，有效阻擋常見網絡攻擊。' },
{ icon: <HkIconSearch />, t: '網站更快，排名更前', p: '全面提升網頁載入速度、互動反應與畫面穩定度（Google Core Web Vitals），<b>有助改善本地搜尋排名</b>。' }];


function HongKongBenefits() {
  // mini bars: rendering time samples (s), hour-of-day buckets
  const FAST = [0.82, 0.91, 0.74, 0.88, 0.69, 0.81, 0.95, 0.73, 0.86, 0.79, 0.92, 0.71];
  const SLOW = [3.6, 4.2, 3.8, 4.5, 3.3, 4.1, 4.7, 3.5, 4.0, 3.7, 4.4, 3.2];
  const MAX = 5;
  return (
    <>
      <style>{HK_BEN_CSS}</style>
      <section className="HK-ben" data-screen-label="03 Outcomes">
        <div className="container">
          <div className="HK-ben-head">
            <h2 className="HK-ben-h2">用<span className="accent">速度</span>帶來業務效益</h2>
            <p className="HK-ben-lede">
              無論你是本港電商、媒體、SaaS 抑或政府承包商，UD 香港 CDN 都能讓速度直接反映在轉換、成本、與排名上。
            </p>
          </div>

          <div className="HK-ben-grid">
            <div className="HK-feat">
              <div className="HK-feat-num"></div>
              <h3 className="HK-feat-h3">首屏載入<span className="accent"> 1 秒內</span><br />即時提升轉換率</h3>
              <p className="HK-feat-p">
                本地用戶從最就近的香港節點取得內容，首屏載入時間由數秒縮短至 1 秒內。對購物車、結算、登入頁尤其關鍵，每秒延遲都直接反映在跳出率與成單率上。
              </p>
              <div className="HK-feat-chart">
                <div className="HK-feat-chart-head">
                  <span className="HK-feat-chart-lbl">12 小時平均首屏載入 (秒)</span>
                  <span className="HK-feat-chart-v">−74%</span>
                </div>
                <div className="HK-feat-bars">
                  {SLOW.map((v, i) =>
                  <div key={`s-${i}`} className="HK-feat-bar dim" style={{ height: `${v / MAX * 100}%` }} />
                  )}
                </div>
                <div className="HK-feat-bars" style={{ marginTop: 4 }}>
                  {FAST.map((v, i) =>
                  <div key={`f-${i}`} className="HK-feat-bar" style={{ height: `${v / MAX * 100}%` }} />
                  )}
                </div>
                <div className="HK-feat-axis">
                  <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span>
                </div>
              </div>
            </div>

            <div className="HK-sec">
              {HK_SECONDARY.map((s, i) =>
              <div key={i} className="HK-sec-it">
                  <div className="HK-sec-ic">{s.icon}</div>
                  <h3 className="HK-sec-h3">{s.t}</h3>
                  <p className="HK-sec-p" dangerouslySetInnerHTML={{ __html: s.p }} />
                </div>
              )}
            </div>
          </div>

        </div>
      </section>
    </>);

}

window.HongKongBenefits = HongKongBenefits;