"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { AlertCircle, BarChart, Calendar, CheckCircle, HelpCircle, MessageSquare, PlayCircle, Search, Star, TrendingUp, X, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumSizeLargeTitles"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Features",          id: "#problem"},
        {
          name: "How It Works",          id: "#how-it-works"},
        {
          name: "Pricing",          id: "#pricing"},
      ]}
      brandName="CatalystIQ"
      button={{
        text: "Get Early Access",        href: "#final-cta"}}
      animateOnLoad={true}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{
        variant: "plain"}}
      title="Finally understand what you're investing in."
      description="Guided DCF valuation with real company context. Catalyst tracking linked to your models. Built for investors still learning — not just calculating."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/serious-afroamerican-businessman-front-view_23-2148508922.jpg",          alt: "Investor 1"},
        {
          src: "http://img.b2bpic.net/free-photo/detective-looks-holographic-images-captured-real-time_482257-83376.jpg",          alt: "Investor 2"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165939.jpg",          alt: "Investor 3"},
        {
          src: "http://img.b2bpic.net/free-photo/handsome-businessman-wearing-glasses-looking-up_329181-714.jpg",          alt: "Investor 4"},
        {
          src: "http://img.b2bpic.net/free-photo/smiling-researcher-talking-mic-presentation-reviewing-ct-scans-mri-data-analytics_482257-136397.jpg",          alt: "Seasoned Investor"},
      ]}
      avatarText="Free during beta ✦ No credit card ✦ First 100 get lifetime deal"
      buttons={[
        {
          text: "Get Early Access",          href: "#final-cta"},
      ]}
      buttonAnimation="slide-up"
      marqueeItems={[
        {
          type: "text",          text: "Intelligent Valuation"},
        {
          type: "text",          text: "Real-time Context"},
        {
          type: "text",          text: "Catalyst Alerts"},
        {
          type: "text",          text: "Scenario Analysis"},
        {
          type: "text",          text: "No Spreadsheets Needed"},
      ]}
    />
  </div>

  <div id="marquee" data-section="marquee">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "✦ Guided DCF",        "✦ Real Company Data",        "✦ Catalyst Tracking",        "✦ 500+ Early Signups",        "✦ Scenario Analysis",        "✦ No Spreadsheets",        "✦ Built for Learners",        "✦ Beta Access Open",        "✦ Intrinsic Value",        "✦ Earnings Alerts"]}
      title="Backed by Real Investors"
      description="Our community is growing rapidly with passionate investors who trust CatalystIQ."
      speed={35}
      showCard={false}
    />
  </div>

  <div id="problem" data-section="problem">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          icon: HelpCircle,
          title: "No context for assumptions",          description: "Every tool asks you to enter a growth rate. But is 15% reasonable for this company? You're completely on your own."},
        {
          icon: X,
          title: "Different tools, different answers",          description: "Run the same stock through three DCF calculators and get three completely different valuations. No explanation why."},
        {
          icon: AlertCircle,
          title: "Catalysts exist in isolation",          description: "Earnings calendars don't connect to your model. An earnings miss can destroy your valuation but nothing warns you in advance."},
      ]}
      title="DCF tools fail most investors"
      description="They hand you a blank spreadsheet and expect you to already know what good numbers look like."
    />
  </div>

  <div id="solution" data-section="solution">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: CheckCircle,
          title: "Guided DCF",          description: "Stop guessing. Start understanding. Interactive guidance with real company data."},
        {
          icon: Calendar,
          title: "Catalyst Tracking",          description: "Know what's coming. Model it in advance. Upcoming events tied to your models."},
        {
          icon: BarChart,
          title: "Scenario Analysis",          description: "Model every outcome. Never be surprised. Overlapping scenario cards with 3D perspective."},
      ]}
      title="Context. Clarity. Confidence."
      description="CatalystIQ provides the insights you need to make informed investment decisions."
    />
  </div>

  <div id="how-it-works" data-section="how-it-works">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          icon: Search,
          title: "Search a ticker",          description: "Type any company symbol and we fetch the real financial history instantly."},
        {
          icon: MessageSquare,
          title: "Answer guided questions",          description: "We show you actual company data as context while you form your assumptions."},
        {
          icon: TrendingUp,
          title: "See your intrinsic value",          description: "Every calculation is transparent. No black boxes. You understand every number."},
        {
          icon: Zap,
          title: "Track your catalysts",          description: "Upcoming events tied to your models. Always know what could move your thesis."},
      ]}
      title="From ticker to intrinsic value in minutes."
      description="Our streamlined process makes complex valuation simple and accessible for every investor."
    />
  </div>

  <div id="live-demo" data-section="live-demo">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: PlayCircle,
          title: "Interactive Guided DCF",          description: "Experience a real-time walkthrough of our valuation process, with dynamic questions and insights."},
      ]}
      title="See it in action."
      description="Interact with a real guided DCF flow below."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "free",          tag: "Free Forever",          price: "$0",          period: "Always free",          description: "Perfect for beginners getting started with valuation.",          button: {
            text: "Start Free — No Card Needed",            href: "#final-cta"},
          featuresTitle: "Includes:",          features: [
            "5 DCF models per month",            "Basic catalyst calendar",            "3 watchlist items",            "Beginner guided mode",            "✗ Scenario analysis",            "✗ AI-generated DCF",            "✗ Unlimited models",            "✗ Email alerts"],
        },
        {
          id: "pro",          tag: "Most Popular",          tagIcon: Star,
          price: "$15",          period: "/mo",          description: "Unlock advanced tools and unlimited access for serious investors.",          button: {
            text: "Start 14-Day Free Trial",            href: "#final-cta"},
          featuresTitle: "Everything in Free, plus:",          features: [
            "Unlimited DCF models",            "Full catalyst tracking",            "Unlimited watchlist",            "All three DCF modes",            "Scenario analysis (bull/bear)",            "AI-generated assumptions",            "Portfolio tracker",            "Weekly email digests",            "Priority support"],
        },
      ]}
      title="Simple. No surprises."
      description="Choose the plan that's right for your investment journey."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "Do I need finance knowledge?",          content: "No. We explain every input as you go with real company data as context. Designed for investors still learning the fundamentals."},
        {
          id: "q2",          title: "Where does the data come from?",          content: "We use verified financial data APIs updated daily for all major US-listed stocks."},
        {
          id: "q3",          title: "Is this investment advice?",          content: "No. CatalystIQ is strictly an educational tool. All outputs are for learning and research purposes only. Always do your own due diligence."},
        {
          id: "q4",          title: "When does it launch?",          content: "We're currently in private beta. Sign up for early access and you'll be among the first in with a lifetime deal."},
        {
          id: "q5",          title: "Can I cancel anytime?",          content: "Yes. Month-to-month. No contracts, no commitments. Cancel directly from your account settings anytime."},
      ]}
      title="Questions answered."
      description="Find quick answers to the most common questions about CatalystIQ."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="final-cta" data-section="final-cta">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="Start understanding your investments."
      title="Join investors building real conviction, not just following tips."
      description="100% Free during beta ✦ 5 mins to your first DCF model ✦ 0 Spreadsheets required"
      buttons={[
        {
          text: "Get Early Access",          href: "#"},
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="CatalystIQ"
      leftLink={{
        text: "Terms of Service",        href: "#"}}
      rightLink={{
        text: "Privacy Policy",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
