"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Lightbulb, Rocket, Network, Brain, Shield, Globe, Award, BarChart3 } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          brandName="PitchDrive"
          navItems={[
            { name: "About", id: "/about" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Team", id: "/team" },
            { name: "Insights", id: "/insights" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureHoverPattern
          title="Why Partner With PitchDrive"
          description="Strategic support and capital for European tech innovators"
          tag="Our Approach"
          tagIcon={Lightbulb}
          features={[
            {
              icon: Rocket,
              title: "Accelerated Growth",
              description: "Strategic mentorship and operational support to scale rapidly in European markets"
            },
            {
              icon: Network,
              title: "Ecosystem Access",
              description: "Connect with our portfolio of 50+ complementary startups and enterprise partners"
            },
            {
              icon: Brain,
              title: "Expert Guidance",
              description: "Leverage decades of combined venture capital and startup founding experience"
            },
            {
              icon: Shield,
              title: "Patient Capital",
              description: "7-10 year investment horizons aligned with long-term company value creation"
            },
            {
              icon: Globe,
              title: "European Reach",
              description: "Deep networks across Belgium, Netherlands, and broader EU tech ecosystems"
            },
            {
              icon: Award,
              title: "Track Record",
              description: "3 exits averaging 8x returns, multiple portfolio companies valued at €100M+"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More", href: "/team" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Portfolio Impact"
          description="Measurable results from our investments"
          tag="Track Record"
          tagIcon={BarChart3}
          metrics={[
            { id: "1", value: "$240M+", description: "Capital Deployed" },
            { id: "2", value: "52", description: "Portfolio Companies" },
            { id: "3", value: "8.2x", description: "Average MOIC" },
            { id: "4", value: "15", description: "Active Exits" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <FooterLogoReveal logoText="PitchDrive" />
    </ThemeProvider>
  );
}