"use client"

import { Link } from "react-router-dom"
import { Button } from "@/components/ui/button"
import { ArrowRight, Heart, Sparkles, Refrigerator, Camera, Mic, Clock, Utensils, Zap } from "lucide-react"
import { motion } from "framer-motion"
import { PricingCard } from "@/components/PricingCard"
import { TestimonialCard } from "@/components/TestimonialCard"
import { HowItWorksStep } from "@/components/HowItWorksStep"
import { KitchenIllustration } from "@/components/illustrations/KitchenIllustration"
import PastaVongole from "@/assets/pasta-alla-vongole-home.jpeg"

export default function Home() {
  return (
    <div className="md:space-y-24 space-y-4 pb-16">
      <section className="py-12 md:py-20 flex justify-center">
        <div className="container px-4 md:px-6">
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
            <motion.div
              className="space-y-4"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
            >
              <div className="inline-block rounded-lg bg-orange-100 dark:bg-orange-900/30 px-3 py-1 text-sm text-orange-700 dark:text-orange-300 mb-2">
                <span className="flex items-center gap-1">
                  <Sparkles className="h-3.5 w-3.5" />
                  Propulsé par l'IA
                </span>
              </div>
              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl bg-gradient-to-r from-orange-600 to-amber-600 bg-clip-text text-transparent dark:from-orange-400 dark:to-amber-400">
                Des recettes délicieuses avec ce que vous avez déjà
              </h1>
              <p className="max-w-[600px] text-lg text-muted-foreground md:text-xl">
                Freedge analyse les ingrédients de votre frigo et vous propose des recettes personnalisées en quelques
                secondes. Fini le gaspillage alimentaire !
              </p>
              <div className="flex flex-col gap-3 min-[400px]:flex-row">
                <Link to="/recipes">
                  <Button className="bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white">
                    Commencer maintenant
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </Link>
                <Link to="/auth/register">
                  <Button
                    variant="outline"
                    className="border-orange-200 hover:bg-orange-50 hover:text-orange-600 dark:border-orange-800 dark:hover:bg-orange-900/20 dark:hover:text-orange-400"
                  >
                    Créer un compte
                  </Button>
                </Link>
              </div>
            </motion.div>
            <motion.div
              className="flex items-center justify-center relative"
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5, delay: 0.2 }}
            >
              <div className="absolute -z-10 h-full w-full bg-gradient-to-br from-orange-100 to-amber-100 dark:from-orange-900/20 dark:to-amber-900/20 rounded-3xl blur-2xl" />
              <div className="bg-white dark:bg-slate-800 rounded-3xl shadow-xl overflow-hidden border border-orange-100 dark:border-orange-900/30">
                <img
                  alt="Recettes personnalisées"
                  className="w-full aspect-[4/3] object-cover"
                  src={PastaVongole}
                />
                <div className="p-6">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-bold text-lg">Pasta Primavera</h3>
                    <div className="flex items-center gap-1 text-sm">
                      <Clock className="h-4 w-4 text-orange-500" />
                      <span>25 min</span>
                    </div>
                  </div>
                  <p className="text-sm text-muted-foreground mb-4">
                    Créé avec les ingrédients de votre frigo : pâtes, tomates, courgettes, basilic
                  </p>
                  <div className="flex justify-between items-center">
                    <div className="flex gap-1">
                      <span className="inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/30 px-2.5 py-0.5 text-xs font-medium text-green-700 dark:text-green-300">
                        Facile
                      </span>
                      <span className="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/30 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:text-blue-300">
                        Végétarien
                      </span>
                    </div>
                    <Button variant="ghost" size="sm" className="rounded-full">
                      <Heart className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* AI Features section */}
      <section className="py-12 md:py-20 flex justify-center bg-gradient-to-b from-orange-50 to-amber-50 dark:from-slate-900 dark:to-slate-900/80">
        <div className="container px-4 md:px-6">
          <motion.div
            className="flex flex-col items-center justify-center space-y-4 text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                L'IA au service de votre cuisine
              </h2>
              <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed">
                Notre intelligence artificielle transforme votre façon de cuisiner
              </p>
            </div>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <motion.div
              className="order-2 md:order-1"
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5 }}
              viewport={{ once: true }}
            >
              <div className="space-y-8">
                <div className="space-y-2">
                  <h3 className="text-2xl font-bold">Dites adieu au gaspillage alimentaire</h3>
                  <p className="text-muted-foreground">
                    Notre IA analyse les ingrédients que vous avez déjà et vous propose des recettes adaptées, vous
                    permettant d'utiliser ce que vous avez sous la main.
                  </p>
                </div>

                <div className="space-y-4">
                  <div className="flex items-start gap-3">
                    <div className="bg-orange-100 dark:bg-orange-900/30 p-2 rounded-lg">
                      <Mic className="h-5 w-5 text-orange-600 dark:text-orange-400" />
                    </div>
                    <div>
                      <h4 className="font-medium">Dictez vos ingrédients</h4>
                      <p className="text-sm text-muted-foreground">
                        Énumérez simplement ce que vous avez dans votre frigo
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start gap-3">
                    <div className="bg-orange-100 dark:bg-orange-900/30 p-2 rounded-lg">
                      <Camera className="h-5 w-5 text-orange-600 dark:text-orange-400" />
                    </div>
                    <div>
                      <h4 className="font-medium">Scannez votre frigo</h4>
                      <p className="text-sm text-muted-foreground">
                        Prenez une photo et notre IA identifie vos ingrédients
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start gap-3">
                    <div className="bg-orange-100 dark:bg-orange-900/30 p-2 rounded-lg">
                      <Sparkles className="h-5 w-5 text-orange-600 dark:text-orange-400" />
                    </div>
                    <div>
                      <h4 className="font-medium">Recettes personnalisées</h4>
                      <p className="text-sm text-muted-foreground">
                        Obtenez des suggestions adaptées à vos préférences et restrictions
                      </p>
                    </div>
                  </div>
                </div>

                <Link to="/recipes/new">
                  <Button className="bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white">
                    Essayer maintenant
                    <Zap className="ml-2 h-4 w-4" />
                  </Button>
                </Link>
              </div>
            </motion.div>

            <motion.div
              className="order-1 md:order-2 flex justify-center"
              initial={{ opacity: 0, x: 20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5 }}
              viewport={{ once: true }}
            >
              <div className="relative w-full max-w-md">
                <div className="absolute -z-10 h-full w-full bg-gradient-to-br from-orange-100 to-amber-100 dark:from-orange-900/20 dark:to-amber-900/20 rounded-3xl blur-2xl" />
                <KitchenIllustration />
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* How it works section */}
      <section className="py-12 md:py-20 flex justify-center">
        <div className="container px-4 md:px-6">
          <motion.div
            className="flex flex-col items-center justify-center space-y-4 text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Comment ça marche</h2>
              <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed">
                En trois étapes simples, transformez les ingrédients de votre frigo en délicieux repas
              </p>
            </div>
          </motion.div>

          <div className="max-w-3xl mx-auto space-y-12">
            <HowItWorksStep
              icon={Refrigerator}
              title="Listez vos ingrédients"
              description="Dictez ou scannez les ingrédients disponibles dans votre réfrigérateur. Notre IA les identifie automatiquement."
              step={1}
              delay={0.1}
            />

            <HowItWorksStep
              icon={Sparkles}
              title="L'IA génère des recettes"
              description="Notre intelligence artificielle analyse vos ingrédients et crée des recettes personnalisées adaptées à ce que vous avez sous la main."
              step={2}
              delay={0.2}
            />

            <HowItWorksStep
              icon={Utensils}
              title="Cuisinez et savourez"
              description="Suivez les instructions étape par étape et préparez un délicieux repas sans avoir à faire de courses supplémentaires."
              step={3}
              delay={0.3}
            />
          </div>
        </div>
      </section>

      {/* Pricing section */}
      <section className="py-12 md:py-20 flex justify-center bg-gradient-to-b from-orange-50 to-amber-50 dark:from-slate-900 dark:to-slate-900/80">
        <div className="container px-4 md:px-6">
          <motion.div
            className="flex flex-col items-center justify-center space-y-4 text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Plans d'abonnement</h2>
              <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed">
                Choisissez le plan qui correspond à vos besoins culinaires
              </p>
            </div>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
              viewport={{ once: true }}
            >
              <PricingCard
                name="Gratuit"
                description="Parfait pour découvrir l'application"
                price={null}
                features={[
                  { text: "3 recettes par mois", included: true },
                  { text: "Reconnaissance vocale des ingrédients", included: true },
                  { text: "Recettes personnalisées", included: true },
                  { text: "Sauvegarde des recettes", included: true },
                  { text: "Reconnaissance par photo", included: false },
                  { text: "Recettes premium", included: false },
                  { text: "Support prioritaire", included: false },
                ]}
                buttonText="S'inscrire gratuitement"
                buttonVariant="outline"
              />
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              viewport={{ once: true }}
            >
              <PricingCard
                name="Essentiel"
                description="Pour les cuisiniers réguliers"
                price="3"
                features={[
                  { text: "15 recettes par mois", included: true },
                  { text: "Reconnaissance vocale des ingrédients", included: true },
                  { text: "Recettes personnalisées", included: true },
                  { text: "Sauvegarde des recettes", included: true },
                  { text: "Reconnaissance par photo", included: true },
                  { text: "Recettes premium", included: false },
                  { text: "Support prioritaire", included: false },
                ]}
                buttonText="Choisir Essentiel"
                popular={true}
              />
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
              viewport={{ once: true }}
            >
              <PricingCard
                name="Premium"
                description="Pour les passionnés de cuisine"
                price="5"
                features={[
                  { text: "Recettes illimitées", included: true },
                  { text: "Reconnaissance vocale des ingrédients", included: true },
                  { text: "Recettes personnalisées", included: true },
                  { text: "Sauvegarde des recettes", included: true },
                  { text: "Reconnaissance par photo", included: true },
                  { text: "Recettes premium", included: true },
                  { text: "Support prioritaire", included: true },
                ]}
                buttonText="Choisir Premium"
              />
            </motion.div>
          </div>
        </div>
      </section>

      {/* Testimonials section */}
      <section className="py-12 md:py-20 flex justify-center">
        <div className="container px-4 md:px-6">
          <motion.div
            className="flex flex-col items-center justify-center space-y-4 text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                Ce que disent nos utilisateurs
              </h2>
              <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed">
                Découvrez comment Freedge transforme la façon dont les gens cuisinent
              </p>
            </div>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
              viewport={{ once: true }}
            >
              <TestimonialCard
                quote="Freedge a complètement changé ma façon de cuisiner. Je ne jette plus rien et je découvre de nouvelles recettes chaque semaine !"
                author="Sophie Martin"
                role="Utilisatrice depuis 6 mois"
                rating={5}
              />
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              viewport={{ once: true }}
            >
              <TestimonialCard
                quote="L'IA est impressionnante ! J'ai dicté les 5 ingrédients qui me restaient et j'ai obtenu une recette délicieuse en quelques secondes."
                author="Thomas Dubois"
                role="Abonné Premium"
                rating={5}
              />
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
              viewport={{ once: true }}
            >
              <TestimonialCard
                quote="Je fais des économies considérables sur mes courses depuis que j'utilise Freedge. Plus besoin d'acheter des ingrédients spécifiques pour chaque recette."
                author="Julie Moreau"
                role="Utilisatrice depuis 3 mois"
                rating={4}
              />
            </motion.div>
          </div>
        </div>
      </section>

      {/* CTA section */}
      <section className="py-12 md:py-20 flex justify-center">
        <div className="container px-4 md:px-6">
          <motion.div
            className="rounded-3xl bg-gradient-to-r from-orange-500 to-amber-500 p-8 md:p-12 lg:p-16 text-white relative overflow-hidden"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <div className="absolute inset-0 bg-[url('/placeholder.svg?height=600&width=800')] opacity-10 bg-cover bg-center mix-blend-overlay" />

            <div className="relative z-10 max-w-3xl mx-auto text-center space-y-6">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                Prêt à transformer votre façon de cuisiner ?
              </h2>
              <p className="text-white/80 md:text-xl/relaxed">
                Rejoignez des milliers d'utilisateurs qui économisent du temps, de l'argent et réduisent leur gaspillage
                alimentaire grâce à Freedge.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link to="/auth/register">
                  <Button className="bg-white text-orange-600 hover:bg-white/90 hover:text-orange-700">
                    Commencer gratuitement
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </Link>
                <Link to="/recipes">
                  <Button variant="outline" className="border-white text-white hover:bg-white/20">
                    Explorer les recettes
                  </Button>
                </Link>
              </div>
            </div>
          </motion.div>
        </div>
      </section>
    </div>
  )
}

