"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroWaitlist from '@/components/sections/hero/HeroWaitlist';
import AboutShowcase from '@/components/sections/about/AboutShowcase';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import TeamCardNine from '@/components/sections/team/TeamCardNine';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Coffee, Leaf, Sparkles, Users, Star, Instagram, Facebook, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSizeExtraLargeSpacing"
      background="animatedGrid"
      cardStyle="glass-flat"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Brew Haven"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Menu", id: "menu" },
            { name: "Team", id: "team" },
            { name: "Reviews", id: "testimonials" }
          ]}
          button={{
            text: "Visit Us",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroWaitlist
          title="Welcome to Brew Haven"
          description="Discover exceptional coffee crafted with passion. Join our community of coffee lovers and get updates on new blends and special offers."
          tag="Premium Coffee Experience"
          tagIcon={Coffee}
          fields={[
            {
              name: "email",
              type: "email",
              placeholder: "Your email",
              ariaLabel: "Email address",
              required: true
            },
            {
              name: "name",
              type: "text",
              placeholder: "Your name",
              ariaLabel: "Your name",
              required: true
            }
          ]}
          buttonText="Subscribe"
          onSubmit={(data) => console.log('Newsletter signup:', data)}
        />
      </div>

      <div id="about" data-section="about">
        <AboutShowcase
          title="Our Coffee Story"
          description="Since 2015, Brew Haven has been sourcing the finest single-origin coffees from sustainable farms around the world. We believe in direct trade relationships, environmental responsibility, and creating the perfect cup every single time."
          tag="About Us"
          tagIcon={Leaf}
          leftItem={{
            title: "Ethical Sourcing",
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792319761-0ja9a7kg.jpg",
            imageAlt: "Cozy modern coffee shop interior"
          }}
          rightItem={{
            title: "Expert Craftsmanship",
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792320998-57mf7dij.jpg",
            imageAlt: "Professional barista making coffee"
          }}
          centerImageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792319761-0ja9a7kg.jpg"
          centerImageAlt="Brew Haven coffee shop interior"
          useCappedBorderRadius={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Learn Our Process",
              href: "#"
            }
          ]}
        />
      </div>

      <div id="menu" data-section="menu">
        <ProductCardFive
          title="Featured Menu"
          description="Explore our signature drinks and seasonal specials, each crafted to perfection by our expert baristas."
          tag="What We Serve"
          tagIcon={Sparkles}
          products={[
            {
              id: "espresso",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792322185-w3lgbhvc.jpg",
              imageAlt: "Double shot espresso",
              button: {
                text: "Order Now"
              }
            },
            {
              id: "latte",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792324070-6n6dljg7.jpg",
              imageAlt: "Latte with latte art",
              button: {
                text: "Order Now"
              }
            },
            {
              id: "cappuccino",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792325147-9osxkgp2.jpg",
              imageAlt: "Cappuccino",
              button: {
                text: "Order Now"
              }
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardNine
          title="Meet Our Baristas"
          description="Passionate coffee experts dedicated to creating your perfect cup every visit."
          tag="Our Team"
          tagIcon={Users}
          members={[
            {
              id: "1",
              name: "Marco",
              role: "Head Barista & Founder",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792327013-olqkgnbv.jpg",
              imageAlt: "Marco, Head Barista",
              socialLinks: [
                {
                  icon: Instagram,
                  href: "https://instagram.com",
                  ariaLabel: "Instagram"
                }
              ]
            },
            {
              id: "2",
              name: "Sofia",
              role: "Master Barista",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792328068-fchzicys.jpg",
              imageAlt: "Sofia, Master Barista",
              socialLinks: [
                {
                  icon: Instagram,
                  href: "https://instagram.com",
                  ariaLabel: "Instagram"
                }
              ]
            },
            {
              id: "3",
              name: "James",
              role: "Coffee Specialist",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792329590-2nzegqo5.jpg",
              imageAlt: "James, Coffee Specialist",
              socialLinks: [
                {
                  icon: Instagram,
                  href: "https://instagram.com",
                  ariaLabel: "Instagram"
                }
              ]
            }
          ]}
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Customers Say"
          description="Join thousands of coffee lovers who have made Brew Haven their daily stop."
          tag="Customer Reviews"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",
              name: "Sarah M.",
              role: "Coffee Enthusiast",
              company: "Downtown Regular",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792331016-bjdd71t2.jpg",
              imageAlt: "Sarah enjoying coffee"
            },
            {
              id: "2",
              name: "David L.",
              role: "Business Owner",
              company: "Local Startup",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792332654-3ss6esqc.jpg",
              imageAlt: "David with coffee"
            },
            {
              id: "3",
              name: "Emma R.",
              role: "Marketing Manager",
              company: "Tech Company",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792334192-pa7xw2zr.jpg",
              imageAlt: "Emma enjoying coffee"
            },
            {
              id: "4",
              name: "Michael T.",
              role: "Student",
              company: "University",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792335833-ajwgagqq.jpg",
              imageAlt: "Michael with coffee"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Visit Us Today"
          description="Located in the heart of the city. Open daily from 7 AM to 7 PM. We look forward to brewing your perfect cup."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your email",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your visit or special request...",
            rows: 4,
            required: false
          }}
          buttonText="Send Message"
          useInvertedBackground="noInvert"
          onSubmit={(data) => console.log('Contact form:', data)}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="Brew Haven"
          columns={[
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Story", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Menu",
              items: [
                { label: "Coffee Selection", href: "#menu" },
                { label: "Pastries", href: "#" },
                { label: "Seasonal Drinks", href: "#" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Contact", href: "#contact" },
                { label: "Find Us", href: "#" },
                { label: "Newsletter", href: "#hero" }
              ]
            }
          ]}
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com/brewhaven",
              ariaLabel: "Instagram"
            },
            {
              icon: Facebook,
              href: "https://facebook.com/brewhaven",
              ariaLabel: "Facebook"
            },
            {
              icon: Twitter,
              href: "https://twitter.com/brewhaven",
              ariaLabel: "Twitter"
            }
          ]}
          copyrightText="© Brew Haven, Inc. 2025"
        />
      </div>
    </ThemeProvider>
  );
}