"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import ContactText from "@/components/sections/contact/ContactText";
import FooterSimple from "@/components/sections/footer/FooterSimple";

export default function PackagesPage() {
  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: "Packages",      items: [
        { label: "Birthday Packages", href: "#packages" },
        { label: "Festival Service", href: "#packages" },
        { label: "Corporate Events", href: "#packages" },
        { label: "Custom Packages", href: "/contact" },
      ],
    },
    {
      title: "Services",      items: [
        { label: "All Services", href: "/services" },
        { label: "Gallery", href: "/gallery" },
        { label: "About", href: "/about" },
        { label: "FAQ", href: "#faq" },
      ],
    },
    {
      title: "Social",      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: "Book Now",      items: [
        { label: "Request Quote", href: "/contact" },
        { label: "Chat with Us", href: "/contact" },
        { label: "Call Now", href: "tel:+15551234567" },
        { label: "FAQ", href: "#faq" },
      ],
    },
  ];

  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="packages-page-hero" data-section="packages-page-hero">
        <HeroBillboardGallery
          title="Event Packages & Pricing"
          description="Flexible, transparent pricing for every type of event. From intimate celebrations to large festivals, we have the perfect package for you."
          background={{ variant: "gradient-bars" }}
          buttons={[{ text: "Request a Quote", href: "/contact" }]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            {
              imageSrc:
                "http://img.b2bpic.net/free-photo/little-children-trick-treating-halloween_53876-40562.jpg?_wi=4",              imageAlt: "Event face painting packages"},
          ]}
          mediaAnimation="opacity"
          titleClassName="text-5xl font-extrabold"
          descriptionClassName="text-lg opacity-90"
        />
      </div>

      <div id="packages-pricing" data-section="packages-pricing">
        <PricingCardFive
          title="Our Event Packages"
          description="Simple, flexible pricing tailored to your event needs. All packages include professional service, artistic creativity, and great customer care."
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground={false}
          plans={[
            {
              id: "pkg-birthday-basic",              tag: "Great Start",              price: "$150",              period: "per hour",              description: "Perfect for small birthday celebrations",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "Includes",              features: [
                "Up to 15 children",                "Face painting only",                "Colorful themed designs",                "Basic design themes",                "Professional face paints"],
            },
            {
              id: "pkg-birthday-deluxe",              tag: "Most Popular",              price: "$200",              period: "per 2 hours",              description: "Full party entertainment package",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "Includes",              features: [
                "Up to 25 children",                "Face painting + tattoos",                "Custom themed designs",                "Interactive entertainment",                "Professional service",                "Setup & cleanup"],
            },
            {
              id: "pkg-birthday-premium",              tag: "Best Value",              price: "$280",              period: "per 3 hours",              description: "Premium party entertainment with extra features",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "Includes",              features: [
                "Up to 40 guests",                "Face & body painting",                "Custom character designs",                "Interactive entertainment",                "Photo opportunities",                "Full setup & cleanup"],
            },
            {
              id: "pkg-festival",              tag: "High Volume",              price: "$250",              period: "per 3 hours",              description: "Fast-paced festival and outdoor event service",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "Includes",              features: [
                "High-capacity crowds",                "Fast artistic designs",                "3-5 minute service per person",                "Portable station included",                "Setup & teardown",                "Professional materials"],
            },
            {
              id: "pkg-corporate",              tag: "Professional",              price: "$300",              period: "per 3 hours",              description: "Corporate team building & brand activation",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "Includes",              features: [
                "Professional setup",                "Branded design options",                "Custom artwork",                "Corporate polished service",                "Photo-ready designs",                "Setup & cleanup included"],
            },
            {
              id: "pkg-custom",              tag: "Premium",              price: "Custom",              period: "consultation",              description: "Fully customized package for unique events",              button: { text: "Contact Us", href: "/contact" },
              featuresTitle: "Services Available",              features: [
                "Full day events",                "Multiple artists",                "Body painting",                "Custom artwork",                "Event planning",                "Special requests welcome"],
            },
          ]}
          buttons={[{ text: "Schedule Consultation", href: "/contact" }]}
          buttonAnimation="blur-reveal"
          containerClassName="gap-12"
        />
      </div>

      <div id="packages-cta" data-section="packages-cta">
        <ContactText
          text="Don't see your perfect package? We offer fully customized packages for unique events and special requests. Let's create something amazing for your celebration."
          animationType="background-highlight"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={true}
          buttons={[{ text: "Request Custom Quote", href: "/contact" }]}
          containerClassName="py-16"
          textClassName="text-3xl font-extrabold text-center"
        />
      </div>

      <div id="packages-footer" data-section="packages-footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Paintasy Face and Body Art."
          bottomRightText="Simple Transparent Pricing"
        />
      </div>
    </ThemeProvider>
  );
}