import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Shield, Users, Plug, Calendar, Phone, TrendingUp, ArrowUpRight, Bot, Star, CheckCircle, Flame } from "lucide-react";
import { useNavigate } from "react-router-dom";
import emailIntelligencePro from "@/assets/email-intelligence-dashboard.png";
import aiSolutionsImage from "@/assets/ai-solutions-button.webp";
import customWebsitesPro from "@/assets/knittingage-website.png";
import appointmentBookingPro from "@/assets/appointment-booking-dashboard.png";
import voiceSystemPro from "@/assets/voice-automation-dashboard.png";
import smartCampaignsPro from "@/assets/smart-campaigns-dashboard.png";
import reviewsReputationPro from "@/assets/reviews-reputation-dashboard.png";
import chatgptLogo from "@/assets/logos/chatgpt-logo.png";
import geminiLogo from "@/assets/logos/gemini-logo.png";
import openaiLogo from "@/assets/logos/openai-logo.png";
import anthropicLogo from "@/assets/logos/anthropic-logo.png";
import metaLogo from "@/assets/logos/meta-logo.png";
import apolloLogo from "@/assets/logos/apollo-logo.png";
import airtableLogo from "@/assets/logos/airtable-logo.png";
import relevanceLogo from "@/assets/logos/relevance-logo.png";
import n8nLogo from "@/assets/logos/n8n-logo.png";
import makeLogo from "@/assets/logos/make-logo.png";
import synthflowLogo from "@/assets/logos/synthflow-logo.png";
import ghlLogo from "@/assets/logos/ghl-logo.png";
import microsoftLogo from "@/assets/logos/microsoft-logo.png";
import perplexityLogo from "@/assets/logos/perplexity-logo.png";
import claudeLogo from "@/assets/logos/claude-logo.png";
import zapierLogo from "@/assets/logos/zapier-logo.png";
import hubspotLogo from "@/assets/logos/hubspot-logo.png";
import mondayLogo from "@/assets/logos/monday-logo.png";
import amazonLogo from "@/assets/logos/amazon-logo.png";
import appleLogo from "@/assets/logos/apple-logo.png";
import googleLogo from "@/assets/logos/google-logo.png";
import netflixLogo from "@/assets/logos/netflix-logo.png";
import nvidiaLogo from "@/assets/logos/nvidia-logo.png";
import salesforceLogo from "@/assets/logos/salesforce-logo.png";
import spotifyLogo from "@/assets/logos/spotify-logo.png";
import teslaLogo from "@/assets/logos/tesla-logo.png";
import uberLogo from "@/assets/logos/uber-logo.png";

// Long partner logos list for perpetual strip
const partnerLogos = [
  openaiLogo, anthropicLogo, metaLogo, chatgptLogo, geminiLogo,
  microsoftLogo, googleLogo, appleLogo, amazonLogo, salesforceLogo,
  hubspotLogo, mondayLogo, zapierLogo, airtableLogo, makeLogo,
  n8nLogo, apolloLogo, relevanceLogo, perplexityLogo, claudeLogo,
  spotifyLogo, netflixLogo, nvidiaLogo, teslaLogo, uberLogo, ghlLogo,
  synthflowLogo
];

const Home = () => {
  const navigate = useNavigate();
  
  const handleCalendarClick = () => {
    console.log("=== NAVIGATING TO BOOKING PAGE ===");
    navigate("/booking");
  };

  const handleViewAgents = () => {
    navigate("/solutions");
  };


  const handleScrollToSection = (sectionId: string) => {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  // Metrics data
  const metrics = [
    { number: "95%", label: "inbound questions answered instantly" },
    { number: "3×", label: "more booked appointments" },
    { number: "45%", label: "higher lead-to-meeting conversion" },
    { number: "−40%", label: "no-shows with smart reminders" },
    { number: "<60 sec", label: "first reply across channels" },
    { number: "2× ROAS", label: "when campaigns feed agents that book" },
  ];

  // Growth solutions data - Each tool is UNIQUE
  const tools = [
    {
      title: "Email Intelligence System",
      subtitle: "AI-Powered Lead Generation & Outreach",
      bullets: [
        "265M+ verified B2B contacts database",
        "AI writes personalized cold emails at scale", 
        "Automated follow-up sequences with A/B testing",
        "3x higher response rates than manual outreach",
        "Advanced lead scoring and qualification"
      ],
      image: emailIntelligencePro,
      flagship: true,
      
    },
    {
      title: "Custom Website Development", 
      subtitle: "High-Converting Business Websites",
      bullets: [
        "Conversion-optimized landing pages",
        "Mobile-first responsive design",
        "SEO optimization and speed performance",
        "Lead capture forms and CRM integration",
        "3 packages: Basic, Gold, Diamond"
      ],
      image: customWebsitesPro,
      flagship: true,
      
    },
    {
      title: "AI Voice Assistant System",
      subtitle: "24/7 Phone Call Automation", 
      bullets: [
        "AI answers calls in your voice and style",
        "85% call-to-appointment conversion rate",
        "Missed call recovery and follow-up",
        "Natural conversation with appointment booking",
        "Seamless integration with your calendar"
      ],
      image: voiceSystemPro,
      flagship: true,
      
    },
    {
      title: "Smart Appointment Booking",
      subtitle: "Automated Calendar Management",
      bullets: [
        "Intelligent scheduling across multiple calendars",
        "60% reduction in no-shows with smart reminders",
        "Time zone optimization for global clients",
        "Automated confirmation and follow-up sequences",
        "Integration with Zoom, Teams, and Google Meet"
      ],
      image: appointmentBookingPro,
      
    },
    {
      title: "Smart Campaign Management",
      subtitle: "AI-Optimized Advertising Systems",
      bullets: [
        "Google Ads and Meta campaigns that actually convert",
        "4x ROAS improvement with AI optimization",
        "Automated audience targeting and retargeting",
        "Creative testing and performance optimization",
        "Real-time budget allocation and bid management"
      ],
      image: smartCampaignsPro,
      
    },
    {
      title: "Reviews & Reputation Management", 
      subtitle: "Automated Brand Protection & Growth",
      bullets: [
        "Automated review collection from happy customers",
        "80% increase in 5-star reviews within 60 days",
        "Negative review mitigation and response",
        "Multi-platform management (Google, Yelp, Facebook)",
        "Brand monitoring and competitor analysis"
      ],
      image: reviewsReputationPro,
      
    }
  ];

  // Case highlights
  const caseHighlights = [
    { title: "Fashion D2C", result: "3× more appointments in 30 days" },
    { title: "Services SMB", result: "95% of inquiries answered instantly" },
    { title: "Local Clinic", result: "No-shows cut by 40%" }
  ];

  // Testimonials
  const testimonials = [
    {
      quote: "We were struggling with B2B lead response times - sometimes taking 6-8 hours to get back to potential clients. After implementing Skasa's AI agents, we now respond within 2 minutes, 24/7. The AI perfectly captures our technical expertise and even handles complex pricing discussions. Last month alone, we closed ₹2.3 crore in deals that would have been lost due to delayed responses. Our sales team can now focus on closing deals instead of answering the same basic questions repeatedly.",
      author: "Rajesh Mehta",
      title: "CEO, Knitting Age B2B",
      rating: 5,
      company: "Knitting Age B2B Company"
    },
    {
      quote: "As an accounting firm, accuracy and client trust are everything. Initially, I was skeptical about AI handling financial inquiries, but Skasa's agents are incredibly sophisticated. This freed up 22 hours per week for our team to focus on complex advisory work. Our client satisfaction scores increased from 4.1 to 4.7, and we've been able to take on many more clients without hiring additional staff. I won't lie - there was definitely a learning curve in the first month as we fine-tuned responses, but it was absolutely worth the effort.",
      author: "Priya Sterling",
      title: "Managing Partner, Sterling Ledgers",
      rating: 4.5,
      company: "sterlingledgers.com"
    },
    {
      quote: "Our rental business was chaos before Skasa - missed calls, double bookings, manual scheduling nightmares. The AI agents transformed everything. They handle property inquiries, schedule viewings, collect initial deposits, and send automated reminders. Revenue increased by ₹8.5 lakhs monthly, and I actually get to sleep now instead of answering calls at midnight about apartment availability! My wife says I'm finally present at family dinners instead of constantly checking my phone.",
      author: "Vikram Srivas",
      title: "Founder, Srivas Angan Rentals",
      rating: 5,
      company: "Srivas Angan Rental Business"
    },
    {
      quote: "Running an e-commerce brand means dealing with hundreds of customer queries daily about sizing, shipping, returns, product details. Before Skasa, our small team was drowning - 8-hour response times and frustrated customers. The AI responds to support tickets instantly, with perfect product knowledge and genuine empathy. Our customer satisfaction went from 3.8 to 4.6 stars. Customers now get immediate help during checkout issues which has dramatically improved our sales. Best investment we've made for the business this year.",
      author: "James Robertson",
      title: "Head of Operations, DearMe",
      rating: 4.5,
      company: "DearMe E-commerce Brand"
    }
  ];

  // FAQ data
  const faqs = [
    {
      question: "What does \"in your voice\" mean?",
      answer: "We train the AI on your existing customer communications, brand guidelines, and preferred responses to match your tone, style, and expertise level perfectly."
    },
    {
      question: "How do calendars and reminders work?",
      answer: "Direct integration with your existing calendar system (Google, Outlook, Calendly) with intelligent scheduling, automatic reminders via SMS/email, and no-show prevention."
    },
    {
      question: "Which channels can the agent use?",
      answer: "Email, live chat, phone calls, SMS, contact forms, and social media DMs - all from a single unified system."
    },
    {
      question: "Privacy & data handling?",
      answer: "Enterprise-grade security with SOC 2 compliance, encrypted data storage, and full control over your customer information."
    },
    {
      question: "Typical onboarding time?",
      answer: "Most clients are live within 1-2 weeks. We handle setup, training, and integration while you maintain full control and oversight."
    }
  ];

  return (
    <Layout>
      {/* Elegant Hero Section */}
      <section className="min-h-screen flex items-center justify-center relative overflow-hidden" id="hero" style={{
        background: 'linear-gradient(180deg, #ffffff 0%, #fef3f2 50%, #fef8f3 100%)'
      }}>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            {/* Diwali Badge with Fireworks */}
            <div className="inline-flex items-center gap-3 rounded-full border-2 border-orange-400/60 text-orange-600 px-5 py-1.5 mb-8 bg-orange-50/80 relative">
              {/* Left Firework */}
              <div className="relative w-10 h-10">
                <div className="absolute inset-0 flex items-center justify-center">
                  {[...Array(12)].map((_, j) => {
                    const angle = (j * 30) * Math.PI / 180;
                    const distance = 20;
                    const tx = Math.cos(angle) * distance;
                    const ty = Math.sin(angle) * distance;
                    return (
                      <div
                        key={`fw-left-${j}`}
                        className="absolute w-0.5 h-5 rounded-full"
                        style={{
                          background: `linear-gradient(to bottom, hsl(${35 + j * 10}, 100%, 60%), transparent)`,
                          transformOrigin: 'top',
                          '--tx': `${tx}px`,
                          '--ty': `${ty}px`,
                          animation: `burst-particle 1.5s ease-out ${j * 0.1}s infinite`,
                          boxShadow: `0 0 10px hsl(${35 + j * 10}, 100%, 60%)`,
                        } as React.CSSProperties}
                      />
                    );
                  })}
                  <div 
                    className="absolute w-3 h-3 rounded-full"
                    style={{
                      background: 'radial-gradient(circle, rgba(251, 191, 36, 0.9), transparent)',
                      animation: 'flash 1.5s ease-out infinite',
                    }}
                  />
                </div>
              </div>

              <Flame className="w-4 h-4 text-orange-500 fill-orange-500 animate-pulse" />
              <span className="text-base font-semibold whitespace-nowrap">Happy Diwali from Skasa</span>
              <Flame className="w-4 h-4 text-orange-500 fill-orange-500 animate-pulse" />
              
              {/* Right Firework */}
              <div className="relative w-10 h-10">
                <div className="absolute inset-0 flex items-center justify-center">
                  {[...Array(12)].map((_, j) => {
                    const angle = (j * 30) * Math.PI / 180;
                    const distance = 20;
                    const tx = Math.cos(angle) * distance;
                    const ty = Math.sin(angle) * distance;
                    return (
                      <div
                        key={`fw-right-${j}`}
                        className="absolute w-0.5 h-5 rounded-full"
                        style={{
                          background: `linear-gradient(to bottom, hsl(${270 + j * 10}, 100%, 65%), transparent)`,
                          transformOrigin: 'top',
                          '--tx': `${tx}px`,
                          '--ty': `${ty}px`,
                          animation: `burst-particle 1.5s ease-out ${0.75 + j * 0.1}s infinite`,
                          boxShadow: `0 0 10px hsl(${270 + j * 10}, 100%, 65%)`,
                        } as React.CSSProperties}
                      />
                    );
                  })}
                  <div 
                    className="absolute w-3 h-3 rounded-full"
                    style={{
                      background: 'radial-gradient(circle, rgba(192, 132, 252, 0.9), transparent)',
                      animation: 'flash 1.5s ease-out 0.75s infinite',
                    }}
                  />
                </div>
              </div>
            </div>

            {/* Elegant Main Headline */}
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-light mb-6 leading-tight tracking-tight">
              <span className="block text-foreground font-extralight">Get More Customers</span>
              <span className="block bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent font-medium">Without Hiring Extra Staff</span>
            </h1>
            
            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto font-light">
              Our AI answers leads, books appointments, and follows up for you, 24/7.
            </p>

            {/* Hero Stats */}
            <div className="grid grid-cols-3 gap-8 max-w-xl mx-auto mb-12">
              <div className="text-center bg-primary/5 rounded-lg p-4 border border-primary/20">
                <div className="text-2xl font-semibold text-foreground">95%</div>
                <div className="text-xs text-muted-foreground">Response Rate</div>
              </div>
              <div className="text-center bg-primary/5 rounded-lg p-4 border border-primary/20">
                <div className="text-2xl font-semibold text-foreground">3×</div>
                <div className="text-xs text-muted-foreground">More Bookings</div>
              </div>
              <div className="text-center bg-primary/5 rounded-lg p-4 border border-primary/20">
                <div className="text-2xl font-semibold text-foreground">24/7</div>
                <div className="text-xs text-muted-foreground">Always On</div>
              </div>
            </div>

            {/* Apple-Style Clean Professional Buttons */}
            <div className="flex flex-col sm:flex-row gap-3 justify-center items-center mb-16">
              <Button 
                onClick={handleCalendarClick}
                size="lg" 
                className="bg-foreground text-background hover:bg-foreground/90 font-medium px-6 py-3 rounded-lg border-0 shadow-sm hover:shadow-md transition-all duration-300"
              >
                <Calendar className="w-4 h-4 mr-2" />
                Schedule Strategy Call
              </Button>
              
              <Button 
                onClick={handleViewAgents}
                variant="outline" 
                size="lg" 
                className="font-medium px-6 py-3 rounded-lg"
              >
                Explore Solutions
                <ArrowUpRight className="w-4 h-4 ml-2" />
              </Button>
            </div>

            {/* Partner Strip - colorful, long, perpetual */}
            <div className="text-center">
              <p className="text-xs text-muted-foreground mb-4">Powered by industry leaders</p>
                <div className="relative overflow-hidden">
                  <div className="pointer-events-none absolute left-0 top-0 h-full w-12 bg-gradient-to-r from-white to-transparent z-10"></div>
                  <div className="pointer-events-none absolute right-0 top-0 h-full w-12 bg-gradient-to-l from-white to-transparent z-10"></div>
                  <div className="flex animate-scroll items-center gap-12" style={{ width: 'calc(300% + 6rem)' }}>
                    {partnerLogos.map((logo, index) => (
                      <img key={index} src={logo} alt="Technology partner logo" className="h-6 w-auto opacity-90" />
                    ))}
                    {partnerLogos.map((logo, index) => (
                      <img key={`dup-${index}`} src={logo} alt="Technology partner logo" className="h-6 w-auto opacity-90" />
                    ))}
                    {partnerLogos.map((logo, index) => (
                      <img key={`dup2-${index}`} src={logo} alt="Technology partner logo" className="h-6 w-auto opacity-90" />
                    ))}
                  </div>
                </div>
            </div>
          </div>
        </div>
      </section>


      {/* Growth Solutions Portfolio */}
      <section className="section-mobile bg-gradient-to-br from-white via-blue-50/20 to-purple-50/20" id="what-we-build">
        <div className="container-mobile">
          <div className="text-center mb-12">
            <div className="impact-badge mx-auto mb-6">
              Growth Solution Portfolio
            </div>
            
            <h2 className="text-h2-mobile font-bold mb-6 text-gray-900">
              Revenue-Driving Systems We Build
              <span className="block bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                For Growth Partners
              </span>
            </h2>
            
            <p className="text-body-mobile text-gray-700 max-w-3xl mx-auto">
              Each system is designed to eliminate bottlenecks, capture opportunities, and scale your revenue without scaling your workload.
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {tools.map((tool, index) => (
              <div key={index} className="premium-card rounded-2xl p-6 h-full flex flex-col animate-bounce-in border-l-4 border-primary" style={{ animationDelay: `${index * 0.1}s` }}>
                {/* (removed icon header) */}

                {/* Main image header */}
                <div className="w-full h-48 mb-4 rounded-xl overflow-hidden bg-surface-secondary relative">
                  <img 
                    src={tool.image} 
                    alt={`${tool.title} dashboard preview`}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  {tool.flagship && (
                    <div className="impact-badge absolute top-3 right-3 text-xs px-2 py-1">⭐ Most Popular</div>
                  )}
                </div>
                
                {/* Content */}
                <div className="flex-1 flex flex-col">
                  <div className="mb-4">
                    <h3 className="text-h3-mobile font-bold mb-2 text-gray-900">
                      {tool.title}
                    </h3>
                    <div className="roi-highlight text-sm py-2 mb-3">{tool.subtitle}</div>
                  </div>
                  
                  <ul className="space-y-3 mb-6 flex-1">
                    {tool.bullets.map((bullet, bulletIndex) => (
                      <li key={bulletIndex} className="text-sm text-gray-700 flex items-start">
                        <CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
                        <span>{bullet}</span>
                      </li>
                    ))}
                  </ul>
                  
                  <button 
                    className="cta-primary w-full py-3 text-sm"
                    onClick={() => {
                      const slugs = [
                        "/solutions/email-agent",
                        "/solutions/websites", 
                        "/solutions/voice-agent",
                        "/solutions/appointment-agent",
                        "/solutions/smart-campaigns",
                        "/solutions/reviews-reputation"
                      ];
                      navigate(slugs[index]);
                    }}
                  >
                    Explore {tool.title.split(' ')[0]} System →
                  </button>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center mt-12 space-y-6">
            <button onClick={handleCalendarClick} className="cta-primary text-lg px-8 py-4">
              <Calendar className="w-5 h-5 mr-2 inline" />
              Book Growth Strategy Session
            </button>
            <div>
              <Button 
                variant="outline" 
                onClick={() => window.location.href = '/solutions'}
                className="border-2 border-primary text-primary hover:bg-primary hover:text-white px-8 py-3"
              >
                View All Growth Systems
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Social Proof - Testimonials */}
      <section className="section-mobile bg-gradient-to-br from-purple-50/30 to-blue-50/30">
        <div className="container-mobile">
          <div className="text-center mb-12">
            <div className="impact-badge mx-auto mb-6">
              Success Stories
            </div>
            
            <h2 className="text-h2-mobile font-bold mb-6 text-gray-900">
              Real Results From Real 
              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> Growth Partners</span>
            </h2>
          </div>
          
          <div className="grid md:grid-cols-2 gap-8">
            {testimonials.map((testimonial, index) => (
              <div key={index} className="testimonial-card animate-slide-up" style={{ animationDelay: `${index * 0.2}s` }}>
                <div className="flex items-center mb-4">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className={`w-4 h-4 ${i < testimonial.rating ? 'text-yellow-400 fill-current' : 'text-gray-300'}`} />
                  ))}
                  <span className="ml-2 text-sm text-gray-600">{testimonial.rating}/5</span>
                </div>
                
                <blockquote className="text-sm text-gray-700 mb-4 leading-relaxed">
                  "{testimonial.quote}"
                </blockquote>
                
                <div className="border-t pt-4">
                  <div className="font-semibold text-gray-900">{testimonial.author}</div>
                  <div className="text-sm text-gray-600">{testimonial.title}</div>
                  <div className="text-xs text-gray-500 mt-1">{testimonial.company}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section-mobile bg-white">
        <div className="container-mobile">
          <div className="text-center mb-12">
            <h2 className="text-h2-mobile font-bold mb-6 text-gray-900">
              Frequently Asked Questions
            </h2>
          </div>
          
          <div className="grid gap-6 max-w-4xl mx-auto">
            {faqs.map((faq, index) => (
              <div key={index} className="premium-card p-6 animate-slide-up" style={{ animationDelay: `${index * 0.1}s` }}>
                <h3 className="text-h3-mobile font-bold mb-3 text-gray-900">{faq.question}</h3>
                <p className="text-body-mobile text-gray-600">{faq.answer}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="growth-hero section-mobile text-white">
        <div className="container-mobile text-center">
          <div className="impact-badge mx-auto mb-8">
            🎯 Ready to Scale?
          </div>
          
          <h2 className="text-h2-mobile font-bold mb-8">
            Stop Losing Revenue to 
            <span className="block bg-gradient-to-r from-yellow-300 to-orange-400 bg-clip-text text-transparent">
              Manual Processes
            </span>
          </h2>
          
          <p className="text-lg text-blue-100 mb-8 max-w-2xl mx-auto">
            Join 500+ growth partners who've automated their way to 2x revenue increases. 
            Your competitors are already implementing AI - don't get left behind.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
            <button 
              onClick={handleCalendarClick}
              className="cta-primary text-lg px-8 py-4 min-w-[250px]"
            >
              <Calendar className="w-5 h-5 mr-2 inline" />
              Book Free Strategy Session
            </button>
            <Button 
              variant="hero"
              onClick={() => window.location.href = '/solutions'}
              className="px-8 py-4 text-lg min-w-[200px]"
            >
              Explore Growth Systems
            </Button>
          </div>
          
        </div>
      </section>
    </Layout>
  );
};

export default Home;