"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Heart, Users, Shield, TrendingUp } from 'lucide-react';

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "About", id: "/about" },
    { name: "Animals", id: "/animals" },
    { name: "Visit", id: "/visit" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="Happy Three Friends"
          button={{
            text: "Buy Tickets",
            href: "https://happythreefriends-tickets.example.com"
          }}
        />
      </div>

      <div id="about-story" data-section="about-story">
        <MediaAbout
          title="Our Conservation Mission"
          description="Happy Three Friends Zoo stands as a beacon of hope for wildlife conservation. Since 1993, we have been committed to protecting endangered species, advancing scientific research, and educating the next generation of conservationists through immersive experiences that connect people with nature."
          tag="Conservation Leadership"
          tagIcon={Heart}
          imageSrc="https://img.b2bpic.net/free-photo/deer-eating-nature_1161-251.jpg"
          imageAlt="Wildlife conservation efforts at Happy Three Friends Zoo"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Support Conservation", href: "/conservation/donate" }
          ]}
        />
      </div>

      <div id="values" data-section="values">
        <MediaAbout
          title="Our Core Values"
          description="Every decision we make is guided by our commitment to animal welfare, environmental stewardship, and educational excellence. We believe that by inspiring wonder and respect for wildlife, we can create a future where humans and animals thrive together in harmony."
          tag="Our Values"
          tagIcon={Shield}
          imageSrc="https://img.b2bpic.net/free-photo/little-girl-feeds-deer-zoo_169016-24994.jpg"
          imageAlt="Educational programs at Happy Three Friends Zoo"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Learn More", href: "/about/mission" }
          ]}
        />
      </div>

      <div id="impact-metrics" data-section="impact-metrics">
        <MetricCardSeven
          title="Our Global Impact"
          description="Through partnerships, research, and conservation programs, we're making a difference for wildlife around the world."
          tag="Conservation Impact"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",
              value: "$50M",
              title: "Invested in Global Conservation",
              items: [
                "Habitat restoration projects worldwide",
                "Anti-poaching initiative funding",
                "Research grants to conservation scientists"
              ]
            },
            {
              id: "2",
              value: "25",
              title: "Species Saved from Extinction",
              items: [
                "Successful breeding programs",
                "Habitat protection initiatives",
                "Wildlife rehabilitation efforts"
              ]
            },
            {
              id: "3",
              value: "100+",
              title: "Conservation Partnerships",
              items: [
                "International wildlife organizations",
                "Local community programs",
                "Scientific research institutions"
              ]
            }
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/landscape-forest-covered-greenery-with-pelicans-standing-ground-sunlight_181624-16435.jpg"
          imageAlt="Happy Three Friends Zoo wildlife habitats"
          logoText="Happy Three Friends Zoo"
          copyrightText="© 2025 Happy Three Friends Zoo. All rights reserved. Protecting wildlife for future generations."
          columns={[
            {
              title: "Visit",
              items: [
                { label: "Hours & Admission", href: "/visit/hours" },
                { label: "Plan Your Visit", href: "/visit/planning" },
                { label: "Directions", href: "/visit/directions" },
                { label: "Facilities", href: "/visit/facilities" }
              ]
            },
            {
              title: "Animals",
              items: [
                { label: "Animal Directory", href: "/animals/directory" },
                { label: "Conservation", href: "/animals/conservation" },
                { label: "Behind the Scenes", href: "/animals/behind-scenes" },
                { label: "Wildlife Facts", href: "/animals/facts" }
              ]
            },
            {
              title: "About",
              items: [
                { label: "Our Mission", href: "/about/mission" },
                { label: "Team", href: "/about/team" },
                { label: "Careers", href: "/about/careers" },
                { label: "Contact Us", href: "/contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}