"use client"

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

export function ProductsSection() {
  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`
  };

  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"
  }

  return (
    <section id="products" className="pt-2 pb-12 sm:pt-4 sm:pb-16 bg-background">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto mb-8 flex flex-col items-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-bold uppercase tracking-wider mb-4 border border-primary/20">
            <Package className="h-4 w-4" />
            Our Products
          </div>
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-4 text-balance">
            Specialized <span className="text-primary">AI Portals</span>
          </h2>
          <p className="text-sm text-muted-foreground">
            Explore our specialized portals designed for students, institutions, and research enterprises with zero-hallucination accuracy.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {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-xl 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>
  )
}