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

const PORTALS = [
  {
    href: '/org/login',
    title: 'Organisation Portal',
    description: 'Manage multiple chapters, org-wide routing rules and admin access.',
    badge: 'Org Admin',
    accent: 'border-l-4 border-l-violet-500',
    badgeClass: 'bg-violet-100 text-violet-700',
    hoverClass: 'hover:border-violet-300',
  },
  {
    href: '/login',
    title: 'Chapter Portal',
    description: 'Approve messages, manage groups, configure routing rules and AI drafts.',
    badge: 'Chapter Admin',
    accent: 'border-l-4 border-l-blue-500',
    badgeClass: 'bg-blue-100 text-blue-700',
    hoverClass: 'hover:border-blue-300',
  },
  {
    href: '/member-login',
    title: 'Member Portal',
    description: 'View digests, manage your privacy settings and explore your community.',
    badge: 'Member',
    accent: 'border-l-4 border-l-emerald-500',
    badgeClass: 'bg-emerald-100 text-emerald-700',
    hoverClass: 'hover:border-emerald-300',
  },
  {
    href: '/admin/login',
    title: 'Super Admin',
    description: 'Platform-wide administration — orgs, chapters, bots and system settings.',
    badge: 'Platform',
    accent: 'border-l-4 border-l-slate-500',
    badgeClass: 'bg-slate-100 text-slate-700',
    hoverClass: 'hover:border-slate-300',
  },
];

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-6">
      <div className="w-full max-w-md space-y-8">
        <div className="text-center space-y-2">
          <h1 className="text-3xl font-bold tracking-tight">TOWER</h1>
          <p className="text-muted-foreground text-sm">Community Knowledge Infrastructure Platform</p>
        </div>

        <div className="space-y-3">
          {PORTALS.map((p) => (
            <Link
              key={p.href}
              href={p.href}
              className={`group flex items-start gap-4 bg-card rounded-xl border p-5 transition-colors ${p.accent} ${p.hoverClass}`}
            >
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-1">
                  <span className="font-semibold text-sm">{p.title}</span>
                  <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${p.badgeClass}`}>{p.badge}</span>
                </div>
                <p className="text-xs text-muted-foreground leading-relaxed">{p.description}</p>
              </div>
              <ArrowRight className="size-4 text-muted-foreground shrink-0 mt-0.5 transition-transform group-hover:translate-x-0.5" />
            </Link>
          ))}
        </div>

        <p className="text-center text-xs text-muted-foreground">
          Access is provisioned by your organisation admin
        </p>
      </div>
    </div>
  );
}