"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import AboutMetric from '@/components/sections/about/AboutMetric';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Leaf, Fish, Users, Droplet } from 'lucide-react';

export default function AboutPage() {
  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="about-story" data-section="about-story">
        <AboutMetric
          title="Our Story: Founded by students who believe in the power of young minds to solve our ocean's biggest challenges. We started as a small group concerned about the disappearing kelp forests in San Diego. Today, we lead the region's most innovative kelp restoration program."
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Leaf, label: "Founded", value: "2019" },
            { icon: Fish, label: "Student-Led", value: "100%" },
            { icon: Users, label: "Community Partners", value: "15+" },
            { icon: Droplet, label: "Ocean Health Focus", value: "Always" }
          ]}
        />
      </div>

      <div id="team-full" data-section="team-full">
        <TeamCardOne
          title="Leadership Team & Core Values"
          description="Meet the passionate students behind our mission and the values that guide every restoration effort we undertake."
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="invertDefault"
          gridVariant="four-items-2x2-equal-grid"
          members={[
            { id: "1", name: "Maya Chen", role: "Co-Founder & Lab Director", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg" },
            { id: "2", name: "Jordan Rodriguez", role: "Restoration Lead", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg" },
            { id: "3", name: "Alex Park", role: "Research & Monitoring", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg" },
            { id: "4", name: "Sam Thompson", role: "Community Outreach", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg" },
            { id: "5", name: "Jamie Liu", role: "Data Scientist", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg" },
            { id: "6", name: "Taylor Martinez", role: "Operations Manager", imageSrc: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg" }
          ]}
        />
      </div>

      <div id="mission-metrics" data-section="mission-metrics">
        <AboutMetric
          title="Our Mission Impact: Every kelp plant we grow represents hope for a healthier ocean ecosystem. Our three-pillar approach ensures comprehensive restoration from lab to sea."
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Leaf, label: "Tank Cultivation Success", value: "95%" },
            { icon: Fish, label: "Biodiversity Increase", value: "200+ species" },
            { icon: Users, label: "Volunteer Hours", value: "10,000+" },
            { icon: Droplet, label: "Water Quality Improvement", value: "40%" }
          ]}
        />
      </div>

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