"use client";

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

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="outline"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      {/* Navigation */}
      <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>

      {/* Hero Section */}
      <div id="hero" data-section="hero">
        <HeroBillboardCarousel 
          background={{ variant: "sparkles-gradient" }}
          title="Invest in the Future of Technology"
          description="Partner with CapitalVenture to discover breakthrough innovations, scale your portfolio, and drive transformative returns through strategic tech investments."
          tag="Investment Opportunities"
          tagIcon={Zap}
          buttons={[
            { text: "Explore Opportunities", href: "/portfolio" },
            { text: "Schedule a Call", href: "/contact" }
          ]}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-sophisticated-investment-dashboard-int-1771523931142-aa728b12.png", imageAlt: "A sophisticated investment dashboard interface with data visualizations showing portfolio performanc" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-stunning-technology-startup-office-env-1771523937719-7076c61a.png", imageAlt: "A stunning technology startup office environment with modern architecture, open spaces, and collabor" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-high-tech-startup-presentation-or-pitc-1771523944765-ac5aaf9a.png", imageAlt: "A high-tech startup presentation or pitch meeting environment with executives discussing innovations" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/an-innovative-ai-or-software-development-1771523953980-197cbb61.png", imageAlt: "An innovative AI or software development lab with engineers working on computers, monitors showing c" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-fintech-company-office-with-financial--1771523960582-2110a925.png", imageAlt: "A fintech company office with financial professionals analyzing market data. Modern workspace with m" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-blockchain-or-cryptocurrency-innovatio-1771523971454-3ad211a3.png", imageAlt: "A blockchain or cryptocurrency innovation center with engineers working on distributed systems. Futu" }
          ]}
        />
      </div>

      {/* About Section */}
      <div id="about" data-section="about">
        <TestimonialAboutCard 
          tag="Our Mission"
          tagIcon={Target}
          title="We identify and nurture the most promising technology companies reshaping industries worldwide."
          description="CapitalVenture Partners"
          subdescription="Since 2015 - $2.3B+ Assets Under Management"
          icon={TrendingUp}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-professional-image-showing-investment--1771523978385-8a17a5a6.png"
          useInvertedBackground={true}
        />
      </div>

      {/* Portfolio Section */}
      <div id="portfolio" data-section="portfolio">
        <ProductCardOne 
          title="Featured Investments"
          description="Meet the innovative companies transforming technology and creating market-defining value across our diversified portfolio."
          tag="Portfolio Highlights"
          tagIcon={Briefcase}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          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-1771523993146-27603c95.png",
              imageAlt: "An artificial intelligence or machine learning platform visualization. Advanced technology interface"
            },
            {
              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-1771524002125-a4110a1d.png",
              imageAlt: "A fintech payment or banking solution interface. Modern financial technology platform with secure tr"
            },
            {
              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-1771523986569-5fb42b75.png",
              imageAlt: "A modern SaaS application interface with clean UI, showing customer engagement dashboard, metrics, a"
            }
          ]}
        />
      </div>

      {/* Metrics Section */}
      <div id="metrics" data-section="metrics">
        <MetricCardSeven 
          title="Proven Track Record"
          description="Our investment metrics demonstrate consistent success in identifying and scaling transformative tech companies."
          tag="Performance Metrics"
          tagIcon={BarChart3}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          metrics={[
            {
              id: "1",
              value: "87%",
              title: "Portfolio Companies with Successful Exits",
              items: ["Average 12.3x return on investment", "Successful IPOs and strategic acquisitions"]
            },
            {
              id: "2",
              value: "156+",
              title: "Companies Funded & Scaled",
              items: ["Across 15+ technology sectors", "Global presence spanning 45+ countries"]
            },
            {
              id: "3",
              value: "$2.3B",
              title: "Assets Under Management",
              items: ["Deployed across 8 active investment funds", "Continuous capital deployment strategy"]
            }
          ]}
        />
      </div>

      {/* Features Section */}
      <div id="features" data-section="features">
        <FeatureCardTwentyThree 
          title="Investment Services"
          description="Comprehensive investment solutions designed to help you navigate the technology landscape and build lasting value."
          tag="Our Expertise"
          tagIcon={Star}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: "1",
              title: "Seed to Scale Funding",
              tags: ["Early Stage", "Growth Capital"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-modern-saas-application-interface-with-1771523986569-5fb42b75.png",
              imageAlt: "A modern SaaS application interface with clean UI, showing customer engagement dashboard, metrics, a"
            },
            {
              id: "2",
              title: "Strategic Advisory & Operations",
              tags: ["Guidance", "Excellence"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-professional-image-showing-investment--1771523978385-8a17a5a6.png",
              imageAlt: "A professional image showing investment analysis and portfolio management process. Visual representa"
            },
            {
              id: "3",
              title: "Market Intelligence & Research",
              tags: ["Insights", "Data-Driven"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-sophisticated-investment-dashboard-int-1771523931142-aa728b12.png",
              imageAlt: "A sophisticated investment dashboard interface with data visualizations showing portfolio performanc"
            },
            {
              id: "4",
              title: "Network & Partnership Access",
              tags: ["Connections", "Opportunities"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-stunning-technology-startup-office-env-1771523937719-7076c61a.png",
              imageAlt: "A stunning technology startup office environment with modern architecture, open spaces, and collabor"
            }
          ]}
        />
      </div>

      {/* 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" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}