"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterMedia from "@/components/sections/footer/FooterMedia";

export default function MagnoliaPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Magnolia"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "footer" }
          ]}
          bottomLeftText="Premium Flowers"
          bottomRightText="hello@magnolia-flowers.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Welcome to Magnolia"
          description="Discover the finest selection of premium flowers, expertly arranged and delivered with care. Celebrate every moment with nature's beauty."
          tag="Premium Florals"
          imageSrc="https://img.b2bpic.net/free-photo/bouquet-pink-roses-with-green-leaves-inside-vase_114579-1439.jpg"
          imageAlt="Beautiful floral arrangement"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={false}
          buttons={[
            { text: "Shop Now", href: "#products" },
            { text: "Learn More", href: "#about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Story"
          title="Bringing Nature's Beauty to Your Moments"
          description="At Magnolia, we believe every flower tells a story. With over 15 years of expertise in floristry, we've perfected the art of creating stunning arrangements that capture emotions and celebrate life's special occasions. From wedding bouquets to corporate events, each arrangement is crafted with passion and precision."
          metrics={[
            { value: "15+", title: "Years of Excellence" },
            { value: "5000+", title: "Happy Customers" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/bouquet-pink-roses-with-green-leaves-inside-vase_114579-1439.jpg"
          imageAlt="Magnolia florist at work"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Featured Collections"
          description="Explore our handpicked selection of premium flower arrangements, each designed to bring elegance and joy to your celebrations."
          products={[
            {
              id: "1",              name: "Red Rose Luxury",              price: "$89.99",              imageSrc: "https://img.b2bpic.net/free-photo/floral-decor-woman-holding-bouquet-anthurium_140725-10842.jpg",              imageAlt: "Red rose luxury bouquet"
            },
            {
              id: "2",              name: "Spring Tulip Mix",              price: "$74.99",              imageSrc: "https://img.b2bpic.net/free-photo/romantic-bouquet-fresh-flowers-wedding-celebration-generated-by-ai_188544-45526.jpg",              imageAlt: "Spring tulip arrangement"
            },
            {
              id: "3",              name: "Sunflower Radiance",              price: "$64.99",              imageSrc: "https://img.b2bpic.net/free-photo/valentines-day-womens-mothers-day-red-rose-gift-surprise-dark_114579-445.jpg",              imageAlt: "Bright sunflower bouquet"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Why Choose Magnolia"
          description="We deliver excellence in every arrangement"
          metrics={[
            { id: "1", value: "24h", description: "Same-Day Delivery Available" },
            { id: "2", value: "100%", description: "Satisfaction Guaranteed" },
            { id: "3", value: "Fresh", description: "Premium Quality Flowers" },
            { id: "4", value: "Expert", description: "Professional Florists" }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Customer Love"
          description="See what our happy customers have to say about their Magnolia experience"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Bride",              company: "Wedding Client",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-woman-work_23-2149622870.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "Jessica Chen",              role: "Event Planner",              company: "Celebration Events",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-work-with-copy-space_23-2148826459.jpg",              imageAlt: "Jessica Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Corporate Manager",              company: "Tech Innovations",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-attractive-businesswoman_93675-133773.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "Michael Thompson",              role: "Anniversary Celebrant",              company: "Private Client",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-professional-businesswoman-looking-upper-left-corner-with-hopeful-face-expression-standing-white_176420-41313.jpg",              imageAlt: "Michael Thompson"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about our services"
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How far in advance should I order?",              content: "We recommend ordering at least 24-48 hours in advance for custom arrangements. However, we offer same-day delivery for select arrangements when ordered before 2 PM."
            },
            {
              id: "2",              title: "Do you offer same-day delivery?",              content: "Yes! Same-day delivery is available for orders placed before 2 PM in your area. Additional delivery fees may apply for same-day orders."
            },
            {
              id: "3",              title: "What is your return policy?",              content: "We guarantee 100% satisfaction. If you're not happy with your arrangement, contact us within 24 hours and we'll arrange a replacement or refund."
            },
            {
              id: "4",              title: "Can I customize my arrangement?",              content: "Absolutely! We love creating custom arrangements tailored to your preferences. Contact our team at hello@magnolia-flowers.com or call us to discuss your vision."
            },
            {
              id: "5",              title: "What areas do you deliver to?",              content: "We deliver throughout the metro area and surrounding suburbs. Check our delivery map on our website or contact us to confirm delivery to your location."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/hand-painted-exotic-floral-pattern_79603-1210.jpg"
          imageAlt="Beautiful floral background"
          logoText="Magnolia Flowers"
          copyrightText="© 2025 Magnolia Flowers. All rights reserved."
          columns={[
            {
              title: "Shop",              items: [
                { label: "Featured Collections", href: "#products" },
                { label: "Custom Arrangements", href: "#contact" },
                { label: "Seasonal Specials", href: "#products" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Story", href: "#about" },
                { label: "Careers", href: "#contact" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Contact Us", href: "#contact" },
                { label: "Delivery Info", href: "#contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}