import {
  Link,
  Shield,
  BarChart3,
  Globe,
  Clock,
  Sparkles,
  Zap,
  Lock,
  TrendingUp,
  MapPin,
  Server
} from 'lucide-react'

const features = [
  {
    icon: Link,
    title: 'Custom Slugs',
    description: 'Create memorable short links with your own custom aliases instead of random characters.',
    color: 'from-emerald-500 to-teal-500',
    bgColor: 'bg-emerald-500/10',
    borderColor: 'border-emerald-500/20',
    iconColor: 'text-emerald-400'
  },
  {
    icon: Shield,
    title: 'Malware Detection',
    description: 'Every URL is checked against known malicious databases to protect your users from harmful sites.',
    color: 'from-amber-500 to-orange-500',
    bgColor: 'bg-amber-500/10',
    borderColor: 'border-amber-500/20',
    iconColor: 'text-amber-400'
  },
  {
    icon: BarChart3,
    title: 'Click Analytics',
    description: 'Track every click with detailed analytics including geolocation, IP address, and timestamps.',
    color: 'from-cyan-500 to-blue-500',
    bgColor: 'bg-cyan-500/10',
    borderColor: 'border-cyan-500/20',
    iconColor: 'text-cyan-400'
  },
  {
    icon: Clock,
    title: 'Link Expiration',
    description: 'Set expiration dates for temporary links. Perfect for time-sensitive campaigns and promotions.',
    color: 'from-violet-500 to-purple-500',
    bgColor: 'bg-violet-500/10',
    borderColor: 'border-violet-500/20',
    iconColor: 'text-violet-400'
  },
  {
    icon: Zap,
    title: 'Lightning Fast',
    description: 'Redirects happen in milliseconds thanks to our global edge network and optimized infrastructure.',
    color: 'from-pink-500 to-rose-500',
    bgColor: 'bg-pink-500/10',
    borderColor: 'border-pink-500/20',
    iconColor: 'text-pink-400'
  },
  {
    icon: Lock,
    title: 'Secure by Default',
    description: 'All redirects use HTTPS by default. Optional password protection for sensitive links coming soon.',
    color: 'from-sky-500 to-indigo-500',
    bgColor: 'bg-sky-500/10',
    borderColor: 'border-sky-500/20',
    iconColor: 'text-sky-400'
  }
]

export default function FeatureSection() {
  return (
    <section id="features" className="relative py-20 lg:py-32">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 text-slate-400 text-sm font-medium mb-6">
            <Sparkles className="w-4 h-4" />
            Powerful Features
          </span>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
            Everything you need in a{' '}
            <span className="bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
              URL shortener
            </span>
          </h2>
          <p className="text-lg text-slate-400 max-w-2xl mx-auto">
            Built for developers, marketers, and everyday users who need reliable,
            feature-rich link management.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, index) => {
            const Icon = feature.icon
            return (
              <div
                key={feature.title}
                className={`group relative bg-slate-900/50 backdrop-blur-sm border ${feature.borderColor} rounded-2xl p-6 hover:bg-slate-800/50 transition-all duration-300 hover:scale-[1.02]`}
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className={`w-12 h-12 rounded-xl ${feature.bgColor} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
                  <Icon className={`w-6 h-6 ${feature.iconColor}`} />
                </div>
                <h3 className="text-lg font-semibold text-slate-100 mb-2">{feature.title}</h3>
                <p className="text-sm text-slate-400 leading-relaxed">{feature.description}</p>
                <div className={`absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r ${feature.color} opacity-0 group-hover:opacity-100 transition-opacity rounded-b-2xl`} />
              </div>
            )
          })}
        </div>

        <div id="analytics" className="mt-24 lg:mt-32">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-6">
              <h3 className="text-2xl sm:text-3xl font-bold">
                Deep Dive <span className="text-emerald-400">Analytics</span>
              </h3>
              <p className="text-slate-400 leading-relaxed">
                Understand your audience with comprehensive click tracking. See where your visitors
                are coming from, what devices they use, and when they click.
              </p>
              <div className="space-y-4">
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center shrink-0">
                    <MapPin className="w-5 h-5 text-emerald-400" />
                  </div>
                  <div>
                    <h4 className="font-medium text-slate-200">Geolocation Tracking</h4>
                    <p className="text-sm text-slate-500">Know which countries and cities your clicks originate from.</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 rounded-lg bg-cyan-500/10 flex items-center justify-center shrink-0">
                    <Globe className="w-5 h-5 text-cyan-400" />
                  </div>
                  <div>
                    <h4 className="font-medium text-slate-200">IP & Device Detection</h4>
                    <p className="text-sm text-slate-500">Track IP addresses and identify browsers and operating systems.</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 rounded-lg bg-violet-500/10 flex items-center justify-center shrink-0">
                    <TrendingUp className="w-5 h-5 text-violet-400" />
                  </div>
                  <div>
                    <h4 className="font-medium text-slate-200">Real-time Metrics</h4>
                    <p className="text-sm text-slate-500">Watch your click counts update instantly as visitors arrive.</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-emerald-500/10 blur-3xl" />
              <div className="relative bg-slate-900/80 backdrop-blur-sm border border-slate-800 rounded-2xl p-6 shadow-2xl">
                <div className="flex items-center justify-between mb-6">
                  <h4 className="font-semibold text-slate-200">Link Analytics</h4>
                  <span className="text-xs px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400">Live</span>
                </div>
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-3 rounded-lg bg-slate-800/50">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                        <MousePointerClick className="w-4 h-4 text-emerald-400" />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-slate-200">Total Clicks</p>
                        <p className="text-xs text-slate-500">All time</p>
                      </div>
                    </div>
                    <span className="text-xl font-bold text-emerald-400">1,247</span>
                  </div>
                  <div className="flex items-center justify-between p-3 rounded-lg bg-slate-800/50">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-lg bg-cyan-500/10 flex items-center justify-center">
                        <Globe className="w-4 h-4 text-cyan-400" />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-slate-200">Top Country</p>
                        <p className="text-xs text-slate-500">United States</p>
                      </div>
                    </div>
                    <span className="text-sm font-bold text-cyan-400">482</span>
                  </div>
                  <div className="flex items-center justify-between p-3 rounded-lg bg-slate-800/50">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-lg bg-violet-500/10 flex items-center justify-center">
                        <Server className="w-4 h-4 text-violet-400" />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-slate-200">Unique IPs</p>
                        <p className="text-xs text-slate-500">Distinct visitors</p>
                      </div>
                    </div>
                    <span className="text-sm font-bold text-violet-400">856</span>
                  </div>
                </div>
                <div className="mt-6 pt-6 border-t border-slate-800">
                  <div className="flex items-end gap-2 h-24">
                    {[40, 65, 45, 80, 55, 90, 70, 85, 60, 75, 50, 95].map((h, i) => (
                      <div key={i} className="flex-1 flex flex-col items-center gap-1">
                        <div
                          className="w-full rounded-sm bg-emerald-500/30 hover:bg-emerald-500/50 transition-colors"
                          style={{ height: `${h}%` }}
                        />
                      </div>
                    ))}
                  </div>
                  <div className="flex justify-between mt-2">
                    <span className="text-xs text-slate-600">Jan</span>
                    <span className="text-xs text-slate-600">Dec</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

// Need to import this for the analytics section
import { MousePointerClick } from 'lucide-react'