'use client';

import { useRouter } from 'next/navigation';
import { Card, CardContent } from '@/components/ui/card';
import {
  RiLightbulbLine, RiFileTextLine, RiSearchLine,
  RiScalesLine, RiUserStarLine, RiMailLine, RiContactsBookLine,
} from '@remixicon/react';

const features = [
  { icon: RiLightbulbLine, title: 'Campaign Strategist', desc: 'Generate comprehensive campaign strategies from your inputs', href: '/ai-hub/strategist', color: 'bg-violet-100 text-violet-600' },
  { icon: RiFileTextLine, title: 'Brief Parser', desc: 'Extract structured requirements from raw campaign briefs', href: '/ai-hub/brief-parser', color: 'bg-blue-100 text-blue-600' },
  { icon: RiSearchLine, title: 'Creator Finder', desc: 'Search and discover creators with AI-enhanced scoring', href: '/ai-hub/creator-finder', color: 'bg-cyan-100 text-cyan-600' },
  { icon: RiScalesLine, title: 'Match Reasoning', desc: 'Get detailed creator-campaign fit analysis', href: '/ai-hub/match-reasoning', color: 'bg-emerald-100 text-emerald-600' },
  { icon: RiUserStarLine, title: 'Lookalike Discovery', desc: 'Find creators similar to your top performers', href: '/ai-hub/lookalikes', color: 'bg-pink-100 text-pink-600' },
  { icon: RiMailLine, title: 'Outreach Writer', desc: 'Generate personalized outreach messages for creators', href: '/ai-hub/outreach', color: 'bg-amber-100 text-amber-600' },
  { icon: RiContactsBookLine, title: 'Creator CRM', desc: 'Track creator relationships and interaction history', href: '/ai-hub/crm', color: 'bg-teal-100 text-teal-600' },
];

export default function AIHubPage() {
  const router = useRouter();

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-foreground">AI Hub</h1>
        <p className="text-muted-foreground mt-2">AI-powered tools to supercharge your influencer marketing campaigns</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {features.map((f) => (
          <Card
            key={f.href}
            className="cursor-pointer hover:shadow-lg transition-all hover:border-primary/30 group"
            onClick={() => router.push(f.href)}
          >
            <CardContent className="pt-6 pb-5">
              <div className={`size-12 rounded-xl flex items-center justify-center mb-4 ${f.color} transition-transform group-hover:scale-110`}>
                <f.icon className="size-6" />
              </div>
              <h3 className="text-lg font-semibold text-foreground mb-1">{f.title}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed">{f.desc}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}