"use client"

import { Coffee, Award, Sparkles, Shield, TrendingUp, Mail, HelpCircle, Star } from "lucide-react";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="BrewHaven"
          navItems={[
            { name: "Menu", id: "menu" },
            { name: "About", id: "about" },
            { name: "Location", id: "location" },
            { name: "Reservations", id: "reservations" }
          ]}
          bottomLeftText="Crafted Daily"
          bottomRightText="hello@brewhaven.coffee"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Discover Your Perfect Cup of Coffee"
          description="Handcrafted espresso drinks, freshly baked pastries, and a warm atmosphere. Experience specialty coffee culture at BrewHaven."
          background={{ variant: "radial-gradient" }}
          tag="Premium Coffee"
          tagIcon={Coffee}
          tagAnimation="slide-up"
          buttons={[
            { text: "Order Now", href: "#menu" },
            { text: "Reserve a Table", href: "#reservations" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3267cz"
          imageAlt="Coffee being expertly poured"
          mediaAnimation="slide-up"
          className="w-full"
          containerClassName="px-4 py-12 lg:py-20"
          titleClassName="text-4xl lg:text-6xl"
          descriptionClassName="text-lg lg:text-xl"
          buttonClassName="px-6 py-3 rounded-lg"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="About BrewHaven"
          description="Founded in 2015, BrewHaven has been a destination for coffee enthusiasts seeking authentic, expertly crafted beverages. We source beans from ethical suppliers worldwide and roast them in-house to perfection."
          metrics={[
            { value: "2000+", title: "Daily Customers" },
            { value: "50+", title: "Coffee Origins" },
            { value: "9 Years", title: "Excellence" }
          ]}
          useInvertedBackground={false}
          tag="Our Story"
          tagIcon={Award}
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=blc9x7"
          imageAlt="BrewHaven coffee shop interior"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          containerClassName="px-4 py-16 lg:py-24"
          titleClassName="text-3xl lg:text-5xl"
          descriptionClassName="text-base lg:text-lg"
        />
      </div>

      <div id="featured-products" data-section="featured-products">
        <ProductCardTwo
          title="Featured Menu Items"
          description="Explore our signature drinks and pastries, crafted with care and premium ingredients."
          tag="Menu Highlights"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "product-1",              brand: "BrewHaven",              name: "Signature Espresso",              price: "$4.50",              rating: 5,
              reviewCount: "342",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4o0sy",              imageAlt: "Signature espresso with latte art"
            },
            {
              id: "product-2",              brand: "BrewHaven",              name: "Butter Croissant",              price: "$5.00",              rating: 5,
              reviewCount: "298",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tct2ub",              imageAlt: "Fresh butter croissant"
            },
            {
              id: "product-3",              brand: "BrewHaven",              name: "Cold Brew Special",              price: "$5.50",              rating: 5,
              reviewCount: "215",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nvc83q",              imageAlt: "Refreshing iced cold brew"
            }
          ]}
          buttons={[
            { text: "View Full Menu", href: "#menu" }
          ]}
          buttonAnimation="slide-up"
          containerClassName="px-4 py-16 lg:py-24"
          titleClassName="text-3xl lg:text-5xl"
          descriptionClassName="text-base lg:text-lg"
          gridClassName="grid grid-cols-1 md:grid-cols-3 gap-6"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="By The Numbers"
          description="Our commitment to excellence is reflected in these impressive metrics."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Our Impact"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          animationType="slide-up"
          metrics={[
            {
              id: "metric-1",              value: "50K+",              title: "Cups Served Monthly",              items: ["Premium quality assured", "Fresh daily preparation"]
            },
            {
              id: "metric-2",              value: "98%",              title: "Customer Satisfaction",              items: ["Consistent excellence", "Loyal customer base"]
            },
            {
              id: "metric-3",              value: "12",              title: "Awards Won",              items: ["Regional recognition", "Industry excellence"]
            },
            {
              id: "metric-4",              value: "24/7",              title: "Online Ordering",              items: ["Quick service", "Convenient delivery"]
            }
          ]}
          containerClassName="px-4 py-16 lg:py-24"
          titleClassName="text-3xl lg:text-5xl"
          descriptionClassName="text-base lg:text-lg"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Featured In & Trusted By"
          description="BrewHaven has earned recognition from leading coffee publications and media outlets."
          textboxLayout="default"
          useInvertedBackground={true}
          tag="Recognition"
          tagIcon={Shield}
          tagAnimation="slide-up"
          names={[
            "Coffee Enthusiast Magazine",            "Local Food Guide",            "Community Business Awards",            "Premium Coffee Association",            "Specialty Beverage Review",            "Local Excellence Network",            "Artisan Coffee Collective"
          ]}
          speed={35}
          showCard={true}
          containerClassName="px-4 py-16 lg:py-24"
          titleClassName="text-3xl lg:text-5xl"
          descriptionClassName="text-base lg:text-lg"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Customer Love"
          description="Hear what our regular customers have to say about their BrewHaven experience."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          showRating={true}
          animationType="slide-up"
          testimonials={[
            {
              id: "testimonial-1",              name: "Sarah Johnson",              handle: "@sarahjcoffee",              testimonial: "Best coffee I've had in the city. The baristas are incredibly knowledgeable and always make my drink exactly how I like it. A true gem!",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=36w5dw",              imageAlt: "Sarah Johnson"
            },
            {
              id: "testimonial-2",              name: "Michael Chen",              handle: "@mikelovescoffee",              testimonial: "BrewHaven has become my morning ritual. Quality beans, friendly service, and the perfect ambiance to start my day.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0cjsga",              imageAlt: "Michael Chen"
            },
            {
              id: "testimonial-3",              name: "Emma Rodriguez",              handle: "@emmasfood",              testimonial: "The cold brew is exceptional! I've tried many cafes around town, but BrewHaven consistently delivers the best specialty drinks.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=icd16r",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "testimonial-4",              name: "James Williams",              handle: "@jamesfoodie",              testimonial: "From the moment you walk in, you feel the passion for coffee. Every detail matters here, and it shows in their craft.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aqzb0q",              imageAlt: "James Williams"
            },
            {
              id: "testimonial-5",              name: "Lisa Park",              handle: "@lisacafehunter",              testimonial: "Brought my friends here last week and they're now regular customers too. That's the BrewHaven effect!",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uefwzs",              imageAlt: "Lisa Park"
            },
            {
              id: "testimonial-6",              name: "David Martinez",              handle: "@davidlovescoffee",              testimonial: "Exceptional quality, fair prices, and a community atmosphere. BrewHaven has set the standard for coffee shops.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mng87j",              imageAlt: "David Martinez"
            }
          ]}
          containerClassName="px-4 py-16 lg:py-24"
          titleClassName="text-3xl lg:text-5xl"
          descriptionClassName="text-base lg:text-lg"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our menu, location, and services."
          textboxLayout="default"
          useInvertedBackground={true}
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          mediaPosition="right"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d3jl72"
          imageAlt="Premium coffee beans"
          faqs={[
            {
              id: "faq-1",              title: "What are your hours of operation?",              content: "We're open Monday-Friday from 6 AM to 8 PM, Saturday 8 AM to 9 PM, and Sunday 9 AM to 7 PM. Holidays may vary."
            },
            {
              id: "faq-2",              title: "Do you offer online ordering?",              content: "Yes! You can order online through our website or mobile app for pickup or delivery. Online orders receive 10% off."
            },
            {
              id: "faq-3",              title: "Are your coffee beans ethically sourced?",              content: "Absolutely. We partner with fair-trade certified suppliers and support sustainable farming practices worldwide."
            },
            {
              id: "faq-4",              title: "Do you accommodate dietary restrictions?",              content: "We offer almond, oat, soy, and coconut milk alternatives. All pastries are clearly labeled with allergen information."
            },
            {
              id: "faq-5",              title: "Can I reserve a table for a group?",              content: "Yes! We accept group reservations for 6 or more people. Please call or book online at least 48 hours in advance."
            }
          ]}
          containerClassName="px-4 py-16 lg:py-24"
          titleClassName="text-3xl lg:text-5xl"
          descriptionClassName="text-base lg:text-lg"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get In Touch"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Ready to Experience BrewHaven?"
          description="Join our community of coffee lovers. Visit us today or order online for delivery to your door."
          buttons={[
            { text: "Order Online", href: "#order" },
            { text: "Visit Us", href: "#location" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
          containerClassName="px-4 py-16 lg:py-24"
          titleClassName="text-3xl lg:text-5xl"
          descriptionClassName="text-base lg:text-lg"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="BrewHaven"
          copyrightText="© 2024 BrewHaven Coffee. All rights reserved."
          columns={[
            {
              title: "Quick Links",              items: [
                { label: "Menu", href: "#menu" },
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "Careers", href: "#careers" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Email: hello@brewhaven.coffee", href: "mailto:hello@brewhaven.coffee" },
                { label: "Phone: (555) 123-4567", href: "tel:5551234567" },
                { label: "123 Coffee Lane, City, ST 12345", href: "#" }
              ]
            },
            {
              title: "Follow Us",              items: [
                { label: "Instagram", href: "https://instagram.com/brewhaven" },
                { label: "Facebook", href: "https://facebook.com/brewhaven" },
                { label: "Twitter", href: "https://twitter.com/brewhaven" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Cookie Policy", href: "#cookies" }
              ]
            }
          ]}
          containerClassName="px-4 py-12 lg:py-16"
          columnsClassName="grid grid-cols-1 md:grid-cols-4 gap-8"
        />
      </div>
    </ThemeProvider>
  );
}
