'use client';

import { FeatureCard } from './FeatureCard';
import { Cigarette, Leaf, Heart, Trophy, DollarSign } from 'lucide-react';

const FEATURES = [
  {
    id: 'dual-tracking',
    title: 'Dual Substance Tracking',
    description:
      'Track both nicotine and marijuana independently. Each substance has its own stats, timeline, and achievements to support your unique journey.',
    icons: [
      { Icon: Cigarette, color: 'text-red-400', bg: 'bg-red-500/20' },
      { Icon: Leaf, color: 'text-green-400', bg: 'bg-green-500/20' },
    ],
    gradient: 'rgba(239, 68, 68, 0.15) 0%, rgba(34, 197, 94, 0.15) 100%',
  },
  {
    id: 'health-timeline',
    title: 'Health Recovery Timeline',
    description:
      'Watch your body heal in real-time. From 20 minutes to 1 year, track every health milestone as your body recovers and gets stronger.',
    icons: [{ Icon: Heart, color: 'text-teal-400', bg: 'bg-teal-500/20' }],
    gradient: 'rgba(20, 184, 166, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%',
  },
  {
    id: 'achievements',
    title: 'Achievements & Badges',
    description:
      'Unlock badges as you progress. First Step, Week Warrior, Goal Crusher - celebrate every win and stay motivated on your journey.',
    icons: [{ Icon: Trophy, color: 'text-yellow-400', bg: 'bg-yellow-500/20' }],
    gradient: 'rgba(234, 179, 8, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%',
  },
  {
    id: 'savings',
    title: 'Money Savings Tracker',
    description:
      'See how much you save by cutting back. Set your goals and watch your savings grow daily - extra motivation to keep going.',
    icons: [{ Icon: DollarSign, color: 'text-emerald-400', bg: 'bg-emerald-500/20' }],
    gradient: 'rgba(16, 185, 129, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%',
  },
];

export function FeaturesSection() {
  return (
    <section
      id="features"
      aria-labelledby="features-heading"
      className="py-20 px-4 relative"
    >
      {/* Background accent */}
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-primary/5 to-transparent pointer-events-none" />

      <div className="container mx-auto max-w-6xl relative z-10">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2
            id="features-heading"
            className="text-3xl sm:text-4xl font-bold mb-4"
          >
            Everything You Need to{' '}
            <span className="bg-gradient-to-r from-primary via-purple-500 to-pink-500 bg-clip-text text-transparent">
              Succeed
            </span>
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Built with empathy and designed for your success. Every feature supports your journey
            to a healthier, happier life.
          </p>
        </div>

        {/* Features Grid */}
        <div className="grid sm:grid-cols-2 gap-6">
          {FEATURES.map((feature, index) => (
            <FeatureCard
              key={feature.id}
              title={feature.title}
              description={feature.description}
              icons={feature.icons}
              gradient={feature.gradient}
              delay={index * 100}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
