"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sprout, Leaf, Fish, Users, Droplet, MapPin, Heart, Zap } from 'lucide-react';

export default function HomePage() {
  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="hero" data-section="hero">
        <HeroBillboardGallery
          title="Restoring Life to Our Oceans"
          description="The Blue Forest Project grows giant kelp to restore struggling kelp forests along the San Diego coast. Join our student-led mission to bring this vital ecosystem back to life."
          background={{ variant: "radial-gradient" }}
          tag="Student-Led Conservation"
          tagIcon={Sprout}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780539291-zee4kc9e.jpg", imageAlt: "Thriving kelp forest underwater" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qd34e1", imageAlt: "Kelp seedlings in cultivation tanks" },
            { imageSrc: "https://img.b2bpic.net/free-photo/wide-underwater-shot-green-brown-coral-reefs_181624-1317.jpg", imageAlt: "Divers planting kelp in ocean" },
            { 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", imageAlt: "Marine researchers monitoring kelp forest" },
            { imageSrc: "https://img.b2bpic.net/free-photo/beautiful-venice-beach-area-los-angeles_181624-48124.jpg", imageAlt: "Beautiful San Diego coastline" }
          ]}
          buttons={[
            { text: "Volunteer Now", href: "/contact" },
            { text: "Donate to the Mission", href: "/contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Why Kelp Matters: Supporting San Diego's Most Critical Marine Ecosystem"
          useInvertedBackground="invertDefault"
          metrics={[
            { icon: Leaf, label: "Kelp Forest Coverage", value: "30+ acres" },
            { icon: Fish, label: "Species Protected", value: "200+ species" },
            { icon: Users, label: "Active Volunteers", value: "120+ students" },
            { icon: Droplet, label: "Carbon Sequestered", value: "500+ tons/yr" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="Our Three-Pillar Approach to Kelp Restoration"
          description="We combine tank cultivation, professional restoration support, and ongoing forest monitoring to create a complete kelp ecosystem recovery program."
          tag="Our Mission"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Tank Cultivation Program",
              description: "We grow giant kelp seedlings from spores in our specialized tanks, creating healthy juveniles ready for ocean restoration. Our student lab team maintains optimal growing conditions year-round.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qd34e1"
            },
            {
              id: 2,
              title: "Professional Restoration Support",
              description: "Our cultivated kelp is deployed by restoration partners to replant degraded areas. We collaborate with marine scientists to ensure successful transplantation and ecosystem recovery.",
              imageSrc: "https://img.b2bpic.net/free-photo/wide-underwater-shot-green-brown-coral-reefs_181624-1317.jpg"
            },
            {
              id: 3,
              title: "Forest Monitoring & Research",
              description: "We monitor restored and native kelp forests across the San Diego coast, collecting data on growth, biodiversity, and ecosystem health. Our findings guide future restoration efforts.",
              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="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Impact by the Numbers"
          description="Measuring success through growth, engagement, and ecosystem recovery."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          metrics={[
            { id: "1", icon: Sprout, title: "Kelp Grown", value: "15,000+" },
            { id: "2", icon: MapPin, title: "Sites Monitored", value: "8 locations" },
            { id: "3", icon: Heart, title: "Ecosystem Health Score", value: "+45%" },
            { id: "4", icon: Zap, title: "Project Years Active", value: "5+ years" }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Student Leadership Team"
          description="Passionate young scientists and conservationists driving ocean restoration in San Diego."
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          gridVariant="three-columns-all-equal-width"
          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" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="The Blue Forest Project represents the future of ocean conservation. These young leaders are doing cutting-edge restoration work while inspiring the next generation of marine scientists. Their dedication is exceptional."
          rating={5}
          author="Dr. Patricia Holloway, Marine Biologist, UC San Diego"
          useInvertedBackground="invertDefault"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg", alt: "Team member avatar 1" },
            { src: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg", alt: "Team member avatar 2" },
            { src: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg", alt: "Team member avatar 3" },
            { src: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg", alt: "Team member avatar 4" },
            { src: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg", alt: "Team member avatar 5" },
            { src: "https://img.b2bpic.net/free-photo/colleagues-taking-selfie-together-group-study_23-2149211091.jpg", alt: "Team member avatar 6" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get Involved in Ocean Restoration"
          description="Whether you want to volunteer, donate, or learn more about our mission, we'd love to hear from you. Join us in restoring San Diego's kelp forests."
          inputs={[
            { name: "name", type: "text", placeholder: "Your name", required: true },
            { name: "email", type: "email", placeholder: "Your email", required: true },
            { name: "interest", type: "text", placeholder: "Volunteer, Donate, or Learn More?", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about yourself and how you'd like to help...",
            rows: 5,
            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 the Mission"
        />
      </div>

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