/* global React */
const { useState: useHKPrcState } = React;

// ============================================================
// Hong Kong CDN, Pricing (PAYG + Monthly plans, tabbed)
// Mirrors Overseas CDN format; teal accent for sibling differentiation.
// ============================================================
const HK_PRC_CSS = `
.HK-prc{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-prc-head{max-width:820px;margin-bottom:40px}
.HK-prc-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-prc-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-prc-lede{margin-top:22px;font-size:17px;line-height:1.75;color:#475569;max-width:640px;text-wrap:pretty}
.HK-prc-lede strong{color:#0F2A47;font-weight:600}

.HK-prc-tabs{display:inline-flex;padding:6px;background:#F3EEFE;border-radius:999px;margin-bottom:36px;gap:4px}
.HK-prc-tab{appearance:none;border:0;background:transparent;padding:12px 24px;font-family:'Noto Sans HK','Inter',sans-serif;font-size:15px;font-weight:600;color:#7C3AED;letter-spacing:-.1px;border-radius:999px;cursor:pointer;transition:all .15s;white-space:nowrap}
.HK-prc-tab:hover{color:#0F2A47}
.HK-prc-tab.on{background:#fff;color:#0F2A47;box-shadow:0 4px 12px rgba(15,42,71,0.08)}
.HK-prc-tab small{display:block;font-size:13px;font-weight:500;color:#94a3b8;letter-spacing:0;margin-top:3px}
.HK-prc-tab.on small{color:#7C3AED}
.HK-prc-hint{margin:-14px 0 26px;font-size:14.5px;color:#64748b;letter-spacing:-.1px}
.HK-prc-hint b{color:#7C3AED;font-weight:600}

/* PAYG */
.HK-payg{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start}
.HK-payg-tbl{background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;overflow:hidden}
.HK-payg-row{display:grid;grid-template-columns:1.3fr 1fr auto;align-items:center;gap:20px;padding:22px 28px;border-bottom:1px solid rgba(15,42,71,0.08)}
.HK-payg-row:last-child{border-bottom:0}
.HK-payg-row.head{background:#FAFAFE;padding:16px 28px}
.HK-payg-row.head .HK-payg-tier,.HK-payg-row.head .HK-payg-price{font-size:13.5px;font-weight:600;color:#64748b}
.HK-payg-tier{font-size:16.5px;font-weight:600;color:#0F2A47;letter-spacing:-.1px}
.HK-payg-price{font-family:'Inter',sans-serif;font-size:26px;font-weight:700;color:#0F2A47;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1}
.HK-payg-price small{font-size:13.5px;color:#94a3b8;font-weight:500;letter-spacing:0;margin-left:4px}
.HK-payg-bar-cell{width:140px}
.HK-payg-bar{position:relative;height:8px;background:rgba(167,139,250,0.14);border-radius:99px;overflow:hidden}
.HK-payg-bar span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(135deg,#A855F7,#7C3AED);border-radius:99px}
.HK-payg-row{grid-template-columns:1fr auto}
.HK-payg-row>*:nth-child(3){display:none}

.HK-payg-side{background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);border:1px solid rgba(15,42,71,0.08);border-radius:18px;padding:32px 28px}
.HK-payg-side h4{margin:0;font-size:15px;font-weight:700;letter-spacing:-.2px;color:#0F2A47}
.HK-payg-side ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.HK-payg-side li{position:relative;padding-left:26px;font-size:16px;line-height:1.65;color:#475569;text-wrap:pretty}
.HK-payg-side li::before{content:'';position:absolute;left:0;top:8px;width:14px;height:8px;border-left:2.2px solid #7C3AED;border-bottom:2.2px solid #7C3AED;transform:rotate(-45deg)}
.HK-payg-side li b{color:#0F2A47;font-weight:600}
.HK-payg-side li.hl{padding:13px 16px 13px 38px;background:linear-gradient(120deg,rgba(167,139,250,0.16) 0%,rgba(124,58,237,0.08) 100%);border:1px solid rgba(124,58,237,0.18);border-radius:12px;color:#0F2A47;font-weight:600;font-size:16.5px}
.HK-payg-side li.hl::before{left:16px;top:18px;border-color:#7C3AED}
.HK-payg-side li.hl b{color:#6D28D9;font-weight:700}

/* Monthly plans */
.HK-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.HK-plan{background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;padding:28px 26px 26px;display:flex;flex-direction:column;gap:18px;transition:all .2s;position:relative}
.HK-plan:hover{border-color:#7C3AED;box-shadow:0 14px 32px rgba(15,42,71,0.08);transform:translateY(-2px)}
.HK-plan.featured{background:#0F2A47;color:#fff;border-color:#0F2A47}
.HK-plan.featured:hover{box-shadow:0 16px 40px rgba(15,42,71,0.32)}
.HK-plan-rec{position:absolute;top:-12px;left:24px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff;padding:6px 14px;font-size:13px;font-weight:700;letter-spacing:.2px;border-radius:99px;box-shadow:0 6px 16px rgba(124,58,237,0.32)}
.HK-plan-name{margin:0;font-size:20px;font-weight:700;letter-spacing:-.2px;color:#0F2A47}
.HK-plan.featured .HK-plan-name{color:#fff}
.HK-plan-incl{font-family:'Inter',sans-serif;font-size:34px;font-weight:700;color:#0F2A47;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.HK-plan.featured .HK-plan-incl{color:#fff}
.HK-plan-incl small{display:inline-block;font-size:13px;font-weight:500;color:#94a3b8;letter-spacing:0;margin:0 0 0 8px;vertical-align:baseline}
.HK-plan.featured .HK-plan-incl small{color:rgba(196,181,253,0.75)}
.HK-plan-price{padding:14px 0;border-top:1px solid rgba(15,42,71,0.10);border-bottom:1px solid rgba(15,42,71,0.10);display:flex;align-items:baseline;gap:6px}
.HK-plan.featured .HK-plan-price{border-color:rgba(255,255,255,0.14)}
.HK-plan-price .v{font-family:'Inter',sans-serif;font-size:26px;font-weight:700;color:#0F2A47;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.HK-plan.featured .HK-plan-price .v{color:#fff}
.HK-plan-price .u{font-size:14.5px;color:#64748b;font-weight:500}
.HK-plan.featured .HK-plan-price .u{color:rgba(255,255,255,0.65)}
.HK-plan-eff{margin-top:-2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:#64748b;letter-spacing:-.1px}
.HK-plan-eff b{font-family:'Inter',sans-serif;font-size:20px;font-weight:700;color:#7C3AED;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.HK-plan.featured .HK-plan-eff{color:rgba(255,255,255,0.72)}
.HK-plan.featured .HK-plan-eff b{color:#C4B5FD}
.HK-plan-eff .tag{font-family:'Noto Sans HK','Inter',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.3px;color:#fff;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);padding:3px 9px;border-radius:99px}
.HK-plan-meta{display:flex;flex-direction:column;gap:10px;font-size:15px;color:#64748b;line-height:1.5}
.HK-plan.featured .HK-plan-meta{color:rgba(255,255,255,0.72)}
.HK-plan-meta .row{display:flex;justify-content:space-between;gap:12px}
.HK-plan-meta .row span:first-child{color:#94a3b8;font-size:14px}
.HK-plan.featured .HK-plan-meta .row span:first-child{color:rgba(196,181,253,0.70)}
.HK-plan-meta .row span:last-child{color:#0F2A47;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.HK-plan.featured .HK-plan-meta .row span:last-child{color:#fff}
.HK-plan.enterprise{background:linear-gradient(135deg,#0F2A47 0%,#1e3a5f 100%);color:#fff;border-color:transparent}
.HK-plan.enterprise .HK-plan-name{color:#fff}
.HK-plan.enterprise .HK-plan-incl{color:#C4B5FD;font-size:26px}
.HK-plan.enterprise .HK-plan-incl small{color:rgba(196,181,253,0.75)}
.HK-plan.enterprise .HK-plan-price{border-color:rgba(255,255,255,0.14)}
.HK-plan.enterprise .HK-plan-price .v{color:#fff;font-size:20px}
.HK-plan.enterprise .HK-plan-meta{color:rgba(255,255,255,0.72)}
.HK-plan.enterprise .HK-plan-meta .row span:first-child{color:rgba(196,181,253,0.70)}
.HK-plan.enterprise .HK-plan-meta .row span:last-child{color:#fff}

.HK-buy{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 20px;border-radius:12px;font-family:'Noto Sans HK','Inter',sans-serif;font-size:15px;font-weight:700;letter-spacing:-.1px;text-decoration:none;transition:all .18s;box-sizing:border-box}
.HK-buy.primary{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff;box-shadow:0 8px 22px rgba(124,58,237,0.28)}
.HK-buy.primary:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);transform:translateY(-1px);box-shadow:0 12px 28px rgba(124,58,237,0.40)}
.HK-plan .HK-buy{background:#F3EEFE;color:#7C3AED}
.HK-plan .HK-buy:hover{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff;transform:translateY(-1px);box-shadow:0 10px 24px rgba(124,58,237,0.30)}
.HK-plan.featured .HK-buy{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff}
.HK-plan.featured .HK-buy:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);color:#fff;transform:translateY(-1px)}
.HK-plan.enterprise .HK-buy{background:#fff;color:#7c3aed;border:1.5px solid rgba(139,92,246,0.35)}
.HK-plan.enterprise .HK-buy:hover{background:#F3EEFE;color:#7c3aed;transform:translateY(-1px)}
.HK-plan-cta{margin-top:auto}
.HK-payg-side .HK-buy{margin-top:26px}
.HK-payg-side .HK-buy-note{margin:12px 0 0;text-align:center;font-size:13px;color:#94a3b8;line-height:1.5}

/* "How to pick" footer + cross-sell note */
.HK-pick{margin-top:36px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start;padding:24px 28px;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);border:1px solid rgba(124,58,237,0.18);border-radius:18px}
.HK-pick p{margin:0;font-size:16px;line-height:1.7;color:#475569;text-wrap:pretty}
.HK-pick p b{color:#0F2A47;font-weight:600}
.HK-pick-cta{display:flex;flex-direction:column;gap:8px;align-items:flex-start;white-space:nowrap}
.HK-pick-cta a{font-size:15px;font-weight:600;color:#7C3AED;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.HK-pick-cta a:hover{color:#0F2A47}
.HK-pick-cta a.sec{color:#64748b;border-bottom-color:rgba(100,116,139,0.30)}

/* Important note (cross-sell to China / Overseas CDN) */
.HK-note{margin-top:18px;display:flex;gap:18px;align-items:flex-start;padding:20px 26px;background:#FAFAFC;border:1px dashed rgba(15,42,71,0.18);border-radius:14px}
.HK-note-tag{flex:none;font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:1.8px;color:#7C3AED;text-transform:uppercase;padding-top:2px}
.HK-note-text{margin:0;font-size:14.5px;line-height:1.7;color:#475569;text-wrap:pretty}
.HK-note-text a{color:#7C3AED;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.HK-note-text a:hover{color:#0F2A47}

@media (max-width: 1024px){
  .HK-prc{padding:var(--section-pad-y-t) 0}
  .HK-payg{grid-template-columns:1fr;gap:18px}
  .HK-plans{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .HK-prc{padding:var(--section-pad-y-m) 0}
  .HK-prc-h2{font-size:32px;letter-spacing:-1px}
  .HK-payg-row{grid-template-columns:1fr auto;padding:18px 20px}
  .HK-payg-bar-cell{display:none}
  .HK-plans{grid-template-columns:1fr}
  .HK-pick{grid-template-columns:1fr;gap:18px}
}
`;

const HK_PAYG_TIERS = [
  { tier: '首 5 TB', price: '0.60', pct: 100 },
  { tier: '5 – 10 TB', price: '0.50', pct: 84 },
  { tier: '10 – 50 TB', price: '0.40', pct: 67 },
  { tier: '50 – 100 TB', price: '0.35', pct: 58 },
  { tier: '100 TB 以上', price: '0.28', pct: 47 },
];

const HK_PLANS = [
  { name: '基本型', incl: '1', unit: 'TB', monthly: '378', over: '0.45', req: '50M', eff: '0.38', note: '最少 6 個月合約' },
  { name: '經濟型', incl: '5', unit: 'TB', monthly: '1,688', over: '0.40', req: '250M', eff: '0.34', note: '最少 3 個月合約', featured: true },
  { name: '標準型', incl: '20', unit: 'TB', monthly: '5,628', over: '0.35', req: '1000M', eff: '0.28' },
  { name: '專業型', incl: '50', unit: 'TB', monthly: '12,500', over: '0.25', req: '2500M', eff: '0.25' },
  { name: '進階型', incl: '100', unit: 'TB', monthly: '20,000', over: '0.20', req: '5000M', eff: '0.20', best: true },
  { name: '企業型', incl: '自定義', monthly: '聯絡銷售', over: ', ', req: ', ', enterprise: true, note: '>100 TB · 私有部署' },
];

const HkArrow = () => <svg width="14" height="14" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 6h7M6 3l3 3-3 3" stroke="currentColor" strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>;

function HKPayg() {
  return (
    <div className="HK-payg">
      <div className="HK-payg-tbl">
        <div className="HK-payg-row head">
          <div className="HK-payg-tier">月度流量級別</div>
          <div className="HK-payg-price">香港 CDN 單價（每 GB）</div>
          <div className="HK-payg-bar-cell"></div>
        </div>
        {HK_PAYG_TIERS.map((t, i) =>
          <div className="HK-payg-row" key={i}>
            <div className="HK-payg-tier">{t.tier}</div>
            <div className="HK-payg-price">HK${t.price}<small>/ GB</small></div>
            <div className="HK-payg-bar-cell"><div className="HK-payg-bar"><span style={{ width: `${t.pct}%` }} /></div></div>
          </div>
        )}
      </div>
      <div className="HK-payg-side">
        <h4>包含於所有用量</h4>
        <ul>
          <li className="hl">HTTP / HTTPS 請求 <b>首 2,000,000 次免費</b></li>
          <li>其後 <b>HK$0.065 / 10,000 次請求</b></li>
          <li>免費 SSL 證書、網頁應用程式防火牆、DDoS 防護</li>
          <li>毋須長期合約、毋須最低用量承諾</li>
          <li>月度發票清楚列出實際用量與費用</li>
        </ul>
        <a className="HK-buy primary" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">立即開始使用 <HkArrow /></a>
      </div>
    </div>
  );
}

function HKMonthly() {
  return (
    <div className="HK-plans">
      {HK_PLANS.map((p, i) =>
        <div key={i} className={`HK-plan ${p.featured ? 'featured' : ''} ${p.enterprise ? 'enterprise' : ''}`}>
          {p.featured && <span className="HK-plan-rec">最受歡迎</span>}
          <h3 className="HK-plan-name">{p.name}</h3>
          <div className="HK-plan-incl">
            {p.incl}{p.unit && <span style={{ fontSize: '0.55em', marginLeft: 4, fontWeight: 600 }}>{p.unit}</span>}
            <small>流量 / 月</small>
          </div>
          <div className="HK-plan-price">
            {p.enterprise ? <span className="v">{p.monthly}</span> : <><span className="v">HK${p.monthly}</span><span className="u">/ 月</span></>}
          </div>
          {!p.enterprise && <div className="HK-plan-eff">實際每 GB ≈ <b>HK${p.eff}</b>{p.best && <span className="tag">全站最抵</span>}</div>}
          <div className="HK-plan-meta">
            <div className="row"><span>超額單價</span><span>{p.enterprise ? '自定義' : `HK$${p.over} / GB`}</span></div>
            <div className="row"><span>包含請求數</span><span>{p.req}</span></div>
            {p.note && <div className="row"><span>備註</span><span>{p.note}</span></div>}
          </div>
          <div className="HK-plan-cta">
            {p.enterprise ?
              <a className="HK-buy" href={window.__udRoot('zh-Hant/contact?product=cdn-hk-enterprise', 'contact.html?product=cdn-hk-enterprise')} data-cta="contact-sales">聯絡銷售 <HkArrow /></a> :
              <a className="HK-buy" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">馬上申請 <HkArrow /></a>
            }
          </div>
        </div>
      )}
    </div>
  );
}

function HongKongPricing() {
  const [mode, setMode] = useHKPrcState('payg');
  return (
    <>
      <style>{HK_PRC_CSS}</style>
      <section className="HK-prc" id="pricing" data-screen-label="04 Pricing">
        <div className="container">
          <div className="HK-prc-head">
            <h2 className="HK-prc-h2">立即啟用 <span className="accent">香港 CDN</span></h2>
            <p className="HK-prc-lede">
              先以 <strong>免費試用</strong> 實測本港表現，再按流量規模選擇計費模式。所有費用以港幣計價、透明列帳，<strong>沒有隱藏收費</strong>。
            </p>
          </div>
          <div className="HK-prc-tabs" role="tablist">
            <button className={`HK-prc-tab ${mode === 'payg' ? 'on' : ''}`} onClick={() => setMode('payg')}>
              按用量計費<small>HK$0.28 / GB 起</small>
            </button>
            <button className={`HK-prc-tab ${mode === 'plan' ? 'on' : ''}`} onClick={() => setMode('plan')}>
              月費計劃<small>HK$0.20 / GB 起</small>
            </button>
          </div>
          <p className="HK-prc-hint">用量越大，<b>月費計劃每 GB 越平</b>。</p>

          {mode === 'payg' ? <HKPayg /> : <HKMonthly />}

          <div className="HK-note">
            <span className="HK-note-tag">注意</span>
            <p className="HK-note-text">
              香港 CDN 專為<b style={{ color: '#0F2A47' }}>本港流量加速</b>而設。如需中國內地用戶加速，請選擇 <a href="china-cdn.html">中國 CDN（CN2 GIA 專線）</a>；目標市場涵蓋亞洲、歐洲或美洲，請選擇 <a href="Overseas CDN.html">海外 CDN</a>。三者可同時啟用，並透過<a href="#">智能 CDN</a>自動分配各地流量。
            </p>
          </div>
        </div>
      </section>
    </>
  );
}

window.HongKongPricing = HongKongPricing;