import { IconExternalLink, IconShieldLock, IconBuildingArch, IconLicense } from '@tabler/icons-react'
import { useLang } from '../i18n/LanguageContext'
import { PageHeader } from '../components/PageHeader'

const TCP_URL = 'https://thecyberprepper.com/'

/** TCP 5 žingsnių kelias + A.R.K.A. kaip 6-as žingsnis. */
const STEPS = {
  lt: ['Sužymėk', 'Atskirk', 'Sukietink', 'Stebėk', 'Atsistatyk', 'Išgyvenk'],
  en: ['Identify', 'Isolate', 'Harden', 'Monitor', 'Recover', 'Survive'],
}

export function About() {
  const { t, lang } = useLang()
  const steps = STEPS[lang]

  const intro =
    lang === 'lt'
      ? 'A.R.K.A. (Autonominė Atsparumo (Resilience) ir Kritinių resursų Archyvas) yra „The Cyber Prepper" iniciatyvos ekstremaliųjų situacijų pratęsimas — atsakas „Zero Connectivity" į „Zero Trust" kasdienybę. Kai TCP modelyje Perimetras (išorinis internetas) ir Sistema (debesija) griūva, lieka tik Žmogus ir tai, ką jis valdo lokaliai. A.R.K.A. yra apčiuopiamas, autonominis mazgas tam momentui.'
      : 'A.R.K.A. (Autonomous Resilience and Critical-resource Archive) is the crisis extension of the The Cyber Prepper initiative — a "Zero Connectivity" answer to the "Zero Trust" everyday. When the Perimeter (external internet) and System (cloud) collapse in the TCP model, only the Human and what they control locally remain. A.R.K.A. is the tangible, autonomous node for that moment.'

  return (
    <div className="max-w-3xl">
      <PageHeader title={t('about.title')} subtitle={t('app.full')} />

      <div className="mb-6 rounded-xl border border-arka-border bg-arka-surface p-5">
        <div className="mb-3 flex items-center gap-2 text-arka-accent">
          <IconBuildingArch size={22} />
          <span className="font-semibold">TCP: {t('app.name')}</span>
        </div>
        <p className="text-sm leading-relaxed text-arka-muted">{intro}</p>
      </div>

      {/* TCP kelio žingsniai */}
      <h2 className="mb-3 text-sm font-semibold text-arka-text">
        {lang === 'lt' ? 'TCP kelias → A.R.K.A.' : 'TCP path → A.R.K.A.'}
      </h2>
      <div className="mb-6 flex flex-wrap gap-2">
        {steps.map((s, i) => {
          const isArka = i === steps.length - 1
          return (
            <div
              key={s}
              className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm ${
                isArka
                  ? 'border-arka-accent bg-arka-accent/15 font-semibold text-arka-accent'
                  : 'border-arka-border bg-arka-surface text-arka-muted'
              }`}
            >
              <span className="text-xs opacity-60">{i + 1}</span>
              {s}
              {isArka && <IconShieldLock size={15} />}
            </div>
          )
        })}
      </div>

      {/* Trys lygmenys */}
      <h2 className="mb-3 text-sm font-semibold text-arka-text">
        {t('dashboard.layers')}
      </h2>
      <div className="mb-6 grid gap-3 sm:grid-cols-3">
        {(['perimeter', 'system', 'human'] as const).map((layer) => (
          <div key={layer} className="rounded-xl border border-arka-border bg-arka-surface p-4">
            <div className="text-sm font-semibold text-arka-text">{t(`layer.${layer}`)}</div>
            <div className="mt-1 text-xs text-arka-muted">
              {layer === 'human'
                ? lang === 'lt'
                  ? 'A.R.K.A. branduolys — operacinis savarankiškumas.'
                  : 'The A.R.K.A. core — operational self-sufficiency.'
                : lang === 'lt'
                  ? 'Krizėje gali būti nepasiekiamas.'
                  : 'May be unavailable in a crisis.'}
            </div>
          </div>
        ))}
      </div>

      <a
        href={TCP_URL}
        target="_blank"
        rel="noreferrer"
        className="inline-flex items-center gap-2 rounded-lg bg-arka-accent px-4 py-2.5 text-sm font-semibold text-arka-bg transition-opacity hover:opacity-90"
      >
        {t('about.tcpLink')}
        <IconExternalLink size={16} />
      </a>

      <div className="mt-6 flex items-start gap-3 rounded-xl border border-arka-border bg-arka-surface p-4">
        <IconLicense size={20} className="mt-0.5 flex-none text-arka-accent" />
        <div>
          <div className="text-sm font-semibold text-arka-text">Apache License 2.0</div>
          <p className="mt-1 text-xs leading-5 text-arka-muted">
            {lang === 'lt'
              ? 'A.R.K.A. platinama pagal Apache-2.0 licenciją. Project N.O.M.A.D. naudotas kaip atvirojo kodo koncepcijos etalonas; jo atribucija išlaikoma projekto NOTICE faile.'
              : 'A.R.K.A. is distributed under Apache-2.0. Project N.O.M.A.D. was used as an open-source concept reference; its attribution is retained in the project NOTICE file.'}
          </p>
        </div>
      </div>
    </div>
  )
}
