/* global React */

// ============================================================
// Smart CDN, Hero
// Tagline: 流量自動走最快線路
// KV: 多線路 + 中央智能調度節點 + ★ 最快線路 + ╳ failover 動畫
// 視覺極簡，只有「智能調度中」一個 caption
// ============================================================
const SM_HERO_CSS = `
.SM-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}
.SM-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 65% 40%,#000 25%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 65% 40%,#000 25%,transparent 80%);pointer-events:none}
.SM-hero::after{content:'';position:absolute;top:-80px;right:-8%;width:55%;height:85%;background:radial-gradient(ellipse 50% 40% at 60% 30%,rgba(124,58,237,0.13) 0%,transparent 70%);pointer-events:none}

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

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

.SM-ctas{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.SM-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}
.SM-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)}
.SM-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}
.SM-btn-outline:hover{background:#fff;border-color:#0F2A47}

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

@media (max-width: 1080px){
  .SM-hero{padding:88px 0 72px}
  .SM-hero-inner{grid-template-columns:1fr;gap:48px}
  .SM-kv{justify-content:flex-start}
  .SM-kv svg{max-width:520px}
}
@media (max-width: 700px){
  .SM-hero{padding:64px 0 56px}
  .SM-h1{font-size:clamp(40px,9vw,54px);letter-spacing:-1.2px}
  .SM-sub{font-size:16.5px}
  .SM-kv svg{max-width:420px}
  .SM-btn-primary,.SM-btn-outline{padding:14px 22px;font-size:14px}
}
`;

// --- KV: 多線路智能調度 (simplified)
// Story 一眼看到：源站 → 智能 hub → 用戶。4 條線路同時量延遲，高亮那條最快，
// 同一條上一個 packet 動畫從左到右。沒有 A/B/C label、沒有 ★ rotation、沒有 failover。
// ---
function SMRoutingKV() {
  // viewBox 560 x 360
  // 4 lines, each with a ms badge on the right. Best line = lowest ms, highlighted.
  const lines = [
    { y: 110, ms: '48ms', best: false },
    { y: 168, ms: '12ms', best: true },
    { y: 226, ms: '38ms', best: false },
    { y: 284, ms: '94ms', best: false },
  ];
  return (
    <svg viewBox="0 0 560 360" role="img" aria-label="多條線路同時量延遲，智能調度自動採最快路徑">
      <defs>
        <linearGradient id="sm-card" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#ffffff" />
          <stop offset="100%" stopColor="#F4F0FE" />
        </linearGradient>
        <radialGradient id="sm-hub" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#7C3AED" />
          <stop offset="100%" stopColor="#4C1D95" />
        </radialGradient>
        <radialGradient id="sm-pulse" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#A855F7" stopOpacity="0.55" />
          <stop offset="100%" stopColor="#A855F7" stopOpacity="0" />
        </radialGradient>
        <filter id="sm-soft" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="6" />
        </filter>
      </defs>

      {/* soft glow under hub */}
      <ellipse cx="280" cy="195" rx="260" ry="36" fill="#7C3AED" opacity="0.10" filter="url(#sm-soft)" />

      {/* === Source (left) === */}
      <g>
        <rect x="20" y="150" width="76" height="90" rx="14" fill="url(#sm-card)" stroke="#0F2A47" strokeWidth="2" />
        <rect x="32" y="168" width="52" height="6" rx="2" fill="#0F2A47" opacity=".85" />
        <rect x="32" y="180" width="38" height="4" rx="2" fill="#94a3b8" opacity=".7" />
        <rect x="32" y="190" width="46" height="4" rx="2" fill="#94a3b8" opacity=".5" />
        <circle cx="40" cy="212" r="3" fill="#A855F7" />
        <rect x="48" y="209" width="30" height="6" rx="3" fill="#F3EEFE" />
        <text x="58" y="258" textAnchor="middle"
          fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif"
          fontSize="17" fontWeight="700" fill="#0F2A47">源站</text>
      </g>

      {/* === Smart hub (center) === */}
      <g transform="translate(280,195)">
        <circle r="60" fill="url(#sm-pulse)">
          <animate attributeName="r" values="50;68;50" dur="3s" repeatCount="indefinite" />
        </circle>
        <circle r="44" fill="url(#sm-hub)" />
        <circle r="44" fill="none" stroke="#C4B5FD" strokeWidth="1.5" opacity="0.5" />
        {/* simple sliders icon: 3 dots on left lining up to 1 dot on right → "convergence" */}
        <g stroke="#C4B5FD" strokeWidth="2" strokeLinecap="round" fill="none">
          <path d="M -14 -12 L 14 0" />
          <path d="M -14 0 L 14 0" />
          <path d="M -14 12 L 14 0" />
        </g>
        <circle cx="-14" cy="-12" r="3" fill="#fff" />
        <circle cx="-14" cy="0" r="3" fill="#fff" />
        <circle cx="-14" cy="12" r="3" fill="#fff" />
        <circle cx="14" cy="0" r="4" fill="#fff" />
        <text y="72" textAnchor="middle"
          fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif"
          fontSize="15" fontWeight="700" fill="#7C3AED" letterSpacing=".4">智能調度</text>
      </g>

      {/* === User (right) === */}
      <g>
        <rect x="464" y="150" width="76" height="90" rx="14" fill="url(#sm-card)" stroke="#0F2A47" strokeWidth="2" />
        <circle cx="502" cy="183" r="11" fill="#0F2A47" />
        <path d="M 486 213 Q 502 197 518 213 L 518 219 L 486 219 Z" fill="#0F2A47" />
        <text x="502" y="258" textAnchor="middle"
          fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif"
          fontSize="17" fontWeight="700" fill="#0F2A47">用戶</text>
      </g>

      {/* === Lines: 4 horizontal, each curving slightly through hub === */}
      {lines.map((l, i) => {
        const stroke = l.best ? '#7C3AED' : '#cbd5e1';
        const w = l.best ? 3 : 1.6;
        const op = l.best ? 1 : 0.55;
        return (
          <g key={i}>
            {/* L→hub curve */}
            <path
              id={`sm-line-L-${i}`}
              d={`M 96 195 Q 188 ${l.y} 240 195`}
              fill="none" stroke={stroke} strokeWidth={w} opacity={op} strokeLinecap="round"
              strokeDasharray={l.best ? '0' : '5 6'} />
            {/* hub→R curve */}
            <path
              id={`sm-line-R-${i}`}
              d={`M 320 195 Q 372 ${l.y} 464 195`}
              fill="none" stroke={stroke} strokeWidth={w} opacity={op} strokeLinecap="round"
              strokeDasharray={l.best ? '0' : '5 6'} />
          </g>
        );
      })}

      {/* === ms ping badges on the right side of each line, near user === */}
      {lines.map((l, i) => {
        const isBest = l.best;
        const W = isBest ? 80 : 60;
        return (
          <g key={`b${i}`} transform={`translate(${430 - (W - 50)}, ${l.y - 14})`}>
            <rect width={W} height="28" rx="14"
              fill={isBest ? '#7C3AED' : '#fff'}
              stroke={isBest ? '#7C3AED' : '#cbd5e1'} strokeWidth="1.4" />
            {isBest && (
              <text x="15" y="19" textAnchor="middle"
                fontFamily="'Chakra Petch',monospace" fontSize="14" fontWeight="700" fill="#fff">★</text>
            )}
            <text x={isBest ? 48 : 30} y="19" textAnchor="middle"
              fontFamily="'Chakra Petch','Inter',sans-serif" fontSize="15" fontWeight="700"
              fill={isBest ? '#fff' : '#64748b'}
              style={{ fontVariantNumeric: 'tabular-nums' }} letterSpacing=".2">{l.ms}</text>
          </g>
        );
      })}

      {/* === Animated packets ONLY on the best line === */}
      {(() => {
        const best = lines.find((l) => l.best);
        const idx = lines.indexOf(best);
        return (
          <>
            <circle r="5" fill="#7C3AED">
              <animateMotion dur="2.4s" repeatCount="indefinite" keyTimes="0;0.5;0.5;1" keyPoints="0;1;1;1">
                <mpath href={`#sm-line-L-${idx}`} />
              </animateMotion>
              <animate attributeName="opacity" values="0;1;1;0;0;0" keyTimes="0;0.04;0.46;0.5;0.99;1" dur="2.4s" repeatCount="indefinite" />
            </circle>
            <circle r="5" fill="#7C3AED">
              <animateMotion dur="2.4s" repeatCount="indefinite" keyTimes="0;0.5;0.5;1" keyPoints="0;0;0;1">
                <mpath href={`#sm-line-R-${idx}`} />
              </animateMotion>
              <animate attributeName="opacity" values="0;0;0;1;1;0" keyTimes="0;0.45;0.5;0.54;0.97;1" dur="2.4s" repeatCount="indefinite" />
            </circle>
          </>
        );
      })()}

      {/* === Bottom caption, one line of helpful copy === */}
      <g transform="translate(280, 332)">
        <text textAnchor="middle"
          fontFamily="'Noto Sans HK','Noto Sans TC',sans-serif"
          fontSize="16" fontWeight="700" fill="#7C3AED" letterSpacing=".3">
          多線量測延遲·自動採最快路徑
        </text>
      </g>
    </svg>
  );
}

function SmartHero() {
  return (
    <>
      <style>{SM_HERO_CSS}</style>
      <section className="SM-hero" data-screen-label="01 Hero">
        <div className="container SM-hero-inner">
          <div className="SM-hero-left">
            <h1 className="SM-h1">
              <span className="accent">智能 CDN</span>
            </h1>
            <p className="SM-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="SM-sub">
              結合多條線路與節點，按用戶位置自動選擇最快路徑；任一線路異常時<strong>自動切換不中斷</strong>。
              比建構獨立 multi-CDN 方案更省成本。
            </p>
            <div className="SM-ctas">
              <a className="SM-btn-primary" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">免費試用</a>
              <a className="SM-btn-outline" href="#pricing" data-cta="view-pricing">查看價格</a>
            </div>
          </div>

          <div className="SM-kv">
            <SMRoutingKV />
          </div>
        </div>
      </section>
    </>
  );
}

window.SmartHero = SmartHero;