"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Home, Zap, Heart } from "lucide-react";

export default function LandingPage() {
  const handleContactSubmit = (data: Record<string, string>) => {
    console.log('Contact form submitted:', data);
  };

  const handlePrivacyClick = () => {
    console.log('Privacy policy clicked');
  };

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="PRVNE"
          navItems={[
            { name: "About", id: "about" },
            { name: "Members", id: "members" },
            { name: "Highlights", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Join Crew",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardMetrics
          title="PRVNE: A Roman Legacy of Connection"
          description="Five friends united by shared memories from Convitto Vittorio Emanuele Secondo in Rome, forging bonds that transcend time and distance."
          tag="Italian Crew"
          tagIcon={Sparkles}
          buttons={[
            { text: "Learn About Us", href: "#about" },
            { text: "Join the Journey", href: "#contact" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767629988740-vacq090w.png"
          imageAlt="PRVNE crew gathered together"
          frameStyle="card"
          metricsLabel="Built on friendship, creativity, and Italian spirit"
          metrics={[
            { id: "1", value: "5", label: "Core Members" },
            { id: "2", value: "1", label: "Shared School" },
            { id: "3", value: "∞", label: "Lasting Bonds" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="Convitto Vittorio Emanuele Secondo"
          description="In the heart of Rome stands a centuries-old institution that has shaped countless lives. For us, it was more than an academy—it was where lifelong friendships began. From its historic halls to the eternal city's streets, PRVNE was born from shared experiences, late-night conversations, and dreams discussed beneath ancient Roman skies."
          tag="Our Origin"
          tagIcon={Home}
          buttons={[
            { text: "Our Story", href: "#members" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767629791297-tf12etgs.webp"
          imageAlt="Convitto Vittorio Emanuele Secondo in Rome"
        />
      </div>

      <div id="members" data-section="members">
        <TeamCardOne
          title="Meet the Crew"
          description="Five unique individuals, one unbreakable bond forged in Rome"
          members={[
            {
              id: "1",
              name: "Il Fisico con il Fisico",
              role: "The Visionary",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767630228934-49bddhw3.jpg",
              imageAlt: "Il Fisico con il Fisico"
            },
            {
              id: "2",
              name: "Bobba",
              role: "The Navigator",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767630392157-ofx6ersf.jpg",
              imageAlt: "Bobba"
            },
            {
              id: "3",
              name: "Napulitans",
              role: "The Heart",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767630335123-jkki2cx7.jpg",
              imageAlt: "Napulitans"
            },
            {
              id: "4",
              name: "Hyper_Ghost88",
              role: "The Explorer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767630185061-iecjbkw3.jpg",
              imageAlt: "Hyper_Ghost88"
            },
            {
              id: "5",
              name: "Giovanni",
              role: "The Anchor",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767630878773-h6jk1dgu.jpg",
              imageAlt: "Giovanni"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardFourteen
          title="What Defines PRVNE"
          description="The essence of our bond reflected in every moment"
          tag="Highlights"
          tagIcon={Zap}
          features={[
            {
              id: "1",
              title: "Unbreakable Connection",
              description: "Forged in the halls of Convitto, strengthened across continents. Our friendship transcends geography and time.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767631731356-bzvh0skf.jpg",
              imageAlt: "Group connection and unity"
            },
            {
              id: "2",
              title: "Shared Ambition",
              description: "From Rome to the world, we support each other's dreams. Together we rise, together we achieve.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767631689452-be96ekr5.jpg",
              imageAlt: "Ambition and success"
            },
            {
              id: "3",
              title: "Italian Soul",
              description: "We carry the legacy of Rome—la dolce vita, passion, and an appreciation for life's finest moments.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767631706096-fiv395v9.jpg",
              imageAlt: "Italian culture and heritage"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEleven
          title="Words from PRVNE"
          description="Reflections on what this crew means to each of us"
          tag="Stories"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",
              nameTitle: "Il Fisico con il Fisico",
              quote: "PRVNE isn't just a name—it's a promise. A promise that no matter where life takes us, we're never truly apart. The bonds we forged at Convitto are eternal.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767630228934-49bddhw3.jpg",
              imageAlt: "Il Fisico con il Fisico"
            },
            {
              id: "2",
              nameTitle: "Bobba",
              quote: "Five different paths, one destination. Every conversation brings us closer, every memory we create adds another layer to our story.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767630392157-ofx6ersf.jpg",
              imageAlt: "Bobba"
            },
            {
              id: "3",
              nameTitle: "Napulitans",
              quote: "In Rome, we learned what truly matters. With PRVNE, I carry that lesson everywhere. My brothers, my family, my anchor.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767630335123-jkki2cx7.jpg",
              imageAlt: "Napulitans"
            },
            {
              id: "4",
              nameTitle: "Hyper_Ghost88",
              quote: "The digital world keeps us connected, but the bond we share is analog—real, deep, and unmistakable. This crew is everything.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767630185061-iecjbkw3.jpg",
              imageAlt: "Hyper_Ghost88"
            },
            {
              id: "5",
              nameTitle: "Giovanni",
              quote: "Years have passed, continents separate us, but PRVNE remains constant. These are the friends I trust with my dreams and fears.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767630878773-h6jk1dgu.jpg",
              imageAlt: "Giovanni"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Connect with PRVNE"
          description="Have a message for the crew? Want to collaborate or share in our journey? Reach out—we'd love to hear from you."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Share your thoughts, collaboration ideas, or just say hello...",
            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32T51L3BHE8qqE8rXXWBwMZaYtk/uploaded-1767631838224-vwgg7si7.jpg"
          imageAlt="Team collaboration and connection"
          mediaPosition="right"
          buttonText="Send Message"
          onSubmit={handleContactSubmit}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="PRVNE"
          copyrightText="© 2025 PRVNE. Five friends, one eternal bond."
          columns={[
            {
              title: "Navigate",
              items: [
                { label: "About Us", href: "about" },
                { label: "The Crew", href: "members" },
                { label: "Our Story", href: "features" },
                { label: "Get In Touch", href: "contact" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Email", href: "mailto:hello@prvne.com" }
              ]
            }
          ]}
          onPrivacyClick={handlePrivacyClick}
        />
      </div>
    </ThemeProvider>
  );
}