"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import AboutMetric from '@/components/sections/about/AboutMetric';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Flower2, Heart, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant={"text-shift"}
      defaultTextAnimation={"background-highlight"}
      borderRadius={"pill"}
      contentWidth={"mediumLarge"}
      sizing={"mediumLargeSizeLargeTitles"}
      background={"aurora"}
      cardStyle={"gradient-radial"}
      primaryButtonStyle={"gradient"}
      secondaryButtonStyle={"layered"}
      headingFontWeight={"semibold"}
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "#home" },
            { name: "Products", id: "#products" },
            { name: "About", id: "#about" },
            { name: "Testimonials", id: "#testimonials" },
            { name: "FAQs", id: "#faq" }
          ]}
          button={{ text: "Order Now", href: "#contact" }}
          brandName="NikoFlow"
        />
      </div>

      {/* Hero Section */}
      <div id="home" data-section="home">
        <HeroBillboardRotatedCarousel
          title="NikoFlow: Artistry in Every Bloom"
          description="Discover exquisitely crafted floral arrangements that bring beauty and joy to every occasion. Hand-picked, thoughtfully designed, and delivered with care."
          background={{ variant: "aurora" }}
          buttons={[
            { text: "Shop Collections", href: "#products" },
            { text: "Custom Order", href: "#contact" }
          ]}
          carouselItems={[
            { id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1pnjo0", imageAlt: "Elegant flower arrangement" },
            { id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1t7zut", imageAlt: "Vibrant flower bouquet" },
            { id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5g1qcd", imageAlt: "Delicate pastel floral arrangement" },
            { id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=al64gw", imageAlt: "Bright summer flower composition" },
            { id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6yflux", imageAlt: "Exotic flower arrangement" },
            { id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kru9sy", imageAlt: "Minimalist single rose" }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
          ariaLabel="Hero section with flower carousel"
          tag="Freshly Picked"
          tagIcon={Flower2}
        />
      </div>

      {/* About Section */}
      <div id="about" data-section="about">
        <AboutMetric
          title="Why Choose NikoFlow? Passionate Floristry, Unforgettable Moments."
          metrics={[
            { icon: Flower2, label: "Years in Bloom", value: "15+" },
            { icon: Heart, label: "Happy Customers", value: "5K+" },
            { icon: Sparkles, label: "Unique Designs", value: "Custom" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={true}
          ariaLabel="About NikoFlow studio with key highlights"
        />
      </div>

      {/* Product Section */}
      <div id="products" data-section="products">
        <ProductCardThree
          title="Our Signature Arrangements"
          description="Explore our curated collection of bouquets and floral designs perfect for any occasion, from romantic gestures to grand celebrations."
          products={[
            { id: "bouquet-roses", name: "Classic Red Rose Bouquet", price: "$75.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yzbc5v", imageAlt: "Classic Red Rose Bouquet" },
            { id: "bouquet-mixed", name: "Vibrant Mixed Seasonal Bouquet", price: "$60.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tcnstc", imageAlt: "Vibrant Mixed Seasonal Bouquet" },
            { id: "arrangement-lilies", name: "Elegant White Lily Arrangement", price: "$85.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=poheaa", imageAlt: "Elegant White Lily Arrangement" },
            { id: "boutonniere-wedding", name: "Wedding Boutonniere", price: "$25.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pm5ofd", imageAlt: "Wedding Boutonniere" }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Our Signature Flower Arrangements"
        />
      </div>

      {/* Testimonial Section */}
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Clients Say"
          description="Hear from our happy customers who experienced the NikoFlow difference."
          testimonials={[
            { id: "1", name: "Sophia R.", role: "Event Planner", company: "Elegant Occasions", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=76mivp" },
            { id: "2", name: "Liam P.", role: "Customer", company: "Private Client", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gy8x0i" },
            { id: "3", name: "Olivia T.", role: "Marketing Manager", company: "Bloom Co.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rw80m0" },
            { id: "4", name: "Ethan K.", role: "Groom", company: "Wedding Client", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j2mt47" }
          ]}
          kpiItems={[
            { value: "100%", label: "Client Satisfaction" },
            { value: "500+", label: "Events Transformed" },
            { value: "15+", label: "Years of Passion" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          ariaLabel="Customer testimonials and studio achievements"
        />
      </div>

      {/* FAQ Section */}
      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find quick answers to common questions about our services, ordering, and delivery."
          faqs={[
            { id: "1", title: "What areas do you deliver to?", content: "We offer delivery across the city and surrounding suburbs. Please check our delivery zone map or contact us for specific locations." },
            { id: "2", title: "Can I request a custom floral arrangement?", content: "Absolutely! We specialize in custom designs. Please fill out our contact form or give us a call to discuss your vision." },
            { id: "3", title: "How far in advance should I place my order?", content: "For standard bouquets, 24-48 hours is ideal. For special events or large custom orders, we recommend booking at least 2-4 weeks in advance." },
            { id: "4", title: "What is your return policy?", content: "Due to the perishable nature of flowers, we cannot accept returns. However, if you are not satisfied with your order, please contact us within 24 hours of delivery, and we will do our best to resolve the issue." },
            { id: "5", title: "Do you offer flower subscriptions?", content: "Yes, we do! Enjoy fresh flowers delivered to your door weekly, bi-weekly, or monthly. Visit our 'Subscriptions' section for more details." }
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Frequently Asked Questions section"
        />
      </div>

      {/* Contact Section */}
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Create Something Beautiful"
          description="Whether it's a special gift, an event, or a custom floral vision, we're here to bring your ideas to life."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number (Optional)" }
          ]}
          textarea={{ name: "message", placeholder: "Tell us about your floral needs or event details...", rows: 5, required: true }}
          buttonText="Send Message"
          useInvertedBackground={true}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xor11q"
          mediaAnimation="opacity"
          mediaPosition="right"
          ariaLabel="Contact us form for custom orders and inquiries"
        />
      </div>

      {/* Footer Section */}
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={[
            { items: [{ label: "Home", href: "#home" }, { label: "Shop", href: "#products" }, { label: "About Us", href: "#about" }] },
            { items: [{ label: "FAQs", href: "#faq" }, { label: "Contact", href: "#contact" }, { label: "Custom Orders", href: "#contact" }] },
            { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
          ]}
          logoText="NikoFlow"
          ariaLabel="Site footer with navigation links and studio name"
        />
      </div>
    </ThemeProvider>
  );
}
