import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Calendar,
  Users,
  CreditCard,
  BarChart3,
  Zap,
  Globe,
  FileSignature
} from 'lucide-react';
import Hero from '../../components/marketing/Hero';
import FeatureCard from '../../components/marketing/FeatureCard';
import AutomationShowcase from '../../components/marketing/AutomationShowcase';
import BenefitsSection from '../../components/marketing/BenefitsSection';
import TestimonialCard from '../../components/marketing/TestimonialCard';
import CTASection from '../../components/marketing/CTASection';

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

  const features = [
    {
      icon: Calendar,
      title: t('marketing.home.features.intelligentScheduling.title'),
      description: t('marketing.home.features.intelligentScheduling.description'),
      color: 'brand',
    },
    {
      icon: Zap,
      title: t('marketing.home.features.automationEngine.title'),
      description: t('marketing.home.features.automationEngine.description'),
      color: 'purple',
    },
    {
      icon: Globe,
      title: t('marketing.home.features.multiTenant.title'),
      description: t('marketing.home.features.multiTenant.description'),
      color: 'green',
    },
    {
      icon: CreditCard,
      title: t('marketing.home.features.integratedPayments.title'),
      description: t('marketing.home.features.integratedPayments.description'),
      color: 'orange',
    },
    {
      icon: Users,
      title: t('marketing.home.features.customerManagement.title'),
      description: t('marketing.home.features.customerManagement.description'),
      color: 'pink',
    },
    {
      icon: BarChart3,
      title: t('marketing.home.features.advancedAnalytics.title'),
      description: t('marketing.home.features.advancedAnalytics.description'),
      color: 'indigo',
    },
    {
      icon: FileSignature,
      title: t('marketing.home.features.digitalContracts.title'),
      description: t('marketing.home.features.digitalContracts.description'),
      color: 'teal',
    },
  ];

  const testimonials = [
    {
      quote: t('marketing.home.testimonials.winBack.quote'),
      author: t('marketing.home.testimonials.winBack.author'),
      role: t('marketing.home.testimonials.winBack.role'),
      company: t('marketing.home.testimonials.winBack.company'),
      rating: 5,
    },
    {
      quote: t('marketing.home.testimonials.resources.quote'),
      author: t('marketing.home.testimonials.resources.author'),
      role: t('marketing.home.testimonials.resources.role'),
      company: t('marketing.home.testimonials.resources.company'),
      rating: 5,
    },
    {
      quote: t('marketing.home.testimonials.whiteLabel.quote'),
      author: t('marketing.home.testimonials.whiteLabel.author'),
      role: t('marketing.home.testimonials.whiteLabel.role'),
      company: t('marketing.home.testimonials.whiteLabel.company'),
      rating: 5,
    },
  ];

  return (
    <div>
      {/* Hero Section - Updated Copy */}
      <Hero />

      {/* Feature Grid */}
      <section className="py-20 lg:py-28 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
              {t('marketing.home.featuresSection.title')}
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
              {t('marketing.home.featuresSection.subtitle')}
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            {features.map((feature) => (
              <FeatureCard
                key={feature.title}
                icon={feature.icon}
                title={feature.title}
                description={feature.description}
                iconColor={feature.color}
              />
            ))}
          </div>
        </div>
      </section>

      {/* Automation Showcase */}
      <AutomationShowcase />

      {/* Benefits Section (Replaces Stats) */}
      <BenefitsSection />

      {/* Testimonials Section */}
      <section className="py-20 lg:py-28 bg-gray-50 dark:bg-gray-800/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
              {t('marketing.home.testimonialsSection.title')}
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-400">
              {t('marketing.home.testimonialsSection.subtitle')}
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            {testimonials.map((testimonial, index) => (
              <TestimonialCard key={index} {...testimonial} />
            ))}
          </div>
        </div>
      </section>

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

export default HomePage;
