"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Mail, Calendar, Users, MapPin } from 'lucide-react';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="inset"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Blue Forest"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Our Work", id: "/our-work" },
            { name: "Updates", id: "/updates" }
          ]}
          button={{
            text: "Get Involved",
            href: "/contact"
          }}
        />
      </div>

      <div id="main-contact" data-section="main-contact">
        <ContactSplitForm
          title="Join the Blue Forest Mission"
          description="Ready to make a real impact on ocean health? Whether you want to volunteer at our lab, participate in dive restoration, donate to our cause, or simply learn more about kelp ecology, we welcome you to our community."
          inputs={[
            { name: "name", type: "text", placeholder: "Your full name", required: true },
            { name: "email", type: "email", placeholder: "Your email address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone number (optional)", required: false },
            { name: "interest", type: "text", placeholder: "How would you like to help? (Volunteer, Donate, Learn More)", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about yourself, your experience with marine science, availability, or any questions about our work...",
            rows: 6,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/seascape-with-sandy-beach-clear-cloudless-sky_169016-38644.jpg"
          mediaPosition="right"
          buttonText="Join Our Mission"
        />
      </div>

      <div id="involvement-options" data-section="involvement-options">
        <MetricCardThree
          title="Ways to Get Involved"
          description="Multiple opportunities to contribute to San Diego's kelp forest restoration, from hands-on volunteering to supporting our mission financially."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          metrics={[
            { id: "1", icon: Users, title: "Lab Volunteers", value: "Weekly" },
            { id: "2", icon: Calendar, title: "Dive Training", value: "Monthly" },
            { id: "3", icon: Mail, title: "Educational Outreach", value: "Flexible" },
            { id: "4", icon: MapPin, title: "Beach Cleanups", value: "Quarterly" }
          ]}
        />
      </div>

      <div id="contact-info" data-section="contact-info">
        <MetricCardThree
          title="Connect With Us"
          description="Find us across San Diego and online. Our team is always excited to discuss kelp restoration and answer your questions about marine conservation."
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          metrics={[
            { id: "1", icon: Mail, title: "Email Response", value: "24 hours" },
            { id: "2", icon: Calendar, title: "Lab Tours", value: "Saturdays" },
            { id: "3", icon: Users, title: "Info Sessions", value: "Bi-weekly" },
            { id: "4", icon: MapPin, title: "Location", value: "Point Loma" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Blue Forest"
        />
      </div>
    </ThemeProvider>
  );
}