'use client';

import React from 'react';
import { productPortals } from "@/lib/data"
import { trackEvent } from "@/utils/analytics"
import { ArrowRight, Stars, GraduationCap, BarChart, Monitor, Building, TrendingUp } from "lucide-react"

export default function ProductsPage() {
  const iconMap: Record<string, any> = {
    Stars,
    GraduationCap,
    BarChart
  }

  const badgeIconMap: Record<string, any> = {
    Stars: Monitor,
    GraduationCap: Building,
    BarChart: TrendingUp
  }

  const badgeTextMap: Record<string, string> = {
    Stars: "Modern SaaS + AI Dashboard",
    GraduationCap: "Institution Management",
    BarChart: "Enterprise Analytics"
  }

  const handlePortalSelection = (portalKey: string) => {
    const planSectionMap: Record<string, string> = {
      "Individuals": "student",
      "Education Institution": "education",
      "Market Research": "market",
    }

    if (portalKey === "Individuals") {
      trackEvent('signup_click', { location: 'portals' });
    } else if (portalKey === "Education Institution") {
      trackEvent('demo_request_click', { portal_tier: 'education' });
    } else {
      trackEvent('contact_click', { type: 'lead_intent' });
    }

    const section = planSectionMap[portalKey] || "student"
    window.location.href = `/plans?section=${section}#plans`
  };

  return (
    <div className="products-page pt-6 pb-16 min-h-screen bg-slate-50/30">
      <main className="main">
        <section id="products" className="products-section section">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-10">

              <h1 className="text-4xl sm:text-5xl font-bold text-foreground mb-4 text-balance">
                Choose the <span className="text-primary">Right Platform</span> for You
              </h1>
              <p className="text-lg text-muted-foreground">
                Select a specialized portal to get started with zero-hallucination AI tailored to your specific needs.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
              {productPortals.map((portal) => {
                const Icon = iconMap[portal.icon] || Stars
                const BadgeIcon = badgeIconMap[portal.icon] || Monitor
                
                return (
                  <div
                    key={portal.title}
                    className="group relative bg-card rounded-2xl border border-border p-8 hover:border-primary/50 hover:shadow-2xl transition-all duration-500 flex flex-col"
                  >
                    <div className="relative z-10 flex-grow">
                      <div className="w-14 h-14 rounded-2xl flex items-center justify-center mb-6 transition-transform duration-500 group-hover:scale-110 shadow-sm bg-primary/10 text-primary">
                        <Icon className="w-7 h-7" />
                      </div>
                      
                      <h3 className="text-2xl font-bold text-foreground mb-1">
                        {portal.title}
                      </h3>
                      <p className="text-sm font-medium text-primary mb-6 opacity-80 uppercase tracking-wider">
                        {portal.subtitle}
                      </p>
                      
                      <div className="mb-6">
                        <h4 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-2">Target Audience</h4>
                        <p className="text-sm font-medium text-foreground/80">{portal.audience}</p>
                      </div>
                      
                      <ul className="space-y-3 mb-8">
                        {portal.features.map((feature, i) => (
                          <li key={i} className="flex items-center gap-2 text-sm text-muted-foreground">
                            <div className="w-1.5 h-1.5 rounded-full bg-primary/40" />
                            {feature}
                          </li>
                        ))}
                      </ul>
                    </div>

                    <div className="mt-auto pt-6 border-t border-border/50">
                      <button 
                        onClick={() => handlePortalSelection(portal.title)}
                        className="flex items-center justify-center gap-2 w-full py-3 rounded-xl font-bold transition-all shadow-sm hover:shadow-md bg-primary text-primary-foreground hover:bg-primary/90"
                      >
                        {portal.title === "Individuals" ? "Start Free" : portal.title === "Education Institution" ? "Request Demo" : "Contact Sales"}
                        <ArrowRight className="h-4 w-4" />
                      </button>
                      <div className="flex items-center justify-center gap-2 mt-4 text-[10px] uppercase tracking-tighter font-bold text-muted-foreground">
                        <BadgeIcon className="w-3 h-3" />
                        {badgeTextMap[portal.icon]}
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}