import { ArrowRight } from 'lucide-react';
import Link from 'next/link';
import type { ReactNode } from 'react';

import { divisionMeta, type BrandDivision } from '@/lib/brand/tokens';
import { cn } from '@/lib/utils';

import { PanTelMark, PhoenixMark, SankofaMark } from './logos';
import { NetworkMeshDiagram } from './NetworkMeshDiagram';

type ProductCardProps = {
  division: BrandDivision;
  className?: string;
  children?: ReactNode;
};

const marks = {
  sankofa: SankofaMark,
  phoenix: PhoenixMark,
  pantel: PanTelMark,
};

const markColors = {
  sankofa: 'text-sovereign-gold',
  phoenix: 'text-sovereign-gold',
  pantel: 'text-sovereign-copper',
};

/** Trinity pillar card — Sankofa / Phoenix / PanTel */
export function ProductCard({ division, className, children }: ProductCardProps) {
  const meta = divisionMeta[division];
  const Mark = marks[division];

  return (
    <article
      className={cn(
        'group relative flex flex-col overflow-hidden rounded-2xl border border-sovereign-bronze/25 bg-sovereign-midnight/40 transition hover:border-sovereign-gold/35 hover:bg-sovereign-midnight/60',
        className
      )}
    >
      <div className="relative border-b border-sovereign-bronze/15 bg-sovereign-obsidian/50 px-6 py-8">
        <Mark size={56} className={markColors[division]} />
        <div
          className="pointer-events-none absolute inset-0 opacity-[0.06]"
          aria-hidden
        >
          <NetworkMeshDiagram variant="compact" />
        </div>
      </div>
      <div className="flex flex-1 flex-col px-6 py-5">
        <p className="text-xs font-semibold uppercase tracking-[0.12em] text-sovereign-gold/90">
          {meta.tagline}
        </p>
        <h3 className="mt-1 text-xl font-semibold text-sovereign-ivory">{meta.name}</h3>
        <p className="mt-3 flex-1 text-sm leading-relaxed text-sovereign-ivory/65">{meta.description}</p>
        {children}
        <Link
          href={meta.href}
          className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-sovereign-gold no-underline hover:text-sovereign-ivory"
        >
          Explore {meta.name}
          <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" aria-hidden />
        </Link>
      </div>
    </article>
  );
}
