/* global React */
const { useEffect, useRef, useState } = React;

// ============================================================
// Concept A, Hero (production version)
// Tagline: 距離 從來 不是問題 (Distance has never been an issue)
// Visual: Mixed-weight CJK display + radial / orbit visualization
// Color system: navy text on lavender-tinted white, violet accents
// `noNav` prop: when true, the page hosts its own sticky nav at top,
// so this hero must NOT reserve room for an internal nav. That was
// the root cause of the empty band reported in the brief.
// ============================================================
const A_CSS = `
.A-stage{position:relative;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);font-family:'Inter','Noto Sans TC',sans-serif;color:#0F2A47;overflow:hidden;min-height:100%;height:auto}
.A-stage::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(139,92,246,0.12) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(139,92,246,0.12) 1.5px,transparent 1.5px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 85%);pointer-events:none}
.A-stage::after{content:'';position:absolute;top:0;right:-10%;width:60%;height:90%;background:radial-gradient(ellipse 50% 40% at 60% 30%,rgba(139,92,246,0.10) 0%,transparent 70%);pointer-events:none}

/* The host page sets .A-stage to position:absolute / inset:0 so we use 100% height.
   Horizontal padding + 1440 cap come from the shared .container class
   (see CDN Homepage.html :root tokens). .A-inner only owns vertical padding
   and the 2-col grid. Stats strip moved to a dedicated Data Ribbon section. */
.A-inner{position:relative;height:100%;padding-top:96px;padding-bottom:64px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.A-stage.with-nav .A-inner{padding-top:120px}
.A-stage.no-nav .A-inner{padding-top:64px}

/* Corner brackets removed for cleaner editorial frame */
.A-brackets{display:none}

/* Left column */
.A-left{position:relative;z-index:2}
.A-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;background:#fff;border:1px solid rgba(139,92,246,0.22);border-radius:999px;font-size:14px;font-weight:500;color:#0F2A47;box-shadow:0 4px 14px rgba(15,42,71,0.04);margin:0;line-height:1.4}
h1.A-kicker{font-family:'Inter','Noto Sans TC',sans-serif}
.A-kicker .dot{width:6px;height:6px;border-radius:50%;background:#A855F7;box-shadow:0 0 0 4px rgba(168,85,247,0.22);animation:Aping 1.8s ease-out infinite}
@keyframes Aping{0%{box-shadow:0 0 0 0 rgba(139,92,246,0.4)}70%{box-shadow:0 0 0 8px rgba(139,92,246,0)}100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}}

.A-h1,h2.A-h2-display{margin:28px 0 0;font-weight:700;font-size:clamp(54px,6.4vw,88px);line-height:1.02;letter-spacing:-2px;font-family:'Inter','Noto Sans TC',sans-serif;text-wrap:balance}
h2.A-h2-display{display:block}
.A-h1 .l1,.A-h1 .l2,.A-h2-display .l1,.A-h2-display .l2{display:block}.A-h2-display .l2{white-space:nowrap}
.A-h1 .ink,.A-h2-display .ink{color:#0F2A47}
.A-h1 .mute,.A-h2-display .mute{color:#A9B0BC}
.A-h1 .violet,.A-h2-display .violet{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

.A-lede{margin:32px 0 0;max-width:520px;font-size:17px;line-height:1.75;color:#475569;text-wrap:pretty;hanging-punctuation:first allow-end last;word-break:break-word;overflow-wrap:anywhere}
.A-lede strong{color:#0F2A47;font-weight:600}

.A-ctas{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.A-btn-primary{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;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 24px rgba(168,85,247,0.30);letter-spacing:.3px;cursor:pointer;transition:all .15s;text-decoration:none}
.A-btn-primary:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);border-color:transparent;transform:translateY(-1px);box-shadow:0 14px 32px rgba(168,85,247,0.45)}
.A-btn-outline{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-size:15px;font-weight:600;color:#0F2A47;background:rgba(255,255,255,0.5);border:1.5px solid rgba(15,42,71,0.30);border-radius:999px;letter-spacing:.3px;cursor:pointer;text-decoration:none;transition:all .15s}
.A-btn-outline:hover{background:#fff;border-color:#0F2A47}

/* Right column, speed bars (网站加速 KV) */
.A-right{position:relative;z-index:2;height:560px;align-self:stretch;display:flex;align-items:center;justify-content:center}
.A-bars{position:relative;width:100%;max-width:580px}
.A-bars::before{content:'';display:none}
.A-bars .panel{background:#fff;border:1px solid rgba(139,92,246,0.18);border-radius:14px;padding:28px 28px 26px;box-shadow:0 18px 48px rgba(15,42,71,0.08)}.A-bars .head{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:#0F2A47;letter-spacing:-.2px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(139,92,246,0.18)}.A-bars .head::before{content:'';width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#A855F7,#7C3AED);flex:none}
.A-bars .row{display:grid;grid-template-columns:96px 1fr 80px;align-items:center;gap:14px;margin-bottom:16px}
.A-bars .lbl{font-size:14px;font-weight:700;color:#0F2A47;letter-spacing:-.1px}
.A-bars .track{position:relative;height:38px;background:repeating-linear-gradient(90deg,rgba(139,92,246,0.06) 0 1px,transparent 1px 20%);border-radius:6px;overflow:visible}
.A-bars .bar{position:absolute;top:5px;bottom:5px;left:0;border-radius:6px}
.A-bars .bar.slow{width:96%;background:repeating-linear-gradient(45deg,#94a3b8 0 8px,#64748b 8px 16px);animation:Abarslow 2.4s cubic-bezier(.4,0,.6,1) forwards}
@keyframes Abarslow{from{width:0}to{width:96%}}
.A-bars .bar.fast{width:9%;background:linear-gradient(135deg,#A855F7,#7C3AED);box-shadow:0 6px 16px rgba(139,92,246,0.35);animation:Abarfast 0.8s cubic-bezier(.22,1,.36,1) forwards}
@keyframes Abarfast{from{width:0}to{width:9%}}
.A-bars .bar.fast::after{content:'✓';position:absolute;right:-38px;top:50%;transform:translateY(-50%);background:#fff;color:#A855F7;border:2px solid #A855F7;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.A-bars .ms{font-family:'Inter',sans-serif;font-size:26px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1}
.A-bars .slowRow .ms{color:#64748b}
.A-bars .fastRow .ms{color:#A855F7}
.A-bars .scale{margin-top:10px;margin-left:110px;margin-right:94px;position:relative;height:22px}
.A-bars .scale .ticks{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between}
.A-bars .scale .ticks i{width:1.5px;height:6px;background:rgba(15,42,71,0.30);display:block}
.A-bars .scale .labels{position:absolute;left:0;right:0;top:10px;display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:13px;color:#475569;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.A-bars .scale .labels b{color:#0F2A47}
.A-bars .impact{margin-top:22px;padding-top:18px;border-top:1px solid rgba(139,92,246,0.18);display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.A-bars .impact .it b{display:block;font-family:'Inter',sans-serif;font-size:28px;font-weight:700;letter-spacing:-.8px;color:#0F2A47;line-height:1;font-variant-numeric:tabular-nums}
.A-bars .impact .it.ac b{color:#A855F7}
.A-bars .impact .it span{display:block;margin-top:6px;font-size:13px;color:#94a3b8;letter-spacing:.2px}

/* Tertiary text link in CTA row */
.A-btn-text{display:inline-flex;align-items:center;padding:14px 8px;font-size:14px;font-weight:500;color:#7c3aed;letter-spacing:.2px;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s;align-self:center}
.A-btn-text:hover{border-bottom-color:#7c3aed}

/* Responsive, horizontal padding handled by .container; only vertical + layout here. */
@media (max-width: 1100px){
  .A-stage{height:auto;min-height:0}
  .A-inner{grid-template-columns:1fr;gap:24px;align-content:start;padding-top:88px!important;padding-bottom:32px!important}
  .A-right{height:auto;margin-top:8px}
  .A-bars{max-width:560px}
}
@media (max-width: 700px){
  .A-stage{height:auto;min-height:0}
  .A-inner{padding-top:64px!important;padding-bottom:32px!important}
  .A-h1,h2.A-h2-display{font-size:clamp(46px,12vw,68px);letter-spacing:-1px}
  .A-lede{font-size:16px;line-height:1.8;margin-top:24px}
  .A-ctas{margin-top:28px;gap:10px}
  .A-btn-primary,.A-btn-outline{padding:12px 20px;font-size:14px}
  .A-btn-text{padding:10px 4px;font-size:13px}
  .A-bars .panel{padding:22px 20px}
  .A-bars .row{grid-template-columns:80px 1fr 64px;gap:10px;margin-bottom:12px}
  .A-bars .lbl{font-size:13px}
  .A-bars .ms{font-size:20px}
  .A-bars .scale{margin-left:90px;margin-right:74px}
  .A-bars .impact .it b{font-size:22px}
  .A-bars .impact .it span{font-size:13px}
  .A-brackets{inset:14px}
}
`;

// 10 city nodes positioned on a unit circle (radius 1 = orbit edge).
// HKG sits at center; the rest are spread around at varied radii so
// the cluster reads as global-from-HK, not a perfect compass rose.
const NODES = [
{ id: 'BJS', x: 0.05, y: -0.80 },
{ id: 'LAX', x: 0.78, y: -0.62 },
{ id: 'FRA', x: -0.62, y: -0.50 },
{ id: 'LON', x: -0.86, y: -0.18 },
{ id: 'TPE', x: 0.50, y: 0.05 },
{ id: 'TYO', x: 0.92, y: -0.10 },
{ id: 'SIN', x: -0.42, y: 0.38 },
{ id: 'SYD', x: 0.82, y: 0.56 },
{ id: 'JKT', x: -0.65, y: 0.62 }];


function OrbitGraphic() {
  const C = 280; // svg center
  const R = 250; // outer radius
  // 12 tick marks on outer ring (every 30°), longer at the 4 cardinals
  const ticks = Array.from({ length: 12 }, (_, i) => {
    const a = i * 30 * Math.PI / 180;
    const inner = i % 3 === 0 ? R - 12 : R - 6;
    return { x1: C + Math.cos(a) * R, y1: C + Math.sin(a) * R, x2: C + Math.cos(a) * inner, y2: C + Math.sin(a) * inner };
  });
  return (
    <div className="A-orbit">
      <svg viewBox="0 0 560 560" aria-hidden="true">
        {/* concentric rings */}
        <circle cx={C} cy={C} r={R} className="A-ring" />
        <circle cx={C} cy={C} r={R * 0.72} className="A-ring inner" />
        <circle cx={C} cy={C} r={R * 0.44} className="A-ring inner" />
        {/* dashed axes */}
        <line x1={C - R} y1={C} x2={C + R} y2={C} className="A-ring ax" />
        <line x1={C} y1={C - R} x2={C} y2={C + R} className="A-ring ax" />
        {/* outer tick marks */}
        {ticks.map((t, i) => <line key={i} x1={t.x1} y1={t.y1} x2={t.x2} y2={t.y2} className="A-tick" />)}

        {/* coordinate hints */}
        <text x={C + R + 8} y={C + 3} className="A-coord">+R</text>
        <text x={C - R - 24} y={C + 3} className="A-coord">-R</text>

        {/* four arcing routes, HK → BJS / LAX / LON / SYD */}
        <path d={`M ${C} ${C} Q ${C - 60} ${C - 240} ${C + NODES[0].x * R} ${C + NODES[0].y * R}`} className="A-arc" />
        <path d={`M ${C} ${C} Q ${C + 280} ${C - 60} ${C + NODES[1].x * R} ${C + NODES[1].y * R}`} className="A-arc" />
        <path d={`M ${C} ${C} Q ${C - 320} ${C + 20} ${C + NODES[3].x * R} ${C + NODES[3].y * R}`} className="A-arc" />
        <path d={`M ${C} ${C} Q ${C + 60} ${C + 300} ${C + NODES[7].x * R} ${C + NODES[7].y * R}`} className="A-arc" />

        {/* edge nodes, sharp white-filled outer + violet inner */}
        {NODES.map((n) => {
          const x = C + n.x * R;
          const y = C + n.y * R;
          const lx = x + (n.x > 0 ? 14 : n.x < -0.05 ? -14 : 0);
          const ly = y + (n.y > 0 ? 20 : n.y < -0.05 ? -12 : 4);
          const anchor = n.x > 0.05 ? 'start' : n.x < -0.05 ? 'end' : 'middle';
          return (
            <g key={n.id}>
              <circle cx={x} cy={y} r={5} className="A-node-outer" />
              <circle cx={x} cy={y} r={2.5} className="A-node" />
              <text x={lx} y={ly} className="A-label" textAnchor={anchor}>{n.id}</text>
            </g>);

        })}

        {/* HK origin marker, ringed dot + label */}
        <circle cx={C} cy={C} className="A-node-pulse" />
        <circle cx={C} cy={C} r={9} className="A-center-ring" />
        <circle cx={C} cy={C} r={4.5} className="A-center-dot" />
        <text x={C + 18} y={C + 4} className="A-center-label">HKG · ORIGIN</text>
      </svg>
    </div>);

}

// SpeedBars KV, 「網站加速」主視覺。並排兩條 horizontal bar
// 無 CDN (4.8s) vs UD CDN (0.3s)，下面 timeline scale + impact 三項數據。
// Replaces the previous orbit / network graphic.
function SpeedBars() {
  return (
    <div className="A-bars">
      <div className="panel">
        <div className="head">網站載入速度</div>
        <div className="row slowRow">
          <div className="lbl">無 CDN</div>
          <div className="track"><div className="bar slow"></div></div>
          <div className="ms">4.8s</div>
        </div>
        <div className="row fastRow">
          <div className="lbl">UD CDN</div>
          <div className="track"><div className="bar fast"></div></div>
          <div className="ms">0.3s</div>
        </div>
        <div className="scale">
          <div className="ticks">
            {Array.from({ length: 6 }).map((_, i) => <i key={i}></i>)}
          </div>
          <div className="labels">
            <b>0s</b><span>1s</span><span>2s</span><span>3s</span><span>4s</span><b>5s</b>
          </div>
        </div>
      </div>
    </div>);

}

function ConceptA({ noNav = false } = {}) {
  return (
    <>
      <style>{A_CSS}</style>
      <div className={`A-stage ${noNav ? 'no-nav' : 'with-nav'}`}>
        <div className="A-brackets"><i className="bl"></i><i className="br"></i></div>

        {/* The internal nav was previously rendered here; when the host
                page provides its own nav (noNav), we no longer reserve space
                for it, that's what was causing the empty band. */}
        {!noNav && <window.CDNNav />}

        <div className="container A-inner">
          <div className="A-left">
            <h1 className="A-kicker" style={{ fontSize: "18px" }}><span className="dot"></span>香港企業全球 CDN 及網站加速服務</h1>
            <h2 className="A-h2-display">
              <span className="l1"><span className="ink">加速網站，</span></span>
              <span className="l2"><span className="violet">連接世界</span></span>
            </h2>
            <p className="A-lede">由香港出發，連接每一位用戶。UD CDN 以 <strong>22 個邊緣節點</strong>覆蓋大中華、東南亞與歐美主要市場，<strong>免 ICP 備案</strong>即可加速中國訪客體驗，本地團隊 <strong>7×24 小時</strong>實時監控及團隊支援。</p>
            <div className="A-ctas">
              <a className="A-btn-primary" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">免費試用</a>
              <a className="A-btn-outline" href="#pricing" data-cta="view-pricing">查看定價</a>
            </div>
          </div>
          <div className="A-right">
            <SpeedBars />
          </div>
        </div>
      </div>
    </>);

}

// ============================================================
// Concept B + C, kept as lightweight placeholders so the design
// canvas (CDN Homepage Concepts.html) keeps rendering. They were
// "reference / earlier" concepts per the canvas labels.
// ============================================================
function ConceptB() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#0F2A47', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Inter','Noto Sans TC',sans-serif" }}>
      <div style={{ textAlign: 'center', opacity: 0.7 }}>
        <div style={{ fontSize: 13, letterSpacing: 2, color: '#c4b5fd', fontFamily: 'ui-monospace,monospace' }}>CONCEPT B · LIGHT STREAMS</div>
        <div style={{ fontSize: 32, fontWeight: 600, marginTop: 14, letterSpacing: -.5 }}>較早草稿，已棄用</div>
      </div>
    </div>);

}

function ConceptC() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#FAFAFC', color: '#0F2A47', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Inter','Noto Sans TC',sans-serif" }}>
      <div style={{ textAlign: 'center', opacity: 0.7 }}>
        <div style={{ fontSize: 13, letterSpacing: 2, color: '#A855F7', fontFamily: 'ui-monospace,monospace' }}>CONCEPT C · TOPOGRAPHIC</div>
        <div style={{ fontSize: 32, fontWeight: 600, marginTop: 14, letterSpacing: -.5 }}>較早草稿，已棄用</div>
      </div>
    </div>);

}

window.ConceptA = ConceptA;
window.ConceptB = ConceptB;
window.ConceptC = ConceptC;