"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { 
  Sparkles, 
  Lock, 
  Bell, 
  Palette, 
  Hammer, 
  Rocket, 
  TestTube, 
  Share2, 
  Settings, 
  BarChart3, 
  HelpCircle, 
  Users, 
  Code, 
  Zap, 
  Shield, 
  Layout, 
  Square, 
  FileText, 
  CreditCard, 
  Navigation, 
  Globe, 
  Headphones, 
  Star, 
  Crown, 
  Mail 
} from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Mind Mush"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "https://mindmush.app"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Build iOS Apps Without Limits"
          description="Mind Mush transforms your creative vision into powerful iOS applications. Drag, drop, and deploy with our intuitive visual builder designed for everyone."
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/happy-man-with-eyeglasses-smiling-office_329181-14553.jpg", alt: "Creator 1" },
            { src: "https://img.b2bpic.net/free-photo/smiling-redhead-man-with-laptop-looking-camera-cafe_1163-5162.jpg", alt: "Creator 2" },
            { src: "https://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-black-hat-smiling_176420-8505.jpg", alt: "Creator 3" }
          ]}
          avatarText="Trusted by 500+ creators"
          background={{ variant: "downward-rays-static" }}
          buttons={[
            { text: "Start Building", href: "https://mindmush.app/signup" },
            { text: "Watch Demo", href: "#features" }
          ]}
        />
      </div>

      <div id="features-bento" data-section="features-bento">
        <FeatureBento
          title="Powerful Features for Creative Builders"
          description="Everything you need to design, build, and launch stunning iOS apps"
          tag="Features"
          tagIcon={Sparkles}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Visual Builder",              description: "Intuitive drag-and-drop interface for building stunning UI designs",              bentoComponent: "phone",              statusIcon: Lock,
              alertIcon: Bell,
              alertTitle: "New Feature Available",              alertMessage: "Check out our latest app builder updates",              apps: [
                { name: "Design", icon: Palette },
                { name: "Build", icon: Hammer },
                { name: "Deploy", icon: Rocket },
                { name: "Test", icon: TestTube },
                { name: "Share", icon: Share2 },
                { name: "Settings", icon: Settings },
                { name: "Analytics", icon: BarChart3 },
                { name: "Support", icon: HelpCircle }
              ]
            },
            {
              title: "Real-Time Collaboration",              description: "Work together with your team in real-time on the same project",              bentoComponent: "orbiting-icons",              centerIcon: Users,
              items: [
                { icon: Code, ring: 1 },
                { icon: Palette, ring: 1 },
                { icon: Zap, ring: 2 },
                { icon: Shield, ring: 2 }
              ]
            },
            {
              title: "Component Library",              description: "Pre-built components to accelerate your app development",              bentoComponent: "3d-card-grid",              centerIcon: Layout,
              items: [
                { name: "Buttons", icon: Square },
                { name: "Forms", icon: FileText },
                { name: "Cards", icon: CreditCard },
                { name: "Navigation", icon: Navigation }
              ]
            },
            {
              title: "Advanced Analytics",              description: "Track user behavior and app performance with detailed insights",              bentoComponent: "animated-bar-chart"
            }
          ]}
        />
      </div>

      <div id="features-glow" data-section="features-glow">
        <FeatureBorderGlow
          title="Why Developers Choose Mind Mush"
          description="Experience the perfect balance of power and simplicity"
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          features={[
            {
              icon: Zap,
              title: "Lightning Fast",              description: "Deploy apps in minutes, not months. Our optimized engine ensures peak performance"
            },
            {
              icon: Lock,
              title: "Enterprise Security",              description: "Built with security first. End-to-end encryption and compliance standards"
            },
            {
              icon: Code,
              title: "Full Customization",              description: "Access native code when you need it. No limits to what you can create"
            },
            {
              icon: Globe,
              title: "Global Reach",              description: "Deploy to the App Store instantly. Reach millions of users worldwide"
            },
            {
              icon: BarChart3,
              title: "Advanced Analytics",              description: "Deep insights into user behavior, crashes, and performance metrics"
            },
            {
              icon: Headphones,
              title: "24/7 Support",              description: "Dedicated support team ready to help you succeed at every step"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Mind Mush completely transformed how we build iOS apps. What used to take months now takes weeks. The visual builder is intuitive, and the collaboration features are game-changing for our team."
          rating={5}
          author="Sarah Chen, CTO at CreativeFlow"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/photo-serious-mixed-race-young-man-focused-into-monitor-modern-laptop-computer-installs-application-updates-software-makes-distant-job-holds-chin-wears-optical-glasses-vision_273609-29267.jpg", alt: "Sarah Chen" },
            { src: "https://img.b2bpic.net/free-photo/working-man_1098-18366.jpg", alt: "Team Member 1" },
            { src: "https://img.b2bpic.net/free-photo/closeup-portrait-caucasian-happy-teacher-glasses_74855-9736.jpg", alt: "Team Member 2" },
            { src: "https://img.b2bpic.net/free-photo/pensive-young-handsome-man-working-laptop_1262-3582.jpg", alt: "Team Member 3" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your needs. All plans include core features and support."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "starter",              badge: "Popular",              badgeIcon: Star,
              price: "$29",              subtitle: "/month billed annually",              buttons: [{ text: "Get Started", href: "https://mindmush.app/signup?plan=starter" }],
              features: [
                "Up to 2 projects",                "1GB storage",                "Basic components library",                "Community support",                "iOS deployment",                "Monthly updates"
              ]
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$99",              subtitle: "/month billed annually",              buttons: [{ text: "Start Free Trial", href: "https://mindmush.app/signup?plan=pro" }],
              features: [
                "Unlimited projects",                "50GB storage",                "Full component library",                "Priority support",                "Advanced analytics",                "Team collaboration",                "Custom branding",                "API access"
              ]
            },
            {
              id: "enterprise",              badge: "Enterprise",              badgeIcon: Crown,
              price: "Custom",              subtitle: "For large teams",              buttons: [{ text: "Contact Sales", href: "https://mindmush.app/contact-sales" }],
              features: [
                "Unlimited everything",                "Dedicated support",                "Custom integrations",                "SLA guarantee",                "Security audit",                "Training & onboarding",                "Advanced permissions",                "White-label options"
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to Build Your Next App?"
          description="Join hundreds of creators who are shipping iOS apps faster with Mind Mush. Sign up for early access and exclusive features."
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Get Started Free"
          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. No credit card required."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Changelog", href: "https://mindmush.app/changelog" },
                { label: "Roadmap", href: "https://mindmush.app/roadmap" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "https://mindmush.app/about" },
                { label: "Blog", href: "https://mindmush.app/blog" },
                { label: "Careers", href: "https://mindmush.app/careers" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "https://docs.mindmush.app" },
                { label: "Community", href: "https://community.mindmush.app" },
                { label: "Tutorials", href: "https://mindmush.app/tutorials" },
                { label: "Status", href: "https://status.mindmush.app" }
              ]
            }
          ]}
          copyrightText="© 2025 Mind Mush. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}