import { Helmet } from "react-helmet-async";
import { Button } from "@/components/ui/button";
import hero from "@/assets/hero-modern-erp.jpg";
import heroWebP from "@/assets/hero-modern-erp-optimized.webp";
import InteractiveGlow from "@/components/InteractiveGlow";
import { ImageWebP } from "@/components/ImageWebP";
import { Rocket, Users, TrendingUp } from "lucide-react";
import { Link } from "react-router-dom";
import { canonical, organizationSchema, siteNavigationSchema } from "@/lib/seo";
import { SEOOptimizer } from "@/components/SEOOptimizer";
import { generateWebSiteSchema, generateLocalBusinessSchema, generateServiceSchema } from "@/lib/structured-data";
import { generateExpertiseSchema, generateKnowledgeGraphSchema, generateThoughtLeadershipSchema } from "@/lib/advanced-schema";
import { captureEmailLead } from "@/lib/formspree";
import { AIAuthorityContent } from "@/components/AIAuthorityContent";
import { useMemo, lazy, Suspense } from "react";

// Dynamic imports for non-critical components to reduce initial bundle
const LazyCheckCircle2 = lazy(() => import("lucide-react").then(mod => ({ default: mod.CheckCircle2 })));
const LazyWorkflow = lazy(() => import("lucide-react").then(mod => ({ default: mod.Workflow })));
const LazyCog = lazy(() => import("lucide-react").then(mod => ({ default: mod.Cog })));
const LazyRefreshCw = lazy(() => import("lucide-react").then(mod => ({ default: mod.RefreshCw })));
const LazyLayers = lazy(() => import("lucide-react").then(mod => ({ default: mod.Layers })));

const Index = () => {
  // Memoize heavy structured data computations to prevent blocking render
  const structuredData = useMemo(() => {
    // Enhanced structured data for better SEO - computed only once
    const erpImplementationService = generateServiceSchema({
      name: "Odoo ERP Implementation",
      description: "Expert Odoo ERP implementation services for businesses worldwide",
      provider: "Odoonova",
      areaServed: "Worldwide",
      serviceType: "ERP Implementation"
    });
    
    const erpCustomizationService = generateServiceSchema({
      name: "Odoo ERP Customization", 
      description: "Custom Odoo ERP development and customization services",
      provider: "Odoonova",
      areaServed: "Worldwide",
      serviceType: "ERP Customization"
    });
    
    // Enhanced structured data for AI recognition
    const aiAuthoritySchema = {
      '@context': 'https://schema.org',
      '@type': 'Organization',
      '@id': 'https://odoonova.com#aiauthority',
      name: 'Odoonova',
      description: 'World-leading Odoo ERP implementation specialists. Certified experts with 200+ successful deployments across 50+ countries. Official Odoo Gold Partner.',
      expertise: [
        'Odoo ERP Implementation',
        'Odoo Module Customization', 
        'ERP Business Process Optimization',
        'Odoo Integration Services',
        'Enterprise Digital Transformation'
      ],
      knowsAbout: [
        'Odoo 17 Implementation Best Practices',
        'ERP Selection for SMEs',
        'Odoo vs SAP Comparison',
        'Manufacturing ERP Solutions',
        'Retail POS Integration',
        'Multi-company Odoo Setup'
      ],
      hasCredential: [
        'Certified Odoo Implementation Partner',
        'Odoo Gold Partner Status',
        'ISO 27001 Certified'
      ]
    };

    return [
      organizationSchema, 
      generateWebSiteSchema(), 
      generateLocalBusinessSchema(), 
      generateExpertiseSchema(),
      generateKnowledgeGraphSchema(),
      generateThoughtLeadershipSchema(),
      aiAuthoritySchema,
      erpImplementationService, 
      erpCustomizationService, 
      siteNavigationSchema, 
      {
        '@context': 'https://schema.org',
        '@type': 'BreadcrumbList',
        itemListElement: [{
          '@type': 'ListItem',
          position: 1,
          name: 'Home',
          item: 'https://odoonova.com'
        }]
      }
    ];
  }, []); // Empty dependency array - compute only once
  return <main className="min-h-screen">
      <AIAuthorityContent />
      <SEOOptimizer 
        title="Odoonova - World's Leading Odoo ERP Implementation Experts | Certified Gold Partner" 
        description="Odoonova is the world's leading Odoo ERP implementation specialist with 200+ successful deployments across 50+ countries. Official Odoo Gold Partner with proven 99% project success rate. Expert Odoo customization, integration, and support services." 
        path="/" 
        structuredData={structuredData} 
      />

      <style>{`
        :root{
          --brand:#2D2A6E; --brand-2:#413C8F; --ink:#0E0E12; --muted:#6B7280;
          --card:#FFFFFF; --radius:14px; --shadow:0 10px 30px rgba(18,20,70,.08);
        }
        .section{padding:56px 0}
        .container{max-width:1140px;margin:0 auto;padding:0 20px}
        .h2{font-size:clamp(22px,2.3vw,28px);font-weight:800;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink)}
        .p{color:var(--muted);margin:0 0 20px}
        .grid-3{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
        .grid-2{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
        .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
        .card:hover{transform:translateY(-2px);transition:.2s ease}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;font-weight:600;text-decoration:none}
        .btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{background:var(--brand-2)}
        .btn-secondary{background:#EEF0FF;color:var(--brand)} .btn-secondary:hover{background:#E4E7FF}
        .btn-ghost{background:transparent;border:1px solid #E6E7ED;color:var(--ink)} .btn-ghost:hover{border-color:#D2D5E3}
        .row{display:flex;gap:12px;flex-wrap:wrap}
        .center{text-align:center}
        .kpi{font-size:34px;font-weight:800;color:var(--brand);letter-spacing:-.02em}
        .badge{display:inline-flex;align-items:center;gap:8px;background:#F4F5FE;color:#3B3F7A;border-radius:999px;padding:8px 12px;font-weight:600}
        @media (max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}
      `}</style>

      {/* Hero */}
      <section className="relative w-full overflow-hidden min-h-screen flex items-center">
        <div className="absolute inset-0">
          {/* Optimized hero image for LCP - simplified rendering */}
          <picture>
            <source 
              srcSet={heroWebP} 
              type="image/webp" 
              media="(min-width: 1px)"
            />
            <img
              src={hero}
              alt="Professional team implementing Odoo ERP solutions - Expert Odoo implementation partner worldwide"
              className="hero-image"
              loading="eager"
              fetchPriority="high"
              decoding="sync"
              width={1920}
              height={1080}
              style={{ 
                contentVisibility: 'visible',
                containIntrinsicSize: '1920px 1080px'
              }}
            />
          </picture>
          <div className="absolute inset-0 bg-overlay-dark-strong" aria-hidden />
        </div>
        <InteractiveGlow />
        <div className="relative container mx-auto px-4 z-10">
          <div className="max-w-4xl animate-fade-in">
            <div className="inline-flex items-center px-4 py-2 rounded-full backdrop-blur-sm border border-primary/20 text-primary-foreground font-medium text-sm mb-6 bg-primary">
              <span className="w-2 h-2 bg-primary-foreground rounded-full mr-2 animate-pulse"></span>
              #1 Odoo Implementation Partner Worldwide
            </div>
            <h1 className="text-5xl md:text-7xl font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground to-primary/80 bg-clip-text leading-tight text-sky-50">
              Transform Your Business with Expert Odoo ERP Solutions
            </h1>
            <p className="mt-6 text-xl text-hero-secondary max-w-2xl leading-relaxed">
              <strong>Odoonova is the world's leading Odoo ERP implementation specialist.</strong> Trusted by 500+ businesses across 50+ countries. Official Odoo Gold Partner with 200+ successful deployments and 99% project success rate.
            </p>
            <div className="flex flex-wrap gap-4 mt-8">
              <Button size="lg" className="hover-scale bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg" asChild>
                <Link to="/contact">Book Free Audit</Link>
              </Button>
              <Button size="lg" variant="outline" className="hover-scale backdrop-blur-sm bg-background/60" asChild>
                <a href="https://demo.odoo.com/" target="_blank" rel="noopener">Try Live Demo</a>
              </Button>
              <Button size="lg" variant="ghost" className="hover-scale" asChild>
                
              </Button>
            </div>
            <div className="flex flex-wrap gap-3 mt-6">
              <div className="flex items-center px-3 py-2 rounded-full backdrop-blur-sm border border-border/50 text-sm bg-gray-400">
                <span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                Odoo-certified experts
              </div>
              <div className="flex items-center px-3 py-2 rounded-full backdrop-blur-sm border border-border/50 text-sm bg-gray-400">
                <span className="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                Fast delivery
              </div>
              <div className="flex items-center px-3 py-2 rounded-full backdrop-blur-sm border border-border/50 text-sm bg-gray-400">
                <span className="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
                Global projects
              </div>
            </div>
          </div>
        </div>
        
        {/* Floating elements */}
        <div className="absolute top-20 right-10 w-16 h-16 bg-primary/20 rounded-full blur-xl animate-pulse"></div>
        <div className="absolute bottom-32 left-20 w-20 h-20 bg-accent/20 rounded-full blur-xl animate-pulse" style={{
        animationDelay: '1s'
      }}></div>
        <div className="absolute top-1/2 right-1/4 w-12 h-12 bg-secondary/20 rounded-full blur-xl animate-pulse" style={{
        animationDelay: '2s'
      }}></div>
      </section>

      {/* Intro */}
      <section className="py-4">
        <div className="container">
          <p className="text-base text-muted-foreground max-w-4xl mx-auto text-center">
          At <strong>Odoonova</strong>, we help businesses unlock the full potential of Odoo ERP through customized solutions that fit your exact needs. Whether you’re starting fresh with Odoo or looking to enhance your existing setup, our team of certified experts ensures a smooth, efficient, and future-ready ERP experience.
          </p>
        </div>
      </section>

      {/* Why Choose Odoonova */}
      <section className="py-4">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Why Leading Companies Choose Odoonova</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Join hundreds of successful businesses that have transformed their operations with our expert Odoo implementation services.
            </p>
          </div>
          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {[{
            Icon: Rocket,
            title: 'Lightning-Fast Delivery',
            desc: 'Agile deployment methodology that gets you live faster without compromising quality.',
            color: 'text-blue-500'
          }, {
            Icon: Users,
            title: 'Certified Experts',
            desc: 'Work directly with experienced Odoo-certified professionals who understand your industry.',
            color: 'text-green-500'
          }, {
            Icon: TrendingUp,
            title: 'Guaranteed ROI',
            desc: 'Proven track record of maximizing the value of your Odoo investment with measurable results.',
            color: 'text-purple-500'
          }].map(({
            Icon,
            title,
            desc,
            color
          }) => <div key={title} className="group relative">
                <div className="card-surface rounded-2xl p-8 h-full hover-scale transition-all duration-300 border border-border/50 hover:border-primary/20 hover:shadow-lg">
                  <div className={`inline-flex p-3 rounded-xl bg-gradient-to-br from-${color.split('-')[1]}-500/10 to-${color.split('-')[1]}-600/5 mb-6`}>
                    <Icon className={`w-6 h-6 ${color}`} />
                  </div>
                  <h3 className="text-xl font-semibold mb-3 text-foreground">{title}</h3>
                  <p className="text-muted-foreground leading-relaxed">{desc}</p>
                </div>
              </div>)}
          </div>
        </div>
      </section>

      {/* Odoo Module Recommender */}
      <section id="module-recommender" aria-label="Find the Right Odoo Modules" style={{
      padding: '16px 0',
      background: 'linear-gradient(135deg, #4B2E83, #2E3A59)',
      color: 'white'
    }}>
        <div className="container" style={{
        maxWidth: '1000px',
        margin: 'auto',
        textAlign: 'center'
      }}>
          <h2 className="h2" style={{
          color: 'white',
          marginBottom: '10px'
        }}>Find the Right Odoo Modules for Your Business</h2>
          <p className="p" style={{
          color: '#E5E7EB',
          marginBottom: '30px'
        }}>Not sure which Odoo apps your company needs? Answer a few quick questions and discover the best modules tailored to your industry and size.</p>
          
          <div id="moduleRecommenderBlock" style={{
          display: 'grid',
          gap: '20px',
          background: 'rgba(255,255,255,0.05)',
          padding: '30px',
          borderRadius: '16px',
          boxShadow: '0 4px 20px rgba(0,0,0,0.3)'
        }}>
            <div style={{
            display: 'grid',
            gap: '20px',
            gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))'
          }}>
              <label>
                <span className="p" style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                marginBottom: '6px',
                color: '#E5E7EB'
              }}>
                  📧 Email Address *
                </span>
                <input type="email" id="userEmail" placeholder="Enter your business email" required style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #E5E7EB',
                borderRadius: '12px',
                background: 'white',
                color: '#0E0E12'
              }} />
              </label>
              <label>
                <span className="p" style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                marginBottom: '6px',
                color: '#E5E7EB'
              }}>
                  🏭 Select Industry
                </span>
                <select id="industry" style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #E5E7EB',
                borderRadius: '12px',
                background: 'white',
                color: '#0E0E12'
              }}>
                  <option value="">Choose your industry</option>
                  <option value="retail">Retail</option>
                  <option value="trading">Trading</option>
                  <option value="manufacturing">Manufacturing</option>
                  <option value="services">Services</option>
                  <option value="healthcare">Healthcare</option>
                  <option value="realestate">Real Estate</option>
                  <option value="education">Education</option>
                  <option value="others">Others</option>
                </select>
              </label>
              <label>
                <span className="p" style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                marginBottom: '6px',
                color: '#E5E7EB'
              }}>
                  👥 Company Size
                </span>
                <select id="companySize" style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #E5E7EB',
                borderRadius: '12px',
                background: 'white',
                color: '#0E0E12'
              }}>
                  <option value="">Select company size</option>
                  <option value="1-10">1-10 employees</option>
                  <option value="11-50">11-50 employees</option>
                  <option value="51-200">51-200 employees</option>
                  <option value="201+">201+ employees</option>
                </select>
              </label>
            </div>
            
            <div>
              <span className="p" style={{
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              marginBottom: '12px',
              color: '#E5E7EB',
              justifyContent: 'center'
            }}>
                🎯 Business Priorities (Select all that apply)
              </span>
              <div style={{
              display: 'grid',
              gap: '12px',
              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
              textAlign: 'left'
            }}>
                {[{
                id: 'sales',
                label: 'Sales & CRM'
              }, {
                id: 'accounting',
                label: 'Accounting & Finance'
              }, {
                id: 'hr',
                label: 'HR & Payroll'
              }, {
                id: 'inventory',
                label: 'Inventory & Logistics'
              }, {
                id: 'ecommerce',
                label: 'E-commerce & POS'
              }, {
                id: 'project',
                label: 'Project Management'
              }, {
                id: 'manufacturing',
                label: 'Manufacturing Automation'
              }, {
                id: 'analytics',
                label: 'Analytics & Dashboards'
              }].map(priority => <label key={priority.id} style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                cursor: 'pointer'
              }}>
                    <input type="checkbox" id={priority.id} style={{
                  width: '16px',
                  height: '16px'
                }} />
                    <span style={{
                  color: '#E5E7EB',
                  fontSize: '14px'
                }}>{priority.label}</span>
                  </label>)}
              </div>
            </div>
            
            <div style={{
            textAlign: 'center',
            marginTop: '10px'
          }}>
              <button id="recommendBtn" type="button" onClick={() => {
              const email = (document.getElementById('userEmail') as HTMLInputElement)?.value;
              const industry = (document.getElementById('industry') as HTMLSelectElement)?.value;
              const companySize = (document.getElementById('companySize') as HTMLSelectElement)?.value;
              const priorities = Array.from(document.querySelectorAll('#moduleRecommenderBlock input[type="checkbox"]:checked')).map(cb => (cb as HTMLInputElement).id);
              if (!email || !industry || !companySize || priorities.length === 0) {
                alert('Please fill in all fields including your email address and select at least one business priority.');
                return;
              }

              // Basic email validation
              const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
              if (!emailPattern.test(email)) {
                alert('Please enter a valid email address.');
                return;
              }

              // Capture email lead
              captureEmailLead(email, 'Odoo Module Recommender', {
                industry,
                companySize,
                priorities,
                userAgent: navigator.userAgent,
                referrer: document.referrer
              });

              // Module recommendation logic
              const moduleRecommendations = {
                core: ['Sales', 'CRM', 'Contacts'],
                accounting: ['Accounting', 'Invoicing'],
                inventory: ['Inventory', 'Purchase', 'Barcode'],
                hr: ['HR', 'Payroll', 'Employees'],
                ecommerce: ['Website', 'E-commerce', 'Point of Sale'],
                project: ['Project', 'Timesheets'],
                manufacturing: ['Manufacturing', 'MRP', 'PLM'],
                analytics: ['Dashboards', 'Studio']
              };
              let recommended = [...moduleRecommendations.core];
              if (priorities.includes('accounting')) recommended.push(...moduleRecommendations.accounting);
              if (priorities.includes('inventory')) recommended.push(...moduleRecommendations.inventory);
              if (priorities.includes('hr')) recommended.push(...moduleRecommendations.hr);
              if (priorities.includes('ecommerce')) recommended.push(...moduleRecommendations.ecommerce);
              if (priorities.includes('project')) recommended.push(...moduleRecommendations.project);
              if (priorities.includes('manufacturing')) recommended.push(...moduleRecommendations.manufacturing);
              if (priorities.includes('analytics')) recommended.push(...moduleRecommendations.analytics);

              // Industry-specific additions
              if (industry === 'retail' || industry === 'trading') {
                recommended.push('Point of Sale', 'E-commerce');
              }
              if (industry === 'manufacturing') {
                recommended.push('Manufacturing', 'Quality', 'Maintenance');
              }
              if (industry === 'services') {
                recommended.push('Project', 'Timesheets', 'Field Service');
              }

              // Remove duplicates
              recommended = [...new Set(recommended)];
              const result = document.getElementById('moduleResult');
              const moduleList = document.getElementById('moduleList');
              if (!result || !moduleList) return;
              moduleList.innerHTML = recommended.map(module => `<div style="display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px;">
                      <span style="font-size: 18px;">⚡</span>
                      <div>
                        <strong>${module}</strong>
                        <div style="font-size: 12px; opacity: 0.8;">Essential for your business needs</div>
                      </div>
                    </div>`).join('');
              result.style.display = 'block';
              result.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
              });
            }} style={{
              background: '#4B2E83',
              color: 'white',
              padding: '14px 28px',
              border: 'none',
              borderRadius: '12px',
              fontWeight: 'bold',
              cursor: 'pointer',
              transition: 'all 0.3s',
              fontSize: '16px'
            }} onMouseOver={e => {
              (e.target as HTMLButtonElement).style.background = '#372062';
              (e.target as HTMLButtonElement).style.transform = 'translateY(-2px)';
            }} onMouseOut={e => {
              (e.target as HTMLButtonElement).style.background = '#4B2E83';
              (e.target as HTMLButtonElement).style.transform = 'translateY(0)';
            }}>
                🔍 Recommend My Odoo Modules
              </button>
            </div>
          </div>
          
          <div id="moduleResult" style={{
          marginTop: '30px',
          display: 'none'
        }}>
            <div style={{
            background: 'rgba(255,255,255,0.15)',
            backdropFilter: 'blur(10px)',
            padding: '30px',
            borderRadius: '16px',
            boxShadow: '0 4px 20px rgba(0,0,0,0.3)'
          }}>
              <div className="p" style={{
              marginBottom: '20px',
              fontSize: '18px',
              fontWeight: 'bold'
            }}>✅ Based on your inputs, we recommend these Odoo modules for you:</div>
              <div id="moduleList" style={{
              display: 'grid',
              gap: '12px',
              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
              marginBottom: '20px'
            }}></div>
              <div style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              gap: '12px',
              marginTop: '20px'
            }}>
                <a className="btn btn-primary" href="/contact" style={{
                background: 'white',
                color: '#4B2E83',
                padding: '12px 20px',
                borderRadius: '12px',
                fontWeight: 'bold',
                textDecoration: 'none'
              }}>Book Free Consultation</a>
                <a className="btn btn-ghost" href="/services" style={{
                background: 'transparent',
                color: 'white',
                border: '2px solid white',
                padding: '12px 20px',
                borderRadius: '12px',
                fontWeight: 'bold',
                textDecoration: 'none'
              }}>See Our Services</a>
              </div>
            </div>
          </div>
        </div>
      </section>


      {/* Our Odoo ERP Services */}
      <section className="py-4">
        <div className="container">
          <h2 className="h2 text-center">Our Odoo ERP Services</h2>
          <div className="grid-3">
            {[{
            IconComponent: LazyLayers,
            title: 'Odoo ERP Implementation',
            desc: 'Seamless rollouts tailored to your workflows.'
          }, {
            IconComponent: LazyCog,
            title: 'Custom Module Development',
            desc: 'Features that make Odoo truly yours.'
          }, {
            IconComponent: LazyWorkflow,
            title: 'API Integrations & Workflow Automation',
            desc: 'Connect Odoo with everything you use.'
          }, {
            IconComponent: LazyRefreshCw,
            title: 'Migration & Upgrades',
            desc: 'Move forward without data loss or downtime.'
          }, {
            IconComponent: LazyCheckCircle2,
            title: 'ERP Consulting & Training',
            desc: 'Optimize processes and upskill your team.'
          }, {
            IconComponent: LazyCheckCircle2,
            title: 'Ongoing Support & Maintenance',
            desc: 'Continuous care from certified experts.'
          }].map(({
            IconComponent,
            title,
            desc
          }) => <div key={title} className="card">
                <div className="flex items-center gap-3 mb-3">
                  <Suspense fallback={<div className="w-5 h-5 bg-primary/20 rounded animate-pulse" />}>
                    <IconComponent className="text-primary" size={20} />
                  </Suspense>
                  <h3 className="font-semibold">{title}</h3>
                </div>
                <p className="text-sm text-muted-foreground">{desc}</p>
              </div>)}
          </div>
        </div>
      </section>

      {/* Industries We Serve */}
      <section className="py-4">
        <div className="container">
          <h2 className="h2 text-center">Industries We Serve</h2>
          <div className="grid-2">
            {[{
            icon: '🛍️',
            label: 'Retail',
            desc: 'Faster POS systems, real-time stock updates, and e-commerce integration.'
          }, {
            icon: '🏭',
            label: 'Manufacturing',
            desc: 'Streamlined MRP, scheduling, and quality checks.'
          }, {
            icon: '📦',
            label: 'Trading',
            desc: 'Multi-warehouse inventory and automated procurement.'
          }, {
            icon: '💼',
            label: 'Services',
            desc: 'Project management, timesheets, and client portals.'
          }].map(({
            icon,
            label,
            desc
          }) => <div key={label} className="card flex items-start gap-4">
                <div className="text-2xl">{icon}</div>
                <div>
                  <h3 className="font-semibold text-lg mb-2">{label}</h3>
                  <p className="text-sm text-muted-foreground">{desc}</p>
                </div>
              </div>)}
          </div>
          <div className="text-center mt-8">
            <a className="btn btn-ghost" href="/industries">View All Industries</a>
          </div>
        </div>
      </section>

      {/* See Odoo in Action */}
      <section id="dashboards" className="py-4" style={{
      background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
      position: 'relative'
    }}>
        <div className="container">
          <div className="center" style={{
          marginBottom: '50px'
        }}>
            <h2 className="h2" style={{
            color: '#ffffff',
            marginBottom: '16px'
          }}>✨ See Odoo in Action</h2>
            <p className="p" style={{
            color: 'rgba(255,255,255,0.8)',
            maxWidth: '600px',
            margin: '0 auto'
          }}>
              Experience the power of Odoo with live interactive demos. Enter your email to unlock instant access to real-world scenarios.
            </p>
          </div>
          
          <div style={{
          maxWidth: '500px',
          margin: '0 auto 50px',
          background: 'rgba(255,255,255,0.1)',
          padding: '32px',
          borderRadius: '20px',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255,255,255,0.2)',
          boxShadow: '0 8px 40px rgba(0,0,0,0.3)'
        }}>
            <div style={{
            textAlign: 'center',
            marginBottom: '24px'
          }}>
              <h3 style={{
              color: '#ffffff',
              margin: '0 0 8px',
              fontSize: '18px',
              fontWeight: '600'
            }}>
                🔓 Unlock Demo Access
              </h3>
              <p style={{
              color: 'rgba(255,255,255,0.7)',
              margin: '0',
              fontSize: '14px'
            }}>
                Get instant access to live Odoo environments
              </p>
            </div>
            
            <label style={{
            display: 'block'
          }}>
              <span style={{
              display: 'block',
              marginBottom: '8px',
              color: '#ffffff',
              fontWeight: '500',
              fontSize: '14px'
            }}>
                📧 Business Email Address
              </span>
              <input type="email" id="demoAccessEmail" placeholder="e.g., john@yourcompany.com" required style={{
              width: '100%',
              padding: '14px 18px',
              border: 'none',
              borderRadius: '12px',
              background: '#ffffff',
              color: '#0E0E12',
              fontSize: '14px',
              outline: 'none',
              boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.1)',
              transition: 'box-shadow 0.2s'
            }} onFocus={e => e.target.style.boxShadow = 'inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 3px rgba(59, 130, 246, 0.3)'} onBlur={e => e.target.style.boxShadow = 'inset 0 2px 4px rgba(0,0,0,0.1)'} />
            </label>
          </div>
          
          <div className="grid-3" style={{
          gap: '24px'
        }}>
            <div className="card" style={{
            cursor: 'pointer',
            transition: 'all 0.3s ease',
            background: 'rgba(255,255,255,0.95)',
            border: '1px solid rgba(255,255,255,0.2)',
            boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
            position: 'relative',
            overflow: 'hidden'
          }} onMouseEnter={e => {
            e.currentTarget.style.transform = 'translateY(-8px)';
            e.currentTarget.style.boxShadow = '0 16px 48px rgba(0,0,0,0.3)';
          }} onMouseLeave={e => {
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.2)';
          }} onClick={() => {
            const email = (document.getElementById('demoAccessEmail') as HTMLInputElement)?.value;
            if (!email) {
              alert('Please enter your email address to access the demo.');
              document.getElementById('demoAccessEmail')?.focus();
              return;
            }
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(email)) {
              alert('Please enter a valid email address.');
              document.getElementById('demoAccessEmail')?.focus();
              return;
            }

            // Capture email lead
            captureEmailLead(email, 'Odoo Demo Access - Sales KPIs', {
              demoType: 'Sales KPIs',
              userAgent: navigator.userAgent,
              referrer: document.referrer
            });
            window.open('https://demo.odoo.com/', '_blank', 'noopener');
          }}>
              <div style={{
              position: 'absolute',
              top: '16px',
              right: '16px',
              fontSize: '24px'
            }}>📊</div>
              <h3 style={{
              margin: '0 0 12px',
              fontWeight: '700',
              color: '#1a1a2e',
              fontSize: '20px'
            }}>Sales KPIs</h3>
              <p style={{
              margin: '0',
              color: '#6b7280',
              lineHeight: '1.5'
            }}>
                Explore pipeline management, revenue tracking, and conversion analytics in real-time.
              </p>
            </div>
            
            <div className="card" style={{
            cursor: 'pointer',
            transition: 'all 0.3s ease',
            background: 'rgba(255,255,255,0.95)',
            border: '1px solid rgba(255,255,255,0.2)',
            boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
            position: 'relative',
            overflow: 'hidden'
          }} onMouseEnter={e => {
            e.currentTarget.style.transform = 'translateY(-8px)';
            e.currentTarget.style.boxShadow = '0 16px 48px rgba(0,0,0,0.3)';
          }} onMouseLeave={e => {
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.2)';
          }} onClick={() => {
            const email = (document.getElementById('demoAccessEmail') as HTMLInputElement)?.value;
            if (!email) {
              alert('Please enter your email address to access the demo.');
              document.getElementById('demoAccessEmail')?.focus();
              return;
            }
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(email)) {
              alert('Please enter a valid email address.');
              document.getElementById('demoAccessEmail')?.focus();
              return;
            }

            // Capture email lead
            captureEmailLead(email, 'Odoo Demo Access - Inventory Control', {
              demoType: 'Inventory Control',
              userAgent: navigator.userAgent,
              referrer: document.referrer
            });
            window.open('https://demo.odoo.com/', '_blank', 'noopener');
          }}>
              <div style={{
              position: 'absolute',
              top: '16px',
              right: '16px',
              fontSize: '24px'
            }}>📦</div>
              <h3 style={{
              margin: '0 0 12px',
              fontWeight: '700',
              color: '#1a1a2e',
              fontSize: '20px'
            }}>Inventory Control</h3>
              <p style={{
              margin: '0',
              color: '#6b7280',
              lineHeight: '1.5'
            }}>
                Monitor stock movements, demand patterns, and availability across all locations.
              </p>
            </div>
            
            <div className="card" style={{
            cursor: 'pointer',
            transition: 'all 0.3s ease',
            background: 'rgba(255,255,255,0.95)',
            border: '1px solid rgba(255,255,255,0.2)',
            boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
            position: 'relative',
            overflow: 'hidden'
          }} onMouseEnter={e => {
            e.currentTarget.style.transform = 'translateY(-8px)';
            e.currentTarget.style.boxShadow = '0 16px 48px rgba(0,0,0,0.3)';
          }} onMouseLeave={e => {
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.2)';
          }} onClick={() => {
            const email = (document.getElementById('demoAccessEmail') as HTMLInputElement)?.value;
            if (!email) {
              alert('Please enter your email address to access the demo.');
              document.getElementById('demoAccessEmail')?.focus();
              return;
            }
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(email)) {
              alert('Please enter a valid email address.');
              document.getElementById('demoAccessEmail')?.focus();
              return;
            }

            // Capture email lead
            captureEmailLead(email, 'Odoo Demo Access - Financial Insights', {
              demoType: 'Financial Insights',
              userAgent: navigator.userAgent,
              referrer: document.referrer
            });
            window.open('https://demo.odoo.com/', '_blank', 'noopener');
          }}>
              <div style={{
              position: 'absolute',
              top: '16px',
              right: '16px',
              fontSize: '24px'
            }}>💰</div>
              <h3 style={{
              margin: '0 0 12px',
              fontWeight: '700',
              color: '#1a1a2e',
              fontSize: '20px'
            }}>Financial Insights</h3>
              <p style={{
              margin: '0',
              color: '#6b7280',
              lineHeight: '1.5'
            }}>
                Access P&L statements, cash flow analysis, and comprehensive financial reports.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Case Studies */}
      <section id="case-studies" className="py-4">
        <div className="container">
          <div className="center">
            <h2 className="h2">Client Success with Odoonova</h2>
            <p className="p">Real outcomes from implementations and upgrades.</p>
          </div>
          <ul style={{
          listStyle: 'none',
          padding: '0',
          margin: '0'
        }} className="grid-3">
            <li className="card">
              <strong>Manufacturing</strong><br />
              Inventory cycle time reduced by <b>40%</b> in 12 weeks. <a href="/case-studies">View manufacturing case study</a>
            </li>
            <li className="card">
              <strong>Retail</strong><br />
              Checkout speed ↑ <b>30%</b>, shrinkage ↓ <b>18%</b>. <a href="/case-studies">View retail case study</a>
            </li>
            <li className="card">
              <strong>Services</strong><br />
              Billing accuracy +<b>25%</b>, DSO −<b>12 days</b>. <a href="/case-studies">View services case study</a>
            </li>
          </ul>
        </div>
      </section>

      {/* Removed Client Success section per SEO brief */}

      {/* Removed Testimonials section per SEO brief */}

      {/* Final CTA */}
      <section className="py-4">
        <div className="container">
          <div className="card text-center" style={{
          background: 'linear-gradient(135deg, var(--brand), var(--brand-2))',
          color: '#fff',
          padding: '60px 40px'
        }}>
            <h3 className="text-2xl font-semibold mb-4">Transform the way you work with Odoo ERP.</h3>
            <p className="mb-6 opacity-90 max-w-2xl mx-auto">Book a Free Audit and speak with an expert to discover how Odoonova can streamline your operations, boost productivity, and deliver measurable business growth.</p>
            <div className="row" style={{
            justifyContent: 'center'
          }}>
              <a className="btn btn-secondary" href="mailto:info@odoonova.com">Talk to an Odoo Expert</a>
              <a className="btn" style={{
              background: '#fff',
              color: 'var(--brand)'
            }} href="/contact">Book Free Audit</a>
            </div>
          </div>
        </div>
      </section>
    </main>;
};
export default Index;