"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Briefcase, Star, BarChart3 } from "lucide-react";

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="outline"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Start Investing", href: "/contact" }}
          brandName="CapitalVenture"
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardOne
          title="Our Portfolio Companies"
          description="Discover the breakthrough technologies and innovative companies that define our investment strategy. Each represents a transformative solution addressing critical market needs."
          tag="Investment Portfolio"
          tagIcon={Briefcase}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: "1",
              name: "CloudScale AI",
              price: "$450M Valuation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/an-artificial-intelligence-or-machine-le-1771526817745-a8b97e8e.png?_wi=3",
              imageAlt: "An artificial intelligence or machine learning platform visualization"
            },
            {
              id: "2",
              name: "FinFlow Systems",
              price: "$320M Valuation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-fintech-payment-or-banking-solution-in-1771526825189-dc876f12.png?_wi=3",
              imageAlt: "A fintech payment or banking solution interface"
            },
            {
              id: "3",
              name: "DataVault Pro",
              price: "$280M Valuation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-modern-saas-application-interface-with-1771526810234-3aadfe79.png?_wi=4",
              imageAlt: "A modern SaaS application interface with clean UI"
            },
            {
              id: "4",
              name: "NetSecure Solutions",
              price: "$380M Valuation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-high-tech-startup-presentation-or-pitc-1771526769515-60425436.png?_wi=3",
              imageAlt: "A high-tech startup presentation environment"
            },
            {
              id: "5",
              name: "BioTech Innovations",
              price: "$520M Valuation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/an-innovative-ai-or-software-development-1771526777686-fe69d8ac.png?_wi=2",
              imageAlt: "An innovative AI or software development lab"
            },
            {
              id: "6",
              name: "EdgeCompute Labs",
              price: "$290M Valuation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-blockchain-or-cryptocurrency-innovatio-1771526792006-b64556ca.png?_wi=2",
              imageAlt: "A blockchain or cryptocurrency innovation center"
            }
          ]}
        />
      </div>

      <div id="sectors" data-section="sectors">
        <FeatureCardTwentyThree
          title="Investment Sectors"
          description="We focus on transformative technology sectors where innovation drives significant market disruption and sustainable competitive advantages."
          tag="Focus Areas"
          tagIcon={Star}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          features={[
            {
              id: "1",
              title: "Artificial Intelligence & Machine Learning",
              tags: ["AI/ML", "Deep Tech"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/an-artificial-intelligence-or-machine-le-1771526817745-a8b97e8e.png?_wi=4",
              imageAlt: "AI and machine learning platform visualization"
            },
            {
              id: "2",
              title: "Financial Technology & Payments",
              tags: ["FinTech", "Payments"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-fintech-payment-or-banking-solution-in-1771526825189-dc876f12.png?_wi=4",
              imageAlt: "Fintech payment platform interface"
            },
            {
              id: "3",
              title: "Enterprise Software & SaaS",
              tags: ["SaaS", "Enterprise"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-modern-saas-application-interface-with-1771526810234-3aadfe79.png?_wi=5",
              imageAlt: "Enterprise SaaS platform dashboard"
            },
            {
              id: "4",
              title: "Cybersecurity & Data Protection",
              tags: ["Security", "Data"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-high-tech-startup-presentation-or-pitc-1771526769515-60425436.png?_wi=4",
              imageAlt: "Cybersecurity technology presentation"
            }
          ]}
        />
      </div>

      <div id="performance" data-section="performance">
        <MetricCardSeven
          title="Portfolio Performance"
          description="Our portfolio companies consistently outperform market benchmarks, delivering exceptional returns through strategic value creation and operational excellence."
          tag="Results"
          tagIcon={BarChart3}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",
              value: "32x",
              title: "Average Return Multiple",
              items: ["Top quartile performance", "Consistent value creation across portfolio"]
            },
            {
              id: "2",
              value: "85%",
              title: "Successful Exit Rate",
              items: ["IPOs and strategic acquisitions", "Strong founder relationships maintained"]
            },
            {
              id: "3",
              value: "4.2 years",
              title: "Average Time to Exit",
              items: ["Accelerated growth trajectories", "Market-leading positions achieved"]
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="CapitalVenture"
          copyrightText="© 2025 CapitalVenture Partners. All rights reserved."
          columns={[
            {
              title: "Company",
              items: [
                { label: "Home", href: "/" },
                { label: "About Us", href: "/about" },
                { label: "Our Portfolio", href: "/portfolio" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Investment Process", href: "#" },
                { label: "Market Insights", href: "#" },
                { label: "News & Updates", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "SEC Disclosures", href: "#" },
                { label: "Contact Us", href: "/contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}