"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Instagram, Heart, Sparkles, Music } from 'lucide-react';

export const metadata = {
  title: "Social Media Gallery - Paintasy Face and Body Art",  description: "Follow our social media for the latest event photos, face painting designs, and behind-the-scenes content. Real event photos organized by service type."
};

export default function SocialMediaPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Gallery", id: "/gallery" },
    { name: "Packages", id: "/" },
    { name: "About", id: "/" },
    { 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" },
        { label: "Custom Designs", href: "/services" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/" },
        { label: "Gallery", href: "/gallery" },
        { label: "Packages", href: "/" },
        { label: "FAQ", href: "/" },
        { 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" },
        { label: "Phone", href: "tel:+15551234567" },
      ],
    },
    {
      title: "Service Areas",      items: [
        { label: "Local Events", href: "/contact" },
        { label: "Regional Coverage", href: "/contact" },
        { label: "Book Now", href: "/" },
        { label: "Get Quote", href: "/contact" },
      ],
    },
  ];

  const instagramFeed = [
    {
      id: "insta-1",      name: "Birthday Magic ✨",      price: "Follow Our Stories",      variant: "Kids Parties",      imageSrc: "http://img.b2bpic.net/free-photo/happy-kids-at-birthday-party-with-face-paint_23-2149159450.jpg?_wi=1",      imageAlt: "Kids enjoying face painting at birthday party"
    },
    {
      id: "insta-2",      name: "Festival Vibes 🎨",      price: "Follow Our Stories",      variant: "Festival Events",      imageSrc: "http://img.b2bpic.net/free-photo/festival-face-paint-instagram_23-2149159471.jpg?_wi=1",      imageAlt: "Festival face art Instagram post"
    },
    {
      id: "insta-3",      name: "Artistic Designs 🎭",      price: "Follow Our Stories",      variant: "Creative Art",      imageSrc: "http://img.b2bpic.net/free-photo/artistic-face-paint-design-instagram_23-2149159492.jpg?_wi=1",      imageAlt: "Creative face painting design"
    },
    {
      id: "insta-4",      name: "Event Highlights 🎉",      price: "Follow Our Stories",      variant: "Recent Events",      imageSrc: "http://img.b2bpic.net/free-photo/recent-event-face-painting_23-2149159513.jpg?_wi=1",      imageAlt: "Recent event face painting highlight"
    },
    {
      id: "insta-5",      name: "Behind the Scenes 🎨",      price: "Follow Our Stories",      variant: "Process Video",      imageSrc: "http://img.b2bpic.net/free-photo/behind-scenes-face-painting_23-2149159534.jpg?_wi=1",      imageAlt: "Behind the scenes face painting process"
    },
    {
      id: "insta-6",      name: "Client Love ❤️",      price: "Follow Our Stories",      variant: "Testimonials",      imageSrc: "http://img.b2bpic.net/free-photo/happy-client-testimonial-face-paint_23-2149159555.jpg?_wi=1",      imageAlt: "Happy client testimonial"
    },
    {
      id: "insta-7",      name: "Quick Designs ⚡",      price: "Follow Our Stories",      variant: "Fast Service",      imageSrc: "http://img.b2bpic.net/free-photo/quick-festival-design_23-2149159576.jpg?_wi=1",      imageAlt: "Quick festival face design"
    },
    {
      id: "insta-8",      name: "Glitter & Sparkle ✨",      price: "Follow Our Stories",      variant: "Special Effects",      imageSrc: "http://img.b2bpic.net/free-photo/glitter-face-paint-design_23-2149159597.jpg?_wi=1",      imageAlt: "Glitter and sparkle face painting"
    },
    {
      id: "insta-9",      name: "Team Events 🤝",      price: "Follow Our Stories",      variant: "Corporate",      imageSrc: "http://img.b2bpic.net/free-photo/corporate-event-face-paint_23-2149159618.jpg?_wi=1",      imageAlt: "Corporate team event face painting"
    },
  ];

  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
          brandName="Paintasy"
          navItems={navItems}
          bottomLeftText="Creative Face & Body Art"
          bottomRightText="paintasy@events.com"
        />
      </div>

      <div id="hero-social" data-section="hero-social" className="mx-auto px-4 md:px-6">
        <HeroBillboardGallery
          title="Follow Paintasy on Social Media"
          description="Connect with us on Instagram, Facebook, and TikTok for daily updates, event photos, design inspiration, and behind-the-scenes content. Join our growing community of happy clients!"
          background={{ variant: "radial-gradient" }}
          tag="@PaintasyArt"
          tagIcon={Instagram}
          tagAnimation="slide-up"
          buttons={[
            { text: "Follow on Instagram", href: "https://instagram.com" },
            { text: "Like on Facebook", href: "https://facebook.com" },
          ]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/social-media-feed-face-paint_23-2149159639.jpg?_wi=1",              imageAlt: "Paintasy social media feed"
            },
          ]}
          mediaAnimation="opacity"
          ariaLabel="Social media introduction"
          className="min-h-screen"
          containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
          titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
          descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
        />
      </div>

      <div id="social-feed" data-section="social-feed" className="mx-auto px-4 md:px-6 pt-20">
        <ProductCardFour
          title="Latest Instagram Posts"
          description="Check out our most recent posts from events, client experiences, and face painting artistry. Each post captures a moment of creativity and joy from our service."
          tag="Instagram Feed"
          tagIcon={Instagram}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="opacity"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          carouselMode="buttons"
          products={instagramFeed}
          buttons={[{ text: "Follow on Instagram", href: "https://instagram.com" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Instagram social media feed"
          containerClassName="gap-12"
          cardVariantClassName="text-4xl font-extrabold"
          descriptionClassName="text-lg opacity-90 max-w-3xl"
        />
      </div>

      <div id="social-connect" data-section="social-connect" className="mx-auto px-4 md:px-6 pt-20">
        <ContactText
          text="Love what you see on our social media? Reach out to book Paintasy for your event! Share your experience and tag us for a chance to be featured on our Instagram. Follow us for daily inspiration, promotions, and event updates."
          animationType="background-highlight"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Book Now", href: "/contact" },
            { text: "Follow @PaintasyArt", href: "https://instagram.com" },
          ]}
          ariaLabel="Social media call-to-action"
          containerClassName="py-16"
          contentClassName="max-w-3xl mx-auto"
          textClassName="text-4xl font-extrabold text-center"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
        />
      </div>

      <div id="footer-social" data-section="footer-social" className="mx-auto px-4 md:px-6">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
          bottomRightText="Professional Event Entertainment | Creative Services"
          ariaLabel="Site footer with links"
          containerClassName="gap-12"
          columnsClassName="grid-cols-2 lg:grid-cols-4"
          columnTitleClassName="font-extrabold text-lg"
          columnItemClassName="hover:opacity-70 transition-opacity"
        />
      </div>
    </ThemeProvider>
  );
}