"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Instagram, Facebook, Mail } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Jessica"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "About", id: "/about" }
          ]}
          button={{
            text: "Book Now",
            href: "/contact"
          }}
        />
      </div>

      <div id="about-story" data-section="about-story">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Jessica's Journey:" },
            { type: "text", content: "From Passion to Artistry" }
          ]}
          buttons={[
            { text: "View Portfolio", href: "/portfolio" },
            { text: "Book Consultation", href: "/contact" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about-values" data-section="about-values">
        <FeatureCardThree
          title="Our Core Values & Approach"
          description="Every arrangement tells a story, and Jessica's approach to floral design is rooted in these fundamental principles that guide each creation from concept to completion."
          tag="Our Philosophy"
          tagIcon={Sparkles}
          features={[
            {
              id: "01",
              title: "Artisanal Craftsmanship",
              description: "Each arrangement is hand-crafted with meticulous attention to detail, ensuring every petal and stem is perfectly positioned to create lasting beauty and impact.",
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-female-florist-holding-basket-flowers_23-2147882381.jpg",
              imageAlt: "Jessica crafting floral arrangements"
            },
            {
              id: "02",
              title: "Premium Quality Promise",
              description: "We source only the finest, freshest flowers from trusted growers, ensuring your arrangements maintain their beauty and fragrance for the longest possible time.",
              imageSrc: "https://img.b2bpic.net/free-photo/vertical-closeup-shot-beautiful-wedding-bouquet-with-gorgeous-white-roses_181624-15923.jpg",
              imageAlt: "Premium quality fresh flowers"
            },
            {
              id: "03",
              title: "Personalized Design Vision",
              description: "Every client's story is unique, and we work closely with you to understand your vision, style preferences, and special requirements to create truly personalized arrangements.",
              imageSrc: "https://img.b2bpic.net/free-photo/composition-flowers-stand-table_8353-10452.jpg",
              imageAlt: "Personalized floral consultation"
            }
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Our Services", href: "/services" }
          ]}
        />
      </div>

      <div id="about-contact" data-section="about-contact">
        <ContactText
          text="Ready to work with Jessica to create something extraordinary? Let's start a conversation about your floral dreams and how we can bring them to beautiful reality."
          animationType="background-highlight"
          buttons={[
            { text: "Schedule Meeting", href: "/contact" },
            { text: "See Our Work", href: "/portfolio" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterCard
        logoText="Jessica"
        copyrightText="© 2025 Jessica Flowers Studio. All rights reserved."
        socialLinks={[
          { icon: Instagram, href: "https://instagram.com/jessicaflowersstudio", ariaLabel: "Instagram" },
          { icon: Facebook, href: "https://facebook.com/jessicaflowersstudio", ariaLabel: "Facebook" },
          { icon: Mail, href: "mailto:hello@jessicaflowers.com", ariaLabel: "Email" }
        ]}
      />
    </ThemeProvider>
  );
}