"use client"

import { Zap, MonitorPlay, DollarSign, BarChart3, Users, Gauge } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"

export default function Features() {
  const { t } = useLanguage()

  const features = [
    {
      icon: Gauge,
      title: t.features.monitoring.title,
      description: t.features.monitoring.desc,
    },
    {
      icon: Zap,
      title: t.features.remote.title,
      description: t.features.remote.desc,
    },
    {
      icon: DollarSign,
      title: t.features.pricing.title,
      description: t.features.pricing.desc,
    },
    {
      icon: MonitorPlay,
      title: t.features.tracking.title,
      description: t.features.tracking.desc,
    },
    {
      icon: DollarSign,
      title: t.features.payments.title,
      description: t.features.payments.desc,
    },
    {
      icon: Users,
      title: t.features.users.title,
      description: t.features.users.desc,
    },
    {
      icon: BarChart3,
      title: t.features.analytics.title,
      description: t.features.analytics.desc,
    },
  ]

  return (
    <section id="features" className="py-20 md:py-32 px-4 sm:px-6 lg:px-8 bg-muted">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12 md:mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{t.features.title}</h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{t.features.description}</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, index) => {
            const Icon = feature.icon
            return (
              <div
                key={index}
                className="bg-background rounded-xl border border-border p-6 hover:shadow-lg hover:border-primary/50 transition-all duration-300"
              >
                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                  <Icon size={24} className="text-primary" />
                </div>
                <h3 className="font-semibold text-lg text-foreground mb-2">{feature.title}</h3>
                <p className="text-muted-foreground">{feature.description}</p>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}