'use client'

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { SectionHeader } from '@/components/ui/SectionHeader'
import { GlassCard } from '@/components/ui/GlassCard'
import { staggerContainer, fadeUp, scaleUp, viewportConfig } from '@/lib/animations'

type CategoryItem = {
  id: string
  name: string
  icon: string
  subItems: string[]
  accentColor: string
}

const CATEGORIES: CategoryItem[] = [
  {
    id: 'groceries',
    name: 'Fresh Groceries',
    icon: '🥬',
    subItems: ['Fruits & Greens', 'Local Dairy & Farm Milk', 'Snacks & Beverages', 'Spices & Staples'],
    accentColor: 'border-green-300 bg-green-500/5 text-green-600',
  },
  {
    id: 'food',
    name: 'Food & Dining',
    icon: '🍜',
    subItems: ['South Indian Special', 'Fine Dine Curries', 'Organic Salads', 'Street Side Sweets'],
    accentColor: 'border-orange-300 bg-orange-500/5 text-orange-600',
  },
  {
    id: 'services',
    name: 'Home Services',
    icon: '🧹',
    subItems: ['Appliance Repair', 'Premium Deep Cleaning', 'Plumbing & Wiring', 'Home Painting'],
    accentColor: 'border-blue-300 bg-blue-500/5 text-blue-600',
  },
]

export function Categories() {
  const [active, setActive] = useState<string>('groceries')

  const activeCategory = CATEGORIES.find((cat) => cat.id === active) || CATEGORIES[0]!

  return (
    <div className="py-24 sm:py-32 bg-white px-5 sm:px-8 relative overflow-hidden">
      <div className="absolute top-1/2 left-0 w-[400px] h-[400px] rounded-full bg-purple-soft/30 blur-3xl -z-10 pointer-events-none" />

      <div className="max-w-7xl mx-auto">
        <SectionHeader
          label="Smarter Taxonomy"
          heading={
            <>
              Explore our diverse
              <br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                Platform Categories
              </span>
            </>
          }
          sub="Everything categorised precisely. Whether you need grocery supplies, a hot meal, or a trusted electrician, find it instantly."
          align="center"
          className="mb-16 sm:mb-20"
        />

        <div className="grid lg:grid-cols-12 gap-8 items-start">
          {/* Category Tabs (5 cols) */}
          <motion.div
            variants={staggerContainer}
            initial="hidden"
            whileInView="visible"
            viewport={viewportConfig}
            className="lg:col-span-5 flex flex-col gap-4"
          >
            {CATEGORIES.map((cat) => {
              const isActive = cat.id === active
              return (
                <motion.button
                  key={cat.id}
                  variants={fadeUp}
                  onClick={() => setActive(cat.id)}
                  className={`w-full text-left p-5 rounded-2xl border transition-all duration-300 focus:outline-none ${
                    isActive
                      ? 'bg-purple-deep text-white border-purple-deep shadow-nearle-md'
                      : 'bg-white border-nearle-border hover:border-purple-primary text-nearle-dark'
                  }`}
                >
                  <div className="flex items-center gap-4">
                    <div
                      className={`w-12 h-12 rounded-xl flex items-center justify-center text-2xl transition-colors duration-300 ${
                        isActive ? 'bg-white/10 text-white' : 'bg-purple-soft text-purple-deep'
                      }`}
                    >
                      {cat.icon}
                    </div>
                    <div className="flex-1">
                      <h3 className="font-display font-bold text-base leading-tight">
                        {cat.name}
                      </h3>
                      <p
                        className={`text-xs mt-1 font-body transition-colors duration-300 ${
                          isActive ? 'text-purple-lavender' : 'text-nearle-mid'
                        }`}
                      >
                        {cat.subItems.length} core segments available
                      </p>
                    </div>
                  </div>
                </motion.button>
              )
            })}
          </motion.div>

          {/* Sub-Category Preview Panel (7 cols) */}
          <div className="lg:col-span-7 h-full">
            <AnimatePresence mode="wait">
              <motion.div
                key={activeCategory.id}
                initial={{ opacity: 0, y: 15 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -15 }}
                transition={{ duration: 0.35 }}
              >
                <GlassCard className="border-purple-lavender/50 hover:border-purple-primary p-8 min-h-[380px] flex flex-col justify-between shadow-nearle-md">
                  <div>
                    <div className="flex items-center gap-3 mb-6">
                      <span className="text-4xl">{activeCategory.icon}</span>
                      <div>
                        <span className={`inline-block px-2.5 py-0.5 rounded-full border text-[10px] font-mono font-bold uppercase tracking-wider ${activeCategory.accentColor}`}>
                          Ecosystem Partner Group
                        </span>
                        <h3 className="font-display font-extrabold text-2xl text-nearle-dark mt-1">
                          {activeCategory.name}
                        </h3>
                      </div>
                    </div>

                    <p className="font-body text-nearle-mid text-base leading-relaxed mb-8">
                      We curate verified local operators under this segment, providing them with robust tools, escrowed payouts, and real-time live navigation.
                    </p>

                    <div className="grid sm:grid-cols-2 gap-4">
                      {activeCategory.subItems.map((sub, idx) => (
                        <motion.div
                          key={sub}
                          variants={scaleUp}
                          initial="hidden"
                          animate="visible"
                          transition={{ delay: idx * 0.08 }}
                          className="flex items-center gap-3 p-4 bg-purple-soft/40 border border-purple-lavender/20 rounded-xl"
                        >
                          <span className="w-1.5 h-1.5 rounded-full bg-purple-primary" />
                          <span className="font-display font-bold text-sm text-nearle-dark">
                            {sub}
                          </span>
                        </motion.div>
                      ))}
                    </div>
                  </div>

                  <div className="mt-8 pt-6 border-t border-nearle-border flex flex-col sm:flex-row items-center justify-between gap-4">
                    <p className="font-body text-xs text-nearle-light text-center sm:text-left">
                      Interested in joining as a partner? Click become a partner in the hero section or visit our businesses page.
                    </p>
                  </div>
                </GlassCard>
              </motion.div>
            </AnimatePresence>
          </div>
        </div>
      </div>
    </div>
  )
}
