import Link from 'next/link';
import { ArrowRight, Building2, Network, UserRound } from 'lucide-react';

const PORTALS = [
  {
    href: '/org/login',
    title: 'Organisation',
    description: 'Manage chapters, org-wide rules and admin access.',
    icon: Network,
    iconWrap: 'bg-violet-100 text-violet-600',
    ring: 'hover:ring-violet-200 hover:border-violet-300',
  },
  {
    href: '/login',
    title: 'Chapter',
    description: 'Approve messages, manage groups and routing rules.',
    icon: Building2,
    iconWrap: 'bg-blue-100 text-blue-600',
    ring: 'hover:ring-blue-200 hover:border-blue-300',
  },
  {
    href: '/member-login',
    title: 'Member',
    description: 'View digests, manage privacy and explore your community.',
    icon: UserRound,
    iconWrap: 'bg-emerald-100 text-emerald-600',
    ring: 'hover:ring-emerald-200 hover:border-emerald-300',
  },
];

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-muted/40 to-background p-6">
      <div className="w-full max-w-md space-y-10">
        <div className="text-center space-y-3">
          <div className="inline-flex size-12 rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 items-center justify-center text-white font-bold text-xl shadow-lg mx-auto">
            T
          </div>
          <div className="space-y-1">
            <h1 className="text-2xl font-bold tracking-tight">Welcome to TOWER</h1>
            <p className="text-sm text-muted-foreground">Choose how you want to sign in</p>
          </div>
        </div>

        <div className="space-y-3">
          {PORTALS.map((p) => {
            const Icon = p.icon;
            return (
              <Link
                key={p.href}
                href={p.href}
                className={`group flex items-center gap-4 bg-card rounded-2xl border p-4 shadow-sm ring-1 ring-transparent transition-all hover:shadow-md ${p.ring}`}
              >
                <div className={`size-11 rounded-xl flex items-center justify-center shrink-0 ${p.iconWrap}`}>
                  <Icon className="size-5" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="font-semibold text-sm">{p.title} Portal</p>
                  <p className="text-xs text-muted-foreground leading-relaxed mt-0.5">{p.description}</p>
                </div>
                <ArrowRight className="size-4 text-muted-foreground shrink-0 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>
  );
}