"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import Link from "next/link";

const navItems = [
  { name: "Home", id: "home" },
  { name: "About", id: "about" },
  { name: "Portfolio", id: "portfolio" },
  { name: "Services", id: "services" },
  { name: "Contact", id: "contact" },
];

const navButton = {
  text: "Check Availability",  href: "/contact"};

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={navButton}
          brandName="Overthemoonstory"
        />
      </div>

      <div id="services-intro" data-section="services-intro">
        <TextAbout
          tag="Our Services"
          title="Comprehensive wedding cinematography, photography, and video production services tailored to your vision and requirements."
          useInvertedBackground={false}
          buttons={[]}
        />
      </div>

      <div id="service-offerings" data-section="service-offerings">
        <FeatureCardNine
          title="Wedding Services"
          description="Premium packages designed to capture every aspect of your wedding with cinematic excellence and emotional depth."
          features={[
            {
              id: 1,
              title: "Full-Day Wedding Cinematography",              description:
                "Complete coverage from pre-wedding preparations through celebration with professional editing, color grading, and emotional storytelling that transforms your wedding into a timeless film.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/bride-groom-taste-red-wedding-cake-standing-before-altar-night_8353-7092.jpg"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-celebrating-their-wedding-beach_23-2149003474.jpg"},
            },
            {
              id: 2,
              title: "Highlight Reels & Teasers",              description:
                "Beautifully edited 3-5 minute highlight reels and 15-30 second teasers perfect for sharing with family and on social media. Fast turnaround within 1-2 weeks.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/traditional-indian-wedding-ritual-with-putting-bracelets_8353-10045.jpg"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/young-happy-bride-wedding-dress-groom_624325-231.jpg"},
            },
            {
              id: 3,
              title: "Pre-Wedding & Premium Photography",              description:
                "Romantic pre-wedding shoots at scenic Bengaluru locations, engagement films, and premium still photography complementing our cinematography services.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/young-happy-bride-wedding-dress-groom_624325-231.jpg"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-celebrating-their-wedding-beach_23-2149003474.jpg"},
            },
          ]}
          showStepNumbers={false}
          tag="Service Packages"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Home", href: "/" },
                { label: "About", href: "/about" },
                { label: "Portfolio", href: "/portfolio" },
                { label: "Services", href: "/services" },
              ],
            },
            {
              title: "Contact",              items: [
                { label: "Call Now", href: "tel:+919876543210" },
                { label: "Email", href: "mailto:hello@overthemoonstory.com" },
                { label: "WhatsApp", href: "https://wa.me/919876543210" },
                { label: "Address", href: "#" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Booking Terms", href: "#" },
              ],
            },
          ]}
          copyrightText="© 2025 Overthemoonstory. All rights reserved. | Bengaluru, Karnataka"
        />
      </div>
    </ThemeProvider>
  );
}