import type { Metadata } from 'next';

import {
  BrandLockup,
  EightPointGrid,
  InstitutionalPanel,
  PanTelMark,
  PhoenixMark,
  SankofaMark,
} from '@/components/brand';
import { CorporateFooter } from '@/components/corporate/CorporateFooter';
import { CorporateHeader } from '@/components/corporate/CorporateHeader';
import { brandColors } from '@/lib/brand/tokens';

export const metadata: Metadata = {
  title: 'Visual Identity — Sankofa Nexus',
  description:
    'Sovereign institutional brand system for Sankofa, Phoenix, and PanTel — geometric marks, palette, and typography.',
};

const swatches = [
  { name: 'Obsidian', token: 'obsidian', hex: brandColors.obsidian },
  { name: 'Deep Midnight', token: 'midnight', hex: brandColors.midnight },
  { name: 'Sovereign Gold', token: 'gold', hex: brandColors.sovereignGold },
  { name: 'Bronze', token: 'bronze', hex: brandColors.bronze },
  { name: 'Signal Copper', token: 'copper', hex: brandColors.signalCopper },
  { name: 'Cloud Ivory', token: 'ivory', hex: brandColors.cloudIvory },
];

export default function BrandPage() {
  return (
    <div className="flex min-h-screen flex-col bg-sovereign-obsidian text-sovereign-ivory">
      <CorporateHeader />

      <main className="relative flex-1">
        <EightPointGrid className="opacity-[0.04]" />

        <div className="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
          <p className="text-xs font-semibold uppercase tracking-[0.14em] text-sovereign-gold">
            Internal reference
          </p>
          <h1 className="mt-2 text-4xl font-bold tracking-tight sm:text-5xl">
            Sankofa Nexus visual identity
          </h1>
          <p className="mt-4 max-w-3xl text-lg text-sovereign-ivory/65">
            Geometric Sankofa symbolism inside a sovereign protection ring — extended to Phoenix (cloud
            resilience) and PanTel (secure connectivity). Institutional tone: durable, precise,
            civilizational.
          </p>

          <section className="mt-16">
            <h2 className="text-2xl font-semibold">Master marks</h2>
            <div className="mt-8 grid gap-6 md:grid-cols-3">
              {[
                { Mark: SankofaMark, label: 'Sankofa', sub: 'Sovereign technology · trust · continuity' },
                { Mark: PhoenixMark, label: 'Phoenix', sub: 'Cloud · recovery · uptime' },
                { Mark: PanTelMark, label: 'PanTel', sub: 'Telecom · signal · connectivity' },
              ].map(({ Mark, label, sub }) => (
                <InstitutionalPanel key={label} title={label} eyebrow={sub}>
                  <div className="flex flex-col items-center gap-6 py-4">
                    <Mark size={96} />
                    <Mark size={48} />
                    <Mark size={24} />
                  </div>
                </InstitutionalPanel>
              ))}
            </div>
          </section>

          <section className="mt-16">
            <h2 className="text-2xl font-semibold">Lockup</h2>
            <InstitutionalPanel className="mt-6">
              <div className="flex flex-wrap items-center gap-10 py-4">
                <BrandLockup size="lg" />
                <BrandLockup size="md" subtitle="Sovereign Technologies" />
                <BrandLockup size="sm" />
              </div>
            </InstitutionalPanel>
          </section>

          <section className="mt-16">
            <h2 className="text-2xl font-semibold">Color palette</h2>
            <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {swatches.map((s) => (
                <div
                  key={s.token}
                  className="overflow-hidden rounded-xl border border-sovereign-bronze/25"
                >
                  <div className="h-20" style={{ backgroundColor: s.hex }} />
                  <div className="bg-sovereign-midnight/60 px-4 py-3">
                    <p className="font-medium">{s.name}</p>
                    <p className="font-mono text-sm text-sovereign-ivory/60">{s.hex}</p>
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section className="mt-16">
            <h2 className="text-2xl font-semibold">Typography</h2>
            <InstitutionalPanel className="mt-6">
              <p className="text-sm text-sovereign-bronze">Primary — IBM Plex Sans</p>
              <p className="mt-4 text-4xl font-bold">Sovereign technology infrastructure</p>
              <p className="mt-2 text-lg font-medium text-sovereign-ivory/80">
                Institutional sans-serif for governments, orders, and critical systems operators.
              </p>
              <p className="mt-4 text-sm leading-relaxed text-sovereign-ivory/60">
                ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
              </p>
            </InstitutionalPanel>
          </section>

          <section className="mt-16 pb-8">
            <h2 className="text-2xl font-semibold">Symbolism</h2>
            <div className="mt-6 grid gap-4 md:grid-cols-2">
              <InstitutionalPanel title="Sankofa bird" eyebrow="Return · preserve · advance">
                <p className="text-sm leading-relaxed text-sovereign-ivory/65">
                  The geometric bird glances backward while the body advances. The protection ring denotes
                  sovereign jurisdiction. Tail paths resolve into network continuity — not decorative
                  plumage.
                </p>
              </InstitutionalPanel>
              <InstitutionalPanel title="Eight-point grid" eyebrow="Structural · not religious">
                <p className="text-sm leading-relaxed text-sovereign-ivory/65">
                  Hospitaller-inspired geometry at low opacity — precision, protection, service — without
                  overt religious iconography.
                </p>
              </InstitutionalPanel>
            </div>
            <p className="mt-6 text-sm text-sovereign-ivory/45">
              Full rationale: <code className="text-sovereign-gold">docs/BRAND_IDENTITY_SANKOFA_NEXUS.md</code>
            </p>
          </section>
        </div>
      </main>

      <CorporateFooter />
    </div>
  );
}
