'use client';

import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Instagram, Facebook } from 'lucide-react';

const navItems = [
  { name: 'Home', id: '/' },
  { name: 'About', id: '/about' },
  { name: 'Contact', id: '/contact' }
];

export default function HomePage() {
  return (
    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen navItems={navItems} brandName="Webild" />
      </div>
      <div id="hero" data-section="hero">
        <HeroOverlayTestimonial
          title="Experience Extraordinary Coffee"
          description="Handcrafted brews for the modern palate."
          testimonials={[{ name: "Jane Doe", handle: "@janedoe", testimonial: "Best coffee in town!", rating: 5 }]}
          imageSrc="https://images.unsplash.com/photo-1509042239860-f550ce710b93?q=80&w=2000"
        />
      </div>
      <div id="about" data-section="about">
        <TextSplitAbout
          title="Our Story"
          description={["We believe in the perfect cup.", "Sourced ethically, brewed passionately."]}
          useInvertedBackground={false}
        />
      </div>
      <div id="collections" data-section="collections">
        <ProductCardTwo
          title="Premium Collections"
          description="Our finest selection of artisan roasts."
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            { id: "p1", brand: "Roast A", name: "Dark Roast", price: "$15", rating: 4, reviewCount: "10", imageSrc: "https://images.unsplash.com/photo-1559056199-641a0ac8b55e?q=80&w=500" },
            { id: "p2", brand: "Roast B", name: "Medium Roast", price: "$18", rating: 5, reviewCount: "20", imageSrc: "https://images.unsplash.com/photo-1559056199-641a0ac8b55e?q=80&w=500" },
            { id: "p3", brand: "Roast C", name: "Light Roast", price: "$20", rating: 4, reviewCount: "15", imageSrc: "https://images.unsplash.com/photo-1559056199-641a0ac8b55e?q=80&w=500" }
          ]}
        />
      </div>
      <div id="cafe" data-section="cafe">
        <FeatureCardSeven
          title="Modern Cafe Atmosphere"
          description="Designed for work, rest, and connection."
          animationType="slide-up"
          textboxLayout="split"
          useInvertedBackground={false}
          features={[{ title: "Cozy Seating", description: "Comfortable chairs for long stays.", imageSrc: "https://images.unsplash.com/photo-1453614512568-c4024d13c247?q=80&w=500" }]}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="The atmosphere is just unmatched."
          rating={5}
          author="Alex Smith"
          avatars={[{ src: "https://i.pravatar.cc/100", alt: "Author" }]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>
      <div id="gallery" data-section="gallery">
        <FeatureCardSeven
          title="Artisan Gallery"
          description="See our craft in action."
          animationType="slide-up"
          textboxLayout="split"
          useInvertedBackground={false}
          features={[{ title: "Master Baristas", description: "Dedicated to the art of brewing.", imageSrc: "https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=500" }]}
        />
      </div>
      <div id="location" data-section="location">
        <ContactSplitForm
          title="Visit Us"
          description="We are located at the heart of downtown."
          inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
          imageSrc="https://images.unsplash.com/photo-1507041957456-9c39a439c730?q=80&w=800"
          useInvertedBackground={false}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterMedia
          logoText="Webild"
          imageSrc="https://images.unsplash.com/photo-1509042239860-f550ce710b93?q=80&w=1200"
          columns={[
            { title: "Menu", items: [{ label: "Espresso", href: "#" }, { label: "Brew Bar", href: "#" }] },
            { title: "Company", items: [{ label: "Our Story", href: "#" }, { label: "Careers", href: "#" }] }
          ]}
          copyrightText="© 2025 | Webild Artisan Coffee"
        />
      </div>
    </ThemeProvider>
  );
}