"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import ContactCenter from "@/components/sections/contact/ContactCenter";
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 HomePage() {
  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="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Overthemoonstory"
          description="Cinematic wedding films and photography capturing timeless moments with elegance and emotion in Bengaluru and Karnataka."
          buttons={[
            { text: "Check Availability", href: "/contact" },
            { text: "Call Now", href: "tel:+919876543210" },
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="http://img.b2bpic.net/free-photo/bride-groom-taste-red-wedding-cake-standing-before-altar-night_8353-7092.jpg?_wi=1"
          imageAlt="Cinematic wedding celebration with couple dancing"
          frameStyle="card"
          mediaAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="trust" data-section="trust">
        <TextAbout
          tag="Based in BTM Layout, Bengaluru"
          title="Professional wedding cinematography serving engaged couples across Bengaluru and Karnataka with premium storytelling and high-end production quality."
          useInvertedBackground={false}
          buttons={[]}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <FeatureCardNine
          title="Featured Work"
          description="Explore our cinematic wedding films and photography that capture the essence of your special day."
          features={[
            {
              id: 1,
              title: "Wedding Cinematography",              description:
                "Full-day cinematic coverage with professional editing, color grading, and emotional storytelling that transforms your wedding into a timeless film.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-celebrating-their-wedding-beach_23-2149003474.jpg?_wi=1"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/young-happy-bride-wedding-dress-groom_624325-231.jpg?_wi=1"},
            },
            {
              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.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/traditional-indian-wedding-ritual-with-putting-bracelets_8353-10045.jpg?_wi=1"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-celebrating-their-wedding-beach_23-2149003474.jpg?_wi=2"},
            },
          ]}
          showStepNumbers={false}
          tag="Our Work"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          buttons={[{ text: "View Full Portfolio", href: "/portfolio" }]}
        />
      </div>

      <div id="benefits" data-section="benefits">
        <FeatureCardNine
          title="Why Choose Overthemoonstory"
          description="We combine technical expertise with emotional intelligence to create wedding films that feel deeply personal."
          features={[
            {
              id: 1,
              title: "Cinematic Storytelling",              description:
                "We don't just record events—we craft narratives that capture the emotions, connections, and joy of your wedding day.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/young-happy-bride-wedding-dress-groom_624325-231.jpg?_wi=2"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-celebrating-their-wedding-beach_23-2149003474.jpg?_wi=3"},
            },
            {
              id: 2,
              title: "High-End Equipment & Expertise",              description:
                "Professional-grade cameras, drones, stabilizers, and lighting combined with years of wedding filmmaking experience.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-celebrating-their-wedding-beach_23-2149003474.jpg?_wi=4"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/traditional-indian-wedding-ritual-with-putting-bracelets_8353-10045.jpg?_wi=2"},
            },
            {
              id: 3,
              title: "Seamless Experience",              description:
                "Our team works discreetly and professionally to capture authentic moments without disrupting your celebrations.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/traditional-indian-wedding-ritual-with-putting-bracelets_8353-10045.jpg?_wi=3"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/young-happy-bride-wedding-dress-groom_624325-231.jpg?_wi=3"},
            },
          ]}
          showStepNumbers={false}
          tag="What Sets Us Apart"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Clients Say"
          description="Real couples sharing their experiences with Overthemoonstory."
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "Priya & Arun",              handle: "@priyaarun_wedding",              testimonial:
                "Overthemoonstory captured every precious moment of our wedding with such elegance and emotion. Their team was professional, discreet, and made us feel completely comfortable throughout the day. The final film brought tears to our eyes.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/crop-portrait-beautiful-loving-brides-couple-man-stylish-suit-with-girl-wedding-dress-hugging-touching-each-other-celebrating-wedding-day-enjoying-happy-moment_8353-11872.jpg"},
            {
              id: "2",              name: "Sophia & Rahul",              handle: "@sophiarahul2023",              testimonial:
                "We couldn't have asked for better filmmakers. The cinematography is absolutely stunning, and the editing captures the essence of our relationship perfectly. Everyone who watched our wedding film was blown away.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-loving-couple-husband-wife-wedding-ceremony-hugging-beautiful-bride-puffy-dress-with-groom-elegant-suit-happy-family-married-couple-wedding-day_8353-12321.jpg?_wi=1"},
            {
              id: "3",              name: "Ananya & Vikram",              handle: "@ananyavikram_wed",              testimonial:
                "Professional, creative, and incredibly thoughtful. Overthemoonstory went above and beyond to deliver a wedding film that exceeded our expectations. Highly recommended for any couple in Bengaluru.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-loving-couple-husband-wife-wedding-ceremony-hugging-beautiful-bride-puffy-dress-with-groom-elegant-suit-happy-family-married-couple-wedding-day_8353-12321.jpg?_wi=2"},
            {
              id: "4",              name: "Divya & Arjun",              handle: "@divyaarjun_love",              testimonial:
                "Our wedding film is a masterpiece. The team captured not just the events, but the feelings and connections between everyone. It's a memory we'll treasure forever. Thank you, Overthemoonstory!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-happy-bride-wedding-dress-groom_624325-231.jpg?_wi=4"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactCenter
          tag="Limited Bookings"
          title="Let's Capture Your Forever"
          description="We take on a limited number of weddings each season to ensure exceptional quality and personal attention. Get in touch today to check availability and discuss your wedding vision."
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Check Availability"
          termsText="By submitting your information, you agree to be contacted about your wedding. We respect your privacy and will never share your details."
        />
      </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>
  );
}