import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Calendar,
  Users,
  CreditCard,
  Building2,
  Palette,
  BarChart3,
  Plug,
  UserCircle,
  Bell,
  Shield,
  Smartphone,
  Clock,
} from 'lucide-react';
import FeatureCard from '../../components/marketing/FeatureCard';
import CTASection from '../../components/marketing/CTASection';

const FeaturesPage: React.FC = () => {
  const { t } = useTranslation();

  const featureCategories = [
    {
      title: 'Scheduling & Calendar',
      features: [
        {
          icon: Calendar,
          titleKey: 'marketing.features.scheduling.title',
          descriptionKey: 'marketing.features.scheduling.description',
          color: 'brand',
        },
        {
          icon: Clock,
          title: 'Real-Time Availability',
          description: 'Customers see only available time slots. No double bookings, ever.',
          color: 'green',
        },
        {
          icon: Bell,
          title: 'Automated Reminders',
          description: 'Reduce no-shows with email and SMS reminders sent automatically.',
          color: 'purple',
        },
      ],
    },
    {
      title: 'Resource Management',
      features: [
        {
          icon: Users,
          titleKey: 'marketing.features.resources.title',
          descriptionKey: 'marketing.features.resources.description',
          color: 'orange',
        },
        {
          icon: Smartphone,
          title: 'Staff Mobile App',
          description: 'Your team can view schedules and manage appointments on the go.',
          color: 'pink',
        },
        {
          icon: Shield,
          title: 'Role-Based Access',
          description: 'Control what each team member can see and do with granular permissions.',
          color: 'cyan',
        },
      ],
    },
    {
      title: 'Customer Experience',
      features: [
        {
          icon: UserCircle,
          titleKey: 'marketing.features.customers.title',
          descriptionKey: 'marketing.features.customers.description',
          color: 'brand',
        },
        {
          icon: CreditCard,
          titleKey: 'marketing.features.payments.title',
          descriptionKey: 'marketing.features.payments.description',
          color: 'green',
        },
        {
          icon: Palette,
          titleKey: 'marketing.features.whiteLabel.title',
          descriptionKey: 'marketing.features.whiteLabel.description',
          color: 'purple',
        },
      ],
    },
    {
      title: 'Business Growth',
      features: [
        {
          icon: Building2,
          titleKey: 'marketing.features.multiTenant.title',
          descriptionKey: 'marketing.features.multiTenant.description',
          color: 'orange',
        },
        {
          icon: BarChart3,
          titleKey: 'marketing.features.analytics.title',
          descriptionKey: 'marketing.features.analytics.description',
          color: 'pink',
        },
        {
          icon: Plug,
          titleKey: 'marketing.features.integrations.title',
          descriptionKey: 'marketing.features.integrations.description',
          color: 'cyan',
        },
      ],
    },
  ];

  return (
    <div>
      {/* Header Section */}
      <section className="py-20 lg:py-28 bg-gradient-to-br from-white via-brand-50/30 to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
              {t('marketing.features.title')}
            </h1>
            <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
              {t('marketing.features.subtitle')}
            </p>
          </div>
        </div>
      </section>

      {/* Feature Categories */}
      {featureCategories.map((category, categoryIndex) => (
        <section
          key={categoryIndex}
          className={`py-20 ${
            categoryIndex % 2 === 0
              ? 'bg-white dark:bg-gray-900'
              : 'bg-gray-50 dark:bg-gray-800/50'
          }`}
        >
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-10 text-center">
              {category.title}
            </h2>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
              {category.features.map((feature, featureIndex) => (
                <FeatureCard
                  key={featureIndex}
                  icon={feature.icon}
                  title={feature.titleKey ? t(feature.titleKey) : feature.title || ''}
                  description={
                    feature.descriptionKey
                      ? t(feature.descriptionKey)
                      : feature.description || ''
                  }
                  iconColor={feature.color}
                />
              ))}
            </div>
          </div>
        </section>
      ))}

      {/* CTA Section */}
      <CTASection />
    </div>
  );
};

export default FeaturesPage;
