"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Calendar, Facebook, Instagram, Twitter, Youtube } from 'lucide-react';

export default function EventsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="large"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Network"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Membership", id: "/membership" },
            { name: "Events", id: "/events" },
            { name: "About", id: "/about" }
          ]}
          button={{
            text: "Join Network",            href: "/membership"
          }}
        />
      </div>

      <div id="events-hero" data-section="events-hero">
        <HeroBillboard
          title="Fishing Events & Tournaments"
          description="Experience the thrill of competitive fishing and connect with fellow anglers at Network events throughout the year."
          background={{ variant: "radial-gradient" }}
          tag="Events & Competitions"
          tagIcon={Calendar}
          buttons={[
            { text: "View Schedule", href: "#upcoming" },
            { text: "Register Now", href: "/membership" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/men-make-preparations-fishing_329181-19893.jpg"
          imageAlt="Fishermen competing in tournament event"
        />
      </div>

      <div id="upcoming-events" data-section="upcoming-events">
        <MetricCardTen
          title="Upcoming Events"
          description="Mark your calendar for these exciting fishing competitions and community gatherings"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              title: "Spring Bass Championship",              subtitle: "Lake Riverside, Saturday 9 AM",              category: "Tournament",              value: "$2,500 Prize Pool",              buttons: [{ text: "Register", href: "#" }]
            },
            {
              id: "2",              title: "Monthly Catch & Release",              subtitle: "Pine Creek, Every 2nd Saturday",              category: "Casual Event",              value: "Free Entry",              buttons: [{ text: "Join In", href: "#" }]
            },
            {
              id: "3",              title: "Summer Fishing Masterclass",              subtitle: "Online Workshop, Thursdays 7 PM",              category: "Education",              value: "Members Only",              buttons: [{ text: "Enroll", href: "#" }]
            },
            {
              id: "4",              title: "Fall Catfish Challenge",              subtitle: "Deep River, Every Weekend",              category: "Tournament",              value: "$1,500 Prize Pool",              buttons: [{ text: "Register", href: "#" }]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Have questions about Network? Want to sponsor an event or collaborate? We'd love to hear from you. Reach out to our team and we'll get back to you within 24 hours."
          inputs={[
            { name: "fullName", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "your@email.com", required: true },
            { name: "subject", type: "text", placeholder: "Subject", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us what you're thinking...",            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/sad-contemplative-person-near-lake_23-2150420658.jpg"
          imageAlt="Sunset fishing scene"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

      <FooterCard
        logoText="Network"
        copyrightText="© 2025 Network Fishing Club. All rights reserved."
        socialLinks={[
          { icon: Facebook, href: "https://facebook.com/networkfishingclub", ariaLabel: "Facebook" },
          { icon: Instagram, href: "https://instagram.com/networkfishingclub", ariaLabel: "Instagram" },
          { icon: Twitter, href: "https://twitter.com/networkfishing", ariaLabel: "Twitter" },
          { icon: Youtube, href: "https://youtube.com/networkfishingclub", ariaLabel: "YouTube" }
        ]}
      />
    </ThemeProvider>
  );
}