"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import TagMediaSplitAbout from '@/components/sections/about/TagMediaSplitAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardFive from '@/components/sections/metrics/MetricCardFive';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Zap, Sparkles, Target, Mail, Phone, MapPin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumSizeExtraSmallSpacing"
      background="noise"
      cardStyle="shadow-colored"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Joule Ventures"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Start a Conversation", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Ignite Your Venture's Potential"
          description="Partner with Joule Ventures to fuel your innovation and scale your impact. We combine strategic capital with hands-on expertise to help visionary founders build tomorrow's industry leaders."
          tag="Venture Capital Excellence"
          tagIcon={Zap}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184700299-5zkwi6rw.jpg"
          imageAlt="Joule Ventures investment dashboard"
          buttons={[
            { text: "Get Started", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TagMediaSplitAbout
          variant="border"
          title="About Joule Ventures"
          description="We are committed to identifying and supporting exceptional founders who are reshaping industries through innovation and determination."
          textboxLayout="default"
          contentTag="OUR MISSION"
          contentTagIcon={Sparkles}
          contentTitle="Powering the Next Generation of Leaders"
          contentDescription="At Joule Ventures, we believe in the power of visionary entrepreneurs. We provide more than capital - we offer strategic guidance, industry connections, and operational expertise. Our deep networks and experience across technology, life sciences, and enterprise solutions enable us to unlock the full potential of transformative companies."
          contentButtons={[{ text: "Explore Our Portfolio", href: "services" }]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320176222-gp5rxgv7.jpg"
          imageAlt="Joule Ventures team collaboration"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyOne
          title="What We Offer"
          description="Comprehensive investment and advisory services tailored to accelerate your growth and maximize your potential."
          tag="Investment Focus"
          tagIcon={Target}
          accordionItems={[
            {
              id: "1",
              title: "Early Stage Capital",
              content: "Seed and Series A funding for innovative startups with exceptional founding teams and market-changing ideas. We provide strategic capital coupled with mentorship to help you navigate critical growth phases."
            },
            {
              id: "2",
              title: "Growth & Scale Investments",
              content: "Series B and beyond capital for proven business models. We help rapidly scaling companies optimize operations, expand markets, and achieve sustainable profitability."
            },
            {
              id: "3",
              title: "Strategic Advisory Services",
              content: "Access to our network of industry experts, operational advisors, and go-to-market specialists. We partner with your team on critical challenges from hiring to fundraising strategy."
            },
            {
              id: "4",
              title: "Industry Expertise",
              content: "Deep specialization in Technology, Life Sciences, and Enterprise Solutions. Our partners have built and scaled multiple billion-dollar companies."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320177542-9om9tyxf.jpg"
          imageAlt="Joule Ventures innovation and growth services"
          useInvertedBackground="noInvert"
          mediaPosition="left"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFive
          title="Our Impact by Numbers"
          description="Proven track record of identifying and nurturing exceptional companies that reshape their industries."
          textboxLayout="default"
          animationType="slide-up"
          variant="border"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",
              value: "$500M+",
              description: "Total capital deployed across our portfolio of forward-thinking companies"
            },
            {
              id: "2",
              value: "75+",
              description: "Portfolio companies backed since inception"
            },
            {
              id: "3",
              value: "12",
              description: "Unicorn exits and industry-leading outcomes"
            },
            {
              id: "4",
              value: "95%",
              description: "Portfolio company survival rate through market cycles"
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet the Joule Team"
          description="Experienced investors and operators dedicated to supporting your success"
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          containerStyle="default"
          useInvertedBackground="noInvert"
          members={[
            {
              id: "1",
              name: "Sarah Chen",
              role: "Managing Partner",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320178642-9c2nk7ji.jpg",
              imageAlt: "Sarah Chen, Managing Partner"
            },
            {
              id: "2",
              name: "Marcus Williams",
              role: "Partner, Operations",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140098536-9jc7ywck.jpg",
              imageAlt: "Marcus Williams, Partner"
            },
            {
              id: "3",
              name: "Elena Rodriguez",
              role: "Director, Tech Investments",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320179601-o8gildtx.jpg",
              imageAlt: "Elena Rodriguez, Director"
            },
            {
              id: "4",
              name: "James Park",
              role: "Life Sciences Lead",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320180372-2wqsfes9.jpg",
              imageAlt: "James Park, Life Sciences Lead"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="What Founders Say"
          description="Success stories from the exceptional entrepreneurs we've partnered with"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Priya Kapoor",
              role: "CEO & Founder",
              company: "CloudScale AI",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Priya Kapoor, CloudScale AI"
            },
            {
              id: "2",
              name: "David Thompson",
              role: "Co-founder",
              company: "BioVenture Labs",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              imageAlt: "David Thompson, BioVenture Labs"
            },
            {
              id: "3",
              name: "Lisa Chang",
              role: "CEO",
              company: "EnterpriseSync",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184724760-wxlm9bjg.jpg",
              imageAlt: "Lisa Chang, EnterpriseSync"
            },
            {
              id: "4",
              name: "Akshay Patel",
              role: "Founder",
              company: "DataFlow Systems",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320181151-p24uxfcb.jpg",
              imageAlt: "Akshay Patel, DataFlow Systems"
            },
            {
              id: "5",
              name: "Emma Johnson",
              role: "CEO & Founder",
              company: "HealthTech Innovations",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185880597-ieb2jad3.jpg",
              imageAlt: "Emma Johnson, HealthTech Innovations"
            },
            {
              id: "6",
              name: "Michael Torres",
              role: "Founder",
              company: "QuantumLeap Analytics",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320182335-xfdwqhnh.jpg",
              imageAlt: "Michael Torres, QuantumLeap Analytics"
            }
          ]}
        />
      </div>

      <div id="partners" data-section="partners">
        <SocialProofOne
          title="Trusted by Industry Leaders"
          description="We partner with exceptional companies and entrepreneurs shaping the future"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          speed={40}
          showCard={true}
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320183453-gvvb1k8b.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140103339-f3be0gdh.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710532-7ogxrwbm.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320184384-whnns6as.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184200876-idjoemdc.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320185368-un006460.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320186466-w5b0umam.jpg"
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline
          text="Ready to Transform Your Vision into Reality?"
          animationType="entrance-slide"
          inputPlaceholder="Enter your email to connect"
          buttonText="Send"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="Joule Ventures"
          title="Fueling the Future of Innovation"
          columns={[
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Team", href: "#team" },
                { label: "Portfolio", href: "#services" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Pitch Deck Checklist", href: "#" },
                { label: "Investment Guide", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Compliance", href: "#" }
              ]
            }
          ]}
          contactItems={[
            { icon: Mail, text: "hello@joulevertures.com" },
            { icon: Phone, text: "+1 (555) 123-4567" },
            { icon: MapPin, text: "San Francisco, CA" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}