"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { BookOpen, Users, Facebook, Instagram, Twitter, Youtube } from 'lucide-react';

export default function AboutPage() {
  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="about-hero" data-section="about-hero">
        <HeroBillboard
          title="About Network Fishing Club"
          description="Founded by passionate anglers, Network has grown into a thriving community dedicated to celebrating the sport of fishing and connecting enthusiasts from all backgrounds."
          background={{ variant: "animated-grid" }}
          tag="Our Story"
          tagIcon={BookOpen}
          buttons={[
            { text: "Join Us", href: "/membership" },
            { text: "Contact Network", href: "#contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/men-having-their-favourite-weekend-activity_329181-19859.jpg"
          imageAlt="Network team enjoying fishing adventure together"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTen
          title="Meet the Network Leadership Team"
          tag="Our Founders"
          members={[
            {
              id: "1",              name: "Captain James Peterson",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-holding-pike-fish-looking-camera_23-2147894067.jpg"
            },
            {
              id: "2",              name: "Dr. Sarah Mitchell",              imageSrc: "https://img.b2bpic.net/free-photo/man-fishing-holds-angling-rod_1157-38067.jpg"
            },
            {
              id: "3",              name: "Marcus Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/man-standing-near-lake-holding-fish-with-hook_23-2147870240.jpg"
            },
            {
              id: "4",              name: "Elena Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-fisherman-holding-fresh-caught-fish_23-2147894101.jpg"
            }
          ]}
          memberVariant="card"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            { id: "1", name: "Marcus Johnson", imageSrc: "https://img.b2bpic.net/free-photo/smiling-man-holding-three-caught-fish_23-2147894062.jpg" },
            { id: "2", name: "Sarah Chen", imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-weighing-caught-fish-near-lake_23-2147894063.jpg" },
            { id: "3", name: "David Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/man-fishing-river_23-2148204186.jpg" },
            { id: "4", name: "Emily Watson", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-man-holding-fishing-rod-near-lake_23-2147870125.jpg" },
            { id: "5", name: "James Mitchell", imageSrc: "https://img.b2bpic.net/free-photo/relaxed-man-posing-with-lake-background_1153-1421.jpg" },
            { id: "6", name: "Lisa Anderson", imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-standing-near-lake-holding-fishing-rod_23-2147870123.jpg" }
          ]}
          cardTitle="Join 5,000+ passionate anglers who trust Network"
          cardTag="Member Community"
          cardTagIcon={Users}
          useInvertedBackground="noInvert"
        />
      </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="invertDefault"
          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>
  );
}