"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Facebook, Hash } from 'lucide-react';

export default function AboutPage() {
  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="about-story" data-section="about-story">
        <TextAbout
          title="Founded in 2020, Jasmin Flowers Studio emerged from a passion for creating unforgettable moments through the artistry of flowers. Our journey began with a simple belief: every occasion deserves the perfect floral expression."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View Our Work", href: "/portfolio" },
            { text: "Contact Us", href: "/contact" }
          ]}
        />
      </div>

      <div id="about-values" data-section="about-values">
        <FeatureCardTwentyThree
          title="Our Values"
          description="The principles that guide every arrangement we create and every relationship we build"
          features={[
            {
              id: "1",              title: "Craftsmanship Excellence",              tags: ["Quality", "Attention to Detail"],
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-flowers_23-2149247537.jpg",              imageAlt: "Florist crafting arrangement"
            },
            {
              id: "2",              title: "Sustainable Practices",              tags: ["Eco-Friendly", "Local Sourcing"],
              imageSrc: "https://img.b2bpic.net/free-photo/vase-flower_74190-1525.jpg",              imageAlt: "Sustainable flower arrangement"
            },
            {
              id: "3",              title: "Personal Touch",              tags: ["Custom Design", "Client-Focused"],
              imageSrc: "https://img.b2bpic.net/free-photo/blooming-flowers-table-garden_1304-4038.jpg",              imageAlt: "Personalized floral design"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="about-team" data-section="about-team">
        <TextAbout
          title="Our talented team of floral designers combines years of experience with fresh creative vision. We work closely with each client to understand their unique style and bring their floral dreams to life."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "See Our Services", href: "/services" },
            { text: "Get Started", 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>
  );
}