"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function SitePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "About", id: "/#about" },
    { name: "Shop", id: "/shop" },
    { name: "Blog", id: "/blog" },
    { name: "Testimonials", id: "/#testimonials" },
    { name: "Contact", id: "/#contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <main>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            brandName="Olla"
            navItems={navItems}
          />
        </div>
        <div id="hero" data-section="hero">
          <HeroOverlay
            title="Olla Flowers Studio"
            description="Crafting exquisite floral arrangements for every occasion. Discover the beauty of nature, artfully designed."
            tag="Welcome to Olla"
            buttons={[
              { text: "Shop Now", href: "/shop" },
              { text: "Learn More", href: "/#about" },
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/woman-holds-festive-flower-arrangement-with-bright-chrysanthemum-flowers_169016-51483.jpg"
            imageAlt="Elegant floral arrangement for Olla Flowers Studio"
            textPosition="bottom-left"
            showDimOverlay={false}
            showBlur={true}
            ariaLabel="Hero section with beautiful flowers"
          />
        </div>
        <div id="about" data-section="about">
          <MediaAbout
            title="About Olla Flowers Studio"
            description="At Olla, we believe in the power of flowers to convey emotion, celebrate moments, and bring joy. Our passion lies in creating unique, breathtaking arrangements that tell your story. With fresh, high-quality blooms and an artistic touch, we transform simple flowers into unforgettable gifts."
            tag="Our Story"
            buttons={[{ text: "Our Vision", href: "/about" }]}
            imageSrc="http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-flower-shop_23-2149247584.jpg"
            imageAlt="Florist arranging a beautiful bouquet"
            useInvertedBackground={false}
            ariaLabel="About Olla Flowers Studio"
          />
        </div>
        <div id="shop" data-section="shop">
          <ProductCardOne
            title="Our Exquisite Collections"
            description="Explore our curated selection of fresh flowers, bouquets, and plants, perfect for any special moment or just because."
            tag="Shop Flowers"
            products={[
              { id: "1", name: "Classic Red Rose Bouquet", price: "$85.00", imageSrc: "http://img.b2bpic.net/free-photo/valentines-day-womens-mothers-day-red-rose-with-ribbon-heart-gift-surprise_114579-449.jpg", imageAlt: "Classic Red Rose Bouquet" },
              { id: "2", name: "Elegant White Lilies", price: "$65.00", imageSrc: "http://img.b2bpic.net/free-photo/bouquet-beautiful-fresh-white-blooms-vase_23-2148069253.jpg", imageAlt: "Elegant White Lilies" },
              { id: "3", name: "Vibrant Mixed Arrangement", price: "$95.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-bouquet-yellow-orange-dahliason-light-background_169016-39443.jpg", imageAlt: "Vibrant Mixed Arrangement" },
              { id: "4", name: "Stylish Succulent Garden", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/cozy-hobby-growing-house-indoor-plants-cactus_185193-108552.jpg", imageAlt: "Stylish Succulent Garden" },
            ]}
            carouselMode="buttons"
            gridVariant="four-items-2x2-equal-grid"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            ariaLabel="Product showcase of Olla's floral collections"
          />
        </div>
        <div id="testimonials" data-section="testimonials">
          <TestimonialCardOne
            title="What Our Customers Say"
            description="Hear from those who've experienced the Olla difference. Your satisfaction is our greatest bloom."
            testimonials={[
              { id: "1", name: "Maria S.", role: "Event Planner", company: "Blissful Events", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-celebrating-day-with-flowers_1098-2776.jpg", imageAlt: "Maria S. from Blissful Events" },
              { id: "2", name: "David K.", role: "Happy Customer", company: "Personal Purchase", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-bald-caucasian-man-pink-hoodie-isolated-hold-bouquet-flowers-happy-smiling_343596-4849.jpg", imageAlt: "David K. from Personal Purchase" },
              { id: "3", name: "Sophia L.", role: "Wedding Client", company: "Sophia & Mark's Wedding", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-pretty-afro-american-woman-with-curly-hair-holds-bouquet-flowers-going-congratulate-best-friend-holiday-has-festive-happy-mood-wears-pink-jacket-isolated-blue-studio-wall_273609-47900.jpg", imageAlt: "Sophia L. from Sophia & Mark's Wedding" },
              { id: "4", name: "Ethan P.", role: "Business Owner", company: "Green Bistro", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/florist-with-tillandsia_1398-318.jpg", imageAlt: "Ethan P. from Green Bistro" },
            ]}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            ariaLabel="Customer testimonials for Olla Flowers"
          />
        </div>
        <div id="faq" data-section="faq">
          <FaqSplitText
            sideTitle="Frequently Asked Questions"
            sideDescription="Find answers to common questions about our services, ordering, and delivery."
            faqs={[
              { id: "1", title: "What areas do you deliver to?", content: "We offer local delivery within a 20-mile radius of our studio. Please contact us for special requests or further distances." },
              { id: "2", title: "Can I customize a bouquet?", content: "Absolutely! We love creating bespoke arrangements. Contact us to discuss your vision and we'll craft something unique for you." },
              { id: "3", title: "How do I care for my flowers?", content: "Each order comes with care instructions. Generally, keep them in fresh water, trim stems regularly, and avoid direct sunlight." },
              { id: "4", title: "Do you offer subscriptions?", content: "Yes, we have weekly, bi-weekly, and monthly flower subscriptions available to keep your home or office fresh with blooms." },
            ]}
            faqsAnimation="slide-up"
            textPosition="left"
            useInvertedBackground={false}
            animationType="smooth"
            showCard={true}
            ariaLabel="Frequently Asked Questions"
          />
        </div>
        <div id="contact" data-section="contact">
          <ContactCTA
            tag="Get in Touch"
            title="Ready for Your Perfect Floral Arrangement?"
            description="Whether for a grand event or a thoughtful gift, our team at Olla is here to bring your floral dreams to life. Contact us today."
            buttons={[
              { text: "Send Us a Message", href: "/contact" },
              { text: "Call Us", href: "tel:+1234567890" },
            ]}
            background={{ variant: "plain" }}
            useInvertedBackground={false}
            ariaLabel="Contact us for floral arrangements"
          />
        </div>
        <div id="footer" data-section="footer">
          <FooterBase
            columns={[
              { title: "Shop", items: [{ label: "Bouquets", href: "/shop#bouquets" }, { label: "Plants", href: "/shop#plants" }, { label: "Occasions", href: "/shop#occasions" }] },
              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Services", href: "/services" }, { label: "FAQ", href: "/faq" }] },
              { title: "Connect", items: [{ label: "Contact", href: "/contact" }, { label: "Instagram", href: "https://www.instagram.com/ollastudio" }] },
            ]}
            logoText="Olla"
            copyrightText="© 2024 Olla Flowers Studio. All rights reserved."
            ariaLabel="Site footer"
          />
        </div>
      </main>
    </ThemeProvider>
  );
}
