"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import TeamCardThree from '@/components/sections/team/TeamCardThree';
import { Zap, Target, Briefcase, Mail, Linkedin, Twitter, Github } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="medium"
      background="animatedGrid"
      cardStyle="spotlight"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <style>{`
        body {
          font-family: var(--font-inter), sans-serif;
        }
        h1, h2, h3, h4, h5, h6 {
          font-family: var(--font-prata), serif;
        }
      `}</style>
      
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Joule VC"
          navItems={[
            { name: "About", id: "about" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Services", id: "services" },
            { name: "Contact", id: "contact" },
            { name: "Insights", id: "insights" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Fund the Future of Innovation"
          description="Joule VC partners with exceptional founders building the next generation of transformative companies across Israel and beyond."
          tag="Tel Aviv Based • Early to Series B"
          tagIcon={Zap}
          kpis={[
            { value: "$450M", label: "Assets Under Management" },
            { value: "32+", label: "Portfolio Companies" },
            { value: "3.2x", label: "Average Return Multiple" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767037322151-j7oipn1a.jpg"
          imageAlt="Joule VC office and team collaboration space"
          imagePosition="right"
          buttons={[
            { text: "Schedule LP Call", href: "#contact" },
            { text: "Submit Pitch Deck", href: "#contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitAbout
          title="Accelerating Innovation Since 2015"
          description="Founded in Tel Aviv's thriving tech ecosystem, Joule VC combines deep domain expertise with international market experience. We invest in founders who think globally and act decisively. Our thesis centers on infrastructure, fintech, and enterprise software—sectors where Israeli founders have demonstrated global dominance."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320178642-9c2nk7ji.jpg"
          imageAlt="Joule VC team collaboration"
          imagePosition="right"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Our Thesis", href: "#services" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwelve
          title="Investment Theses & Value-Add Services"
          description="We don't just provide capital. We provide strategic support across all functions."
          tag="Our Focus Areas"
          tagIcon={Target}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          features={[
            {
              id: "infrastructure",
              label: "Infrastructure",
              title: "Cloud, databases, security tools, and developer platforms",
              items: [
                "Pre-seed to Series B stage",
                "B2B SaaS focus",
                "Global expansion support",
                "Technical advisory network"
              ]
            },
            {
              id: "fintech",
              label: "FinTech",
              title: "Payments, lending, trading, and financial infrastructure",
              items: [
                "Regulatory expertise in Israel and EU",
                "Banking relationships established",
                "Compliance and licensing support",
                "Cross-border payment guidance"
              ]
            },
            {
              id: "enterprise",
              label: "Enterprise",
              title: "B2B software and SaaS platforms for enterprises",
              items: [
                "Sales and GTM strategy",
                "Customer success advisory",
                "Strategic partnership introductions",
                "International market entry"
              ]
            }
          ]}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <TeamCardThree
          title="Our Team"
          description="Meet the experienced investors and operators guiding our portfolio companies to success"
          tag="Leadership"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          members={[
            {
              id: "1",
              name: "David Rosenthal",
              role: "Managing Partner",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg",
              imageAlt: "David Rosenthal",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com/in/davidrosenthal" },
                { icon: Twitter, url: "https://twitter.com/davidrosenthal" }
              ]
            },
            {
              id: "2",
              name: "Sarah Chen",
              role: "Partner, FinTech",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766413573247-3ipcdlat.jpg",
              imageAlt: "Sarah Chen",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com/in/sarahchen" },
                { icon: Twitter, url: "https://twitter.com/sarahchen" }
              ]
            },
            {
              id: "3",
              name: "Yonatan Levy",
              role: "Partner, Infrastructure",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Yonatan Levy",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com/in/yonatan" },
                { icon: Github, url: "https://github.com/yonatan" }
              ]
            },
            {
              id: "4",
              name: "Miriam Avram",
              role: "Operations Lead",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767038925985-1lyf1u1j.jpg",
              imageAlt: "Miriam Avram",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com/in/miriavram" }
              ]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Investment Outcomes & Impact"
          description="Measurable success across our portfolio"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              title: "Cloudmesh",
              subtitle: "Infrastructure • Founded 2018 • Series B (2021)",
              category: "Acquired",
              value: "€240M"
            },
            {
              id: "2",
              title: "PayFlow",
              subtitle: "FinTech • Founded 2019 • Series A (2022)",
              category: "Active",
              value: "3.5x ARR Growth"
            },
            {
              id: "3",
              title: "DataVault",
              subtitle: "Enterprise • Founded 2020 • Seed (2021)",
              category: "Active",
              value: "$12M ARR"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Joule VC didn't just write a check—they opened doors. Their network and strategic guidance were instrumental in our Series B fundraise and European expansion."
          author="David Rosenberg, CEO of Cloudmesh"
          rating={5}
          useInvertedBackground="noInvert"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg", alt: "David Rosenberg" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg", alt: "Founder testimonial" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg", alt: "Founder testimonial" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767037324057-26x7c3ln.jpg", alt: "Founder testimonial" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Let's Talk About Your Vision"
          description="Whether you're a founder seeking capital and strategic support, or an institutional investor looking for exposure to Israeli innovation, we'd love to hear from you."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="your@email.com"
          buttonText="Start Conversation"
          termsText="We respect your privacy. Unsubscribe at any time. By submitting, you agree to be contacted regarding investment opportunities."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Joule VC"
        />
      </div>
    </ThemeProvider>
  );
}