"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { AlertCircle, Brain, Eye, Layout, Radio, Search, Star, TrendingUp, Twitter, Linkedin, Mail, User, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLarge"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "How It Works", id: "how-it-works" },
            { name: "Features", id: "features" },
            { name: "Why Latents", id: "comparison" },
            { name: "Get Started", id: "signup" }
          ]}
          brandName="Latents"
          bottomLeftText="AI-Powered Discovery"
          bottomRightText="hello@latents.ai"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Opportunity is Never a Luck Game Again"
          description="An AI agent that auto-discovers every relevant update for you, delivers it in one visual feed, and lets you take action on the spot. Never miss a funding round, accelerator batch, or industry shift again."
          tag="The Future of Discovery"
          tagIcon={Zap}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/a-stunning-full-screen-mockup-of-the-lat-1772485811782-b18bc0e5.png"
          imageAlt="Latents AI Feed Dashboard"
          buttons={[
            { text: "Start Free", onClick: () => document.getElementById('signup')?.scrollIntoView({ behavior: 'smooth' }) },
            { text: "See How It Works", href: "how-it-works" }
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Hero section - Latents AI Discovery"
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <FeatureCardTwentyFive
          features={[
            {
              title: "Pick Your Persona",              description: "Select Tech Founder, AI Researcher, Student, Author, Investor, or take a 25-second quiz. Instant personalization in under 60 seconds.",              icon: User,
              mediaItems: [
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/a-clean-onboarding-screen-showing-person-1772485810817-f4d859af.png",                  imageAlt: "Persona selection interface"
                },
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/a-clean-onboarding-screen-showing-person-1772485810817-f4d859af.png",                  imageAlt: "Quiz interface"
                }
              ]
            },
            {
              title: "Auto-Subscribe to ~20 Sources",              description: "AI instantly bootstraps your entire feed with newsletters, Twitter/X handles, YouTube channels, blogs, funding databases, Substack writers, and Reddit threads.",              icon: Radio,
              mediaItems: [
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/icon-representing-multiple-content-sourc-1772485811341-ba0c756e.png",                  imageAlt: "Multiple content sources"
                },
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/icon-representing-multiple-content-sourc-1772485811341-ba0c756e.png",                  imageAlt: "Content aggregation"
                }
              ]
            },
            {
              title: "Get Your Unified Feed",              description: "One visual interface showing articles, tweets, YouTube videos (watchable inline), and newsletters. No switching tabs. No 10 different apps.",              icon: Layout,
              mediaItems: [
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/visual-representation-of-the-three-bucke-1772485811219-317e0765.png",                  imageAlt: "Three-bucket content system"
                },
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/a-sleek-ai-agent-dashboard-interface-sho-1772485810798-c6620cfc.png",                  imageAlt: "Unified feed interface"
                }
              ]
            },
            {
              title: "Search & Chat Your Way",              description: "'Show me AI funding rounds' or 'What's happening with OpenAI today?' Get context-aware answers from your personalized feed and the web.",              icon: Search,
              mediaItems: [
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/an-elegant-search-and-chatbot-interface--1772485812027-4134324a.png",                  imageAlt: "Search and chatbot interface"
                },
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/an-elegant-search-and-chatbot-interface--1772485812027-4134324a.png",                  imageAlt: "Natural language queries"
                }
              ]
            },
            {
              title: "Take Action Directly",              description: "See a funding round? Apply from the feed. Find an accelerator? Agent drafts the email. Spot an opportunity? Agent handles the follow-through.",              icon: Zap,
              mediaItems: [
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/a-screenshot-showing-the-action-layer-in-1772485811847-77d4190d.png",                  imageAlt: "Action layer in motion"
                },
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/a-screenshot-showing-the-action-layer-in-1772485811847-77d4190d.png",                  imageAlt: "Email and WhatsApp integration"
                }
              ]
            },
            {
              title: "AI Learns & Improves",              description: "The agent gets smarter with every interaction. Duplicates are removed. Noise is filtered out. Your feed becomes more relevant over time.",              icon: Brain,
              mediaItems: [
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/icon-representing-ai-personalization-and-1772485810173-e29ed16e.png",                  imageAlt: "AI personalization"
                },
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/icon-representing-ai-personalization-and-1772485810173-e29ed16e.png",                  imageAlt: "Machine learning optimization"
                }
              ]
            }
          ]}
          animationType="depth-3d"
          title="How It Works"
          description="A seamless 5-step process that takes you from setup to action in minutes"
          tag="The Engine"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Get Started Today", onClick: () => document.getElementById('signup')?.scrollIntoView({ behavior: 'smooth' }) }
          ]}
          buttonAnimation="slide-up"
          ariaLabel="How it works section"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFive
          features={[
            {
              title: "🔴 Ground Breakers",              description: "Urgent, high-impact updates that need your attention now. Funding announcements, major pivots, industry shifts—everything that moves the needle.",              icon: AlertCircle,
              mediaItems: [
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/visual-representation-of-the-three-bucke-1772485811219-317e0765.png",                  imageAlt: "Ground Breakers bucket"
                },
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/visual-representation-of-the-three-bucke-1772485811219-317e0765.png",                  imageAlt: "Urgent alerts"
                }
              ]
            },
            {
              title: "🟡 Plus Ones",              description: "Valuable context and good-to-know updates. Market trends, competitor moves, emerging opportunities that provide useful context.",              icon: Star,
              mediaItems: [
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/visual-representation-of-the-three-bucke-1772485811219-317e0765.png",                  imageAlt: "Plus Ones bucket"
                },
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/visual-representation-of-the-three-bucke-1772485811219-317e0765.png",                  imageAlt: "Contextual updates"
                }
              ]
            },
            {
              title: "🔵 Long Shots",              description: "Long-term signals and early indicators. Keep them on your radar. These are the early warnings that become tomorrow's opportunities.",              icon: TrendingUp,
              mediaItems: [
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/visual-representation-of-the-three-bucke-1772485811219-317e0765.png",                  imageAlt: "Long Shots bucket"
                },
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/visual-representation-of-the-three-bucke-1772485811219-317e0765.png",                  imageAlt: "Future trends"
                }
              ]
            },
            {
              title: "Unified Visual Experience",              description: "Articles, tweets, videos, newsletters—all rendered together in one place. No context switching. Pure signal.",              icon: Eye,
              mediaItems: [
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/a-sleek-ai-agent-dashboard-interface-sho-1772485810798-c6620cfc.png",                  imageAlt: "Unified feed"
                },
                {
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/a-sleek-ai-agent-dashboard-interface-sho-1772485810798-c6620cfc.png",                  imageAlt: "Mixed content types"
                }
              ]
            }
          ]}
          animationType="blur-reveal"
          title="The 3-Bucket System"
          description="Smart content prioritization ensures you never miss what matters"
          tag="Core Features"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          ariaLabel="Core features section"
        />
      </div>

      <div id="comparison" data-section="comparison">
        <TextSplitAbout
          title="Before & After: Why Latents Wins"
          description={[
            "The old way: Check 10 sources manually, miss opportunities by accident, consume info without action, depend on luck, maintain 10+ AI subscriptions.",            "The Latents way: One feed delivers everything auto-curated, never miss a relevant update again, search → find → act in one seamless flow, opportunity is now system-dependent, one subscription for all AI models.",            "Founders spend 5+ hours weekly hunting for information. Investors miss deals because they don't hear about promising rounds. Researchers get overwhelmed by noise. Latents eliminates all of that in one platform."
          ]}
          showBorder={true}
          useInvertedBackground={false}
          buttons={[
            { text: "See the Difference", onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }) }
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Why Latents comparison section"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahchen_founder",              testimonial: "Latents saved me from missing a Series A opportunity worth $2M. The AI found it in Ground Breakers before anyone else in my network. This is a game-changer.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/professional-headshot-photo-of-a-tech-fo-1772485809975-a91ffea5.png",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Marcus Johnson",              handle: "@mjventures",              testimonial: "As an investor, I check 20+ newsletters daily. Latents consolidated everything into one feed. I'm now discovering deals I would have completely missed.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/professional-headshot-photo-of-an-invest-1772485812246-3a6c6670.png",              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",              name: "Dr. Emily Rodriguez",              handle: "@emilyai_research",              testimonial: "The AI research updates are incredible. Plus Ones give me context I need, Long Shots help me stay ahead of trends. This is how I should have been researching all along.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/professional-headshot-photo-of-an-ai-res-1772485810161-df5d62da.png",              imageAlt: "Dr. Emily Rodriguez"
            },
            {
              id: "4",              name: "Alex Park",              handle: "@alexpark_builds",              testimonial: "I'm a solo founder juggling 10 projects. Latents' ability to draft emails and fill applications automatically has saved me 15+ hours per week.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/professional-headshot-photo-of-a-young-p-1772485811811-6c64bbde.png",              imageAlt: "Alex Park"
            },
            {
              id: "5",              name: "James Wu",              handle: "@jameswu_tech",              testimonial: "The chatbot's context-awareness is mind-blowing. Ask it about Sequoia from the last month and it understands exactly what you need. Finally, a tool that thinks like a founder.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/professional-headshot-photo-of-a-tech-fo-1772485809975-a91ffea5.png",              imageAlt: "James Wu"
            },
            {
              id: "6",              name: "Victoria Smalls",              handle: "@vsmalls_ventures",              testimonial: "Stop sleeping on Latents. This is the most productive way I've found to discover opportunities. The action layer is the real differentiator—turns discovery into execution.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/professional-headshot-photo-of-an-invest-1772485812246-3a6c6670.png",              imageAlt: "Victoria Smalls"
            }
          ]}
          showRating={true}
          animationType="scale-rotate"
          title="What Early Users Are Saying"
          description="Founders, investors, and researchers already using Latents to never miss an opportunity"
          tag="Social Proof"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
          ariaLabel="Testimonials section"
        />
      </div>

      <div id="signup" data-section="signup">
        <ContactSplitForm
          title="Get Early Access to Latents"
          description="Join the waitlist and be among the first to experience a world where opportunity is never luck again. We're launching soon."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "your@email.com", required: true }
          ]}
          textarea={{ name: "persona", placeholder: "What's your role? (Founder, Investor, Researcher, Student, Author, etc.)", rows: 3, required: false }}
          useInvertedBackground={true}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDliTXxNhtBW3zbZvqAx97EFM/visual-representation-of-the-three-bucke-1772485811219-317e0765.png"
          imageAlt="Join the waitlist"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Join the Waitlist"
          onSubmit={async (data) => { await fetch('/api/waitlist', { method: 'POST', body: JSON.stringify(data) }); alert('Welcome to the Latents family! Check your email for next steps.'); }}
          ariaLabel="Email signup form"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Latents"
          copyrightText="© 2025 Latents. Opportunity has never been a luck game."
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/latentsai", ariaLabel: "Follow us on Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/latents", ariaLabel: "Follow us on LinkedIn" },
            { icon: Mail, href: "mailto:hello@latents.ai", ariaLabel: "Email Latents" }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}
