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

// ============================================================
// China CDN, Trust + Enquiry + FAQ + Final CTA
// ============================================================
const CH_END_CSS = `
/* ---------- Enquiry Form ---------- */
.CH-enq{position:relative;background:#0F2A47;color:#fff;padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;overflow:hidden}
.CH-enq::before{content:'';position:absolute;top:-220px;right:-220px;width:600px;height:600px;background:radial-gradient(circle,rgba(167,139,250,0.18) 0%,transparent 70%);pointer-events:none}
.CH-enq::after{content:'';position:absolute;bottom:-220px;left:-220px;width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,0.13) 0%,transparent 70%);pointer-events:none}

.CH-enq-inner{position:relative;display:grid;grid-template-columns:0.9fr 1.1fr;gap:72px;align-items:start}
.CH-enq-h2{margin:0;font-size:clamp(36px,4.2vw,56px);line-height:1.08;font-weight:700;letter-spacing:-1.6px;color:#fff;text-wrap:balance}
.CH-enq-h2 .accent{background:linear-gradient(135deg,#C4B5FD 0%,#A855F7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.CH-enq-lede{margin-top:22px;font-size:16.5px;line-height:1.7;color:rgba(255,255,255,0.74);max-width:480px;text-wrap:pretty}

.CH-enq-form{background:rgba(255,255,255,0.04);border:1px solid rgba(196,181,253,0.16);border-radius:22px;padding:38px 36px;backdrop-filter:blur(8px)}
.CH-enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.CH-enq-field{display:flex;flex-direction:column;gap:8px}
.CH-enq-field.full{grid-column:1 / -1}
.CH-enq-field label{font-size:13px;font-weight:600;color:rgba(196,181,253,0.7);letter-spacing:.3px;text-transform:uppercase;font-family:'Chakra Petch','Inter',sans-serif}
.CH-enq-field label .req{color:#C4B5FD;margin-left:3px}
.CH-enq-field input,.CH-enq-field select,.CH-enq-field textarea{appearance:none;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:12px 14px;color:#fff;font-family:inherit;font-size:14.5px;line-height:1.5;transition:border-color .15s,background .15s}
.CH-enq-field input:focus,.CH-enq-field select:focus,.CH-enq-field textarea:focus{outline:0;border-color:#C4B5FD;background:rgba(255,255,255,0.10)}
.CH-enq-field input::placeholder,.CH-enq-field textarea::placeholder{color:rgba(255,255,255,0.75)}
.CH-enq-field select{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20stroke='%235EEAD4'%20stroke-width='1.8'%20fill='none'%20stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.CH-enq-field textarea{min-height:96px;resize:vertical}

.CH-enq-phone{display:grid;grid-template-columns:96px 1fr;gap:8px}
.CH-enq-phone select{padding-right:30px;background-position:right 8px center}

.CH-enq-submit{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.CH-enq-btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:16px 32px;font-family:'Noto Sans HK','Inter',sans-serif;font-size:15px;font-weight:700;color:#0F2A47;background:linear-gradient(135deg,#C4B5FD 0%,#A855F7 100%);border-radius:999px;text-decoration:none;letter-spacing:.2px;box-shadow:0 8px 22px rgba(167,139,250,0.32);transition:all .15s}
.CH-enq-btn:hover{background:linear-gradient(135deg,#A855F7 0%,#9333EA 100%);transform:translateY(-1px);box-shadow:0 12px 28px rgba(167,139,250,0.45)}

@media (max-width: 1024px){
  .CH-enq{padding:var(--section-pad-y-t) 0}
  .CH-enq-inner{grid-template-columns:1fr;gap:48px}
}
@media (max-width: 640px){
  .CH-enq{padding:var(--section-pad-y-m) 0}
  .CH-enq-form{padding:28px 22px}
  .CH-enq-grid{grid-template-columns:1fr}
}

/* ---------- Trust ---------- */
.CH-trust{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)}
.CH-trust-inner{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}

.CH-trust-h2{margin:0;font-size:clamp(34px,4vw,52px);line-height:1.1;font-weight:700;letter-spacing:-1.5px;color:#0F2A47;text-wrap:balance}
.CH-trust-h2 .accent{background:linear-gradient(100deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.CH-trust-lede{margin-top:22px;font-size:16.5px;line-height:1.75;color:#475569;text-wrap:pretty;max-width:520px}
.CH-trust-lede strong{color:#0F2A47;font-weight:600}

.CH-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;overflow:hidden}
.CH-stat{padding:32px 30px 28px;border-right:1px solid rgba(15,42,71,0.08);border-bottom:1px solid rgba(15,42,71,0.08);position:relative}
.CH-stat:nth-child(even){border-right:0}
.CH-stat:nth-child(3),.CH-stat:nth-child(4){border-bottom:0}
.CH-stat-v{font-family:'Inter',sans-serif;font-size:48px;font-weight:700;color:#0F2A47;letter-spacing:-1.8px;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.CH-stat-v .u{font-size:18px;font-weight:600;color:#A855F7;letter-spacing:-.2px;margin-left:2px}
.CH-stat-l{margin-top:10px;font-size:14px;font-weight:600;color:#0F2A47;letter-spacing:-.1px;line-height:1.4}
.CH-stat-s{margin-top:4px;font-family:ui-monospace,monospace;font-size:13px;font-weight:600;letter-spacing:1.4px;color:#94a3b8;text-transform:uppercase}

@media (max-width: 1024px){
  .CH-trust{padding:var(--section-pad-y-t) 0}
  .CH-trust-inner{grid-template-columns:1fr;gap:48px}
}
@media (max-width: 640px){
  .CH-trust{padding:var(--section-pad-y-m) 0}
  .CH-stat-v{font-size:38px;letter-spacing:-1.2px}
  .CH-stat{padding:24px 22px}
}

/* ---------- FAQ ---------- */
.CH-faq{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)}
.CH-faq-head{max-width:780px;margin-bottom:48px}
.CH-faq-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}
.CH-faq-lede{margin-top:18px;font-size:16px;line-height:1.7;color:#475569;max-width:560px}

.CH-faq-list{border-top:1px solid rgba(15,42,71,0.12)}
.CH-faq-item{border-bottom:1px solid rgba(15,42,71,0.12)}
.CH-faq-q{appearance:none;background:transparent;border:0;width:100%;padding:24px 0;display:grid;grid-template-columns:1fr 24px;align-items:center;gap:32px;text-align:left;cursor:pointer;font-family:inherit;color:inherit}
.CH-faq-q-text{font-size:18px;font-weight:600;color:#0F2A47;letter-spacing:-.2px;line-height:1.45;text-wrap:balance}
.CH-faq-toggle{width:24px;height:24px;color:#A855F7;display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
.CH-faq-item.open .CH-faq-toggle{transform:rotate(45deg)}
.CH-faq-toggle svg{width:18px;height:18px}
.CH-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.CH-faq-item.open .CH-faq-a{grid-template-rows:1fr}
.CH-faq-a > div{overflow:hidden;min-height:0}
.CH-faq-a p{margin:0 0 24px;font-size:15.5px;line-height:1.8;color:#475569;text-wrap:pretty;max-width:880px}
.CH-faq-a p strong{color:#0F2A47;font-weight:600}

@media (max-width: 1024px){
  .CH-faq{padding:var(--section-pad-y-t) 0}
}
@media (max-width: 640px){
  .CH-faq{padding:var(--section-pad-y-m) 0}
  .CH-faq-q-text{font-size:16px}
  .CH-faq-a p{font-size:14.5px}
}

/* ---------- Final CTA ---------- */
.CH-fcta{background:#0F2A47;color:#fff;padding:var(--section-pad-y-d) 0;position:relative;overflow:hidden;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif}
.CH-fcta::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(139,92,246,0.18) 0%,transparent 70%);pointer-events:none}
.CH-fcta::after{content:'';position:absolute;bottom:-180px;left:-180px;width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,0.10) 0%,transparent 70%);pointer-events:none}
.CH-fcta-inner{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:end}
.CH-fcta-h2{margin:0;font-size:clamp(36px,4.4vw,60px);line-height:1.05;font-weight:700;letter-spacing:-1.8px;color:#fff;text-wrap:balance}
.CH-fcta-h2 .accent{color:#c4b5fd}
.CH-fcta-body{margin-top:22px;font-size:16.5px;line-height:1.75;color:rgba(255,255,255,0.78);max-width:540px;text-wrap:pretty}
.CH-fcta-tel{margin-top:18px;font-family:ui-monospace,monospace;font-size:13px;letter-spacing:1.4px;color:#c4b5fd;text-transform:uppercase}
.CH-fcta-tel a{color:#fff;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,0.4);font-family:'Inter',sans-serif;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;margin-left:8px}

.CH-fcta-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.CH-fcta-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:18px 28px;font-size:15.5px;font-weight:600;letter-spacing:.3px;border-radius:999px;text-decoration:none;transition:all .15s;white-space:nowrap;border:1.5px solid transparent}
.CH-fcta-btn.primary{color:#0F2A47;background:#fff;border-color:#fff}
.CH-fcta-btn.primary:hover{background:#c4b5fd;border-color:#c4b5fd;transform:translateY(-1px)}
.CH-fcta-btn.outline{color:#fff;background:transparent;border-color:rgba(255,255,255,0.40)}
.CH-fcta-btn.outline:hover{border-color:#fff;background:rgba(255,255,255,0.06)}

@media (max-width: 900px){
  .CH-fcta-inner{grid-template-columns:1fr;gap:36px;align-items:start}
}
`;

// ============================================================
// Trust, 4 stat cards in a 2x2 grid
// ============================================================
function ChinaTrust() {
  return (
    <section className="CH-trust" data-screen-label="07 Trust">
      <div className="container CH-trust-inner">
        <div>
          <h2 className="CH-trust-h2">為何香港與跨國企業 <span className="accent">信任 UD CDN</span></h2>
          <p className="CH-trust-lede">
            UD 的中國 CDN 採用中國電信 CN2 GIA 專線，繁忙時段對內地用戶的平均延時低於 50ms，並承諾 <strong>99.99% 服務正常運行時間</strong>。
            我們在亞洲、歐洲及美洲均設有 CDN 節點，配合超過 300Gb 國際頻寬，能在大型推廣活動或流量突發時自動分散負載。
          </p>
          <p className="CH-trust-lede">
            UD 自 <strong>1998 年</strong>起服務香港企業，多年來為跨境電商、SaaS、金融與媒體客戶提供穩定的內地加速方案，並由本地團隊以中文提供即時支援。
          </p>
        </div>
        <div className="CH-stats">
          <div className="CH-stat">
            <div className="CH-stat-v">&lt;50<span className="u">ms</span></div>
            <div className="CH-stat-l">內地平均延時</div>
            <div className="CH-stat-s">Peak hour</div>
          </div>
          <div className="CH-stat">
            <div className="CH-stat-v">99.99<span className="u">%</span></div>
            <div className="CH-stat-l">承諾正常運行</div>
            <div className="CH-stat-s">SLA uptime</div>
          </div>
          <div className="CH-stat">
            <div className="CH-stat-v">300<span className="u">Gb+</span></div>
            <div className="CH-stat-l">國際出口頻寬</div>
            <div className="CH-stat-s">Multi-region</div>
          </div>
          <div className="CH-stat">
            <div className="CH-stat-v">28<span className="u">年</span></div>
            <div className="CH-stat-l">服務香港企業</div>
            <div className="CH-stat-s">Since 1998</div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// FAQ, 6 trimmed Q&A (from 9). Accordion.
// ============================================================
const FAQS = [
{
  q: '甚麼是中國 CDN？',
  a: '中國 CDN 是專為加速網站、API 及影音內容傳送至中國內地用戶的內容傳遞網絡服務。它將你的內容快取於中國周邊的邊緣節點，內地網民可從最就近的位置取得內容，毋須繞道海外伺服器，從而大幅縮短載入時間。'
},
{
  q: '使用中國 CDN 是否必須申請 ICP 備案？',
  a: '不需要。UD 中國 CDN 的邊緣節點設於中國周邊地區，毋須在內地申請 ICP 備案即可加速你的網站。如你已取得 ICP 備案，亦可選擇將節點延伸至內地境內以取得更低延遲。'
},
{
  q: 'CN2 GIA 線路是甚麼？為何重要？',
  a: 'CN2 是中國電信下一代承載網（China Telecom Next Carrier Network）的簡稱，GIA（Global Internet Access）則是其中最高級別的專線，具備高優先級、高穩定性與最低延遲。對需要服務內地用戶的網站而言，CN2 GIA 能繞開常出現擠塞的公共骨幹，提供接近本地的瀏覽速度。'
},
{
  q: 'UD 中國 CDN 的延時實際有多低？',
  a: '在繁忙時段，UD 中國 CDN 對內地用戶的平均延時可維持低於 50ms。實際延時會因用戶所在地與網絡環境而異，我們建議使用 14 天免費試用實測你的網站表現。'
},
{
  q: 'UD 中國 CDN 如何計算收費？',
  a: '中國 CDN 提供兩種計費模式：「按用量計費」由每 GB HK$0.90 起，毋須長期合約，適合流量波動大或初試的客戶；「月費計劃」由 HK$1,000 / 月（包 1 TB）起，預付固定月費即享更低單價與更多包含請求數，適合流量穩定、希望成本可預測的企業客戶。所有費用透明列於月度發票上，並無隱藏收費。'
},
{
  q: 'UD 中國 CDN 支援 WordPress、API 與直播嗎？',
  a: '支援。UD 中國 CDN 兼容 WordPress 及主流 CMS、RESTful API 與 WebSocket 動態內容，亦支援 MP4、HLS、MPEG-DASH 等主流串流協定，可同時用於品牌官網、SaaS 平台及影音媒體。'
},
{
  q: '申請後需時多久才能上線？',
  a: '完成網域驗證及 DNS 指向後通常可於同一個工作天內生效，視乎全球 DNS 傳播時間而定。'
},
{
  q: 'UD 中國 CDN 包含哪些安全防護？',
  a: '所有中國 CDN 流量均隱藏源伺服器真實 IP，並內建免費 Let\'s Encrypt SSL 證書、網頁應用程式防火牆（WAF）及 DDoS 防護，毋須額外加購安全模組。'
},
{
  q: 'UD 中國 CDN 與內地雲端供應商相比有何優勢？',
  a: '內地雲端供應商的 CDN 服務通常要求網站擁有 ICP 備案及內地註冊公司，審批時間動輒數月。UD 中國 CDN 以 CN2 GIA 專線連接內地周邊節點，毋須備案即可使用，特別適合無法或不希望在內地註冊公司的香港及海外企業。'
}];


// ============================================================
// Enquiry Form
// ============================================================
function ChinaEnquiry() {
  return (
    <>
      <style>{CH_END_CSS}</style>
      <section className="CH-enq" id="enquiry" data-screen-label="08 Enquiry">
      <div className="container CH-enq-inner">
        <div>
          <h2 className="CH-enq-h2">與我們的 <span className="accent">CDN 專家</span>對談</h2>
          <p className="CH-enq-lede">
            若你有跨境流量、ICP 備案、CN2 GIA 專線或客製化內地加速需求，歡迎填寫表格，香港團隊會盡快跟進。
          </p>
        </div>

        <CdnEnquiryForm prefix="ch" />
      </div>
    </section>
    </>
  );
}

function ChinaFAQ() {
  const [open, setOpen] = useFAQState(0);
  return (
    <section className="CH-faq" id="faq" data-screen-label="08 FAQ">
      <div className="container">
        <div className="CH-faq-head">
          <h2 className="CH-faq-h2">常見問題</h2>
          <p className="CH-faq-lede">如上述未能解答你的疑問，歡迎直接聯絡我們的香港工程團隊。</p>
        </div>
        <div className="CH-faq-list">
          {FAQS.map((f, i) =>
          <div className={`CH-faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="CH-faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="CH-faq-q-text">{f.q}</span>
                <span className="CH-faq-toggle" aria-hidden="true">
                  <svg viewBox="0 0 18 18" fill="none">
                    <line x1="9" y1="2" x2="9" y2="16" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
                    <line x1="2" y1="9" x2="16" y2="9" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
                  </svg>
                </span>
              </button>
              <div className="CH-faq-a">
                <div>
                  <p>{f.a}</p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// Final CTA
// ============================================================
function ChinaFinalCTA() {
  return (
    <>
      <section className="CH-fcta" data-screen-label="09 Final CTA">
        <div className="container CH-fcta-inner">
          <div>
            <h2 className="CH-fcta-h2">立即讓你的網站<br /><span className="accent">直連內地用戶</span></h2>
            <p className="CH-fcta-body">14 天免費試用、按用量收費、毋須長期合約。由我們的香港團隊為你規劃最合適的中國 CDN 配置。</p>
            <p className="CH-fcta-tel">SALES HOTLINE<a href="tel:+85225547545" data-cta="open-call-sales">(+852) 2554 7545</a></p>
          </div>
          <div className="CH-fcta-actions">
            <a className="CH-fcta-btn primary" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">免費試用 →</a>
            <a className="CH-fcta-btn outline" href="#enquiry">與 CDN 專家對談</a>
          </div>
        </div>
      </section>
    </>);

}

window.ChinaTrust = ChinaTrust;
window.ChinaEnquiry = ChinaEnquiry;
window.ChinaFAQ = ChinaFAQ;
window.ChinaFinalCTA = ChinaFinalCTA;