"use client";

import Link from "next/link";
import { Users, Linkedin, Twitter, Mail } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Nona"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Services", id: "/services" },
            { name: "Testimonials", id: "/testimonials" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="about-hero" data-section="about-hero">
        <MediaAbout
          title="Our Investment Philosophy"
          description="Nona was founded on the principle that exceptional investment returns stem from meticulous research, disciplined strategy, and unwavering commitment to client success. We believe in transparency, integrity, and the power of long-term wealth building."
          tag="Company Story"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dgvct5"
          imageAlt="Nona investment team collaborating"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Meet the Leadership", href: "/services" }
          ]}
        />
      </div>

      <div id="values" data-section="values">
        <MediaAbout
          title="Values That Drive Excellence"
          description="Our core values of transparency, integrity, and client-first service have guided our success for over two decades. We measure our success by your financial growth and peace of mind."
          tag="Our Values"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=extepm"
          imageAlt="Our values and principles"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Start Your Journey", href: "/contact" }
          ]}
        />
      </div>

      <div id="history" data-section="history">
        <MediaAbout
          title="Two Decades of Excellence"
          description="Since our founding, Nona has consistently delivered superior investment performance through market cycles, economic uncertainty, and changing global conditions. Our track record speaks to our expertise and commitment."
          tag="Our History"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yrzbo0"
          imageAlt="Our company history"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View Our Services", href: "/services" }
          ]}
        />
      </div>

      <FooterBase
        logoText="Nona"
        copyrightText="© 2025 Nona Investment Agency. All rights reserved."
        columns={[
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Services", href: "/services" },
              { label: "Testimonials", href: "/testimonials" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Resources",
            items: [
              { label: "Investment Guide", href: "#" },
              { label: "Market Insights", href: "#" },
              { label: "FAQs", href: "#" },
              { label: "Blog", href: "#" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Privacy Policy", href: "#" },
              { label: "Terms of Service", href: "#" },
              { label: "Disclosures", href: "#" },
              { label: "Regulatory", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}