'use client'

import { Code2, BookOpen, Lightbulb } from 'lucide-react'

const features = [
  {
    title: 'Open Source',
    description: 'Building and contributing to open-source projects that impact the Nepali tech community',
    icon: Code2,
    color: 'from-green-400 to-green-600',
    bgColor: 'bg-green-50 dark:bg-green-900/50',
    hoverBg: 'hover:bg-green-100 dark:hover:bg-green-800/60',
    borderColor: 'border-green-200 dark:border-green-700',
  },
  {
    title: 'Open Research',
    description: 'Advancing knowledge through collaborative research on local tech challenges',
    icon: BookOpen,
    color: 'from-purple-400 to-purple-600',
    bgColor: 'bg-purple-50 dark:bg-purple-900/50',
    hoverBg: 'hover:bg-purple-100 dark:hover:bg-purple-800/60',
    borderColor: 'border-purple-200 dark:border-purple-700',
  },
  {
    title: 'Nepal Needs',
    description: 'Identifying and solving real problems faced by businesses and communities in Nepal',
    icon: Lightbulb,
    color: 'from-blue-400 to-blue-600',
    bgColor: 'bg-blue-50 dark:bg-blue-900/50',
    hoverBg: 'hover:bg-blue-100 dark:hover:bg-blue-800/60',
    borderColor: 'border-blue-200 dark:border-blue-700',
  },
]

export function FeaturesSection() {
  return (
    <section className="py-12 sm:py-16 md:py-20 px-4 md:px-6 bg-background" aria-labelledby="features-heading">
      <div className="container mx-auto">
        <div className="text-center mb-10 sm:mb-12 md:mb-16">
          <h2 id="features-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-3 sm:mb-4">
            What We Do
          </h2>
          <p className="text-sm sm:text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-2">
            We focus on three core pillars to drive innovation in Nepal's tech ecosystem
          </p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8 max-w-6xl mx-auto">
          {features.map((feature, index) => {
            const Icon = feature.icon
            return (
              <article
                key={index}
                className={`${feature.bgColor} ${feature.hoverBg} ${feature.borderColor} p-5 sm:p-6 md:p-8 rounded-xl sm:rounded-2xl transition-all duration-300 hover:shadow-xl sm:hover:scale-105 border group cursor-pointer`}
              >
                <div className={`w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 rounded-lg sm:rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4 sm:mb-5 md:mb-6 group-hover:scale-110 transition-transform shadow-lg`}>
                  <Icon className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-white" aria-hidden="true" />
                </div>
                <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-foreground mb-2 sm:mb-3">
                  {feature.title}
                </h3>
                <p className="text-sm sm:text-base text-muted-foreground leading-relaxed">
                  {feature.description}
                </p>
              </article>
            )
          })}
        </div>
      </div>
    </section>
  )
}