/* global React */

// ============================================================
// Video CDN, Hero
// Tagline: 直播零卡頓、點播秒開
// Visual: LIVE dot + smooth flowing waveform (signal/time dimension)
//         Sibling pages own space/geography, Video CDN owns time.
//         KV minimal text, only "● LIVE" indicator.
// ============================================================
const VD_HERO_CSS = `
.VD-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}
.VD-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}
.VD-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}

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

.VD-hero-left{position:relative;z-index:2}
.VD-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}
.VD-h1 .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.VD-h1 .l2{display:block;margin-top:4px}
.VD-sub{margin:26px 0 0;max-width:560px;font-size:19px;line-height:1.7;color:#475569;text-wrap:pretty}
.VD-sub strong{color:#0F2A47;font-weight:600}

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

/* inline stat strip (replaces eyebrow / pill) */
.VD-hero-strip{margin-top:48px;display:flex;gap:48px;flex-wrap:wrap;align-items:flex-end}
.VD-hs{display:flex;flex-direction:column;gap:6px}
.VD-hs b{font-family:'Chakra Petch','Inter',sans-serif;font-size:32px;font-weight:600;color:#0F2A47;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.VD-hs b .u{font-size:17px;font-weight:600;color:#7C3AED;margin-left:2px;letter-spacing:-.2px}
.VD-hs span{font-size:13px;font-weight:500;color:#64748b;letter-spacing:-.1px}

/* ---- Right: signal console KV ---- */
.VD-kv{position:relative;z-index:2;display:flex;justify-content:center;width:100%}
.VD-console{position:relative;width:100%;max-width:520px;aspect-ratio: 1 / 0.95;background:radial-gradient(120% 120% at 100% 0%,#1A3A5A 0%,#0F2A47 65%);border-radius:24px;padding:28px;box-shadow:0 30px 60px -20px rgba(15,42,71,0.40),0 0 0 1px rgba(167,139,250,0.18);overflow:hidden;display:flex;flex-direction:column;gap:22px}
.VD-console::before{content:'';position:absolute;top:-90px;right:-90px;width:280px;height:280px;background:radial-gradient(circle,rgba(167,139,250,0.30) 0%,transparent 70%);pointer-events:none}
.VD-console-top{position:relative;display:flex;justify-content:space-between;align-items:center;z-index:2}
.VD-live{display:inline-flex;align-items:center;gap:8px;font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;color:#fff}
.VD-live-dot{width:9px;height:9px;border-radius:50%;background:#EF4444;box-shadow:0 0 0 0 rgba(239,68,68,0.55);animation:vdPulse 1.5s ease-in-out infinite}
@keyframes vdPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,0.55)}50%{transform:scale(1.18);box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.VD-tc{font-family:'Chakra Petch',monospace;font-size:13px;color:rgba(196,181,253,0.75);letter-spacing:1.6px;font-variant-numeric:tabular-nums}

/* Play frame */
.VD-frame{position:relative;flex:1;border-radius:14px;background:linear-gradient(180deg,rgba(15,42,71,0.4) 0%,rgba(0,0,0,0.4) 100%);border:1px solid rgba(196,181,253,0.16);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0}
.VD-frame::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(196,181,253,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(196,181,253,0.08) 1px,transparent 1px);background-size:40px 40px}
.VD-play{position:relative;width:78px;height:78px;border-radius:50%;background:rgba(196,181,253,0.10);border:1.5px solid rgba(196,181,253,0.34);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);z-index:2}
.VD-play::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(196,181,253,0.20);animation:vdRing 2.4s ease-out infinite}
.VD-play::after{content:'';position:absolute;inset:-22px;border-radius:50%;border:1px solid rgba(196,181,253,0.10);animation:vdRing 2.4s ease-out 0.6s infinite}
@keyframes vdRing{0%{transform:scale(0.85);opacity:0.7}100%{transform:scale(1.4);opacity:0}}
.VD-play svg{width:30px;height:30px;color:#fff;margin-left:5px;filter:drop-shadow(0 2px 8px rgba(167,139,250,0.5))}

/* Frame chrome, buffer / quality chip */
.VD-frame-meta{position:absolute;left:14px;bottom:12px;z-index:3;display:flex;gap:6px;align-items:center}
.VD-chip{padding:5px 10px;font-family:'Chakra Petch',monospace;font-size:13px;font-weight:600;letter-spacing:1.4px;color:#C4B5FD;background:rgba(196,181,253,0.10);border:1px solid rgba(196,181,253,0.24);border-radius:6px;backdrop-filter:blur(8px)}
.VD-frame-meta .VD-chip.b{color:#fff;background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.20)}

/* Waveform */
.VD-wave{position:relative;height:74px;display:flex;align-items:center;gap:3px;padding:0 4px}
.VD-wave-bar{flex:1;border-radius:99px;background:linear-gradient(180deg,#C4B5FD 0%,#7C3AED 100%);transform-origin:center;animation:vdWave 1.4s ease-in-out infinite alternate}
@keyframes vdWave{0%{transform:scaleY(0.2)}100%{transform:scaleY(1)}}
.VD-wave-bar.dim{background:linear-gradient(180deg,#475569 0%,#334155 100%);opacity:0.5}

/* Footer telemetry */
.VD-telem{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:14px 0 0;border-top:1px solid rgba(196,181,253,0.16)}
.VD-t-it{display:flex;flex-direction:column;gap:4px}
.VD-t-it b{font-family:'Chakra Petch','Inter',sans-serif;font-size:18px;font-weight:600;color:#C4B5FD;letter-spacing:-.3px;line-height:1;font-variant-numeric:tabular-nums}
.VD-t-it span{font-family:'Chakra Petch',monospace;font-size:13px;color:rgba(196,181,253,0.75);letter-spacing:1.4px;text-transform:uppercase}

@media (max-width: 1080px){
  .VD-hero{padding:88px 0 80px}
  .VD-hero-inner{grid-template-columns:1fr;gap:48px}
  .VD-console{max-width:560px}
}
@media (max-width: 700px){
  .VD-hero{padding:64px 0 56px}
  .VD-h1{font-size:clamp(40px,9vw,54px);letter-spacing:-1.2px}
  .VD-sub{font-size:16.5px}
  .VD-hero-strip{gap:28px;margin-top:36px}
  .VD-hs b{font-size:26px}
  .VD-console{padding:22px;border-radius:18px}
  .VD-play{width:64px;height:64px}
  .VD-play svg{width:24px;height:24px}
  .VD-wave{height:60px}
  .VD-t-it b{font-size:16px}
  .VD-btn-primary,.VD-btn-outline{padding:14px 22px;font-size:14px}
}
`;

// Deterministic but organic-looking wave height pattern
const VD_WAVE = [
  0.22, 0.45, 0.62, 0.38, 0.78, 0.55, 0.30, 0.68, 0.85, 0.50,
  0.62, 0.92, 0.74, 0.45, 0.30, 0.58, 0.72, 0.40, 0.65, 0.88,
  0.55, 0.34, 0.72, 0.60, 0.42, 0.78, 0.92, 0.58, 0.45, 0.66,
  0.80, 0.50, 0.36, 0.62, 0.48, 0.74, 0.58, 0.28, 0.66, 0.52,
];

function VideoConsoleKV() {
  // tick a fake timecode so the LIVE looks real
  const [tc, setTc] = React.useState({ h: 0, m: 32, s: 14 });
  React.useEffect(() => {
    const id = setInterval(() => {
      setTc((t) => {
        let s = t.s + 1, m = t.m, h = t.h;
        if (s >= 60) { s = 0; m += 1; }
        if (m >= 60) { m = 0; h += 1; }
        return { h, m, s };
      });
    }, 1000);
    return () => clearInterval(id);
  }, []);
  const fmt = (n) => String(n).padStart(2, '0');

  return (
    <div className="VD-console" aria-label="影片 CDN 直播控制台示意圖，紅色 LIVE 訊號與平穩波形">
      <div className="VD-console-top">
        <span className="VD-live"><span className="VD-live-dot" />LIVE</span>
        <span className="VD-tc">{fmt(tc.h)}:{fmt(tc.m)}:{fmt(tc.s)}</span>
      </div>

      <div className="VD-frame">
        <div className="VD-play" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 4l14 8-14 8V4z" /></svg>
        </div>
        <div className="VD-frame-meta">
          <span className="VD-chip">HLS · 1080p</span>
          <span className="VD-chip b">CDN HIT</span>
        </div>
      </div>

      <div className="VD-wave" aria-hidden="true">
        {VD_WAVE.map((h, i) => (
          <span
            key={i}
            className="VD-wave-bar"
            style={{
              height: `${h * 100}%`,
              animationDelay: `${(i % 12) * 0.07}s`,
              animationDuration: `${1.1 + (i % 5) * 0.12}s`,
            }}
          />
        ))}
      </div>

    </div>
  );
}

function VideoHero() {
  return (
    <>
      <style>{VD_HERO_CSS}</style>
      <section className="VD-hero" data-screen-label="01 Hero">
        <div className="container VD-hero-inner">
          <div className="VD-hero-left">
            <h1 className="VD-h1">
              <span className="accent">影片 CDN</span>
            </h1>
            <p className="VD-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="VD-sub">
              為直播、串流媒體與大規模影片交付而設。一個服務即時覆蓋
              <strong> 本港、中國與全球觀眾</strong>，支援 HLS、MPEG-DASH、MP4 等主流格式，
              內建免費 SSL、WAF 與 DDoS 防護。
            </p>
            <div className="VD-ctas">
              <a className="VD-btn-primary" href="https://passport.8338.hk/zh-hant/signup" data-cta="start-trial">免費試用</a>
              <a className="VD-btn-outline" href="#pricing" data-cta="view-pricing">查看價格</a>
            </div>
          </div>

          <div className="VD-kv">
            <VideoConsoleKV />
          </div>
        </div>
      </section>
    </>
  );
}

window.VideoHero = VideoHero;