import { Link } from 'react-router-dom';
import { Layout } from '@/components/Layout';
import { Button } from '@/components/ui/button';
import { useBranding } from '@/hooks/useBranding';
import { TestimonialsSection } from '@/components/reviews/TestimonialsSection';
import { ArrowRight, BookOpen, Video, Users, Star, Award, Target, Zap, Heart, Shield, Rocket } from 'lucide-react';

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  Users,
  Video,
  BookOpen,
  Star,
  Award,
  Target,
  Zap,
  Heart,
  Shield,
  Rocket,
};

export default function Index() {
  const branding = useBranding();

  return (
    <Layout>
      <section className="container mx-auto px-4 py-16 text-center">
        <h1 className="text-5xl md:text-6xl font-bold mb-6">
          {branding.homepage_headline}
        </h1>
        <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
          {branding.homepage_description}
        </p>
        <div className="flex gap-4 justify-center">
          <Link to="/products">
            <Button size="lg" className="shadow-sm">
              Browse Products
              <ArrowRight className="w-4 h-4 ml-2" />
            </Button>
          </Link>
          <Link to="/auth">
            <Button size="lg" variant="outline" className="border-2">
              Get Started
            </Button>
          </Link>
        </div>
      </section>

      <section className="container mx-auto px-4 py-16">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {branding.homepage_features.map((feature, index) => {
            const IconComponent = iconMap[feature.icon] || Users;
            return (
              <div key={index} className="border-2 border-border p-8 shadow-sm">
                <IconComponent className="w-12 h-12 mb-4" />
                <h3 className="text-2xl font-bold mb-2">{feature.title}</h3>
                <p className="text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            );
          })}
        </div>
      </section>

      <TestimonialsSection />
    </Layout>
  );
}