"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sprout, MapPin, Heart, Zap, Microscope, Waves, TreePine } from 'lucide-react';

export default function OurWorkPage() {
  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="work-process" data-section="work-process">
        <FeatureCardSeven
          title="Complete Kelp Restoration Process"
          description="From spore collection to mature forest monitoring, our comprehensive approach ensures successful ecosystem restoration at every stage of the kelp lifecycle."
          tag="Deep Dive"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Spore Collection & Laboratory Cultivation",
              description: "We collect viable kelp spores from healthy donor sites and cultivate them in controlled laboratory conditions. Our sterile tank systems provide optimal temperature, nutrients, and lighting for maximum growth rates.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qd34e1"
            },
            {
              id: 2,
              title: "Field Deployment & Ocean Transplantation",
              description: "Mature juveniles are carefully transported to degraded sites where our trained dive teams attach them to rocky substrates. We use specialized techniques developed with marine biology partners to ensure high survival rates.",
              imageSrc: "https://img.b2bpic.net/free-photo/wide-underwater-shot-green-brown-coral-reefs_181624-1317.jpg"
            },
            {
              id: 3,
              title: "Long-term Monitoring & Data Collection",
              description: "We conduct quarterly surveys of all restoration sites, measuring kelp density, species diversity, water quality, and ecosystem health indicators. This data guides our continuous improvement efforts and informs the broader scientific community.",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-scientist-analysing-health-informations-tablet-while-specialist-sport-supervises-exercise-sportsman-monitoring-his-physical-endurance-examining-medical-scan-notepad-laboratory_482257-13199.jpg"
            }
          ]}
        />
      </div>

      <div id="impact-metrics" data-section="impact-metrics">
        <MetricCardThree
          title="Measurable Impact Across San Diego's Coast"
          description="Our data-driven approach allows us to track success and continuously improve restoration techniques for maximum ecosystem benefit."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          metrics={[
            { id: "1", icon: Sprout, title: "Kelp Juveniles Cultivated", value: "25,000+" },
            { id: "2", icon: Microscope, title: "Research Publications", value: "8 papers" },
            { id: "3", icon: Waves, title: "Restoration Sites", value: "12 active" },
            { id: "4", icon: TreePine, title: "Forest Recovery", value: "85% success" }
          ]}
        />
      </div>

      <div id="technical-approach" data-section="technical-approach">
        <MetricCardThree
          title="Scientific Innovation & Community Partnership"
          description="Combining cutting-edge marine science with grassroots community engagement for sustainable ocean restoration that lasts."
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          metrics={[
            { id: "1", icon: MapPin, title: "Monitoring Stations", value: "20 active" },
            { id: "2", icon: Heart, title: "Community Events", value: "50+ yearly" },
            { id: "3", icon: Zap, title: "Volunteer Training Hours", value: "2,000+" },
            { id: "4", icon: Sprout, title: "Educational Outreach", value: "5,000+ students" }
          ]}
        />
      </div>

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