import { Container } from '../components/Container'
import { Crosshair } from '../components/Crosshair'
import { WaveBars } from '../components/WaveBars'
import { GlowButton } from '../components/GlowButton'
import { useI18n } from '../i18n'
import { useClientOS } from '../hooks/useClientOS'

export function CTA() {
  const { t, locale } = useI18n()
  const clientOS = useClientOS()

  return (
    <section className="relative py-28 md:py-36 overflow-hidden">
      {/* Background radial glow */}
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[500px] bg-brand-amber/[0.045] rounded-full blur-[140px] pointer-events-none" />

      <Container className="relative text-center">
        <Crosshair className="inline-block mb-8">
          <WaveBars className="h-9 px-3" />
        </Crosshair>

        <h2
          className="font-display text-display font-extrabold text-neutral-50 mb-6 max-w-3xl mx-auto tracking-tight break-keep"
          style={{ wordBreak: 'keep-all', overflowWrap: 'break-word' }}
        >
          {t.cta.title1} <span className="text-brand-amber">{t.cta.title2}</span>
        </h2>

        <p
          className="text-base md:text-lg text-neutral-400 max-w-xl mx-auto mb-8 leading-relaxed break-keep"
          style={{ wordBreak: 'keep-all', overflowWrap: 'break-word' }}
        >
          {t.cta.subtitle1}
          <br />
          {t.cta.subtitle2}
        </p>

        {/* Hotkey Hint Box */}
        <div className="inline-flex items-center gap-2 mb-10 px-4 py-2 rounded-xl bg-surface-800/80 border border-white/[0.08] shadow-inner">
          <span className="font-mono text-nano text-neutral-400 uppercase tracking-widest">
            Push-to-Talk:
          </span>
          <div className="flex items-center gap-1 font-mono text-xs font-semibold text-neutral-200">
            <span className="px-2 py-0.5 rounded bg-surface-600 border border-white/[0.1]">Ctrl</span>
            <span className="text-neutral-500">+</span>
            <span className="px-2 py-0.5 rounded bg-surface-600 border border-white/[0.1]">Shift</span>
            <span className="text-neutral-500">+</span>
            <span className="px-2.5 py-0.5 rounded bg-brand-amber/20 border border-brand-amber/40 text-brand-amber">Space</span>
          </div>
        </div>

        <div className="flex flex-col items-center gap-3">
          <GlowButton
            href={clientOS.downloadUrl}
            download={clientOS.downloadFilename || undefined}
            variant="primary"
            size="lg"
            className="shadow-glow-md hover:shadow-glow-lg"
          >
            {locale === 'ko' ? clientOS.buttonLabelKo : clientOS.buttonLabelEn}
          </GlowButton>
          <div className="flex items-center gap-2 font-mono text-xs text-neutral-400">
            <span>{locale === 'ko' ? clientOS.subtextKo : clientOS.subtextEn}</span>
            <span>·</span>
            <a href="#download" className="underline hover:text-brand-amber transition-colors">
              {locale === 'ko' ? '다른 OS 다운로드' : 'Other Platforms'}
            </a>
          </div>
        </div>

        <p className="font-mono text-nano text-neutral-500 mt-8 uppercase tracking-widest">
          {t.cta.systemReq} · 100% OPEN ARCHITECTURE
        </p>
      </Container>
    </section>
  )
}