"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import MediaAbout from '@/components/sections/about/MediaAbout';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="large"
      background="none"
      cardStyle="layered-gradient"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Signalate AI"
          navItems={[
            { name: "Features", id: "features" },
            { name: "How It Works", id: "how-it-works" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Signalate AI"
          description="Intelligent voice agents that turn website visitors into booked appointments in 1-2 minutes"
          buttons={[
            { text: "See Demo", href: "features" },
            { text: "Get Started", href: "contact" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOpCJAkzFAW0TNbdLrrX6NQHhG/a-futuristic-ai-voice-agent-dashboard-in-1772473656161-d5b6d9c9.png"
          imageAlt="AI voice agent dashboard with real-time analytics"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Why Signalate AI Stands Apart"
          description="Compare traditional lead handling with our AI-powered voice agent technology"
          tag="The Difference"
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          negativeCard={{
            items: [
              "Manual response to leads (hours delay)",              "Limited scheduling availability",              "High customer acquisition costs",              "Human-dependent service",              "Poor lead qualification"
            ]
          }}
          positiveCard={{
            items: [
              "Instant AI calls within 1-2 minutes",              "24/7 appointment booking",              "Significant cost reduction",              "Scalable and reliable",              "Smart lead qualification & routing"
            ]
          }}
          buttons={[
            { text: "Learn More", href: "#how-it-works" }
          ]}
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <MediaAbout
          title="How Our Voice Agents Work"
          description="When a potential customer engages with your website or ads, our AI instantly calls them to understand their needs and schedule a fixed appointment. It's that simple and that powerful."
          tag="Intelligent Automation"
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOpCJAkzFAW0TNbdLrrX6NQHhG/a-sleek-visualization-showing-the-journe-1772473655494-2d871a12.png"
          imageAlt="Lead conversion visualization"
          useInvertedBackground={false}
          buttons={[
            { text: "Schedule Demo", href: "#contact" }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple, Transparent Pricing"
          description="Choose the plan that scales with your business needs"
          tag="Pricing"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "starter",              tag: "Starter Plan",              price: "$999",              period: "/month",              description: "Perfect for growing businesses just starting with AI lead qualification",              button: { text: "Get Started", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Up to 500 voice calls/month",                "Basic lead qualification",                "24/7 scheduling automation",                "Email support",                "Basic analytics dashboard"
              ]
            },
            {
              id: "professional",              tag: "Professional Plan",              price: "$2,499",              period: "/month",              description: "For established companies scaling their lead conversion",              button: { text: "Schedule Call", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Up to 2,000 voice calls/month",                "Advanced lead qualification & routing",                "Priority appointment booking",                "Priority support",                "Advanced analytics & reporting"
              ]
            },
            {
              id: "enterprise",              tag: "Enterprise Plan",              price: "Custom",              period: "/month",              description: "Unlimited capabilities for high-volume operations",              button: { text: "Contact Sales", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Unlimited voice calls",                "Custom AI training for your business",                "Multi-channel integration",                "Dedicated account manager",                "Custom integrations & API access"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Trusted by Industry Leaders"
          description="See what customers are saying about Signalate AI's impact on their business"
          tag="Success Stories"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              title: "Transformed Our Lead Conversion Rate",              quote: "Signalate AI has been a game-changer for our agency. We went from 15% lead conversion to 62% within the first month. The speed at which the AI calls potential clients is incredible.",              name: "Marcus Johnson",              role: "CEO of Growth Digital Agency",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOpCJAkzFAW0TNbdLrrX6NQHhG/professional-headshot-of-a-confident-bus-1772473655114-09949c44.png",              imageAlt: "Marcus Johnson, CEO of Growth Digital Agency"
            },
            {
              id: "2",              title: "ROI Within Week One",              quote: "We were skeptical at first, but the results speak for themselves. Our customer acquisition cost dropped by 40%, and our team can now focus on closing deals instead of chasing leads.",              name: "Sarah Chen",              role: "Director of Sales at TechFlow Solutions",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOpCJAkzFAW0TNbdLrrX6NQHhG/professional-headshot-of-a-female-busine-1772473654830-340b88e5.png",              imageAlt: "Sarah Chen, Director of Sales"
            },
            {
              id: "3",              title: "Exactly What Our Business Needed",              quote: "The AI handles qualification perfectly. It's like having a top sales development rep working 24/7 without the overhead. Highly recommend to any business serious about scaling.",              name: "David Rivera",              role: "Founder of Apex Consulting",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOpCJAkzFAW0TNbdLrrX6NQHhG/professional-headshot-of-a-male-entrepre-1772473655389-1bdd56c4.png",              imageAlt: "David Rivera, Founder of Apex Consulting"
            },
            {
              id: "4",              title: "Professional Implementation & Support",              quote: "The team at Signalate made onboarding seamless. We had AI agents running campaigns within 48 hours. The support team is responsive and genuinely helpful.",              name: "Jennifer Martinez",              role: "VP Operations at Premium Services Inc",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOpCJAkzFAW0TNbdLrrX6NQHhG/professional-headshot-of-a-business-prof-1772473654695-6846adca.png",              imageAlt: "Jennifer Martinez, VP Operations"
            },
            {
              id: "5",              title: "Best Investment for Our Sales Team",              quote: "Before Signalate AI, we lost so many leads during business hours. Now we capture qualified appointments automatically. Our sales team loves having pre-qualified leads.",              name: "Michael Thompson",              role: "Sales Manager at Elite Real Estate",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOpCJAkzFAW0TNbdLrrX6NQHhG/professional-headshot-of-a-confident-bus-1772473655114-09949c44.png",              imageAlt: "Michael Thompson, Sales Manager"
            },
            {
              id: "6",              title: "A Total Game-Changer",              quote: "We tried other solutions before finding Signalate. Nothing comes close to the quality of conversations and conversion rates we're seeing now. Absolutely impressed.",              name: "Amanda Foster",              role: "Chief Revenue Officer at Momentum Group",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOpCJAkzFAW0TNbdLrrX6NQHhG/professional-headshot-of-a-female-busine-1772473654830-340b88e5.png",              imageAlt: "Amanda Foster, CRO"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Proven Results"
          description="Real numbers from our customers using Signalate AI"
          tag="Impact"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            { id: "1", value: "1-2 min", description: "Average response time to leads" },
            { id: "2", value: "62%", description: "Average conversion rate increase" },
            { id: "3", value: "40%", description: "CAC reduction on average" },
            { id: "4", value: "24/7", description: "Continuous appointment booking" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Ready to Transform Your Lead Generation?"
          description="Join hundreds of businesses already using Signalate AI to book more appointments and close more deals. Let's discuss how we can help your business grow."
          tagAnimation="slide-up"
          useInvertedBackground={false}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOpCJAkzFAW0TNbdLrrX6NQHhG/modern-illustration-of-an-ai-receptionis-1772473656092-1e058f79.png"
          imageAlt="AI receptionist interface"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Schedule Demo"
          termsText="We respect your privacy. We'll only use your email to contact you about your demo. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "Voice Agents", href: "#features" },
                { label: "AI Receptionist", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Demo", href: "#contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Integration Guides", href: "#" },
                { label: "FAQ", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Signalate AI. All rights reserved."
          bottomRightText="Powered by Advanced AI Technology"
        />
      </div>
    </ThemeProvider>
  );
}
