"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TextAbout from '@/components/sections/about/TextAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="InProduce"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Get Started", href: "/contact" }}
        />
      </div>

      <div id="about-story" data-section="about-story">
        <TextAbout
          title="Founded in 2015, InProduce emerged from a vision to democratize agricultural investment and connect forward-thinking investors with London's vibrant produce market. We believe that sustainable agricultural growth and transparent, data-driven returns should be accessible to all serious investors."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Our Investment Approach", href: "/features" },
            { text: "Start Your Journey", href: "/pricing" }
          ]}
        />
      </div>

      <div id="company-metrics" data-section="company-metrics">
        <MetricCardEleven
          title="Our Growth Story"
          description="From a small team with big ambitions to London's leading produce investment platform, our journey reflects our commitment to innovation and excellence."
          tag="Company Milestones"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              value: "10+",
              title: "Years of Experience",
              description: "Decade of expertise in agricultural investment markets",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-employees-looking-business-document_1098-1850.jpg"
            },
            {
              id: "2",
              value: "£2.3B+", 
              title: "Assets Under Management",
              description: "Growing portfolio trusted by institutional investors",
              imageSrc: "https://img.b2bpic.net/free-photo/busineswoman-holding-digital-tablet-with-data_1098-1906.jpg"
            }
          ]}
        />
      </div>

      <div id="company-values" data-section="company-values">
        <TextAbout
          title="Our mission is to revolutionize agricultural investment through innovative technology, rigorous due diligence, and unwavering commitment to transparency. We partner with London's finest produce suppliers to deliver consistent, sustainable returns while supporting the future of food security."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View Investment Opportunities", href: "/pricing" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="InProduce"
          copyrightText="© 2025 InProduce Investment Platform. All rights reserved."
          columns={[
            {
              title: "Platform",
              items: [
                { label: "Dashboard", href: "/dashboard" },
                { label: "Opportunities", href: "/opportunities" },
                { label: "Pricing", href: "/pricing" },
                { label: "Performance", href: "/performance" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Team", href: "/team" },
                { label: "Blog", href: "/blog" },
                { label: "Careers", href: "/careers" }
              ]
            },
            {
              title: "Investors", 
              items: [
                { label: "Get Started", href: "/start" },
                { label: "Resources", href: "/resources" },
                { label: "FAQ", href: "/faq" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms & Conditions", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" },
                { label: "Regulatory Info", href: "/regulatory" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}