"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Flame, HeartCrack } from "lucide-react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="blurBottom"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Pepper Peak"
          navItems={[
            { name: "About", id: "about" },
            { name: "Flavors", id: "flavors" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Pepper Peak"
          description="Crafted with passion, bottled with fire. Experience the peak of flavor with our gourmet hot sauces."
          buttons={[
            { text: "Explore Flavors", href: "#flavors" },
            { text: "Shop Now", href: "/shop" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/chili-sauce-peppers-dark-wooden-surface_1150-42161.jpg?_wi=1"
          imageAlt="Gourmet hot sauce bottle with chili peppers, minimalist style"
          mediaAnimation="blur-reveal"
          frameStyle="card"
          ariaLabel="Hero section with Pepper Peak logo and hot sauce bottle"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="The Art of Flavor"
          description="At Pepper Peak, we believe in the perfect blend of heat and taste. Our sauces are meticulously crafted from the finest, hand-picked chili peppers and natural ingredients, delivering an unforgettable culinary experience that elevates every dish."
          tag="Our Story"
          buttons={[{ text: "Learn More", href: "#story" }]}
          imageSrc="https://img.b2bpic.net/free-photo/side-close-up-view-vegetables-bowl-lentil-herbs-vegetables-spices-citrus-fruits-with-leaves_140725-73599.jpg"
          imageAlt="Fresh chili peppers and spices on a rustic table"
          useInvertedBackground={false}
          ariaLabel="About our hot sauce company"
        />
      </div>

      <div id="flavors" data-section="flavors">
        <ProductCardOne
          products={[
            { id: "mild-sauce", name: "Smokey Chipotle", price: "$12.99", imageSrc: "https://img.b2bpic.net/free-photo/pair-lime-herbal-soup_140725-4371.jpg", imageAlt: "Mild chipotle hot sauce bottle" },
            { id: "medium-sauce", name: "Fiery Habanero", price: "$13.99", imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=1", imageAlt: "Medium habanero hot sauce bottle" },
            { id: "hot-sauce", name: "Ghost Pepper Blast", price: "$14.99", imageSrc: "https://img.b2bpic.net/free-photo/chili-sauce-bottle-peppers-dark-wooden-surface_1150-42209.jpg?_wi=1", imageAlt: "Hot ghost pepper sauce bottle" },
            { id: "extra-hot-sauce", name: "Carolina Reaper Fury", price: "$15.99", imageSrc: "https://img.b2bpic.net/free-photo/chili-sauce-bottle-peppers-dark-wooden-surface_1150-42209.jpg?_wi=2", imageAlt: "Extra hot carolina reaper sauce bottle" }
          ]}
          title="Discover Our Fiery Flavors"
          description="From a subtle kick to an intense inferno, find your perfect heat level."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="four-items-2x2-equal-grid"
          ariaLabel="Our hot sauce product range"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          testimonials={[
            { id: "1", name: "Chef Emily R.", handle: "@GourmetGrill", testimonial: "Pepper Peak sauces have revolutionized my kitchen. The depth of flavor is unmatched, and the heat is always just right! A true game-changer.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-waiter-carrying-tray-salad-restaurant_1170-2078.jpg?_wi=1", imageAlt: "Chef Emily R. avatar" },
            { id: "2", name: "Mark T.", handle: "@SpicyEats", testimonial: "I've tried countless hot sauces, but Pepper Peak stands out. The Fiery Habanero is my absolute favorite, perfect for everything!", imageSrc: "https://img.b2bpic.net/free-photo/dreams-young-woman-sitting-kitchen-looking-thoughtful_259150-57957.jpg?_wi=1", imageAlt: "Mark T. avatar" },
            { id: "3", name: "Sarah L.", handle: "@FoodieAdventures", testimonial: "Incredible quality and fantastic taste. Every bottle is a journey for your taste buds. Highly recommend the Smokey Chipotle!", imageSrc: "https://img.b2bpic.net/free-photo/portrait-waitress-standing-counter_1170-668.jpg", imageAlt: "Sarah L. avatar" },
            { id: "4", name: "David K.", handle: "@HeatSeeker", testimonial: "As a heat-seeker, I can confidently say the Carolina Reaper Fury delivers. It's intensely hot but still packed with amazing flavor.", imageSrc: "https://img.b2bpic.net/free-photo/expressive-young-lady-posing-studio_176474-80630.jpg", imageAlt: "David K. avatar" },
            { id: "5", name: "Lisa M.", handle: "@FlavorFanatic", testimonial: "The variety is impressive, and each sauce tells its own story. Pepper Peak has earned a permanent spot in my pantry.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-waiter-carrying-tray-salad-restaurant_1170-2078.jpg?_wi=2", imageAlt: "Lisa M. avatar" },
            { id: "6", name: "James P.", handle: "@TasteBudTrek", testimonial: "From marinades to tacos, these sauces elevate every meal. Pure, delicious heat!", imageSrc: "https://img.b2bpic.net/free-photo/dreams-young-woman-sitting-kitchen-looking-thoughtful_259150-57957.jpg?_wi=2", imageAlt: "James P. avatar" }
          ]}
          animationType="slide-up"
          title="What Our Fans Are Saying"
          description="Hear from food enthusiasts and chefs who've elevated their dishes with Pepper Peak hot sauce."
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          ariaLabel="Customer testimonials"
        />
      </div>

      <div id="cta-feature" data-section="cta-feature">
        <FeatureCardTwentyFive
          features={[
            {
              title: "Crafted with Care",              description: "Each bottle of Pepper Peak hot sauce is a testament to quality, made with meticulously sourced ingredients and traditional methods for unparalleled flavor.",              icon: HeartCrack,
              mediaItems: [
                { imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=2", imageAlt: "Artisan hot sauce bottling process" },
                { imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=3", imageAlt: "Selection of fresh chili peppers" }
              ]
            },
            {
              title: "Unleash Your Inner Chef",              description: "Elevate your culinary creations. Our diverse range of sauces inspires experimentation, turning everyday meals into gourmet experiences.",              icon: Flame,
              mediaItems: [
                { imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=4", imageAlt: "Dish seasoned with hot sauce" },
                { imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=5", imageAlt: "Gourmet food pairing with hot sauce" }
              ]
            }
          ]}
          animationType="depth-3d"
          title="Spice Up Your Life"
          description="Discover the passion and quality in every drop of Pepper Peak."
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Call to action features for hot sauce"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          faqs={[
            { id: "1", title: "What makes Pepper Peak sauces unique?", content: "Our sauces are unique due to our commitment to using only the freshest, high-quality chili peppers and natural ingredients. We prioritize complex flavor profiles over just heat." },
            { id: "2", title: "Are your hot sauces all-natural?", content: "Yes, all Pepper Peak hot sauces are made with 100% natural ingredients, with no artificial flavors, colors, or preservatives." },
            { id: "3", title: "Do you offer international shipping?", content: "Currently, we ship within the United States and Canada. We are working on expanding our international shipping options soon!" },
            { id: "4", title: "What's the best way to store hot sauce?", content: "For optimal freshness and flavor, store your hot sauce in a cool, dark place. Refrigeration after opening is recommended." }
          ]}
          sideTitle="Burning Questions? We've Got Answers."
          sideDescription="Find answers to the most common questions about our products and company."
          faqsAnimation="slide-up"
          textPosition="left"
          useInvertedBackground={false}
          animationType="smooth"
          showCard={true}
          ariaLabel="Frequently asked questions about hot sauce"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch With Pepper Peak"
          description="Have a question, comment, or just want to share your favorite spicy recipe? We'd love to hear from you."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/selective-focus-pasta-cereals-glass-jars_482257-82853.jpg"
          imageAlt="Hot sauce bottles on a shelf"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Send Message"
          ariaLabel="Contact form"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/chili-sauce-peppers-dark-wooden-surface_1150-42161.jpg?_wi=2"
          imageAlt="Hot sauce bottles background"
          columns={[
            { title: "Shop", items: [{ label: "Hot Sauces", href: "#flavors" }, { label: "Bundles", href: "/bundles" }, { label: "Merchandise", href: "/merch" }] },
            { title: "Company", items: [{ label: "Our Story", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact Us", href: "#contact" }] },
            { title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] }
          ]}
          logoText="Pepper Peak"
          copyrightText="© 2024 Pepper Peak. All rights reserved."
          ariaLabel="Site footer with navigation and hot sauce imagery"
        />
      </div>
    </ThemeProvider>
  );
}
