'use client'

import { useState } from 'react'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'

interface USPSlideProps { lang: Language }

const MONO: React.CSSProperties = {
  fontFamily: '"JetBrains Mono","SF Mono",ui-monospace,monospace',
  fontVariantNumeric: 'tabular-nums',
}

const CSS_KF = `
  @keyframes uspFlowR { 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-14px} }
  @keyframes uspSpin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
  @keyframes uspPulse  {
    0%,100% { box-shadow: 0 0 38px rgba(167,139,250,.55), 0 0 80px rgba(167,139,250,.2), inset 0 3px 0 rgba(255,255,255,.35), inset 0 -6px 12px rgba(0,0,0,.35); }
    50%     { box-shadow: 0 0 58px rgba(167,139,250,.85), 0 0 110px rgba(167,139,250,.35), inset 0 3px 0 rgba(255,255,255,.4), inset 0 -6px 12px rgba(0,0,0,.35); }
  }
  @keyframes uspPulseLight {
    0%,100% { box-shadow: 0 0 28px rgba(167,139,250,.4), 0 0 56px rgba(167,139,250,.15), inset 0 3px 0 rgba(255,255,255,.5), inset 0 -6px 12px rgba(0,0,0,.2); }
    50%     { box-shadow: 0 0 44px rgba(167,139,250,.65), 0 0 80px rgba(167,139,250,.25), inset 0 3px 0 rgba(255,255,255,.55), inset 0 -6px 12px rgba(0,0,0,.2); }
  }
  @keyframes uspHeading {
    0%,100% { text-shadow: 0 0 22px rgba(167,139,250,.3); }
    50%     { text-shadow: 0 0 36px rgba(167,139,250,.55); }
  }
`

// ── Light mode hook ───────────────────────────────────────────────────────────
export default function USPSlide({ lang }: USPSlideProps) {
  const de = lang === 'de'
  const isLight = useIsLight()
  const details = getDetails(de)
  const [detail, setDetail] = useState<DetailItem | null>(null)
  const open = (k: string) => setDetail(details[k])
  const close = () => setDetail(null)

  return (
    <div>
      <style>{CSS_KF}</style>

      <FadeInView className="text-center mb-1">
        <h2 className="text-5xl md:text-6xl font-bold mb-1">
          <GradientText>USP</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">
          {de ? 'Compliance und Code — in einer Plattform, immer synchron' : 'Compliance and code — one platform, always in sync'}
        </p>
      </FadeInView>

      <FadeInView delay={0.1}>
        {/* ── MAIN CANVAS ───────────────────────────────────────────────── */}
        <div style={{
          position: 'relative', overflow: 'hidden', borderRadius: 16,
          background: isLight
            ? 'linear-gradient(160deg, #f0f4ff 0%, #eff6ff 50%, #f5f0ff 100%)'
            : 'radial-gradient(ellipse at 50% 30%, #1a0f34 0%, #0e0720 55%, #050210 100%)',
          color: isLight ? '#1a1a2e' : '#ece9f7',
          fontFamily: '"Inter", system-ui, sans-serif',
          WebkitFontSmoothing: 'antialiased',
          transform: 'scale(1.12)',
          transformOrigin: 'top center',
          marginBottom: -40,
        }}>
          {/* Ambient glow — dark only */}
          {!isLight && (
            <div style={{
              position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)',
              width: 800, height: 500, borderRadius: '50%',
              background: 'radial-gradient(ellipse, rgba(167,139,250,.2), transparent 65%)',
              filter: 'blur(50px)', pointerEvents: 'none',
            }} />
          )}
          <StarField isLight={isLight} />

          {/* Interaction hint */}
          <div style={{
            position: 'absolute', top: 20, right: 28, zIndex: 5,
            ...MONO, fontSize: 9.5, letterSpacing: 2,
            color: isLight ? 'rgba(109,77,194,.6)' : 'rgba(167,139,250,.55)',
            textTransform: 'uppercase', fontWeight: 600,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: isLight ? '#16a34a' : '#4ade80', boxShadow: `0 0 8px ${isLight ? '#16a34a' : '#4ade80'}` }} />
            {de ? 'Element anklicken' : 'Click any element'}
          </div>

          {/* Bridge */}
          <div style={{ position: 'relative', margin: '8px 48px 0', height: 330 }}>
            <BridgeConnectors isLight={isLight} />
            <div style={{
              position: 'relative', zIndex: 2,
              display: 'grid', gridTemplateColumns: '1fr 260px 1fr', gap: 0,
              alignItems: 'start', height: '100%',
            }}>
              {/* LEFT — Compliance */}
              <div style={{ display: 'flex', flexDirection: 'column', paddingRight: 20 }}>
                <div style={{ height: 40, marginBottom: 36 }}>
                  <ColHeader side="left" label="Compliance" color="#a78bfa" icon="⎈" sub="policy · audit · proof" isLight={isLight} />
                </div>
                <div style={{ height: 110, display: 'flex', alignItems: 'center' }}>
                  <div style={{ width: '100%' }}>
                    <PillarRow side="left" tint="#a78bfa" isLight={isLight}
                      title={de ? 'RFQ-Prüfung' : 'RFQ Verification'}
                      body={de
                        ? 'Kunden-Anforderungsdokumente automatisch gegen aktuellen Code validiert. Abweichungen erkannt, Änderungen vorgeschlagen.'
                        : 'Customer requirements auto-validated against current code. Gaps surfaced with implementation proposals.'}
                      onClick={() => open('rfq')}
                      active={detail?.title === details.rfq.title}
                    />
                  </div>
                </div>
                <div style={{ height: 110, display: 'flex', alignItems: 'center' }}>
                  <div style={{ width: '100%' }}>
                    <PillarRow side="left" tint="#c084fc" isLight={isLight}
                      title={de ? 'Prozess-Compliance' : 'Process Compliance'}
                      body={de
                        ? 'Vom Audit-Finding bis zur Code-Änderung vollständig automatisiert. Rollen, Fristen, Eskalation — End-to-End verwaltet.'
                        : 'From audit finding to code change, fully automated. Roles, deadlines, escalation — managed end-to-end.'}
                      onClick={() => open('process')}
                      active={detail?.title === details.process.title}
                    />
                  </div>
                </div>
              </div>

              {/* CENTER hub */}
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
                <div
                  onClick={() => open('hub')}
                  style={{ cursor: 'pointer', transition: 'transform .25s, filter .25s' }}
                  onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.transform = 'scale(1.05)'; (e.currentTarget as HTMLDivElement).style.filter = 'brightness(1.15)' }}
                  onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.transform = 'scale(1)'; (e.currentTarget as HTMLDivElement).style.filter = 'brightness(1)' }}
                >
                  <CentralHub caption={de ? 'Immer in Sync' : 'Always in sync'} isLight={isLight} />
                </div>
              </div>

              {/* RIGHT — Code */}
              <div style={{ display: 'flex', flexDirection: 'column', paddingLeft: 20 }}>
                <div style={{ height: 40, marginBottom: 36 }}>
                  <ColHeader side="right" label="Code" color="#fbbf24" icon="⟨/⟩" sub="sast · dast · sbom" isLight={isLight} />
                </div>
                <div style={{ height: 110, display: 'flex', alignItems: 'center' }}>
                  <div style={{ width: '100%' }}>
                    <PillarRow side="right" tint="#fbbf24" isLight={isLight}
                      title={de ? 'Bidirektional' : 'Bidirectional Sync'}
                      body={de
                        ? 'Compliance-Änderungen fliessen in Code; Code-Änderungen aktualisieren Docs. Beide Seiten immer synchron — kein Informationsverlust.'
                        : 'Compliance edits flow into code; code changes update docs. Both sides always in sync — zero drift.'}
                      onClick={() => open('bidir')}
                      active={detail?.title === details.bidir.title}
                    />
                  </div>
                </div>
                <div style={{ height: 110, display: 'flex', alignItems: 'center' }}>
                  <div style={{ width: '100%' }}>
                    <PillarRow side="right" tint="#f59e0b" isLight={isLight}
                      title={de ? 'Kontinuierlich' : 'Continuous, Not Yearly'}
                      body={de
                        ? 'Klassische Audits einmal jährlich — wir prüfen bei jedem Commit. Findings werden sofort zu Tickets mit konkreten Fixes.'
                        : 'Classic audits run once a year. We run on every commit — findings become tickets with fixes ready.'}
                      onClick={() => open('cont')}
                      active={detail?.title === details.cont.title}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Under the Hood */}
          <div style={{ position: 'relative', zIndex: 2, padding: '0 48px 16px' }}>
            <div style={{
              ...MONO, fontSize: 9.5, letterSpacing: 3.5,
              color: isLight ? 'rgba(109,77,194,.7)' : 'rgba(167,139,250,.7)',
              textTransform: 'uppercase', fontWeight: 600, textAlign: 'center', marginBottom: 12,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
            }}>
              <span style={{ width: 80, height: 1, background: isLight ? 'linear-gradient(90deg, transparent, rgba(109,77,194,.4))' : 'linear-gradient(90deg, transparent, rgba(167,139,250,.5))' }} />
              {de ? 'Unter der Haube' : 'Under the Hood'}
              <span style={{ width: 80, height: 1, background: isLight ? 'linear-gradient(270deg, transparent, rgba(109,77,194,.4))' : 'linear-gradient(270deg, transparent, rgba(167,139,250,.5))' }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              <FeatureCard tint="#a78bfa" icon="⇄" isLight={isLight}
                title={de ? 'End-to-End Rückverfolgbarkeit' : 'End-to-End Traceability'}
                body={de
                  ? 'Regulatorische Anforderungen deterministisch mit Code und System verknüpft — inklusive revisionssicherem Evidence-Layer.'
                  : 'Regulatory requirements deterministically linked to system state and code — including audit-proof evidence layer.'}
                onClick={() => open('trace')}
                active={detail?.title === details.trace.title}
                Ticker={TickTrace}
              />
              <FeatureCard tint="#c084fc" icon="◉" isLight={isLight}
                title={de ? 'Continuous Compliance Engine' : 'Continuous Compliance Engine'}
                body={de
                  ? 'Automatische Audit-Validierung bei jeder Änderung — Code, Infrastruktur, Prozesse.'
                  : 'Automatic audit validation on every change — code, infrastructure, processes.'}
                onClick={() => open('engine')}
                active={detail?.title === details.engine.title}
                Ticker={TickEngine}
              />
              <FeatureCard tint="#fbbf24" icon="✦" isLight={isLight}
                title={de ? 'Compliance Optimizer' : 'Compliance Optimizer'}
                body={de
                  ? 'Maximale Compliance pro €. Findet den Sweet Spot zwischen Geschwindigkeit und Risiko.'
                  : 'Maximally-compliant per €. Finds the sweet spot between speed & risk.'}
                onClick={() => open('opt')}
                active={detail?.title === details.opt.title}
                Ticker={TickOptimizer}
              />
              <FeatureCard tint="#f59e0b" icon="◎" isLight={isLight}
                title={de ? 'EU-Trust & Governance' : 'EU Trust & Governance'}
                body={de
                  ? 'DSGVO, NIS-2, DORA, EU AI Act — eine Plattform, EU-souverän.'
                  : 'DSGVO, NIS-2, DORA, EU AI Act — one platform, EU-sovereign.'}
                onClick={() => open('stack')}
                active={detail?.title === details.stack.title}
                Ticker={TickStack}
              />
            </div>
          </div>

          {/* MOAT card */}
          <div style={{
            position: 'relative', zIndex: 2, margin: '0 48px 20px',
            padding: '14px 20px', borderRadius: 12,
            background: isLight
              ? 'linear-gradient(90deg, rgba(251,191,36,.1), rgba(99,102,241,.06))'
              : 'linear-gradient(90deg, rgba(251,191,36,.1), rgba(99,102,241,.08))',
            border: `1px solid ${isLight ? 'rgba(251,191,36,.25)' : 'rgba(251,191,36,.2)'}`,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12, flexShrink: 0,
              background: 'linear-gradient(135deg, #f59e0b, #ea580c)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 4px 16px rgba(245,158,11,.3)',
              fontSize: 20, fontWeight: 800, color: '#fff',
            }}>✦</div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 700, color: '#fbbf24', marginBottom: 3 }}>MOAT</div>
              <div style={{ fontSize: 12.5, lineHeight: 1.5, color: isLight ? '#475569' : 'rgba(236,233,247,.82)' }}>
                {de
                  ? 'Jeder kann sagen, was verboten ist. Kaum jemand kann sagen, wie weit du maximal gehen kannst. Das ist unser Produkt.'
                  : 'Anyone can say what\'s forbidden. Almost no one can tell you how far you can actually go. That\'s our product.'}
              </div>
            </div>
          </div>

          <DetailModal item={detail} onClose={close} isLight={isLight} />
        </div>
      </FadeInView>
    </div>
  )
}