"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Zap, FileText, RefreshCw, Cog, Workflow, Cpu, Database, Compass, Hammer, Rocket, TrendingUp, Star, CheckCircle, Home, Settings, Mail } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: 'What We Build', id: 'features' },
            { name: 'How It Works', id: 'process' },
            { name: 'Case Studies', id: 'case-studies' },
            { name: 'Testimonials', id: 'testimonials' },
            { name: 'Contact', id: 'contact' }
          ]}
          brandName="Intulos"
          bottomLeftText="AI Automation Studio"
          bottomRightText="hello@intulos.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Automation Equals Leverage"
          description="Build AI systems that remove manual work and increase revenue. Less busywork. More leverage. More scale."
          tag="AI Automation Studio"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: 'Book a Free Automation Review', href: '#contact' },
            { text: 'View Case Studies', href: '#case-studies' }
          ]}
          buttonAnimation="smooth"
          background={{ variant: 'plain' }}
          dashboard={{
            title: 'Automation Metrics Hub',
            logoIcon: Zap,
            imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APWyzaaMy4zu7LJAbk6WTPBqn2/a-sophisticated-ai-automation-dashboard--1772495446608-caf6a279.png',
            searchPlaceholder: 'Search automations...',
            buttons: [
              { text: 'View Dashboard', href: '#' },
              { text: 'Export Report', href: '#' }
            ],
            sidebarItems: [
              { icon: Home, active: true },
              { icon: Zap, active: false },
              { icon: Settings, active: false }
            ],
            stats: [
              { title: 'Automation Engines', values: [5, 8, 12], description: 'Active systems deployed.' },
              { title: 'Hours Saved Monthly', values: [120, 240, 480], valueSuffix: 'h', description: 'Manual work eliminated.' },
              { title: 'Revenue Impact', values: [50000, 120000, 250000], valuePrefix: '$', description: 'Growth generated.' }
            ],
            chartTitle: 'System Performance',
            chartData: [
              { value: 65 },
              { value: 78 },
              { value: 82 },
              { value: 88 },
              { value: 95 }
            ],
            listTitle: 'Recent Automations',
            listItems: [
              { icon: CheckCircle, title: 'AI Proposal Generation', status: 'Active' },
              { icon: CheckCircle, title: 'Content Repurposing Engine', status: 'Active' },
              { icon: CheckCircle, title: 'Ad Funnel Automation', status: 'Active' }
            ]
          }}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="What We Build"
          description="Systems that remove manual work and increase revenue."
          tag="Services"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              title: 'AI Proposal Systems',
              description: 'Automated proposal generation that closes deals faster.',
              bentoComponent: 'marquee',
              centerIcon: FileText,
              variant: 'icon',
              icons: [FileText, Zap, CheckCircle, TrendingUp]
            },
            {
              title: 'Content Repurposing Engines',
              description: 'Transform one piece of content into dozens of formats.',
              bentoComponent: 'marquee',
              centerIcon: RefreshCw,
              variant: 'icon',
              icons: [RefreshCw, RefreshCw, RefreshCw, Zap]
            },
            {
              title: 'Ad Funnel Automation',
              description: 'Intelligent ad creation and optimization at scale.',
              bentoComponent: 'animated-bar-chart'
            },
            {
              title: 'Operations Automation',
              description: 'Streamline client onboarding and backend workflows.',
              bentoComponent: 'marquee',
              centerIcon: Cog,
              variant: 'icon',
              icons: [Cog, Zap, CheckCircle, CheckCircle]
            },
            {
              title: 'Custom AI Workflows',
              description: 'No-code automation tailored to your unique business.',
              bentoComponent: 'orbiting-icons',
              centerIcon: Zap,
              items: [
                { icon: Workflow, ring: 1 },
                { icon: Zap, ring: 1 },
                { icon: Cpu, ring: 2 },
                { icon: Database, ring: 2 }
              ]
            }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureHoverPattern
          title="How It Works"
          description="A strategic four-step process to automate your business."
          tag="Process"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            { icon: Compass, title: 'Discover', description: 'We analyze your workflows and identify automation opportunities.' },
            { icon: Hammer, title: 'Build', description: 'Custom automation systems are designed and configured for your needs.' },
            { icon: Rocket, title: 'Launch', description: 'We deploy your systems and ensure seamless integration.' },
            { icon: TrendingUp, title: 'Optimize', description: 'Continuous monitoring and improvement for maximum impact.' }
          ]}
        />
      </div>

      <div id="case-studies" data-section="case-studies">
        <MetricSplitMediaAbout
          tag="Case Study"
          title="Systems Transform Businesses"
          description="We build automation infrastructure that delivers measurable results. Our clients experience significant time savings, revenue growth, and operational efficiency."
          metrics={[
            { value: '10x', title: 'Productivity Increase' },
            { value: '$500K+', title: 'Revenue Impact' }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APWyzaaMy4zu7LJAbk6WTPBqn2/professional-case-study-image-showing-be-1772495446987-7ec0b115.png"
          imageAlt="Automation system results"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Trusted by Growth-Focused Businesses"
          description="Hear from entrepreneurs and agencies who've transformed their operations with Intulos."
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          testimonials={[
            {
              id: '1',
              name: 'Sarah Chen',
              handle: 'Coach & Course Creator',
              testimonial: 'Intulos automated my entire proposal process. Now I close deals 3x faster with zero manual work. The ROI was immediate.',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APWyzaaMy4zu7LJAbk6WTPBqn2/professional-headshot-of-a-successful-on-1772495447897-e4c97b15.png',
              imageAlt: 'Sarah Chen'
            },
            {
              id: '2',
              name: 'Marcus Webb',
              handle: 'Content Agency Founder',
              testimonial: 'Our content repurposing is now completely automated. We go from one script to 50+ pieces per month. This is game-changing.',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APWyzaaMy4zu7LJAbk6WTPBqn2/professional-headshot-of-a-content-creat-1772495446276-ba265e7b.png',
              imageAlt: 'Marcus Webb'
            },
            {
              id: '3',
              name: 'Jessica Rodriguez',
              handle: 'Digital Marketing Expert',
              testimonial: "The ad funnel automation freed up 20 hours a week. I'm focusing on strategy instead of repetitive tasks. Exactly what I needed.",              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APWyzaaMy4zu7LJAbk6WTPBqn2/professional-headshot-of-a-business-owne-1772495446248-006a8f3d.png',
              imageAlt: 'Jessica Rodriguez'
            },
            {
              id: '4',
              name: 'David Kim',
              handle: 'Service Business Owner',
              testimonial: 'Client onboarding is now completely hands-off. My team has time for actual client work. The system just works.',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APWyzaaMy4zu7LJAbk6WTPBqn2/professional-headshot-of-a-successful-en-1772495445540-191859ef.png',
              imageAlt: 'David Kim'
            },
            {
              id: '5',
              name: 'Emily Thompson',
              handle: 'E-commerce Founder',
              testimonial: 'Intulos built custom workflows that fit our exact needs. Not generic templates. Real solutions for real businesses.',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APWyzaaMy4zu7LJAbk6WTPBqn2/professional-headshot-of-a-digital-servi-1772495445473-26697480.png',
              imageAlt: 'Emily Thompson'
            },
            {
              id: '6',
              name: 'Alex Patel',
              handle: 'SaaS Growth Lead',
              testimonial: "The team understood our business instantly. They didn't oversell features we didn't need. Pure problem-solving.",              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APWyzaaMy4zu7LJAbk6WTPBqn2/professional-headshot-of-a-content-creat-1772495446727-8c5b7691.png',
              imageAlt: 'Alex Patel'
            }
          ]}
          speed={45}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Transparent Pricing"
          description="Investment in automation that pays for itself."
          tag="Pricing"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          plans={[
            {
              id: '1',
              price: 'Custom',
              name: 'Discovery Call',
              buttons: [
                { text: 'Book Now', href: '#contact' },
                { text: 'Learn More', href: '#' }
              ],
              features: ['Workflow analysis', 'Automation opportunities identified', 'Implementation roadmap', 'No obligation']
            },
            {
              id: '2',
              badge: 'Most Popular',
              badgeIcon: Zap,
              price: '$5K-$25K',
              name: 'Custom Automation',
              buttons: [
                { text: 'Get Started', href: '#contact' },
                { text: 'Book Consultation', href: '#contact' }
              ],
              features: ['Custom system design', 'Full implementation', 'Integration with your tools', 'Training and support', 'Performance optimization']
            },
            {
              id: '3',
              price: 'Ongoing',
              name: 'Managed Services',
              buttons: [
                { text: 'Learn More', href: '#contact' },
                { text: 'Schedule Call', href: '#contact' }
              ],
              features: ['Continuous optimization', 'Monthly performance reports', 'System updates and improvements', 'Priority support', 'Scaling assistance']
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Common Questions"
          description="Everything you need to know about Intulos automation systems."
          tag="FAQ"
          animationType="smooth"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqs={[
            {
              id: '1',
              title: 'How long does implementation take?',
              content: 'Most custom automation projects are fully implemented within 2-4 weeks. Discovery and setup typically take 1-2 weeks, followed by building and testing. We ensure everything is working perfectly before going live.'
            },
            {
              id: '2',
              title: 'What tools do you work with?',
              content: 'We specialize in integrating with popular no-code platforms like Zapier, Make, n8n, and AI services like ChatGPT, Claude, and custom APIs. We can connect virtually any tool in your tech stack.'
            },
            {
              id: '3',
              title: 'Do I need technical knowledge?',
              content: "Not at all. We handle all technical setup and configuration. We'll train your team on managing the automation and provide clear documentation for ongoing use."
            },
            {
              id: '4',
              title: 'Can you automate my specific workflow?',
              content: "Very likely yes. We've built custom automation for hundreds of unique workflows across coaching, agencies, e-commerce, and services. Schedule a discovery call and we'll assess your specific needs."
            },
            {
              id: '5',
              title: 'What if something breaks or needs updating?',
              content: "All clients receive ongoing support. We're available for troubleshooting, updates, and optimizations. Many choose our managed services plan for continuous improvement."
            },
            {
              id: '6',
              title: 'How do I know if automation is right for me?',
              content: "If you're spending hours on repetitive tasks, managing multiple tools, or struggling with manual processes, automation will help. Book a free review and we'll identify your top opportunities."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Scale"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Build Your Automation Foundation"
          description="Stop doing busywork. Start scaling with systems that work 24/7."
          buttons={[
            { text: 'Book a Free Automation Review', href: 'mailto:hello@intulos.com?subject=Automation Review' },
            { text: 'Schedule Strategy Call', href: 'mailto:hello@intulos.com?subject=Strategy Call' }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: 'plain' }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Intulos"
          columns={[
            {
              title: 'Product',
              items: [
                { label: 'Services', href: '#features' },
                { label: 'Process', href: '#process' },
                { label: 'Pricing', href: '#pricing' },
                { label: 'FAQ', href: '#faq' }
              ]
            },
            {
              title: 'Company',
              items: [
                { label: 'Case Studies', href: '#case-studies' },
                { label: 'Testimonials', href: '#testimonials' },
                { label: 'About', href: '#' },
                { label: 'Contact', href: '#contact' }
              ]
            },
            {
              title: 'Resources',
              items: [
                { label: 'Automation Guide', href: '#' },
                { label: 'Blog', href: '#' },
                { label: 'Documentation', href: '#' },
                { label: 'Support', href: 'mailto:hello@intulos.com' }
              ]
            }
          ]}
          copyrightText="© 2025 Intulos Studios. AI Automation Infrastructure."
        />
      </div>
    </ThemeProvider>
  );
}
