// Hero — one oversized emerald CTA, zero decisions
const HERO_I18N = {
  zh: {
    h1Line1: ['一次', '开播，'],
    h1Shimmer: '多份返佣',
    h1Suffix: '到账。',
    desc: '为 Web3 KOL 打造的 PC 直播工具。同步推流 Binance · OKX · Gate，各平台绑定专属返佣码，一份内容，多份收入。',
    downloadTitle: '下载 kiwvo',
    macLabel: 'macOS 12+',
    macName: 'MAC',
    armChip: '.dmg (Apple 芯片)',
    armSize: '268 MB · M1/M2/M3/M4',
    intelChip: '.dmg (Intel)',
    intelSize: '273 MB · Intel 芯片',
    winLabel: 'Windows 10+',
    winName: 'Windows',
    winChip: 'Windows x64',
    winSize: '',
    dlBtn: '点击下载',
    macTip: '如果提示"已损坏，无法打开"，请打开终端执行：',
    macCmd: 'xattr -cr /Applications/Livetool2.app',
    winTip: '如果浏览器提示"通常不会下载"，请点击 「...」→「保留」→「仍然保留」即可正常安装。',
  },
  en: {
    h1Line1: ['Stream once,', ''],
    h1Shimmer: 'earn everywhere',
    h1Suffix: '— paid.',
    desc: 'A PC streaming tool built for Web3 KOLs. Simulcast to Binance · OKX · Gate with dedicated referral codes — one broadcast, multiple income streams.',
    downloadTitle: 'Download kiwvo',
    macLabel: 'macOS 12+',
    macName: 'MAC',
    armChip: '.dmg (Apple Silicon)',
    armSize: '268 MB · M1/M2/M3/M4',
    intelChip: '.dmg (Intel)',
    intelSize: '273 MB · Intel chip',
    winLabel: 'Windows 10+',
    winName: 'Windows',
    winChip: 'Windows x64',
    winSize: '',
    dlBtn: 'Download',
    macTip: 'If you see "app is damaged", open Terminal and run:',
    macCmd: 'xattr -cr /Applications/Livetool2.app',
    winTip: 'If the browser says "not commonly downloaded", click 「...」→「Keep」→「Keep anyway」to proceed.',
  },
};

const R2_BASE = 'https://pub-e80e0aad3d5d42359742036fc5cb8d4a.r2.dev';
// ⚠️ UPDATE CHECKLIST when bumping version:
//   1. This VERSION constant
//   2. vovoa/index.html (6 hardcoded download URLs — 3 Chinese + 3 English)
//   3. File names changed from Livetool2 → Kiwvo, .dmg → .zip since v1.0.14
const VERSION = '1.0.24';
const DL_MAC_ARM = `${R2_BASE}/v${VERSION}/Kiwvo-${VERSION}-arm64-mac.zip`;
const DL_MAC_INTEL = `${R2_BASE}/v${VERSION}/Kiwvo-${VERSION}-mac.zip`;
const DL_WIN = `${R2_BASE}/v${VERSION}/Kiwvo-Setup-${VERSION}.exe`;

// 共享给其他组件（如 LiveShowcase 下载弹窗）
window.KIWVO_DL = { macArm: DL_MAC_ARM, macIntel: DL_MAC_INTEL, win: DL_WIN };

function DlButton({ href, label }) {
  return (
    <a
      href={href}
      className="group/btn inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-emerald-500/25 bg-emerald-500/[0.08] hover:bg-emerald-500/[0.18] hover:border-emerald-400/50 transition-all duration-200 no-underline"
    >
      <span className="text-[13px] font-medium text-emerald-300 group-hover/btn:text-emerald-200 transition-colors">{label}</span>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-emerald-400/60 group-hover/btn:text-emerald-300 transition-colors">
        <path d="M7 7h10v10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M7 17L17 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </a>
  );
}

function Hero() {
  const [lang] = useLang();
  const t = HERO_I18N[lang] || HERO_I18N.zh;

  return (
    <section id="download" className="relative pt-[160px] pb-[120px] overflow-hidden">
      <div
        className="absolute left-1/2 top-[120px] -translate-x-1/2 w-[820px] h-[420px] pointer-events-none opacity-60"
        style={{
          background: 'radial-gradient(ellipse at center, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0.04) 40%, transparent 70%)',
          filter: 'blur(20px)',
        }}
      />
      <div
        className="absolute inset-0 pointer-events-none opacity-[0.04]"
        style={{
          backgroundImage: 'linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px)',
          backgroundSize: '56px 56px',
          maskImage: 'radial-gradient(ellipse at center top, black 20%, transparent 70%)',
          WebkitMaskImage: 'radial-gradient(ellipse at center top, black 20%, transparent 70%)',
        }}
      />

      <div className="relative max-w-[1100px] mx-auto px-8 text-center">
        <h1 className="relative text-[clamp(64px,9vw,108px)] leading-[0.92] font-semibold tracking-[-0.04em] text-white text-balance">
          <span className="block">
            {t.h1Line1[0]}{t.h1Line1[1] && <span className="text-white/30">{t.h1Line1[1]}</span>}
          </span>
          <span className="relative inline-block mt-2">
            <span
              className="bg-clip-text text-transparent"
              style={{
                backgroundImage: 'linear-gradient(92deg, #6EE7B7 0%, #34D399 35%, #FFFFFF 65%, #6EE7B7 100%)',
                backgroundSize: '220% 100%',
                animation: 'heroShimmer 7s ease-in-out infinite',
              }}
            >
              {t.h1Shimmer}
            </span>
            <span
              aria-hidden="true"
              className="absolute -bottom-2 left-0 right-0 h-[6px] rounded-full"
              style={{ background: 'linear-gradient(90deg, transparent, rgba(16,185,129,0.55), transparent)' }}
            />
          </span>
          {' '}<span className="text-white/30">{t.h1Suffix}</span>
        </h1>

        <style>{`
          @keyframes heroShimmer {
            0%, 100% { background-position: 0% 50%; }
            50%       { background-position: 100% 50%; }
          }
        `}</style>

        <p className="mt-8 text-[17px] leading-[1.55] text-white/55 max-w-[600px] mx-auto text-balance">
          {t.desc}
        </p>

        {/* Download two-column layout */}
        <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-[780px] mx-auto">
          {/* macOS card */}
          <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-6 text-center">
            <div className="text-[13px] text-white/40 font-mono tracking-wide mb-5">{t.macLabel}</div>
            <div className="flex items-center justify-center gap-3 mb-6">
              <svg width="36" height="36" viewBox="0 0 24 24" fill="currentColor" className="text-emerald-400">
                <path d="M17.5 12.5c0-2.4 2-3.5 2-3.5-1.1-1.6-2.8-1.8-3.4-1.9-1.5-.1-2.8.8-3.6.8-.7 0-1.9-.8-3.1-.8-1.6 0-3.1.9-3.9 2.4-1.7 2.9-.4 7.3 1.2 9.7.8 1.2 1.7 2.5 3 2.5 1.2 0 1.6-.8 3.1-.8 1.4 0 1.8.8 3.1.8 1.3 0 2.1-1.2 2.9-2.4.9-1.4 1.3-2.7 1.3-2.8-.1-.1-2.6-1-2.6-4zM15 5.5c.7-.9 1.2-2.1 1-3.3-1.1 0-2.4.7-3.1 1.6-.7.8-1.3 2.1-1.1 3.3 1.2.1 2.5-.6 3.2-1.6z"/>
              </svg>
              <span className="text-[32px] font-bold text-white tracking-tight">{t.macName}</span>
            </div>

            {/* Apple Silicon + Intel side by side */}
            <div className="grid grid-cols-2 gap-3">
              <div className="flex flex-col items-center gap-1.5 p-3 rounded-xl border border-white/[0.04] bg-white/[0.01]">
                <div className="text-[13px] text-emerald-300/70">{t.armChip}</div>
                <div className="text-[11px] text-white/30 font-mono">{t.armSize}</div>
                <div className="mt-1.5"><DlButton href={DL_MAC_ARM} label={t.dlBtn} /></div>
              </div>
              <div className="flex flex-col items-center gap-1.5 p-3 rounded-xl border border-white/[0.04] bg-white/[0.01]">
                <div className="text-[13px] text-emerald-300/70">{t.intelChip}</div>
                <div className="text-[11px] text-white/30 font-mono">{t.intelSize}</div>
                <div className="mt-1.5"><DlButton href={DL_MAC_INTEL} label={t.dlBtn} /></div>
              </div>
            </div>

            {/* macOS install tip */}
            <div className="mt-4 text-left">
              <p className="text-[11px] text-white/35 leading-relaxed">{t.macTip}</p>
              <code className="mt-1.5 block text-[10.5px] font-mono text-emerald-300/60 bg-black/30 rounded-md px-2.5 py-1.5 select-all break-all">{t.macCmd}</code>
            </div>
          </div>

          {/* Windows card */}
          <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-6 text-center flex flex-col">
            <div className="text-[13px] text-white/40 font-mono tracking-wide mb-5">{t.winLabel}</div>
            <div className="flex items-center justify-center gap-3 mb-6">
              <svg width="36" height="36" viewBox="0 0 24 24" fill="currentColor" className="text-emerald-400">
                <path d="M3 5.5l8-1.1v8H3v-6.9zM12 4.3L21 3v9.4h-9V4.3zM3 12.5h8v7L3 18.4v-5.9zM12 12.5h9V21l-9-1.2v-7.3z"/>
              </svg>
              <span className="text-[32px] font-bold text-white tracking-tight">{t.winName}</span>
            </div>

            <div className="flex-1 flex flex-col items-center justify-center">
              <div className="text-[13px] text-emerald-300/70 mb-1.5">{t.winChip}</div>
              {t.winSize && <div className="text-[11px] text-white/30 font-mono mb-2.5">{t.winSize}</div>}
              <div className="mt-2.5">
                <DlButton href={DL_WIN} label={t.dlBtn} />
              </div>
            </div>

            {/* Windows install tip */}
            <div className="mt-4 text-left">
              <p className="text-[11px] text-white/35 leading-relaxed">{t.winTip}</p>
            </div>
          </div>
        </div>

        <div className="mt-20 flex items-center justify-center flex-wrap gap-x-8 gap-y-3 text-white/45 text-[12.5px] font-mono tracking-[0.06em]">
          <a href="https://x.com/kiwvolive" target="_blank" rel="noreferrer noopener" className="group inline-flex items-center gap-2 hover:text-emerald-300 transition-colors">
            <span className="w-7 h-7 rounded-md bg-white/[0.04] border border-white/[0.07] group-hover:border-emerald-400/30 group-hover:bg-emerald-400/[0.06] flex items-center justify-center transition-colors">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18.244 2H21l-6.55 7.49L22 22h-6.79l-4.74-6.2L4.96 22H2.2l7.02-8.02L2 2h6.96l4.28 5.66L18.244 2zm-1.18 18h1.86L7.06 4H5.1l11.964 16z" />
              </svg>
            </span>
            <span className="text-white/55 group-hover:text-emerald-300 transition-colors">@kiwvo</span>
          </a>
          <span className="w-px h-3 bg-white/10" />
          <a href="mailto:support@kiwvo.com" className="group inline-flex items-center gap-2 hover:text-emerald-300 transition-colors">
            <span className="w-7 h-7 rounded-md bg-white/[0.04] border border-white/[0.07] group-hover:border-emerald-400/30 group-hover:bg-emerald-400/[0.06] flex items-center justify-center transition-colors">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
                <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6" />
                <path d="M3.5 6.5l8.5 6 8.5-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            <span className="text-white/55 group-hover:text-emerald-300 transition-colors">support@kiwvo.com</span>
          </a>
          <span className="w-px h-3 bg-white/10" />
          <a href="https://t.me/kiwvolive" target="_blank" rel="noreferrer noopener" className="group inline-flex items-center gap-2 hover:text-emerald-300 transition-colors">
            <span className="w-7 h-7 rounded-md bg-white/[0.04] border border-white/[0.07] group-hover:border-emerald-400/30 group-hover:bg-emerald-400/[0.06] flex items-center justify-center transition-colors">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
                <path d="M21.5 3.5L2.6 11.2c-1 .4-1 1.4 0 1.7l4.7 1.5 1.8 5.7c.2.7.6.9 1.2.5l2.7-2.1 4.6 3.4c.9.5 1.5.2 1.7-.8l3.1-14.7c.3-1.4-.5-2-1.9-1.4zM9.5 15.4l11-7-9 8.4-.4 3.4-1.6-4.8z" />
              </svg>
            </span>
            <span className="text-white/55 group-hover:text-emerald-300 transition-colors">@kiwvolive</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;