"use client";

import React from 'react';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Facebook, Heart, Instagram, Pinterest, Sparkles, Star } from "lucide-react";

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterCard from '@/components/sections/footer/FooterCard';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="large"
      background="grid"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Hero", id: "hero-section" },
            { name: "About", id: "about-section" },
            { name: "Feature", id: "features-section" },
            { name: "Product", id: "products-section" },
            { name: "Testimonial", id: "testimonials-section" },
            { name: "Contact", id: "contact-section" },
          ]}
          brandName="Klark"
          bottomLeftText="Global Community"
          bottomRightText="hello@example.com"
          topBarClassName=""
        />
      </div>

      <div id="hero-section" data-section="hero-section">
        <HeroBillboardRotatedCarousel
          title="Elevate Your Occasion with Nature's Artistry"
          description="Premium floral arrangements crafted with passion and precision, transforming every moment into a blooming memory."
          background={{ variant: 'radial-gradient' }}
          tag="Artisanal Floral Design"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Explore Collections", href: "#products-section" },
            { text: "View Our Process", href: "#about-section" },
          ]}
          buttonAnimation="slide-up"
          carouselItems={[
            { id: "carousel-item-1", imageSrc: "https://img.b2bpic.net/free-photo/little-bouquet-peonies-stands-tall-vase-with-water_8353-762.jpg", imageAlt: "Elegant red rose arrangement" },
            { id: "carousel-item-2", imageSrc: "https://img.b2bpic.net/free-photo/spring-composition-with-bouquet-flowers-vase-closeup_169016-29760.jpg?_wi=1", imageAlt: "Soft pastel floral centerpiece" },
            { id: "carousel-item-3", imageSrc: "https://img.b2bpic.net/free-photo/view-delicate-white-roses-bouquet-vase_23-2150539964.jpg", imageAlt: "Vintage-style floral decor" },
            { id: "carousel-item-4", imageSrc: "https://img.b2bpic.net/free-photo/plant-nature-fresh-vase-color_1203-5016.jpg", imageAlt: "Modern minimalist bouquet" },
            { id: "carousel-item-5", imageSrc: "https://img.b2bpic.net/free-photo/view-flowers-transparent-glass-with-water-drops_23-2149478596.jpg", imageAlt: "Luxurious wedding floral setup" },
            { id: "carousel-item-6", imageSrc: "https://img.b2bpic.net/free-photo/blossom-flowers-vase_23-2148480734.jpg", imageAlt: "Seasonal mixed flower arrangement" },
          ]}
          autoPlay={true}
          autoPlayInterval={5000}
          ariaLabel="Hero section showcasing premium floral arrangements"
        />
      </div>

      <div id="about-section" data-section="about-section">
        <TextAbout
          tag="OUR STORY"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          title="Crafting Timeless Beauty Since 2010"
          buttons={[
            { text: "Explore Our Collections", href: "#products-section" },
            { text: "Meet Our Artisans", href: "#testimonials-section" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="features-section" data-section="features-section">
        <FeatureCardSeven
          title="Crafted with Nature's Essence"
          description="Each arrangement is thoughtfully designed to celebrate the natural beauty of flowers, blending timeless elegance with contemporary artistry."
          tag="Premium Arrangements"
          tagIcon={Sparkles}
          textboxLayout="split-description"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            { id: 1, title: "Handcrafted Bouquets", description: "Every bouquet is meticulously assembled by our master florists using the finest seasonal blooms.", imageSrc: "https://img.b2bpic.net/free-photo/bridal-bouquet-lies-wooden-surface_8353-9652.jpg", imageAlt: "Artisanal floral arrangement" },
            { id: 2, title: "Event Styling", description: "Transform any occasion into a memorable experience with our bespoke event floral designs.", imageSrc: "https://img.b2bpic.net/free-photo/luxury-wedding-catering-banquet-outdoor_624325-1790.jpg", imageAlt: "Floral decor for wedding ceremony" },
            { id: 3, title: "Custom Designs", description: "Personalize your floral selections to match your unique style and preferences.", imageSrc: "https://img.b2bpic.net/free-photo/crop-florist-making-notes-phone-conversation_23-2147760940.jpg", imageAlt: "Custom floral composition" },
          ]}
        />
      </div>

      <div id="products-section" data-section="products-section">
        <ProductCardFour
          products={[
            { id: "product-1", name: "Elegant Rose Bouquet", price: "$89.99", variant: "Premium", imageSrc: "https://img.b2bpic.net/free-photo/festive-background-valentine-s-day-with-bouquet-red-roses-copy-space_169016-26129.jpg", imageAlt: "A stunning bouquet of red roses with greenery" },
            { id: "product-2", name: "Spring Garden Arrangement", price: "$75.50", variant: "Seasonal", imageSrc: "https://img.b2bpic.net/free-photo/spring-composition-with-bouquet-flowers-vase-closeup_169016-29760.jpg?_wi=2", imageAlt: "A vibrant mix of spring flowers including tulips and daffodils" },
            { id: "product-3", name: "Romantic Peony Centerpiece", price: "$120.00", variant: "Luxury", imageSrc: "https://img.b2bpic.net/free-photo/home-composition-with-bouquet-tulips-glass-vase-candles_169016-20724.jpg", imageAlt: "A luxurious peony centerpiece with soft pink petals" },
            { id: "product-4", name: "Minimalist Lily Design", price: "$65.00", variant: "Classic", imageSrc: "https://img.b2bpic.net/free-photo/top-view-beautiful-bouquet-colorful-flowers-with-leaves-wood_141793-17060.jpg", imageAlt: "A clean and elegant lily arrangement with white tones" },
          ]}
          carouselMode="buttons"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          title="Exquisite Floral Creations"
          description="Discover our curated collection of handcrafted floral arrangements designed to elevate any occasion. Each piece is meticulously composed using the finest seasonal blooms."
          tag="Best Sellers"
          tagIcon={Star}
          tagAnimation="slide-up"
          buttons={[{ text: "View All Arrangements", href: "#products-section" }]}
          buttonAnimation="opacity"
          textboxLayout="inline-image"
          useInvertedBackground={false}
          ariaLabel="Featured floral arrangements showcase"
          gridClassName="gap-6"
          textBoxClassName="text-center"
          cardNameClassName="font-serif text-xl font-semibold"
          cardPriceClassName="text-red-600 font-medium"
          cardVariantClassName="text-gray-500 text-sm"
        />
      </div>

      <div id="testimonials-section" data-section="testimonials-section">
        <TestimonialCardFifteen
          testimonial="The floral arrangements from Klark transformed our wedding day into pure magic. Every detail was thoughtfully curated to match our vision perfectly."
          rating={5}
          author="Sarah & Michael Johnson"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/women-making-preparations-wedding_23-2149184414.jpg", alt: "Sarah Johnson" },
            { src: "https://img.b2bpic.net/free-photo/guy-black-suit-male-restaurant_1157-46268.jpg", alt: "Michael Johnson" },
          ]}
          ratingAnimation="opacity"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="Customer testimonials for Klark floral studio"
        />
      </div>

      <div id="contact-section" data-section="contact-section">
        <ContactFaq
          faqs={[
            { id: "faq-1", title: "How do I place an order for custom floral arrangements?", content: "Simply browse our collection, select your preferred arrangements, and customize them according to your event needs. Our team will work closely with you to ensure every detail aligns with your vision." },
            { id: "faq-2", title: "What is your delivery policy?", content: "We offer nationwide delivery services with flexible scheduling options. Our delivery team ensures your arrangements arrive fresh and beautifully packaged, ready to impress." },
            { id: "faq-3", title: "Can I request a specific flower type or color scheme?", content: "Absolutely! We specialize in custom arrangements. Just let us know your preferences, and we'll source the finest blooms to match your unique style and occasion." },
            { id: "faq-4", title: "Do you provide arrangements for corporate events?", content: "Yes, we design stunning floral installations tailored for corporate settings. From boardroom decorations to grand openings, our arrangements elevate any professional environment." },
          ]}
          ctaTitle="Ready to Bring Elegance to Your Event?"
          ctaDescription="Let us craft the perfect floral experience for your special moments."
          ctaButton={{ text: "Book a Consultation", href: "#about-section" }}
          ctaIcon={Heart}
          useInvertedBackground={false}
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
          ariaLabel="Contact and FAQ section"
          className="py-16"
          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
          ctaPanelClassName="bg-gradient-to-r from-gray-50 to-red-50 rounded-2xl p-8 shadow-lg mb-12"
          ctaIconClassName="text-red-500 w-12 h-12 mb-4"
          ctaTitleClassName="text-3xl font-bold text-gray-900 mb-4"
          ctaDescriptionClassName="text-lg text-gray-700 mb-6"
          ctaButtonClassName="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-600 hover:bg-red-700 transition-colors duration-300"
          faqsPanelClassName="bg-white rounded-xl shadow-md overflow-hidden"
          faqsContainerClassName="divide-y divide-gray-200"
          accordionClassName="transition-all duration-300"
          accordionTitleClassName="text-lg font-semibold text-gray-900 flex justify-between items-center w-full py-4 px-6"
          accordionIconContainerClassName="flex-shrink-0 ml-4"
          accordionIconClassName="w-5 h-5 text-red-500 transition-transform duration-300"
          accordionContentClassName="px-6 pb-4 text-gray-600"
          separatorClassName="border-t border-gray-200 my-4"
        />
      </div>

      <div id="footer-section" data-section="footer-section">
        <FooterCard
          logoText="Klark Floral Studio"
          copyrightText="© 2025 | Klark Floral Studio"
          socialLinks={[
            { icon: Instagram, href: "https://www.instagram.com/klarkfloralstudio", ariaLabel: "Follow us on Instagram" },
            { icon: Pinterest, href: "https://www.pinterest.com/klarkfloralstudio", ariaLabel: "Follow us on Pinterest" },
            { icon: Facebook, href: "https://www.facebook.com/klarkfloralstudio", ariaLabel: "Like us on Facebook" },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
