/* global React */

// ============================================================
// Hong Kong CDN, Hero
// Visual: minimal HK skyline + 5 pulsing local edge nodes.
// Accent: teal (vs China 紫 / Overseas 紫) for sibling differentiation.
// ============================================================
const HK_HERO_CSS = `
.HK-hero{position:relative;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47;overflow:hidden;padding:112px 0 96px}
.HK-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(139,92,246,0.10) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(139,92,246,0.10) 1.5px,transparent 1.5px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 60% at 60% 35%,#000 25%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 35%,#000 25%,transparent 80%);pointer-events:none}
.HK-hero::after{content:'';position:absolute;top:-80px;right:-8%;width:55%;height:80%;background:radial-gradient(ellipse 50% 40% at 60% 30%,rgba(124,58,237,0.13) 0%,transparent 70%);pointer-events:none}

.HK-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr 0.96fr;gap:60px;align-items:center}

.HK-hero-left{position:relative;z-index:2}
.HK-h1{margin:0;font-weight:700;font-size:clamp(46px,5.4vw,82px);line-height:1.04;letter-spacing:-2.2px;color:#0F2A47;text-wrap:balance}
.HK-h1 .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.HK-h1 .l2{display:block;margin-top:4px;white-space:nowrap}
.HK-sub{margin:26px 0 0;max-width:540px;font-size:19px;line-height:1.7;color:#475569;text-wrap:pretty}
.HK-sub strong{color:#0F2A47;font-weight:600}

.HK-inline-metrics{margin:36px 0 0;display:flex;gap:36px;flex-wrap:wrap;align-items:flex-end}
.HK-im{display:flex;flex-direction:column;gap:6px}
.HK-im b{font-family:'Chakra Petch','Inter',sans-serif;font-size:34px;font-weight:600;color:#0F2A47;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.HK-im b .u{font-size:18px;font-weight:600;color:#7C3AED;margin-left:2px;letter-spacing:-.2px}
.HK-im span{font-size:13px;font-weight:500;color:#64748b;letter-spacing:-.1px}

.HK-ctas{margin-top:38px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.HK-btn-primary{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);border:1.5px solid transparent;border-radius:999px;box-shadow:0 10px 26px rgba(124,58,237,0.34);letter-spacing:.3px;cursor:pointer;transition:all .15s;text-decoration:none}
.HK-btn-primary:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);transform:translateY(-1px);box-shadow:0 14px 32px rgba(124,58,237,0.45)}
.HK-btn-outline{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;font-size:15px;font-weight:600;color:#0F2A47;background:rgba(255,255,255,0.55);border:1.5px solid rgba(15,42,71,0.30);border-radius:999px;letter-spacing:.3px;cursor:pointer;text-decoration:none;transition:all .15s}
.HK-btn-outline:hover{background:#fff;border-color:#0F2A47}

/* Right, HK skyline + 5 nodes */
.HK-kv{position:relative;z-index:2;display:flex;justify-content:center}
.HK-skyline{width:100%;max-width:560px;height:auto;display:block;overflow:visible}

@media (max-width: 1080px){
  .HK-hero{padding:112px 0 96px}
  .HK-hero-inner{grid-template-columns:1fr;gap:42px}
  .HK-kv{justify-content:flex-start}
  .HK-skyline{max-width:520px}
}
@media (max-width: 700px){
  .HK-hero{padding:80px 0 72px}
  .HK-h1{font-size:clamp(40px,9vw,54px);letter-spacing:-1.2px}
  .HK-h1 .l2{white-space:normal}
  .HK-sub{font-size:16.5px}
  .HK-inline-metrics{gap:24px}
  .HK-im b{font-size:28px}
  .HK-skyline{max-width:420px}
  .HK-btn-primary,.HK-btn-outline{padding:14px 22px;font-size:14px}
}
`;

// 5 HK edge node positions (港島 / 九龍 / 新界), scattered along skyline.
// Wireframe skyline silhouette built from a single SVG path keypoints set;
// nodes pulse independently. No big text, visual identity only.
function HKSkyline() {
  // node coords on a 640×320 viewBox (x along skyline, y above silhouette)
  const NODES = [
    { x: 122, y: 168, d: 0 },    // 西環
    { x: 244, y: 144, d: 0.45 }, // 中環
    { x: 360, y: 158, d: 0.85 }, // 灣仔 / 銅鑼灣
    { x: 470, y: 134, d: 1.25 }, // 旺角 / 觀塘 (raised cluster)
    { x: 568, y: 174, d: 1.6 },  // 新界
  ];
  // central source, mid-air "hub" radiating to all nodes
  const HUB = { x: 320, y: 92 };

  // Pre-baked skyline silhouette path (varying-height rectangles + landmarks)
  const SKYLINE = "M0 230 L0 198 L18 198 L18 178 L34 178 L34 188 L52 188 L52 156 L66 156 L66 174 L86 174 L86 152 L96 152 L96 168 L114 168 L114 186 L128 186 L128 170 L140 170 L140 162 L154 162 L154 154 L164 154 L164 178 L176 178 L176 160 L188 160 L188 172 L202 172 L202 156 L214 156 L214 132 L222 132 L222 116 L236 116 L236 138 L246 138 L246 148 L260 148 L260 170 L274 170 L274 158 L286 158 L286 144 L300 144 L300 160 L312 160 L312 124 L322 124 L322 100 L334 100 L334 132 L344 132 L344 152 L358 152 L358 168 L372 168 L372 156 L386 156 L386 144 L398 144 L398 130 L410 130 L410 148 L424 148 L424 160 L436 160 L436 142 L448 142 L448 122 L460 122 L460 138 L472 138 L472 154 L486 154 L486 172 L502 172 L502 158 L516 158 L516 168 L528 168 L528 184 L542 184 L542 168 L554 168 L554 152 L568 152 L568 174 L582 174 L582 188 L596 188 L596 174 L610 174 L610 192 L624 192 L624 204 L640 204 L640 230 Z";

  return (
    <svg className="HK-skyline" viewBox="0 0 640 320" role="img"
      aria-label="UD 香港 CDN 5 個本地數據中心節點">
      <defs>
        <linearGradient id="hk-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FAFAFE" />
          <stop offset="100%" stopColor="#EAE2FB" />
        </linearGradient>
        <linearGradient id="hk-bldg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#0F2A47" />
          <stop offset="100%" stopColor="#1A3A5A" />
        </linearGradient>
        <radialGradient id="hk-node" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#C4B5FD" />
          <stop offset="100%" stopColor="#7C3AED" />
        </radialGradient>
      </defs>

      {/* horizon glow */}
      <rect x="0" y="0" width="640" height="230" fill="url(#hk-sky)" />

      {/* victoria harbour line */}
      <line x1="0" y1="244" x2="640" y2="244" stroke="rgba(124,58,237,0.30)" strokeWidth="1.2" strokeDasharray="3 5" />
      <line x1="0" y1="262" x2="640" y2="262" stroke="rgba(124,58,237,0.16)" strokeWidth="1" strokeDasharray="2 6" />

      {/* skyline silhouette */}
      <path d={SKYLINE} fill="url(#hk-bldg)" />

      {/* signature buildings, slim taller marks */}
      <rect x="219" y="84" width="6" height="48" fill="#9333EA" opacity=".75" />
      <rect x="324" y="68" width="6" height="56" fill="#9333EA" opacity=".75" />

      {/* hub at top, central HK distribution point */}
      <circle cx={HUB.x} cy={HUB.y} r="22" fill="rgba(139,92,246,0.10)">
        <animate attributeName="r" values="18;26;18" dur="3s" repeatCount="indefinite" />
      </circle>
      <circle cx={HUB.x} cy={HUB.y} r="6" fill="url(#hk-node)" stroke="#fff" strokeWidth="2" />

      {/* fanned light rays HUB → each node */}
      {NODES.map((n, i) => (
        <line key={`ray-${i}`} x1={HUB.x} y1={HUB.y} x2={n.x} y2={n.y}
          stroke="#7C3AED" strokeWidth="1.1" strokeDasharray="2 5" opacity="0.45" />
      ))}

      {/* travelling photon along each ray */}
      {NODES.map((n, i) => (
        <circle key={`p-${i}`} r="2.6" fill="#C4B5FD">
          <animate attributeName="opacity" values="0;1;0" dur="2.2s"
            begin={`${n.d}s`} repeatCount="indefinite" />
          <animateMotion dur="2.2s" begin={`${n.d}s`} repeatCount="indefinite"
            path={`M ${HUB.x} ${HUB.y} L ${n.x} ${n.y}`} />
        </circle>
      ))}

      {/* 5 edge nodes, pulsing */}
      {NODES.map((n, i) => (
        <g key={`n-${i}`}>
          <circle cx={n.x} cy={n.y} r="12" fill="#9333EA" opacity="0.16">
            <animate attributeName="r" values="9;15;9" dur="2.6s"
              begin={`${n.d}s`} repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.22;0.06;0.22" dur="2.6s"
              begin={`${n.d}s`} repeatCount="indefinite" />
          </circle>
          <circle cx={n.x} cy={n.y} r="4.2" fill="url(#hk-node)" stroke="#fff" strokeWidth="2" />
        </g>
      ))}

      {/* harbour reflection, buildings inverted, faint */}
      <g opacity="0.18" transform="translate(0,488) scale(1,-1)">
        <path d={SKYLINE} fill="#7C3AED" />
      </g>
    </svg>
  );
}

function HongKongHero() {
  return (
    <>
      <style>{HK_HERO_CSS}</style>
      <section className="HK-hero" data-screen-label="01 Hero">
        <div className="container HK-hero-inner">
          <div className="HK-hero-left">
            <h1 className="HK-h1">
              <span className="accent">香港 CDN</span>
            </h1>
            <p className="HK-lede" style={{ margin: '14px 0 0', fontWeight: 700, fontSize: 'clamp(20px, 2.1vw, 28px)', lineHeight: 1.3, color: '#0F2A47', letterSpacing: '-0.5px' }}>網站直達全港用戶</p>
            <p className="HK-sub">
              <strong>5 個香港主要數據中心、100Gb+ 本地頻寬</strong>，
              將你的網站以毫秒級延遲直送全港用戶。每 GB 由 HK$0.28 起，無需長期合約。
            </p>
            <div className="HK-ctas">
              <a className="HK-btn-primary" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">免費試用</a>
              <a className="HK-btn-outline" href="#pricing" data-cta="view-pricing">查看價格</a>
            </div>
          </div>

          <div className="HK-kv">
            <HKSkyline />
          </div>
        </div>
      </section>
    </>
  );
}

window.HongKongHero = HongKongHero;