"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Palette, Award, Shield, CheckCircle } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Gallery", id: "gallery" },
    { name: "Packages", id: "packages" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Services",      items: [
        { label: "Kids Party Face Painting", href: "/services" },
        { label: "Festival Face Art", href: "/services" },
        { label: "Corporate Events", href: "/services" },
        { label: "Body Painting", href: "/services" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Gallery", href: "/gallery" },
        { label: "Packages", href: "/packages" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Facebook", href: "https://facebook.com" },
        { label: "TikTok", href: "https://tiktok.com" },
        { label: "Email", href: "mailto:paintasy@events.com" },
      ],
    },
    {
      title: "Service Areas",      items: [
        { label: "Local Events", href: "/contact" },
        { label: "Regional Coverage", href: "/contact" },
        { label: "Book Now", href: "/packages" },
        { label: "Get Quote", href: "/contact" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="large"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Paintasy"
          bottomLeftText="Creative Face & Body Art"
          bottomRightText="paintasy@events.com"
        />
      </div>

      <div id="about-page-hero" data-section="about-page-hero">
        <HeroBillboardGallery
          title="About Paintasy"
          description="Professional face painting and body art entertainment bringing creativity and joy to events."
          background={{ variant: "radial-gradient" }}
          mediaItems={[
            {
              imageSrc:
                "http://img.b2bpic.net/free-photo/young-woman-with-towel-her-head-tassel_114579-27569.jpg?_wi=2",              imageAlt: "Professional face painter artist at work"},
          ]}
          mediaAnimation="opacity"
          titleClassName="text-5xl font-extrabold"
          descriptionClassName="text-lg opacity-90"
        />
      </div>

      <div id="about-story" data-section="about-story">
        <MetricSplitMediaAbout
          title="Our Story & Mission"
          description="Paintasy was founded on the belief that creative entertainment transforms events into unforgettable celebrations. We started with a passion for face painting and body art, and have grown into a professional team dedicated to bringing magic and color to every event we touch.\n\nOur mission is simple: deliver exceptional artistic service, genuine happiness, and professional entertainment that exceeds expectations. From children's birthday parties to corporate celebrations and festival events, we pour our hearts into creating beautiful, memorable experiences."
          tag="Professional Team"
          tagIcon={Award}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/young-woman-with-towel-her-head-tassel_114579-27569.jpg?_wi=3"
          imageAlt="Our professional face painting artist"
          mediaAnimation="blur-reveal"
          metrics={[
            { value: "500+", title: "Events Painted" },
            { value: "1000+", title: "Happy Faces" },
            { value: "10+", title: "Years Experience" },
            { value: "100%", title: "Satisfaction Rate" },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={true}
          titleClassName="text-4xl font-extrabold"
          descriptionClassName="text-lg opacity-90 max-w-2xl"
        />
      </div>

      <div id="about-values" data-section="about-values">
        <FeatureCardTen
          title="Our Values"
          description="What drives us in everything we do."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: "value-1",              title: "Creativity",              description: "We believe in artistic expression and creative design. Every face is a canvas.",              media: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/fabulous-drag-queen-getting-her-makeup-ready_23-2149138152.jpg?_wi=3",                imageAlt: "Creative face painting designs"},
              items: [
                { icon: Palette, text: "Artistic innovation" },
                { icon: Palette, text: "Unique designs" },
                { icon: Palette, text: "Professional quality" },
              ],
              reverse: false,
            },
            {
              id: "value-2",              title: "Safety & Professionalism",              description: "We use only hypoallergenic, professional-grade face paints and maintain strict hygiene standards.",              media: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/little-children-trick-treating-halloween_53876-40562.jpg?_wi=5",                imageAlt: "Safe professional face painting"},
              items: [
                { icon: Shield, text: "Hypoallergenic products" },
                { icon: CheckCircle, text: "Safety certified" },
                { icon: Award, text: "Professional standards" },
              ],
              reverse: true,
            },
          ]}
          containerClassName="gap-12"
        />
      </div>

      <div id="footer-about" data-section="footer-about">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
          bottomRightText="Professional Event Entertainment | Creative Services"
        />
      </div>
    </ThemeProvider>
  );
}