"use client";


import { ArrowRight, Star, Calendar } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useLanguage } from "@/contexts/LanguageContext";
import { products, categories, reviews } from "@/data/products";
import ProductCard from "@/components/ProductCard";
import Link from "next/link";

export default function Home() {
  const { t } = useLanguage();
  const bestsellers = products.filter((p) => p.isBestseller);

  return (
    <div className="min-h-screen">
      {/* Hero */}
      <section className="relative h-[85vh] flex items-center overflow-hidden">
        <div className="absolute inset-0">
          <img
            src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=1600&h=900&fit=crop"
            alt="Extensions de cheveux luxe"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-foreground/60 via-foreground/30 to-transparent" />
        </div>
        <div className="relative container mx-auto px-4 lg:px-8">
          <div className="max-w-xl">
            <h1 className="font-serif text-4xl lg:text-6xl font-semibold text-background leading-tight mb-4">
              {t("hero.title")}
            </h1>
            <p className="text-background/80 text-lg mb-8">
              {t("hero.subtitle")}
            </p>
            <Link href="/boutique">
              <Button size="lg" className="group text-sm tracking-wide">
                {t("hero.cta")}
                <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="py-16 lg:py-24 container mx-auto px-4 lg:px-8">
        <h2 className="font-serif text-3xl lg:text-4xl text-center mb-12">{t("categories.title")}</h2>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
          {categories.map((cat) => (
            <Link key={cat.id} href={`/boutique?category=${cat.id}`} className="group relative overflow-hidden rounded-lg aspect-[3/4]">
              <img src={cat.image} alt={cat.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
              <div className="absolute inset-0 bg-gradient-to-t from-foreground/70 to-transparent" />
              <div className="absolute bottom-4 left-4 text-background">
                <h3 className="font-serif text-lg font-semibold">{cat.name}</h3>
                <p className="text-xs opacity-80">{cat.description}</p>
              </div>
            </Link>
          ))}
        </div>
      </section>

      {/* Bestsellers */}
      <section className="py-16 lg:py-24 bg-muted/50">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="flex items-center justify-between mb-10">
            <h2 className="font-serif text-3xl lg:text-4xl">{t("bestsellers.title")}</h2>
            <Link href="/boutique" className="text-sm text-primary hover:underline flex items-center gap-1">
              {t("nav.shop")} <ArrowRight className="h-3 w-3" />
            </Link>
          </div>
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
            {bestsellers.map((p) => (
              <ProductCard key={p.id} product={p} />
            ))}
          </div>
        </div>
      </section>

      {/* Booking Banner */}
      <section className="relative py-20 lg:py-32 overflow-hidden">
        <div className="absolute inset-0">
          <img
            src="https://images.unsplash.com/photo-1580618672591-eb180b1a973f?w=1600&h=600&fit=crop"
            alt="Réservation"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-foreground/50" />
        </div>
        <div className="relative container mx-auto px-4 lg:px-8 text-center">
          <Calendar className="h-10 w-10 text-background/80 mx-auto mb-4" />
          <h2 className="font-serif text-3xl lg:text-5xl text-background mb-3">{t("booking.title")}</h2>
          <p className="text-background/70 mb-8 text-lg">{t("booking.subtitle")}</p>
          <Link href="/reservation">
            <Button variant="outline" className="border-background p-6 text-lg cursor-pointer text-foreground hover:bg-primary hover:text-background transition-colors">
              {t("booking.cta")}
            </Button>
          </Link>
        </div>
      </section>

      {/* Reviews */}
      <section className="py-16 lg:py-24 container mx-auto px-4 lg:px-8">
        <h2 className="font-serif text-3xl lg:text-4xl text-center mb-12">{t("reviews.title")}</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {reviews.map((review) => (
            <div key={review.id} className="bg-card rounded-lg p-6 border border-border">
              <div className="flex gap-0.5 mb-3">
                {Array.from({ length: review.rating }).map((_, i) => (
                  <Star key={i} className="h-4 w-4 fill-primary text-primary" />
                ))}
              </div>
              <p className="text-sm text-muted-foreground leading-relaxed mb-4">{review.text}</p>
              <p className="text-sm font-medium">{review.name}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}