"use client";

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

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
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", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A47KqSdGj7sEG8mcGU4TIVm5ml/uploaded-1771850674704-2zcygfwe.mp4", 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">
        <MediaAbout
          tag="OUR STORY"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          title="Crafting Timeless Beauty Since 2010"
          description="Discover the artistry and dedication behind every piece. Our master craftsmen blend traditional techniques with modern innovation to create jewelry that tells your story."
          buttons={[
            { text: "Explore Our Collections", href: "#products-section", dataWebildId: "btn_explore_collections" },
            { text: "Meet Our Artisans", href: "#testimonials-section", dataWebildId: "btn_meet_artisans" },
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
          imageAlt="Klark luxury jewelry craftsmanship"
          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">
        <ContactSplitForm
          title="Get in Touch with Klark"
          description="Have questions about our floral arrangements or services? We'd love to hear from you. Fill out the form below and our team will respond promptly."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your Email",
              required: true
            },
            {
              name: "phone",
              type: "tel",
              placeholder: "Your Phone Number",
              required: false
            },
            {
              name: "subject",
              type: "text",
              placeholder: "Subject",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your event or inquiry...",
            rows: 5,
            required: true
          }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
          imageAlt="Klark Contact Section"
          mediaPosition="right"
          mediaAnimation="fade-in"
          buttonText="Send Message"
          ariaLabel="Contact form section"
          className="py-20"
          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
          contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
          formCardClassName="bg-white rounded-2xl p-8 shadow-lg"
          titleClassName="text-4xl font-bold text-gray-900 mb-4"
          descriptionClassName="text-lg text-gray-600 mb-8"
          buttonClassName="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors"
          mediaWrapperClassName="rounded-2xl overflow-hidden shadow-xl"
          mediaClassName="w-full h-full object-cover"
        />
      </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: Twitter, href: "https://twitter.com/klarkfloralstudio", ariaLabel: "Follow us on Twitter" },
            { icon: Facebook, href: "https://www.facebook.com/klarkfloralstudio", ariaLabel: "Like us on Facebook" },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
