'use client'

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

type FeatureItem = {
  title: string
  desc: string
  icon: string
  color: string
}

const FEATURES: FeatureItem[] = [
  {
    title: 'Grocery Delivery',
    desc: 'Daily essentials, fresh fruits, vegetables, and staples from your preferred local marts.',
    icon: '🥬',
    color: 'from-green-500/10 to-emerald-500/5',
  },
  {
    title: 'Restaurants & Takeaways',
    desc: 'Order hot, freshly prepared dishes from iconic neighbourhood diners and restaurants.',
    icon: '🍜',
    color: 'from-orange-500/10 to-red-500/5',
  },
  {
    title: 'Home Services',
    desc: 'Verified local technicians, electricians, plumbers, and home cleaners at your command.',
    icon: '🧹',
    color: 'from-blue-500/10 to-indigo-500/5',
  },
  {
    title: 'Community Deals',
    desc: 'Unlock special bulk pricing and exclusive discounts negotiated collectively by your local society.',
    icon: '🤝',
    color: 'from-purple-500/10 to-pink-500/5',
  },
  {
    title: 'Local Marketplace',
    desc: 'Discover unique handmade items, homegrown brands, and direct artisan offerings in your area.',
    icon: '🏪',
    color: 'from-amber-500/10 to-yellow-500/5',
  },
  {
    title: 'Instant Delivery',
    desc: 'Need something instantly? Local courier service to send or receive packages in under 20 minutes.',
    icon: '⚡',
    color: 'from-rose-500/10 to-orange-500/5',
  },
  {
    title: 'Trusted Neighborhood Businesses',
    desc: 'Strengthening local economy. Directly support the small businesses you know and trust.',
    icon: '💜',
    color: 'from-purple-primary/10 to-purple-accent/5',
  },
]

export function ValueEcosystem() {
  return (
    <div className="py-24 sm:py-32 bg-white px-5 sm:px-8 relative overflow-hidden">
      {/* Background Decorative Mesh */}
      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[800px] h-[800px] rounded-full bg-purple-soft/40 blur-3xl -z-10 pointer-events-none" />

      <div className="max-w-7xl mx-auto">
        <SectionHeader
          label="Value Ecosystem"
          heading={
            <>
              Everything you need,
              <br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                right next door
              </span>
            </>
          }
          sub="Nearle integrates essential daily activities into one powerful, cohesive neighbourhood dashboard."
          align="center"
          className="mb-16 sm:mb-20"
        />

        <motion.div
          variants={staggerContainer}
          initial="hidden"
          whileInView="visible"
          viewport={viewportConfig}
          className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8"
        >
          {FEATURES.map((feat) => (
            <motion.div key={feat.title} variants={fadeUp} className="group">
              <GlassCard className="h-full flex flex-col items-start relative overflow-hidden transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-nearle-lg border-purple-lavender/50 hover:border-purple-primary">
                {/* Accent Background Glow on Hover */}
                <div
                  className={`absolute inset-0 bg-gradient-to-br ${feat.color} opacity-0 group-hover:opacity-100 transition-opacity duration-500 -z-10`}
                />

                <div className="w-12 h-12 rounded-2xl bg-white border border-nearle-border flex items-center justify-center text-2xl shadow-sm transition-all duration-300 group-hover:border-purple-primary group-hover:shadow-nearle-sm group-hover:scale-110">
                  {feat.icon}
                </div>

                <h3 className="font-display font-bold text-nearle-dark text-lg mt-6 group-hover:text-purple-deep transition-colors duration-200">
                  {feat.title}
                </h3>

                <p className="font-body text-nearle-mid text-sm mt-3 leading-relaxed">
                  {feat.desc}
                </p>

                {/* Subtle Indicator */}
                <div className="mt-auto pt-6 flex items-center gap-2 text-xs font-mono font-bold uppercase tracking-wider text-purple-primary opacity-0 translate-x-[-10px] group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
                  <span>Explore</span>
                  <span>→</span>
                </div>
              </GlassCard>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </div>
  )
}
