/* global React */

// ============================================================
// Dynamic CDN, Hero (rev 2)
// KV: clear bidirectional realtime channel between Client & Origin
// Chinese only, no stat ribbon, no eyebrows.
// ============================================================
const DY_HERO_CSS = `
.DY-hero{position:relative;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);font-family:'Noto Sans HK','Noto Sans TC','Inter',sans-serif;color:#0F2A47;overflow:hidden;padding:112px 0 96px;min-height:640px;display:grid;align-content:center}
.DY-hero > .container{width:100%}
.DY-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 50% 35%,#000 25%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 25%,transparent 80%);pointer-events:none}
.DY-hero::after{content:'';position:absolute;top:-80px;right:-8%;width:52%;height:80%;background:radial-gradient(ellipse 50% 40% at 60% 30%,rgba(139,92,246,0.12) 0%,transparent 70%);pointer-events:none}

.DY-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr 0.98fr;gap:64px;align-items:center}

.DY-h1{margin:0;font-weight:700;font-size:clamp(44px,5vw,74px);line-height:1.04;letter-spacing:-2px;color:#0F2A47;text-wrap:balance}
.DY-h1 .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.DY-h1 .l2{display:block;margin-top:6px;white-space:nowrap}
.DY-sub{margin:30px 0 0;max-width:540px;font-size:19px;line-height:1.7;color:#475569;text-wrap:pretty}
.DY-sub strong{color:#0F2A47;font-weight:600}

.DY-ctas{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.DY-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 24px rgba(139,92,246,0.30);letter-spacing:.3px;cursor:pointer;transition:all .15s;text-decoration:none}
.DY-btn-primary:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);transform:translateY(-1px);box-shadow:0 14px 32px rgba(139,92,246,0.45)}
.DY-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.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}
.DY-btn-outline:hover{background:#fff;border-color:#0F2A47}

/* KV */
.DY-kv{position:relative;z-index:2;display:flex;justify-content:center}
.DY-kv svg{width:100%;max-width:520px;height:auto;display:block;overflow:visible}

@media (max-width: 1080px){
  .DY-hero{padding:96px 0 80px;min-height:0}
  .DY-hero-inner{grid-template-columns:1fr;gap:48px}
  .DY-kv{justify-content:center;width:100%}
  .DY-kv svg{max-width:460px;margin:0 auto}
}
@media (max-width: 700px){
  .DY-hero{padding:72px 0 64px}
  .DY-h1{font-size:clamp(40px,9vw,54px);letter-spacing:-1.2px}
  .DY-sub{font-size:16.5px}
  .DY-kv svg{max-width:360px}
  .DY-btn-primary,.DY-btn-outline{padding:14px 22px;font-size:14px}
}
`;

// ---------- KV: 雙向實時連接，配毫秒級往返讀數 ----------
function DYFlowKV() {
  // viewBox 520x360
  // Two large rounded device cards connected by a thick channel.
  const LX = 38,  LW = 130, LY = 110, LH = 140;    // client card
  const RX = 352, RW = 130, RY = 110;              // origin card
  const channelY = 180, channelH = 28;
  const channelX1 = LX + LW + 18, channelX2 = RX - 18;

  // animated packet, both directions
  const packetRight = (i, total) => {
    const begin = `${(i / total) * 1.6}s`;
    return (
      <circle key={`r${i}`} cx={channelX1} cy={channelY - 7} r="4.5" fill="#7C3AED">
        <animate attributeName="cx" from={channelX1} to={channelX2} dur="1.6s" begin={begin} repeatCount="indefinite" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="1.6s" begin={begin} repeatCount="indefinite" />
      </circle>
    );
  };
  const packetLeft = (i, total) => {
    const begin = `${(i / total) * 1.6 + 0.4}s`;
    return (
      <circle key={`l${i}`} cx={channelX2} cy={channelY + 7} r="4.5" fill="#C4B5FD">
        <animate attributeName="cx" from={channelX2} to={channelX1} dur="1.6s" begin={begin} repeatCount="indefinite" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="1.6s" begin={begin} repeatCount="indefinite" />
      </circle>
    );
  };

  return (
    <svg viewBox="0 0 520 360" role="img" aria-label="客戶端與源伺服器之間的雙向實時連接">
      <defs>
        <linearGradient id="dy-card" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#ffffff" />
          <stop offset="100%" stopColor="#F4F0FE" />
        </linearGradient>
        <linearGradient id="dy-channel" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#A855F7" />
          <stop offset="100%" stopColor="#7C3AED" />
        </linearGradient>
        <radialGradient id="dy-pulse" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#7C3AED" stopOpacity="0.45" />
          <stop offset="100%" stopColor="#7C3AED" stopOpacity="0" />
        </radialGradient>
        <filter id="dy-soft" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="6" />
        </filter>
      </defs>

      {/* soft glow under channel */}
      <ellipse cx="260" cy="180" rx="220" ry="22" fill="#7C3AED" opacity="0.10" filter="url(#dy-soft)" />

      {/* Left card, 客戶端 */}
      <g>
        <rect x={LX} y={LY} width={LW} height={LH} rx="18"
          fill="url(#dy-card)" stroke="#0F2A47" strokeWidth="2" />
        {/* simple app screen mock */}
        <rect x={LX + 18} y={LY + 22} width={LW - 36} height="10" rx="3" fill="#0F2A47" opacity=".85" />
        <rect x={LX + 18} y={LY + 40} width={LW - 60} height="6" rx="2" fill="#94a3b8" opacity=".6" />
        <rect x={LX + 18} y={LY + 54} width={LW - 80} height="6" rx="2" fill="#94a3b8" opacity=".4" />
        {/* live bubble */}
        <circle cx={LX + 30} cy={LY + 90} r="6" fill="#7C3AED" />
        <rect x={LX + 42} y={LY + 84} width="62" height="13" rx="6.5" fill="#F3EEFE" />
        <circle cx={LX + LW - 30} cy={LY + 115} r="6" fill="#C4B5FD" />
        <rect x={LX + LW - 96} y={LY + 109} width="62" height="13" rx="6.5" fill="#EDE9FE" />
        <text x={LX + LW / 2} y={LY + LH + 30} textAnchor="middle"
          fontSize="15" fontWeight="700" fill="#0F2A47"
          fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif">客戶端</text>
      </g>

      {/* Right card, 源伺服器 */}
      <g>
        <rect x={RX} y={RY} width={RW} height={LH} rx="18"
          fill="url(#dy-card)" stroke="#0F2A47" strokeWidth="2" />
        {/* rack lines */}
        {[0, 1, 2, 3].map((i) => (
          <g key={i}>
            <rect x={RX + 18} y={RY + 22 + i * 25} width={RW - 36} height="18" rx="4"
              fill="#0F2A47" opacity={i === 1 ? 0.95 : 0.12} />
            <circle cx={RX + 28} cy={RY + 31 + i * 25} r="2.6"
              fill={i === 1 ? '#5EEAD4' : '#7C3AED'} opacity={i === 1 ? 1 : 0.5}>
              {i === 1 && <animate attributeName="opacity" values="1;0.3;1" dur="1.2s" repeatCount="indefinite" />}
            </circle>
          </g>
        ))}
        <text x={RX + RW / 2} y={RY + LH + 30} textAnchor="middle"
          fontSize="15" fontWeight="700" fill="#0F2A47"
          fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif">源伺服器</text>
      </g>

      {/* Channel, single bar with two flow lanes */}
      <g>
        <rect x={channelX1} y={channelY - channelH / 2} width={channelX2 - channelX1}
          height={channelH} rx={channelH / 2} fill="url(#dy-channel)" opacity="0.18" />
        {/* lane center lines */}
        <line x1={channelX1 + 4} y1={channelY - 7} x2={channelX2 - 4} y2={channelY - 7}
          stroke="#7C3AED" strokeWidth="1" strokeDasharray="2 6" opacity="0.5" />
        <line x1={channelX1 + 4} y1={channelY + 7} x2={channelX2 - 4} y2={channelY + 7}
          stroke="#7C3AED" strokeWidth="1" strokeDasharray="2 6" opacity="0.5" />
        {/* travelling packets */}
        {Array.from({ length: 3 }).map((_, i) => packetRight(i, 3))}
        {Array.from({ length: 3 }).map((_, i) => packetLeft(i, 3))}
      </g>

      {/* Central latency badge */}
      <g transform="translate(260, 56)">
        <circle r="46" fill="url(#dy-pulse)" opacity="0.9">
          <animate attributeName="r" values="44;52;44" dur="2.4s" repeatCount="indefinite" />
        </circle>
        <circle r="42" fill="#0F2A47" />
        <text y="-2" textAnchor="middle"
          fontFamily="'Inter','Noto Sans HK',sans-serif"
          fontSize="26" fontWeight="700" fill="#fff" letterSpacing="-.8">&lt; 20</text>
        <text y="18" textAnchor="middle"
          fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif"
          fontSize="12" fontWeight="600" fill="#C4B5FD" letterSpacing=".5">毫秒往返</text>
      </g>
      {/* connector from badge to channel */}
      <line x1="260" y1="102" x2="260" y2={channelY - channelH / 2}
        stroke="#7C3AED" strokeWidth="1.5" strokeDasharray="3 4" opacity=".45" />

      {/* Tiny bidirectional caption above channel */}
      <text x="260" y={channelY + channelH / 2 + 26} textAnchor="middle"
        fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif"
        fontSize="13" fontWeight="700" fill="#7C3AED">雙向實時 · 連接不中斷</text>
    </svg>
  );
}

function DynamicHero() {
  return (
    <>
      <style>{DY_HERO_CSS}</style>
      <section className="DY-hero" data-screen-label="01 Hero">
        <div className="container DY-hero-inner">
          <div className="DY-hero-left">
            <h1 className="DY-h1">
              <span className="accent">動態 CDN</span>
            </h1>
            <p className="DY-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="DY-sub">
              為金融、遊戲、即時通訊與實時協作而設。<strong>WebSocket 與 API 雙向加速</strong>、
              最佳線路自動選擇，覆蓋本港、中國與全球節點。
            </p>

            <div className="DY-ctas">
              <a className="DY-btn-primary" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">免費試用</a>
              <a className="DY-btn-outline" href="#pricing" data-cta="view-pricing">查看價格</a>
            </div>
          </div>

          <div className="DY-kv">
            <DYFlowKV />
          </div>
        </div>
      </section>
    </>
  );
}

window.DynamicHero = DynamicHero;