"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";

export default function ProposalPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "My Feelings", id: "declaration" },
    { name: "Will You?", id: "proposal" },
  ];

  const footerColumns = [
    {
      title: "Quick Links",
      items: [
        { label: "Home", href: "/" },
        { label: "My Feelings", href: "/declaration" },
        { label: "The Question", href: "/proposal" },
      ],
    },
    {
      title: "My Heart",
      items: [
        { label: "Forever Yours", href: "#" },
        { label: "Always & Forever", href: "#" },
        { label: "With All My Love", href: "#" },
      ],
    },
    {
      title: "For You Sonam",
      items: [
        { label: "Made with Love ❤️", href: "#" },
        { label: "From Your Heart", href: "#" },
        { label: "Forever & Always", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLarge"
      background="noiseDiagonalGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="For Sonam ❤️"
          bottomLeftText="Made with Love"
          bottomRightText="Forever Yours"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="Sonam, There's Something I Need to Tell You"
          description="This is more than just a website. This is my heart speaking to yours. Click the button below and let me take you on a journey of what you mean to me."
          background={{ variant: "radial-gradient" }}
          testimonials={[
            {
              name: "Your Heart",
              handle: "@forever_yours",
              testimonial: "Every moment with you feels like a beautiful dream I never want to wake up from.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-vector/heart-confetti-transparent-background_23-2148035909.jpg",
              imageAlt: "Love",
            },
          ]}
          buttons={[
            {
              text: "CLICK HERE FOR A SURPRISE",
              href: "/declaration",
            },
          ]}
          buttonAnimation="slide-up"
          mediaAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-vector/heart-confetti-transparent-background_23-2148035909.jpg"
          imageAlt="A romantic moment"
          useInvertedBackground={false}
        />
      </div>

      <div id="declaration" data-section="declaration">
        <MediaAbout
          title="I REALLY LIKE YOUUUU EVEN MORE THAN MYSELF"
          description="YOU ARE THE FIRST GIRL I REALLY CARE ABOUT AND FALLING IN LOVE IN EVERY MOMENT. Every single day with you is a gift. You've changed my life in ways I never thought possible. You're not just someone I like - you're the person I want to build my future with."
          buttons={[
            {
              text: "NEXT",
              href: "/proposal",
            },
          ]}
          buttonAnimation="slide-up"
          mediaAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-photo/gold-shimmering-heart-grid-background_53876-97502.jpg"
          imageAlt="Hearts and romance"
          useInvertedBackground={true}
        />
      </div>

      <div id="proposal" data-section="proposal">
        <FeatureCardSeven
          title="I REALLY REALLY LIKE YOU , PLEASE BE MY GIRLFRIEND FOREVER , PLEASE SONAM"
          description="This is the most important question I'll ever ask. Will you take this chance with me? Will you let me be the person who makes you smile every single day?"
          features={[
            {
              id: 1,
              title: "YES",
              description: "I want to spend forever loving you",
              buttons: [
                {
                  text: "YES, I WILL",
                  href: "/success",
                },
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-lovers-with-engagement-ring_23-2148060417.jpg",
              imageAlt: "Love proposal",
            },
            {
              id: 2,
              title: "NO",
              description: "I need more time to think",
              buttons: [
                {
                  text: "NOT YET",
                  href: "/try-again",
                },
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/valentine-inscription-with-gift-boxes-table_23-2148009368.jpg",
              imageAlt: "Reconsider",
            },
          ]}
          animationType="blur-reveal"
          textboxLayout="split"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="Made with all my love for you, Sonam. ❤️ Forever yours."
        />
      </div>
    </ThemeProvider>
  );
}