import Link from 'next/link';

const PORTALS = [
  {
    href: '/org/login',
    title: 'Organisation Portal',
    description: 'For org-level admins managing multiple chapters and org-wide rules.',
    badge: 'Org Admin',
    color: 'hover:border-violet-400',
    badgeColor: 'bg-violet-100 text-violet-700',
  },
  {
    href: '/login',
    title: 'Chapter Portal',
    description: 'For chapter admins approving messages, managing groups and routing rules.',
    badge: 'Chapter Admin',
    color: 'hover:border-blue-400',
    badgeColor: 'bg-blue-100 text-blue-700',
  },
  {
    href: '/member-login',
    title: 'Member Portal',
    description: 'For community members to view digests, manage privacy and explore the directory.',
    badge: 'Member',
    color: 'hover:border-emerald-400',
    badgeColor: 'bg-emerald-100 text-emerald-700',
  },
];

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
      <div className="w-full max-w-lg">
        <div className="mb-10 text-center">
          <h1 className="text-3xl font-bold tracking-tight text-gray-900">TOWER</h1>
          <p className="text-gray-500 mt-2 text-sm">Community Knowledge Infrastructure Platform</p>
        </div>

        <div className="flex flex-col gap-4">
          {PORTALS.map((p) => (
            <Link
              key={p.href}
              href={p.href}
              className={`bg-white rounded-2xl border border-gray-200 p-6 flex items-start gap-5 transition-colors ${p.color}`}
            >
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <h2 className="font-semibold text-gray-900">{p.title}</h2>
                  <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${p.badgeColor}`}>{p.badge}</span>
                </div>
                <p className="text-sm text-gray-500">{p.description}</p>
              </div>
              <span className="text-gray-300 text-xl mt-0.5">›</span>
            </Link>
          ))}
        </div>

        <p className="text-center text-xs text-gray-400 mt-8">
          Administrators are provisioned by your organisation — contact your org admin if you need access.
        </p>
      </div>
    </div>
  );
}