"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 PortfolioPage() {
  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="portfolio-intro" data-section="portfolio-intro">
        <TextAbout
          tag="Our Portfolio"
          title="Explore our collection of cinematic wedding films and photography that showcase the artistry and emotion we bring to every project."
          useInvertedBackground={false}
          buttons={[]}
        />
      </div>

      <div id="featured-work" data-section="featured-work">
        <FeatureCardNine
          title="Complete Wedding Films"
          description="Full-day coverage transformed into cinematic masterpieces through professional editing and color grading."
          features={[
            {
              id: 1,
              title: "Traditional Wedding Cinematography",              description:
                "Capturing the sacred rituals, joyful celebrations, and intimate moments of traditional Indian weddings with cultural sensitivity and artistic excellence.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/traditional-indian-wedding-ritual-with-putting-bracelets_8353-10045.jpg?_wi=6"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/young-happy-bride-wedding-dress-groom_624325-231.jpg?_wi=6"},
            },
            {
              id: 2,
              title: "Modern & Fusion Weddings",              description:
                "From contemporary ceremonies to fusion celebrations, we adapt our cinematic approach to match your unique wedding style and aesthetic vision.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-celebrating-their-wedding-beach_23-2149003474.jpg?_wi=7"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/bride-groom-taste-red-wedding-cake-standing-before-altar-night_8353-7092.jpg?_wi=2"},
            },
            {
              id: 3,
              title: "Pre-Wedding & Engagement Shoots",              description:
                "Beautifully captured romantic moments during pre-wedding shoots at scenic Bengaluru locations and engagement celebrations.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/young-happy-bride-wedding-dress-groom_624325-231.jpg?_wi=7"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-celebrating-their-wedding-beach_23-2149003474.jpg?_wi=8"},
            },
          ]}
          showStepNumbers={false}
          tag="Wedding Films"
          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>
  );
}