"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import Link from "next/link";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Adopt", id: "/adopt" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
    { name: "Donate", id: "/donate" },
    { name: "Shop", id: "/shop" },
    { name: "Blog", id: "/blog" }
  ];

  const navButton = { text: "Donate", href: "/donate" };

  const footerColumns = [
    {
      title: "About Us",      items: [
        { label: "Our Mission", href: "/about" },
        { label: "Meet the Team", href: "/about" },
        { label: "Impact Report", href: "/about" }
      ]
    },
    {
      title: "Get Involved",      items: [
        { label: "Adopt a Pet", href: "/adopt" },
        { label: "Volunteer", href: "/contact" },
        { label: "Foster a Pet", href: "/contact" }
      ]
    },
    {
      title: "Resources",      items: [
        { label: "FAQs", href: "/contact" },
        { label: "Pet Care Tips", href: "/" },
        { label: "Contact Us", href: "/contact" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant={"hover-bubble"}
      defaultTextAnimation={"background-highlight"}
      borderRadius={"sharp"}
      contentWidth={"mediumSmall"}
      sizing={"largeSmall"}
      background={"aurora"}
      cardStyle={"subtle-shadow"}
      primaryButtonStyle={"inset-glow"}
      secondaryButtonStyle={"solid"}
      headingFontWeight={"light"}
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
      </div>

      <div id="about-us" data-section="about-us">
        <MediaSplitTabsAbout
          title="Our Story & Mission"
          description="At Hope Haven, we believe every animal deserves a loving, forever home. We're dedicated to rescuing, rehabiliting, and rehoming pets in need."
          tabs={[
            { id: "who-we-are", label: "Who We Are", description: "Hope Haven Animal Shelter is a non-profit organization founded on the principle of compassion and second chances. Our dedicated team works tirelessly to provide a safe haven for abandoned, neglected, and surrendered animals. We believe in transparency, integrity, and putting the well-being of our animals first." },
            { id: "our-values", label: "Our Values", description: "Our core values include compassion, respect, responsibility, and community. We treat every animal with the dignity they deserve, advocate for responsible pet ownership, and foster a supportive community of volunteers and adopters. These values guide every decision we make and every life we touch." },
            { id: "our-impact", label: "Our Impact", description: "Since our inception, Hope Haven has facilitated thousands of successful adoptions, provided critical medical care to countless animals, and educated the public on animal welfare. Our work extends beyond rehoming; we strive to create a healthier, more compassionate community for both pets and people." }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/portrait-woman-with-her-beautiful-dog_1157-36179.jpg"
          imageAlt="Team of volunteers caring for animals at the shelter"
          imagePosition="right"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          titleClassName="font-light"
        />
      </div>

      <div id="our-impact" data-section="our-impact">
        <MetricCardSeven
          title="Our Impact in Numbers"
          description="See how your support makes a real difference in the lives of countless animals."
          metrics={[
            { id: "1", value: "5,000+", title: "Pets Rehomed", items: ["Successfully placed in loving families", "Reduced shelter population"] },
            { id: "2", value: "2,500+", title: "Medical Procedures", items: ["Life-saving surgeries & treatments", "Routine check-ups & vaccinations"] },
            { id: "3", value: "10,000+", title: "Volunteer Hours", items: ["Dedicated individuals giving back", "Essential support for daily operations"] }
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Making a Difference"
          titleClassName="font-light"
          textBoxDescriptionClassName="font-light"
          metricTitleClassName="font-light"
        />
      </div>

      <div id="partners" data-section="partners">
        <SocialProofOne
          title="Our Valued Community Partners"
          description="We're grateful for the support of these organizations who help us make a difference."
          logos={[
            "https://img.b2bpic.net/free-vector/collection-colorful-pet-shop-stickers_23-2147569707.jpg",            "https://img.b2bpic.net/free-vector/veterinary-clinic-labels-collection_23-2149714004.jpg",            "https://img.b2bpic.net/free-psd/pets-template-design_23-2151517542.jpg",            "https://img.b2bpic.net/free-vector/veterinary-logo-collection_1346-55.jpg",            "https://img.b2bpic.net/free-vector/veterinary-clinic-logo-templates_23-2147536016.jpg",            "https://img.b2bpic.net/free-vector/vintage-cruelty-free-logo_23-2149452211.jpg",            "https://img.b2bpic.net/free-vector/logo-with-pet-design_1363-32.jpg"
          ]}
          speed={40}
          showCard={true}
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Partnerships"
          titleClassName="font-light"
          textBoxDescriptionClassName="font-light"
          logoTextClassName="font-light"
        />
      </div>

      <FooterBase
        columns={footerColumns}
        logoText="Hope Haven"
        copyrightText="© 2024 Hope Haven Animal Shelter. All rights reserved."
        useInvertedBackground={false}
      />
    </ThemeProvider>
  );
}