"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import TextAbout from '@/components/sections/about/TextAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Users } from "lucide-react";
import Link from "next/link";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Quick Links",
      items: [
        { label: "Home", href: "/" },
        { label: "About Us", href: "/about" },
      ],
    },
    {
      title: "Connect",
      items: [
        { label: "Contact Us", href: "/contact" },
        { label: "Our Team", href: "/about" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="noise"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="Computer Club"
          button={{ text: "Join Us", href: "/contact" }}
        />
      </div>

      <div id="contact-section" data-section="contact-section">
        <ContactSplitForm
          title="Get In Touch With Our Tech Community"
          description="Have questions about our club activities, events, or resources? Reach out to us and we'll get back to you as soon as possible."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Full Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email Address", required: true },
            { name: "subject", type: "text", placeholder: "Subject", required: false },
          ]}
          textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-vector/landing-page-with-smartphone-neon-design_23-2148345002.jpg"
          imageAlt="contact form tech interface user interaction digital communication"
          mediaAnimation="slide-up"
          mediaPosition="left"
          buttonText="Send Message"
          ariaLabel="Contact section"
          className="py-16"
          containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
          contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
          formCardClassName="bg-white rounded-xl shadow-lg p-8"
          titleClassName="text-3xl font-bold text-gray-900 mb-4"
          descriptionClassName="text-lg text-gray-600 mb-6"
          buttonClassName="bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105"
          buttonTextClassName="text-base"
          mediaWrapperClassName="relative overflow-hidden rounded-xl"
          mediaClassName="w-full h-full object-cover"
        />
      </div>

      <div id="about-section" data-section="about-section">
        <TextAbout
          tag="ABOUT US"
          tagIcon={Code}
          tagAnimation="slide-up"
          title="Empowering Tech Enthusiasts Since 2018"
          buttons={[{ text: "Learn More", href: "/about" }]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="About section"
        />
      </div>
      
      <div id="testimonials-section" data-section="testimonials-section">
        <TestimonialCardOne
          title="What Our Members Say"
          description="Hear from our active members about their experiences and growth within our computer club community."
          tag="Community Impact"
          tagIcon={Users}
          tagAnimation="slide-up"
          testimonials={[
            { id: "testimonial-1", name: "Alex Johnson", role: "Software Engineer", company: "Tech Innovations Inc.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/excited-black-manager-showing-thumbs-up-after-successul-negotiation-with-partners-indoor-portrait-asian-employees-with-african-worker-blue-shirt-foreground_197531-25399.jpg?_wi=2", imageAlt: "happy student testimonial positive review member experience" },
            { id: "testimonial-2", name: "Sam Rivera", role: "Computer Science Student", company: "University of Technology", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-man-using-tablet-celebrating-achievement-cafe_1262-18859.jpg?_wi=2", imageAlt: "tech enthusiast success story achievement confidence" },
            { id: "testimonial-3", name: "Taylor Kim", role: "IT Specialist", company: "Global Solutions Ltd.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/that-s-how-success-looks-like-photo-young-team-classical-clothes-celebrating-success-while-holding-drinks-modern-good-lighted-office_146671-13657.jpg?_wi=2", imageAlt: "celebration tech success group achievement community" },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          buttons={[{ text: "View All Testimonials", href: "/about" }]}
          buttonAnimation="opacity"
          textboxLayout="inline-image"
          useInvertedBackground={false}
          ariaLabel="Testimonials section"
        />
      </div>

      <div id="footer-section" data-section="footer-section">
        <FooterBase
          columns={footerColumns}
          logoText="CodeCraft Club"
          copyrightText="© 2025 CodeCraft Club. All rights reserved."
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}