import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Calendar,
  Users,
  CreditCard,
  BarChart3,
  Zap,
  Globe
} from 'lucide-react';
import Hero from '../../components/marketing/Hero';
import FeatureCard from '../../components/marketing/FeatureCard';
import PluginShowcase from '../../components/marketing/PluginShowcase';
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: 'Intelligent Scheduling',
      description: 'Handle complex resources like staff, rooms, and equipment with concurrency limits.',
      color: 'brand',
    },
    {
      icon: Zap,
      title: 'Automation Engine',
      description: 'Install plugins from our marketplace or build your own to automate tasks.',
      color: 'purple',
    },
    {
      icon: Globe,
      title: 'Multi-Tenant Architecture',
      description: 'Dedicated secure vaults for enterprise-grade security and white-labeling.',
      color: 'green',
    },
    {
      icon: CreditCard,
      title: 'Integrated Payments',
      description: 'Seamlessly accept payments with Stripe integration and automated invoicing.',
      color: 'orange',
    },
    {
      icon: Users,
      title: 'Customer Management',
      description: 'CRM features to track history, preferences, and engagement.',
      color: 'pink',
    },
    {
      icon: BarChart3,
      title: 'Advanced Analytics',
      description: 'Deep insights into revenue, utilization, and staff performance.',
      color: 'indigo',
    },
  ];

  const testimonials = [
    {
      quote: "I installed the 'Client Win-Back' plugin and recovered $2k in bookings the first week. No setup required.",
      author: "Alex Rivera",
      role: "Owner",
      company: "TechSalon",
      rating: 5,
    },
    {
      quote: "Finally, a scheduler that understands 'rooms' and 'equipment' are different from 'staff'. Perfect for our medical spa.",
      author: "Dr. Sarah Chen",
      role: "Owner",
      company: "Lumina MedSpa",
      rating: 5,
    },
    {
      quote: "We white-labeled SmoothSchedule for our franchise. The multi-tenant architecture made it effortless.",
      author: "Marcus Johnson",
      role: "Director of Ops",
      company: "FitNation",
      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">
              The Operating System for Service Businesses
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
              More than just a calendar. A complete platform engineered for growth, automation, and scale.
            </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>

      {/* Plugin Showcase - NEW */}
      <PluginShowcase />

      {/* 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">
              Trusted by Modern Businesses
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-400">
              See why forward-thinking companies choose SmoothSchedule.
            </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;
