"use client";

import React, { useState } from "react";
import { Header } from "@/components/Header";
import { Hero } from "@/components/Hero";
import { PanettonesShowcase } from "@/components/PanettonesShowcase";
import { CraftSection } from "@/components/CraftSection";
import { HistorySection } from "@/components/HistorySection";
import { StoresSection } from "@/components/StoresSection";
import { InstagramSection } from "@/components/InstagramSection";
import { BlogSection } from "@/components/BlogSection";
import { NewsletterSection } from "@/components/NewsletterSection";
import { Footer } from "@/components/Footer";
import { CartDrawer } from "@/components/CartDrawer";
import { ProductModal } from "@/components/ProductModal";
import { WhatsAppButton } from "@/components/WhatsAppButton";
import { Product } from "@/data/products";

export default function Home() {
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);

  return (
    <div className="min-h-screen flex flex-col bg-white font-sans text-stone-900 antialiased selection:bg-amber-200 selection:text-amber-950">
      {/* Navigation Header */}
      <Header onOpenProductModal={(product) => setSelectedProduct(product)} />

      {/* Main Content Area */}
      <main className="flex-1">
        {/* Hero Showcase with 1758 Saga */}
        <Hero />

        {/* Panettones and Bakery Catalogue */}
        <PanettonesShowcase onOpenDetails={(product) => setSelectedProduct(product)} />

        {/* 4 Days Slow Fermentation Craftmanship */}
        <CraftSection />

        {/* Story of the 1758 Saga */}
        <HistorySection />

        {/* Physical Stores in Aspe and Novelda */}
        <StoresSection />

        {/* Press, TV & Obrador Blog */}
        <BlogSection />

        {/* Instagram Social Feed */}
        <InstagramSection />

        {/* 10% Welcome Discount Club */}
        <NewsletterSection />
      </main>

      {/* Footer */}
      <Footer />

      {/* Global Interactive Overlays */}
      <CartDrawer />
      <ProductModal
        product={selectedProduct}
        onClose={() => setSelectedProduct(null)}
      />
      <WhatsAppButton />
    </div>
  );
}