"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import SplitAbout from '@/components/sections/about/SplitAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { CheckCircle, TrendingUp, Zap } from 'lucide-react';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={[
            { name: "About", id: "/about" },
            { name: "Investment Focus", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Team", id: "/team" },
            { name: "FAQ", id: "/contact" }
          ]}
          brandName="PitchDrive"
          button={{ text: "Get in Touch", href: "/contact" }}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="Investment Focus Areas"
          description="We specialize in three key sectors where we have deep expertise and can provide maximum value to founders building transformative companies."
          tag="Our Expertise"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          features={[
            {
              id: "1",
              title: "Enterprise SaaS & Software",
              description: "Supporting B2B software companies solving critical business challenges. We focus on scalable platforms with strong unit economics and clear paths to market leadership.",
              media: { imageSrc: "https://img.b2bpic.net/free-photo/growth-status-technology-online-website-concept_53876-21396.jpg" },
              items: [
                { icon: CheckCircle, text: "Series A-C investments" },
                { icon: CheckCircle, text: "$10M+ ARR focus" },
                { icon: CheckCircle, text: "Global scaling support" },
                { icon: CheckCircle, text: "Go-to-market expertise" }
              ],
              reverse: false
            },
            {
              id: "2",
              title: "Fintech & Financial Innovation",
              description: "Backing founders reimagining financial services for the digital age. From payments to lending to wealth management, we support regulatory-compliant innovation.",
              media: { imageSrc: "https://img.b2bpic.net/free-photo/growth-status-technology-online-website-concept_53876-21396.jpg" },
              items: [
                { icon: CheckCircle, text: "Regulatory navigation" },
                { icon: CheckCircle, text: "Banking partnerships" },
                { icon: CheckCircle, text: "Compliance frameworks" },
                { icon: CheckCircle, text: "Risk management" }
              ],
              reverse: true
            },
            {
              id: "3",
              title: "DeepTech & Climate Solutions",
              description: "Investing in hard tech companies tackling climate change, energy, and advanced manufacturing. We support long development cycles with patient capital.",
              media: { imageSrc: "https://img.b2bpic.net/free-photo/growth-status-technology-online-website-concept_53876-21396.jpg" },
              items: [
                { icon: CheckCircle, text: "IP & patent support" },
                { icon: CheckCircle, text: "Research partnerships" },
                { icon: CheckCircle, text: "Technical validation" },
                { icon: CheckCircle, text: "Manufacturing scaling" }
              ],
              reverse: false
            }
          ]}
        />
      </div>

      <div id="approach" data-section="approach">
        <SplitAbout
          title="Our Investment Approach"
          description="We take a hands-on, founder-centric approach to investing. Beyond capital, we provide strategic guidance, operational support, and access to our extensive network."
          tag="How We Work"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          imagePosition="left"
          imageSrc="https://img.b2bpic.net/free-photo/group-creative-people-analyzing-result-work_329181-15495.jpg"
          imageAlt="Investment strategy discussion"
          bulletPoints={[
            {
              title: "Strategic Guidance",
              description: "Board-level involvement with strategic planning, market positioning, and competitive analysis to accelerate growth.",
              icon: TrendingUp
            },
            {
              title: "Operational Support",
              description: "Hands-on help with hiring, product development, sales processes, and operational scaling as companies grow.",
              icon: Zap
            },
            {
              title: "Network Access",
              description: "Introductions to customers, partners, talent, and follow-on investors across our extensive European network."
            }
          ]}
          buttons={[
            { text: "Start a Conversation", href: "/contact" }
          ]}
        />
      </div>

      <div id="investment-metrics" data-section="investment-metrics">
        <MetricCardTwo
          title="Investment Criteria"
          description="Our investment parameters and what we look for in potential portfolio companies."
          tag="Investment Details"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            { id: "1", value: "€500K-€3M", description: "Initial Investment Range" },
            { id: "2", value: "Series A-B", description: "Preferred Stage Focus" },
            { id: "3", value: "€1M+ ARR", description: "Minimum Revenue" },
            { id: "4", value: "24 months", description: "Average Hold Period" }
          ]}
        />
      </div>

      <FooterMedia
        imageSrc="https://img.b2bpic.net/free-photo/cityscape-frankfurt-downtown-germany_1268-20913.jpg"
        imageAlt="Antwerp skyline"
        logoText="PitchDrive"
        copyrightText="© 2025 PitchDrive VC. All rights reserved."
        columns={[
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Our Team", href: "/team" },
              { label: "Portfolio", href: "/portfolio" }
            ]
          },
          {
            title: "Investors",
            items: [
              { label: "Investment Focus", href: "/services" },
              { label: "How We Work", href: "/about" },
              { label: "FAQ", href: "/contact" }
            ]
          },
          {
            title: "Connect",
            items: [
              { label: "Get in Touch", href: "/contact" },
              { label: "Email Us", href: "mailto:team@pitchdrive.com" },
              { label: "LinkedIn", href: "https://linkedin.com" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}