"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Facebook, Hash } from 'lucide-react';

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="large"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Jasmin"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Services", id: "/services" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Book Now",            href: "/contact"
          }}
        />
      </div>

      <div id="portfolio-projects" data-section="portfolio-projects">
        <BlogCardOne
          title="Recent Projects"
          description="Explore our latest floral creations and design inspirations"
          blogs={[
            {
              id: "1",              category: "Wedding",              title: "Spring Garden Wedding Celebration",              excerpt: "A lush garden-inspired wedding featuring cascading roses and peonies in soft pastels",              imageSrc: "https://img.b2bpic.net/free-photo/blooming-flowers-table-garden_1304-4038.jpg",              imageAlt: "Wedding garden setup",              authorName: "Jasmin Studio",              authorAvatar: "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-flowers_23-2149247537.jpg",              date: "22 May 2024"
            },
            {
              id: "2",              category: "Events",              title: "Corporate Gala Centerpieces",              excerpt: "Elegant table arrangements elevating the ambiance of a luxury corporate event",              imageSrc: "https://img.b2bpic.net/free-photo/row-bouquets-decorating-table_1304-4047.jpg",              imageAlt: "Event centerpieces",              authorName: "Jasmin Studio",              authorAvatar: "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-flowers_23-2149247537.jpg",              date: "10 May 2024"
            },
            {
              id: "3",              category: "Design",              title: "Seasonal Color Trends in Florals",              excerpt: "Discover how we incorporate trending color palettes into our arrangement designs",              imageSrc: "https://img.b2bpic.net/free-photo/vase-flower_74190-1525.jpg",              imageAlt: "Seasonal flowers",              authorName: "Jasmin Studio",              authorAvatar: "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-flowers_23-2149247537.jpg",              date: "28 April 2024"
            },
            {
              id: "4",              category: "Inspiration",              title: "The Art of Floral Storytelling",              excerpt: "How each arrangement tells a unique story through color, texture, and composition",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-roses-bouquet-stands-chair-around-are-scattered-petals-roses_8353-9798.jpg",              imageAlt: "Rose arrangement",              authorName: "Jasmin Studio",              authorAvatar: "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-flowers_23-2149247537.jpg",              date: "15 April 2024"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="portfolio-collections" data-section="portfolio-collections">
        <ProductCardFour
          title="Signature Collections"
          description="Our most popular arrangements showcasing the diversity of our floral artistry"
          products={[
            {
              id: "1",              name: "Garden Romance Collection",              price: "$165",              variant: "Mixed Blooms · 4 Styles",              imageSrc: "https://img.b2bpic.net/free-photo/blooming-flowers-table-garden_1304-4038.jpg",              imageAlt: "Garden romance collection"
            },
            {
              id: "2",              name: "Modern Minimalist Series",              price: "$125",              variant: "Clean Lines · Contemporary",              imageSrc: "https://img.b2bpic.net/free-photo/vase-flower_74190-1525.jpg",              imageAlt: "Modern minimalist arrangement"
            },
            {
              id: "3",              name: "Luxury Event Package",              price: "$450",              variant: "Premium · Full Service",              imageSrc: "https://img.b2bpic.net/free-photo/row-bouquets-decorating-table_1304-4047.jpg",              imageAlt: "Luxury event package"
            },
            {
              id: "4",              name: "Bridal Signature Bouquets",              price: "$320",              variant: "Wedding · Custom Colors",              imageSrc: "https://img.b2bpic.net/free-photo/bouquet-pink-roses-single-branch-rose-with-green-leaves-inside-vase_114579-1440.jpg",              imageAlt: "Bridal signature bouquet"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          carouselMode="buttons"
          buttons={[
            { text: "Custom Quote", href: "/contact" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Jasmin"
          copyrightText="© 2024 Jasmin Flowers Studio. All rights reserved."
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com/jasminflowers", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com/jasminflowers", ariaLabel: "Facebook" },
            { icon: Hash, href: "https://pinterest.com/jasminflowers", ariaLabel: "Pinterest" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}