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

// ============================================================
// Hong Kong CDN, Enquiry Form + FAQ + Final CTA
// ============================================================
const HK_END_CSS = `
/* ---------- Enquiry Form ---------- */
.HK-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}
.HK-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}
.HK-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}

.HK-enq-inner{position:relative;display:grid;grid-template-columns:0.9fr 1.1fr;gap:72px;align-items:start}
.HK-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}
.HK-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}
.HK-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}
.HK-enq-meta{margin-top:40px;display:flex;flex-direction:column;gap:18px}
.HK-enq-meta-it{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,0.82)}
.HK-enq-meta-it .ic{flex:none;width:36px;height:36px;border-radius:10px;background:rgba(196,181,253,0.10);color:#C4B5FD;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(196,181,253,0.20)}
.HK-enq-meta-it .ic svg{width:18px;height:18px}
.HK-enq-meta-it b{display:block;color:#fff;font-weight:600;letter-spacing:-.1px;font-size:14.5px;margin-bottom:2px}
.HK-enq-meta-it span{display:block;color:rgba(255,255,255,0.62);font-size:13.5px;line-height:1.55}
.HK-enq-meta-it a{color:#C4B5FD;text-decoration:none;border-bottom:1px dotted rgba(196,181,253,0.40)}

/* Form */
.HK-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)}
.HK-enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.HK-enq-field{display:flex;flex-direction:column;gap:8px}
.HK-enq-field.full{grid-column:1 / -1}
.HK-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}
.HK-enq-field label .req{color:#C4B5FD;margin-left:3px}
.HK-enq-field input,.HK-enq-field select,.HK-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}
.HK-enq-field input:focus,.HK-enq-field select:focus,.HK-enq-field textarea:focus{outline:0;border-color:#C4B5FD;background:rgba(255,255,255,0.10)}
.HK-enq-field input::placeholder,.HK-enq-field textarea::placeholder{color:rgba(255,255,255,0.75)}
.HK-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}
.HK-enq-field textarea{min-height:96px;resize:vertical}

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

.HK-enq-region{display:flex;flex-wrap:wrap;gap:6px}
.HK-enq-region label{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:99px;font-size:13px;font-weight:500;color:rgba(255,255,255,0.78);cursor:pointer;text-transform:none;letter-spacing:0;font-family:inherit;transition:all .15s}
.HK-enq-region label:hover{border-color:rgba(196,181,253,0.40);color:#fff}
.HK-enq-region input{position:absolute;opacity:0;pointer-events:none}
.HK-enq-region label:has(input:checked){background:rgba(196,181,253,0.18);border-color:#C4B5FD;color:#C4B5FD;font-weight:600}

.HK-enq-submit{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.HK-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}
.HK-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)}
.HK-enq-fine{font-size:13px;color:rgba(255,255,255,0.75);line-height:1.55;max-width:340px}
.HK-enq-fine a{color:rgba(255,255,255,0.80);text-decoration:underline;text-decoration-color:rgba(196,181,253,0.40)}

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

/* ---------- FAQ ---------- */
.HK-faq{position:relative;background:linear-gradient(180deg,#F6F4FB 0%,#FAFAFE 100%);padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47}
.HK-faq-head{max-width:780px;margin-bottom:48px}
.HK-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}
.HK-faq-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-faq-lede{margin-top:18px;font-size:16px;line-height:1.7;color:#475569;max-width:560px}

.HK-faq-list{border-top:1px solid rgba(15,42,71,0.12)}
.HK-faq-item{border-bottom:1px solid rgba(15,42,71,0.12)}
.HK-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}
.HK-faq-q-text{font-size:18px;font-weight:600;color:#0F2A47;letter-spacing:-.2px;line-height:1.45;text-wrap:balance}
.HK-faq-toggle{width:24px;height:24px;color:#7C3AED;display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
.HK-faq-item.open .HK-faq-toggle{transform:rotate(45deg)}
.HK-faq-toggle svg{width:18px;height:18px}
.HK-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.HK-faq-item.open .HK-faq-a{grid-template-rows:1fr}
.HK-faq-a > div{overflow:hidden;min-height:0}
.HK-faq-a p{margin:0 0 24px;font-size:15.5px;line-height:1.8;color:#475569;text-wrap:pretty;max-width:880px}
.HK-faq-a p strong{color:#0F2A47;font-weight:600}
.HK-faq-a p a{color:#7C3AED;text-decoration:none;border-bottom:1px solid currentColor;font-weight:600}
.HK-faq-a p a:hover{color:#0F2A47}

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

/* ---------- Final CTA ---------- */
.HK-fcta{background:radial-gradient(120% 120% at 80% 0%,#33215e 0%,#0F2A47 65%);color:#fff;padding:var(--section-pad-y-d) 0;position:relative;overflow:hidden;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif}
.HK-fcta::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(167,139,250,0.22) 0%,transparent 70%);pointer-events:none}
.HK-fcta-inner{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:end}
.HK-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}
.HK-fcta-h2 .accent{background:linear-gradient(135deg,#C4B5FD 0%,#A855F7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.HK-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}
.HK-fcta-tel{margin-top:18px;font-size:14px;color:rgba(255,255,255,0.6)}
.HK-fcta-tel a{color:#fff;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,0.4);font-weight:600;margin-left:8px}
.HK-fcta-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.HK-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}
.HK-fcta-btn.primary{color:#0F2A47;background:#C4B5FD;border-color:#C4B5FD}
.HK-fcta-btn.primary:hover{background:#fff;border-color:#fff;transform:translateY(-1px)}
.HK-fcta-btn.outline{color:#fff;background:transparent;border-color:rgba(255,255,255,0.40)}
.HK-fcta-btn.outline:hover{border-color:#fff;background:rgba(255,255,255,0.06)}

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

// ---- Enquiry Form ----
const HkIconClock = () => (<svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="6.5" stroke="currentColor" strokeWidth="1.6" /><path d="M9 5.5V9L11.5 10.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>);
const HkIconLock = () => (<svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><rect x="3.5" y="8" width="11" height="7" rx="1.6" stroke="currentColor" strokeWidth="1.6" /><path d="M5.5 8V6a3.5 3.5 0 0 1 7 0v2" stroke="currentColor" strokeWidth="1.6" /></svg>);
const HkIconPhone = () => (<svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><path d="M4.5 2.5h3l1.5 3.5-2 1.2a8 8 0 0 0 3.8 3.8l1.2-2 3.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5C7 15 3 11 3 4a1.5 1.5 0 0 1 1.5-1.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" fill="none" /></svg>);

function HongKongEnquiry() {
  return (
    <>
      <style>{HK_END_CSS}</style>
      <section className="HK-enq" id="enquiry" data-screen-label="06 Enquiry">
      <div className="container HK-enq-inner">
        <div>
          <h2 className="HK-enq-h2">與我們的 <span className="accent">CDN 專家</span>對談</h2>
          <p className="HK-enq-lede">
            若你有大規模流量、跨地區部署、合規或客製需求，歡迎填寫表格，香港團隊會盡快跟進。
          </p>
        </div>

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

// ---- FAQ ----
const HK_FAQS = [
  {
    q: '香港 CDN 與海外 CDN、中國 CDN 有何分別？',
    a: '三者均為 UD 內容傳遞網絡服務，差別在於目標受眾與線路：香港 CDN 專為本港用戶加速，覆蓋 5 個本地數據中心，單價最低（每 GB HK$0.28 起）；海外 CDN 覆蓋亞洲、歐洲及美洲節點，配合 300Gb+ 國際頻寬；中國 CDN 採用中國電信 CN2 GIA 專線，毋須 ICP 備案即可服務內地用戶。三者可同時啟用，並透過智能 CDN 自動分配各地流量。',
  },
  {
    q: '我的網站只有香港本地用戶，仍然需要 CDN 嗎？',
    a: '即使源站位於香港，CDN 仍能帶來四項主要價值：①靜態資源（圖片、影片、JS、CSS）就近交付，提升首屏速度；②降低源站頻寬與擴容成本；③隱藏源站真實位址，提升安全；④在流量突發時自動分散負載。對流量集中於本港的電商、媒體、SaaS 而言，是性價比最高的優化。',
  },
  {
    q: 'UD 香港 CDN 的本地延遲是多少？',
    a: '本港用戶連線至 UD 香港 CDN 節點的延遲普遍維持於毫秒級。實際延遲視乎用戶所在區域、網絡供應商與終端裝置而異，建議透過免費試用實測你的網站表現。',
  },
  {
    q: 'UD 香港 CDN 如何收費？',
    a: '提供兩種計費模式：按用量計費用量越大越平，每 GB 由 HK$0.60（首 5 TB）遞減至低至 HK$0.28，毋須長期合約；如流量穩定，月費計劃更抵，由 HK$378 / 月（包 1 TB）起，最受歡迎的經濟型 HK$1,688 / 月包 5 TB，用量較大的計劃實際每 GB 低至 HK$0.20。所有費用以港幣計價，先用後付。',
  },
  {
    q: '流量超出計劃內額度會怎樣？',
    a: '服務不會中斷。超出包含流量後按該計劃的超額單價繼續計費，月度發票會清楚列出包含流量、超額用量與費用，亦可隨時於控制台監察進度。',
  },
  {
    q: '包含哪些安全防護？',
    a: '所有香港 CDN 流量自動隱藏源站真實位址，並內建免費 Let\'s Encrypt SSL 證書、網頁應用程式防火牆（WAF）與 DDoS 防護，毋須額外加購安全模組。',
  },
  {
    q: '支援 WordPress、Shopify、Magento 等系統嗎？',
    a: '支援。UD 香港 CDN 兼容 WordPress、Shopify、Magento、WooCommerce 等主流網店與內容管理系統，亦支援應用程式介面、即時動態內容以及主流影音串流協定。',
  },
  {
    q: '如何將網域加入 UD 香港 CDN？',
    a: '登入 UD CDN 控制台後輸入網域、驗證擁有權，再以基本或進階模式設定快取規則，最後將網域指向 UD CDN 即時生效。整個流程毋須變更現有伺服器架構，可於同一個工作天內完成。',
  },
  {
    q: '費用如何結算？',
    a: '費用以先用後付方式結算，每月 1 日及 16 日自動收取上一結算週期的費用：1 日收取上月 16 日至月末，16 日收取當月 1 日至 15 日。所有費用以港幣計價。',
  },
  {
    q: '可否同時使用月費計劃與按用量計費？',
    a: '可以。同一帳戶下不同網域可分別套用不同計費模式，方便企業按產品線靈活配置成本。',
  },
];

function HongKongFAQ() {
  const [open, setOpen] = useHKEndState(0);
  return (
    <section className="HK-faq" id="faq" data-screen-label="07 FAQ">
      <div className="container">
        <div className="HK-faq-head">
          <h2 className="HK-faq-h2">常見<span className="accent">問題</span></h2>
          <p className="HK-faq-lede">如以上未能解答你的疑問，歡迎直接透過上方表格聯絡我們的香港工程團隊。</p>
        </div>
        <div className="HK-faq-list">
          {HK_FAQS.map((f, i) => (
            <div className={`HK-faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="HK-faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="HK-faq-q-text">{f.q}</span>
                <span className="HK-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="HK-faq-a"><div><p>{f.a}</p></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Final CTA ----
function HongKongFinalCTA() {
  return (
      <section className="HK-fcta" data-screen-label="08 Final CTA">
        <div className="container HK-fcta-inner">
          <div>
            <h2 className="HK-fcta-h2">立即讓你的網站<br /><span className="accent">直達全港用戶</span></h2>
            <p className="HK-fcta-body">免費試用、按用量收費、無需長期合約。由香港團隊為你規劃最合適的本地 CDN 配置。</p>
            <p className="HK-fcta-tel">服務查詢熱線：<a href="tel:+85225547545" data-cta="open-call-sales">(+852) 2554 7545</a></p>
          </div>
          <div className="HK-fcta-actions">
            <a className="HK-fcta-btn primary" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">免費試用 →</a>
            <a className="HK-fcta-btn outline" href="#enquiry" data-cta="contact-sales">與 CDN 專家對談</a>
          </div>
        </div>
      </section>
  );
}

window.HongKongEnquiry = HongKongEnquiry;
window.HongKongFAQ = HongKongFAQ;
window.HongKongFinalCTA = HongKongFinalCTA;