"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";
import Link from "next/link";

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
          navItems={navItems}
          brandName="Paintasy"
          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/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=4",
              imageAlt: "Event face painting packages",
            },
          ]}
          mediaAnimation="opacity"
          titleClassName="text-5xl font-extrabold"
          descriptionClassName="text-lg opacity-90"
          ariaLabel="Packages page hero section"
        />
      </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"
          titleClassName="text-4xl font-extrabold"
          descriptionClassName="text-lg opacity-90"
          ariaLabel="Pricing section with event packages"
        />
      </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"
          ariaLabel="Custom packages call-to-action section"
        />
      </div>

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