"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Heart } from 'lucide-react';

export default function AboutPage() {
  const navItems = [
    { name: "Shop", id: "/shop" },
    { name: "Collections", id: "/collections" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
    { name: "Cart", id: "https://example.com/cart" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="blurBottom"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          brandName="STUDIO LUXE"
          navItems={navItems}
        />
      </div>

      <div id="about-story" data-section="about-story">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Studio Luxe is dedicated to crafting timeless furniture that transforms living spaces into sanctuaries of elegance and comfort." }
          ]}
          useInvertedBackground={false}
          buttons={[
            { text: "Shop Now", href: "/shop" },
            { text: "Design Consultation", href: "/contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about-values" data-section="about-values">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "We believe in sustainable luxury, exceptional craftsmanship, and designs that transcend fleeting trends to become timeless investments in your home." }
          ]}
          useInvertedBackground={true}
          buttons={[
            { text: "Our Process", href: "#" },
            { text: "Sustainability", href: "#" }
          ]}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="about-testimonials" data-section="about-testimonials">
        <TestimonialCardTen
          title="Why Our Customers Choose Us"
          description="Real stories from design professionals and homeowners who trust Studio Luxe."
          tag="Customer Testimonials"
          tagIcon={Heart}
          tagAnimation="opacity"
          testimonials={[
            {
              id: "1",              title: "Transformed Our Living Room",              quote: "The quality is exceptional. Every detail speaks to the craftsmanship and attention we received. Our home feels like a luxury resort now.",              name: "Sarah Mitchell",              role: "Interior Designer",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              title: "Worth Every Investment",              quote: "Studio Luxe pieces are timeless investments. The minimalist aesthetic pairs perfectly with our modern home. Customer service was impeccable.",              name: "James Chen",              role: "Architect",              imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg",              imageAlt: "James Chen"
            },
            {
              id: "3",              title: "Elegant Simplicity",              quote: "These aren't just furniture pieces—they're statements. The glass coffee table has become a conversation starter at every gathering.",              name: "Emma Rodriguez",              role: "CEO, Design Collective",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Emma Rodriguez"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Furniture", href: "/shop" },
                { label: "Seating", href: "/shop" },
                { label: "Tables", href: "/shop" },
                { label: "Storage", href: "/shop" },
                { label: "New Arrivals", href: "/shop" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Design Philosophy", href: "/about" },
                { label: "Sustainability", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "Care Guide", href: "#" },
                { label: "Warranty", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Studio Luxe. All rights reserved. Crafted for those who value timeless design."
        />
      </div>
    </ThemeProvider>
  );
}