"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 AboutPage() {
  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="about-intro" data-section="about-intro">
        <TextAbout
          tag="Our Story"
          title="At Overthemoonstory, we believe every wedding is a unique love story. Our mission is to capture the authentic emotions, connections, and joy of your special day through cinematic storytelling."
          useInvertedBackground={false}
          buttons={[]}
        />
      </div>

      <div id="about-approach" data-section="about-approach">
        <FeatureCardNine
          title="Our Approach"
          description="Based in Bengaluru and serving couples across Karnataka, we combine technical expertise with emotional intelligence."
          features={[
            {
              id: 1,
              title: "Emotion-Driven Storytelling",              description:
                "We focus on capturing the real emotions and connections that make your wedding day special. Every frame is crafted to evoke feeling and preserve memories that will last a lifetime.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-celebrating-their-wedding-beach_23-2149003474.jpg?_wi=5"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/young-happy-bride-wedding-dress-groom_624325-231.jpg?_wi=5"},
            },
            {
              id: 2,
              title: "Technical Excellence",              description:
                "Our team combines years of experience with professional-grade equipment including cinema cameras, drones, and advanced editing software to deliver cinema-quality results.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/young-lady-two-young-men-getting-their-picture-taken_171337-12592.jpg"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/traditional-indian-wedding-ritual-with-putting-bracelets_8353-10045.jpg?_wi=4"},
            },
            {
              id: 3,
              title: "Personalized Experience",              description:
                "We work closely with each couple during pre-wedding consultations to understand your vision, preferences, and must-have moments. Your story guides every creative decision we make.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/traditional-indian-wedding-ritual-with-putting-bracelets_8353-10045.jpg?_wi=5"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-celebrating-their-wedding-beach_23-2149003474.jpg?_wi=6"},
            },
          ]}
          showStepNumbers={false}
          tag="How We Work"
          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>
  );
}