"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import SplitAbout from '@/components/sections/about/SplitAbout';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Star, Crown, Lock, Rocket, Eye, CheckCircle, Shield, AlertCircle, Globe, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="IGDM Bot"
          navItems={[
            { name: "Features", id: "features" },
            { name: "How It Works", id: "how-it-works" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Automate Instagram DMs. Without Getting Banned."
          description="IGDM Bot uses the official Meta API and advanced safety controls to automate your Instagram outreach — at scale, safely."
          tag="SaaS Platform"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start Free Trial", href: "#pricing" },
            { text: "See How It Works", href: "#how-it-works" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          carouselItems={[
            {
              id: "carousel-1",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8fRXTdUKlroADdS9RZVLKv6V/modern-dark-themed-instagram-dm-automati-1772483782832-6054a098.png",              imageAlt: "Dashboard metrics view"
            },
            {
              id: "carousel-2",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8fRXTdUKlroADdS9RZVLKv6V/instagram-automation-platform-campaign-m-1772483782780-2242be5a.png",              imageAlt: "Campaign manager interface"
            },
            {
              id: "carousel-3",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8fRXTdUKlroADdS9RZVLKv6V/real-time-monitoring-dashboard-for-insta-1772483782661-f1ec7a11.png",              imageAlt: "Analytics dashboard"
            },
            {
              id: "carousel-4",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8fRXTdUKlroADdS9RZVLKv6V/instagram-dm-automation-rules-builder-in-1772483782425-d7343c09.png",              imageAlt: "Auto-reply rules builder"
            },
            {
              id: "carousel-5",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8fRXTdUKlroADdS9RZVLKv6V/safety-and-compliance-dashboard-for-inst-1772483782500-142d58b3.png",              imageAlt: "Safety monitoring"
            },
            {
              id: "carousel-6",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8fRXTdUKlroADdS9RZVLKv6V/instagram-proxy-management-interface-sho-1772483783546-8ab7a35b.png",              imageAlt: "Proxy management"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by 500+ Marketers & Agencies"
          description="Join thousands of growth professionals automating Instagram outreach safely and efficiently."
          tag="Social Proof"
          tagAnimation="opacity"
          buttons={[
            { text: "Join the Community", href: "#pricing" }
          ]}
          buttonAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Growth Hacking Labs",            "Digital Marketing Co",            "Social Commerce Pro",            "Influencer Network",            "DM Automation Hub",            "Scale Marketing Agency",            "Outreach Experts",            "Instagram Masters"
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwelve
          title="Everything You Need to Scale Instagram Outreach"
          description="Comprehensive toolset designed for safety, efficiency, and results at scale."
          tag="Features"
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: "campaign-manager",              label: "Campaign",              title: "Campaign Manager",              items: [
                "Targeted DM campaigns",                "Advanced scheduling",                "Daily limits & intervals",                "Multi-account orchestration"
              ]
            },
            {
              id: "auto-reply",              label: "Auto-Reply",              title: "Auto-Reply Engine",              items: [
                "Keyword-triggered responses",                "Spintax variation",                "Priority rules",                "Conversation flow control"
              ]
            },
            {
              id: "ban-resistant",              label: "Safety",              title: "Ban-Resistant by Design",              items: [
                "Official Meta API first",                "Trust score system",                "Rate limit enforcement",                "Account protection"
              ]
            },
            {
              id: "spintax",              label: "Variation",              title: "Spintax Variation",              items: [
                "{Hi|Hello|Hey} variation",                "Personalization tokens",                "Anti-spam randomization",                "Dynamic content rotation"
              ]
            },
            {
              id: "analytics",              label: "Analytics",              title: "Analytics Dashboard",              items: [
                "Delivery rate tracking",                "Reply analytics",                "Account health metrics",                "Campaign performance KPIs"
              ]
            },
            {
              id: "proxy",              label: "Infrastructure",              title: "Proxy Management",              items: [
                "Residential proxies",                "Mobile proxy support",                "Per-account rotation",                "IP health monitoring"
              ]
            }
          ]}
          animationType="slide-up"
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <SplitAbout
          title="Up and Running in Minutes"
          description="Three simple steps to start automating your Instagram outreach safely."
          tag="Process"
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
          bulletPoints={[
            {
              title: "Connect Your Account",              description: "Link your Instagram via Meta OAuth. Your credentials are encrypted and never stored in plain text.",              icon: Lock
            },
            {
              title: "Create a Campaign",              description: "Set your message template with spintax, choose targets, configure daily limits and intervals.",              icon: Rocket
            },
            {
              title: "Watch It Run",              description: "Monitor delivery rates, replies, and account health in real-time from your dashboard.",              icon: Eye
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8fRXTdUKlroADdS9RZVLKv6V/real-time-monitoring-dashboard-for-insta-1772483782661-f1ec7a11.png"
          imageAlt="Real-time analytics dashboard"
          mediaAnimation="blur-reveal"
          imagePosition="right"
          buttons={[
            { text: "Start Now", href: "#pricing" }
          ]}
        />
      </div>

      <div id="safety" data-section="safety">
        <SplitAbout
          title="Built with Safety as the Foundation"
          description="Every feature is designed with account protection and compliance at the core."
          tag="Safety First"
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
          bulletPoints={[
            {
              title: "Official Meta API",              description: "Strict rate limit enforcement (200 DMs/hour). Built directly on Instagram's approved infrastructure.",              icon: CheckCircle
            },
            {
              title: "Trust Score System",              description: "Per-account trust score limits scale with account age and engagement history for optimal safety.",              icon: Shield
            },
            {
              title: "Ban Detection",              description: "Real-time ban detection with instant alerts. Automatic campaign pause on suspicious activity.",              icon: AlertCircle
            },
            {
              title: "Proxy Support",              description: "Residential proxy integration to protect your account IPs and prevent IP-based detection.",              icon: Globe
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8fRXTdUKlroADdS9RZVLKv6V/safety-and-compliance-dashboard-for-inst-1772483782500-142d58b3.png"
          imageAlt="Safety monitoring dashboard"
          mediaAnimation="blur-reveal"
          imagePosition="left"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Simple, Transparent Pricing"
          description="Choose the plan that scales with your Instagram outreach needs."
          tag="Pricing"
          tagIcon={Sparkles}
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
          plans={[
            {
              id: "starter",              badge: "Starting Out",              badgeIcon: Zap,
              price: "$29/mo",              subtitle: "Perfect for individuals and small teams",              features: [
                "1 Instagram account",                "500 DMs/day limit",                "Basic analytics dashboard",                "Email support",                "Standard rate limits"
              ]
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Star,
              price: "$79/mo",              subtitle: "Best for growing agencies and multi-account managers",              features: [
                "5 Instagram accounts",                "2,000 DMs/day limit",                "Auto-reply engine included",                "Residential proxy support",                "Advanced analytics & reporting",                "Priority email support",                "Campaign templates library"
              ]
            },
            {
              id: "agency",              badge: "Enterprise Scale",              badgeIcon: Crown,
              price: "$199/mo",              subtitle: "For agencies and large-scale operations",              features: [
                "Unlimited Instagram accounts",                "Unlimited DMs/day",                "White-label dashboard option",                "Advanced proxy management",                "API access for integrations",                "Dedicated account manager",                "Custom rate limits & rules",                "24/7 priority support"
              ]
            }
          ]}
          animationType="slide-up"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about IGDM Bot and safe automation."
          tag="Support"
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="opacity"
          animationType="smooth"
          faqs={[
            {
              id: "faq-1",              title: "Is this against Instagram's Terms of Service?",              content: "No. IGDM Bot uses the official Meta API and respects all Instagram ToS guidelines. We don't use unofficial methods, browser automation, or account credential logging. Your account remains under your complete control."
            },
            {
              id: "faq-2",              title: "Will my account get banned?",              content: "IGDM Bot is specifically designed to minimize ban risk. We use Meta's official API, enforce rate limits, monitor account health in real-time, and provide instant ban detection alerts. Thousands of users safely automate at scale every day."
            },
            {
              id: "faq-3",              title: "Do I need a Meta Developer account?",              content: "No. We handle all Meta API integration for you. Simply connect your Instagram account via OAuth and you're ready to start. No developer setup required."
            },
            {
              id: "faq-4",              title: "Can I use this for multiple Instagram accounts?",              content: "Absolutely! The Pro and Agency plans support multiple accounts. Manage campaigns across all your accounts from a single dashboard with per-account trust scoring and safety monitoring."
            },
            {
              id: "faq-5",              title: "What payment methods do you accept?",              content: "We accept all major credit cards (Visa, Mastercard, American Express) and PayPal. Plans are billed monthly and you can cancel anytime. No credit card required for the free trial."
            }
          ]}
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactText
          text="Ready to Scale Your Instagram Outreach?"
          animationType="entrance-slide"
          buttons={[
            { text: "Start Free Trial", href: "#pricing" },
            { text: "Schedule Demo", href: "#" }
          ]}
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8fRXTdUKlroADdS9RZVLKv6V/wide-panoramic-view-of-modern-saas-offic-1772483782632-487467dd.png"
          imageAlt="IGDM Bot team at work"
          logoText="IGDM Bot"
          copyrightText="© 2025 IGDM Bot. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#safety" },
                { label: "Status", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Compliance", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Discord", href: "https://discord.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Support", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
