{{-- resources/views/insights/index.blade.php --}}
@extends('layouts.app')

@section('title', 'CLEDA.I Insights - AI-Powered Market Intelligence')

@section('meta')
<meta name="description" content="Advanced AI-powered market intelligence, data analytics, and business insights for the Caribbean and Latin American markets.">
<meta name="keywords" content="AI insights, market intelligence, data analytics, business intelligence, CLEDA, Caribbean, Latin America, artificial intelligence">
@endsection

@section('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<style>
    :root {
        --primary-blue: #003666;
        --teal: #007785;
        --light-gray: #f8f9fa;
        --dark-gray: #343a40;
        --success-green: #28a745;
        --ai-purple: #6366f1;
        --ai-cyan: #06b6d4;
        --ai-pink: #ec4899;
        --gradient-ai: linear-gradient(135deg, var(--ai-purple) 0%, var(--ai-cyan) 50%, var(--ai-pink) 100%);
    }

    .insights-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2rem;
    }

    /* Hero Section */
    .hero-section {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--ai-purple) 50%, var(--teal) 100%);
        color: white;
        padding: 4rem 3rem;
        border-radius: 25px;
        margin-bottom: 4rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="circuit" patternUnits="userSpaceOnUse" width="20" height="20"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/><path d="M5 10h10M10 5v10" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23circuit)"/></svg>');
        animation: circuitFlow 25s linear infinite;
    }

    @keyframes circuitFlow {
        0% { transform: translateX(0) translateY(0); }
        100% { transform: translateX(-20px) translateY(-20px); }
    }

    .hero-content {
        position: relative;
        z-index: 2;
    }

    .hero-section h1 {
        font-size: 4rem;
        font-weight: 900;
        margin-bottom: 1.5rem;
        background: var(--gradient-ai);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: textShimmer 3s ease-in-out infinite;
    }

    @keyframes textShimmer {
        0%, 100% { filter: brightness(1); }
        50% { filter: brightness(1.3); }
    }

    .hero-section .tagline {
        font-size: 1.8rem;
        opacity: 0.95;
        margin-bottom: 1rem;
        font-weight: 600;
    }

    .hero-section .subtitle {
        font-size: 1.3rem;
        opacity: 0.85;
        margin-bottom: 3rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
    }

    /* AI Brain Animation */
    .ai-brain-container {
        display: flex;
        justify-content: center;
        margin: 5rem 0;
        position: relative;
    }

    .ai-brain {
        width: 300px;
        height: 300px;
        position: relative;
        animation: brainFloat 4s ease-in-out infinite;
    }

    @keyframes brainFloat {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(2deg); }
    }

    .brain-outline {
        width: 100%;
        height: 100%;
        border: 4px solid var(--ai-purple);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        position: absolute;
        animation: brainPulse 2s ease-in-out infinite;
    }

    @keyframes brainPulse {
        0%, 100% { 
            border-color: var(--ai-purple);
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
            transform: scale(1);
        }
        50% { 
            border-color: var(--ai-cyan);
            box-shadow: 0 0 40px rgba(6, 182, 212, 0.6);
            transform: scale(1.05);
        }
    }

    .brain-nodes {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .node {
        position: absolute;
        width: 12px;
        height: 12px;
        background: var(--gradient-ai);
        border-radius: 50%;
        animation: nodeFlicker 1.5s ease-in-out infinite;
    }

    .node:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; }
    .node:nth-child(2) { top: 15%; right: 25%; animation-delay: 0.3s; }
    .node:nth-child(3) { top: 40%; left: 15%; animation-delay: 0.6s; }
    .node:nth-child(4) { top: 45%; right: 20%; animation-delay: 0.9s; }
    .node:nth-child(5) { bottom: 30%; left: 35%; animation-delay: 1.2s; }
    .node:nth-child(6) { bottom: 25%; right: 30%; animation-delay: 1.5s; }
    .node:nth-child(7) { top: 60%; left: 50%; animation-delay: 0.4s; }
    .node:nth-child(8) { top: 30%; left: 60%; animation-delay: 0.8s; }

    @keyframes nodeFlicker {
        0%, 100% { 
            opacity: 0.3;
            transform: scale(1);
            box-shadow: 0 0 5px rgba(99, 102, 241, 0.3);
        }
        50% { 
            opacity: 1;
            transform: scale(1.2);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.8);
        }
    }

    .brain-connections {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .connection {
        position: absolute;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--ai-cyan), transparent);
        animation: connectionFlow 3s ease-in-out infinite;
    }

    .connection:nth-child(1) {
        top: 25%;
        left: 35%;
        width: 30%;
        transform: rotate(45deg);
        animation-delay: 0s;
    }

    .connection:nth-child(2) {
        top: 50%;
        left: 20%;
        width: 40%;
        transform: rotate(-30deg);
        animation-delay: 0.5s;
    }

    .connection:nth-child(3) {
        bottom: 35%;
        right: 25%;
        width: 35%;
        transform: rotate(60deg);
        animation-delay: 1s;
    }

    @keyframes connectionFlow {
        0%, 100% { opacity: 0.2; }
        50% { opacity: 0.8; }
    }

    .brain-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background: var(--gradient-ai);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        animation: centerPulse 2s ease-in-out infinite;
    }

    @keyframes centerPulse {
        0%, 100% { 
            transform: translate(-50%, -50%) scale(1);
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
        }
        50% { 
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 0 30px rgba(6, 182, 212, 0.8);
        }
    }

    /* AI Capabilities Section */
    .capabilities-section {
        margin-bottom: 5rem;
        text-align: center;
    }

    .capabilities-section h2 {
        font-size: 3rem;
        color: var(--primary-blue);
        margin-bottom: 1rem;
        font-weight: 800;
        background: var(--gradient-ai);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .capabilities-section .description {
        font-size: 1.4rem;
        color: #666;
        max-width: 900px;
        margin: 0 auto 4rem auto;
        line-height: 1.7;
    }

    /* Services Grid */
    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 3rem;
        margin-bottom: 5rem;
    }

    .service-card {
        background: white;
        padding: 3rem;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        transition: all 0.4s ease;
        border: 1px solid #e5e7eb;
        position: relative;
        overflow: hidden;
    }

    .service-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--gradient-ai);
        transform: scaleX(0);
        transition: transform 0.6s ease;
    }

    .service-card:hover::before {
        transform: scaleX(1);
    }

    .service-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 25px 60px rgba(99, 102, 241, 0.15);
    }

    .service-icon {
        width: 100px;
        height: 100px;
        background: var(--gradient-ai);
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2rem;
        color: white;
        font-size: 2.5rem;
        position: relative;
        animation: serviceIconGlow 3s ease-in-out infinite;
    }

    @keyframes serviceIconGlow {
        0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
        50% { box-shadow: 0 0 30px rgba(6, 182, 212, 0.6); }
    }

    .service-card h3 {
        font-size: 1.8rem;
        color: var(--primary-blue);
        margin-bottom: 1.5rem;
        font-weight: 700;
    }

    .service-card p {
        color: #666;
        line-height: 1.8;
        margin-bottom: 2rem;
        font-size: 1.1rem;
    }

    .service-features {
        list-style: none;
    }

    .service-features li {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        color: #555;
        font-weight: 500;
    }

    .service-features li i {
        color: var(--ai-purple);
        font-size: 1rem;
    }

    /* Stats Section */
    .stats-section {
        background: linear-gradient(135deg, var(--light-gray) 0%, rgba(99, 102, 241, 0.05) 100%);
        padding: 4rem 3rem;
        border-radius: 25px;
        margin-bottom: 5rem;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 3rem;
        text-align: center;
    }

    .stat-card {
        background: white;
        padding: 2.5rem 2rem;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
    }

    .stat-number {
        font-size: 3.5rem;
        font-weight: 900;
        background: var(--gradient-ai);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1rem;
        animation: countUp 2s ease-out;
    }

    .stat-label {
        font-size: 1.2rem;
        color: var(--dark-gray);
        font-weight: 600;
    }

    /* CTA Section */
    .cta-section {
        background: var(--gradient-ai);
        color: white;
        padding: 4rem 3rem;
        border-radius: 25px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="aipattern" patternUnits="userSpaceOnUse" width="25" height="25"><circle cx="12.5" cy="12.5" r="2" fill="rgba(255,255,255,0.1)"/><path d="M5 12.5h15M12.5 5v15" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23aipattern)"/></svg>');
        animation: patternMove 20s linear infinite;
    }

    @keyframes patternMove {
        0% { transform: translate(0, 0); }
        100% { transform: translate(-25px, -25px); }
    }

    .cta-content {
        position: relative;
        z-index: 2;
    }

    .cta-section h2 {
        font-size: 3rem;
        margin-bottom: 1.5rem;
        font-weight: 900;
    }

    .cta-section p {
        font-size: 1.4rem;
        opacity: 0.95;
        margin-bottom: 3rem;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-buttons {
        display: flex;
        gap: 2rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn {
        padding: 1.2rem 2.5rem;
        border: none;
        border-radius: 60px;
        font-weight: 700;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        transition: all 0.4s ease;
        cursor: pointer;
        font-size: 1.2rem;
    }

    .btn-primary {
        background: white;
        color: var(--ai-purple);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    .btn-primary:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
        text-decoration: none;
        color: var(--ai-purple);
    }

    .btn-secondary {
        background: transparent;
        color: white;
        border: 3px solid white;
    }

    .btn-secondary:hover {
        background: white;
        color: var(--ai-purple);
        transform: translateY(-5px);
        text-decoration: none;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .insights-container {
            padding: 1rem;
        }

        .hero-section h1 {
            font-size: 2.8rem;
        }

        .hero-section .tagline {
            font-size: 1.4rem;
        }

        .ai-brain {
            width: 200px;
            height: 200px;
        }

        .brain-center {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }

        .services-grid {
            grid-template-columns: 1fr;
        }

        .cta-buttons {
            flex-direction: column;
            align-items: center;
        }
    }
</style>
@endsection

@section('content')
<div class="insights-container">
    {{-- Hero Section --}}
    <section class="hero-section">
        <div class="hero-content">
            <h1><i class="fas fa-brain"></i> CLEDA.I Insights</h1>
            <p class="tagline">AI-Powered Market Intelligence</p>
            <p class="subtitle">
                Harness the power of advanced artificial intelligence to unlock unprecedented market insights, 
                predictive analytics, and strategic intelligence for the Caribbean and Latin American markets.
            </p>
        </div>
    </section>

    {{-- AI Brain Animation --}}
    <div class="ai-brain-container">
        <div class="ai-brain">
            <div class="brain-outline"></div>
            <div class="brain-nodes">
                <div class="node"></div>
                <div class="node"></div>
                <div class="node"></div>
                <div class="node"></div>
                <div class="node"></div>
                <div class="node"></div>
                <div class="node"></div>
                <div class="node"></div>
            </div>
            <div class="brain-connections">
                <div class="connection"></div>
                <div class="connection"></div>
                <div class="connection"></div>
            </div>
            <div class="brain-center">
                <i class="fas fa-microchip"></i>
            </div>
        </div>
    </div>

    {{-- AI Capabilities Section --}}
    <section class="capabilities-section">
        <h2>The Highest Level of AI Support</h2>
        <p class="description">
            CLEDA.I provides unparalleled artificial intelligence support to our clients through cutting-edge software, 
            advanced analytical programs, and intelligent lead generation systems. Our AI-driven platform delivers 
            actionable insights that transform raw data into strategic competitive advantages.
        </p>
    </section>

    {{-- Services Grid --}}
    <div class="services-grid">
        <div class="service-card">
            <div class="service-icon">
                <i class="fas fa-chart-line"></i>
            </div>
            <h3>Predictive Market Analytics</h3>
            <p>Advanced machine learning algorithms analyze market trends, economic indicators, and business patterns to provide accurate forecasting and strategic insights for Caribbean and Latin American markets.</p>
            <ul class="service-features">
                <li><i class="fas fa-check-circle"></i> Real-time market trend analysis</li>
                <li><i class="fas fa-check-circle"></i> Economic forecasting models</li>
                <li><i class="fas fa-check-circle"></i> Risk assessment algorithms</li>
                <li><i class="fas fa-check-circle"></i> Competitive intelligence reports</li>
            </ul>
        </div>

        <div class="service-card">
            <div class="service-icon">
                <i class="fas fa-users"></i>
            </div>
            <h3>Intelligent Lead Generation</h3>
            <p>Our AI-powered lead generation system identifies high-potential business opportunities, qualified prospects, and strategic partnerships using advanced behavioral analysis and pattern recognition.</p>
            <ul class="service-features">
                <li><i class="fas fa-check-circle"></i> Automated prospect identification</li>
                <li><i class="fas fa-check-circle"></i> Behavioral pattern analysis</li>
                <li><i class="fas fa-check-circle"></i> Lead scoring and qualification</li>
                <li><i class="fas fa-check-circle"></i> Strategic partnership matching</li>
            </ul>
        </div>

        <div class="service-card">
            <div class="service-icon">
                <i class="fas fa-cogs"></i>
            </div>
            <h3>AI Software Solutions</h3>
            <p>Custom AI software applications tailored to your specific business needs, including automated decision-making systems, intelligent data processing, and smart business optimization tools.</p>
            <ul class="service-features">
                <li><i class="fas fa-check-circle"></i> Custom AI development</li>
                <li><i class="fas fa-check-circle"></i> Automated decision systems</li>
                <li><i class="fas fa-check-circle"></i> Intelligent data processing</li>
                <li><i class="fas fa-check-circle"></i> Business process optimization</li>
            </ul>
        </div>

        <div class="service-card">
            <div class="service-icon">
                <i class="fas fa-database"></i>
            </div>
            <h3>Advanced Data Intelligence</h3>
            <p>Transform your raw data into actionable intelligence with our AI-driven data analysis platform that provides deep insights, pattern recognition, and strategic recommendations.</p>
            <ul class="service-features">
                <li><i class="fas fa-check-circle"></i> Big data processing</li>
                <li><i class="fas fa-check-circle"></i> Pattern recognition algorithms</li>
                <li><i class="fas fa-check-circle"></i> Sentiment analysis</li>
                <li><i class="fas fa-check-circle"></i> Strategic recommendations</li>
            </ul>
        </div>

        <div class="service-card">
            <div class="service-icon">
                <i class="fas fa-robot"></i>
            </div>
            <h3>AI Automation Programs</h3>
            <p>Streamline your operations with intelligent automation programs that handle routine tasks, optimize workflows, and enhance productivity through sophisticated AI algorithms.</p>
            <ul class="service-features">
                <li><i class="fas fa-check-circle"></i> Workflow automation</li>
                <li><i class="fas fa-check-circle"></i> Task optimization</li>
                <li><i class="fas fa-check-circle"></i> Performance monitoring</li>
                <li><i class="fas fa-check-circle"></i> Intelligent reporting</li>
            </ul>
        </div>

        <div class="service-card">
            <div class="service-icon">
                <i class="fas fa-lightbulb"></i>
            </div>
            <h3>Strategic AI Consulting</h3>
            <p>Expert AI strategy consulting to help you implement artificial intelligence solutions that align with your business objectives and drive measurable results in your industry.</p>
            <ul class="service-features">
                <li><i class="fas fa-check-circle"></i> AI strategy development</li>
                <li><i class="fas fa-check-circle"></i> Implementation planning</li>
                <li><i class="fas fa-check-circle"></i> ROI optimization</li>
                <li><i class="fas fa-check-circle"></i> Performance measurement</li>
            </ul>
        </div>
    </div>

    {{-- Stats Section --}}
    <section class="stats-section">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">95%</div>
                <div class="stat-label">Accuracy Rate</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">10M+</div>
                <div class="stat-label">Data Points Analyzed</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">500+</div>
                <div class="stat-label">AI Models Deployed</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">24/7</div>
                <div class="stat-label">Real-time Processing</div>
            </div>
        </div>
    </section>

    {{-- Call to Action --}}
    <section class="cta-section">
        <div class="cta-content">
            <h2>Ready to Unlock AI-Powered Insights?</h2>
            <p>
                Transform your business with the most advanced AI intelligence platform in the Caribbean and Latin America. 
                Start leveraging artificial intelligence to drive growth, optimize operations, and gain competitive advantages.
            </p>
            <div class="cta-buttons">
                <a href="{{ route('insights.get-started') }}" class="btn btn-primary">
                    <i class="fas fa-rocket"></i> Get Started with AI
                </a>
                <a href="{{ route('insights.demo') }}" class="btn btn-secondary">
                    <i class="fas fa-play-circle"></i> Watch Demo
                </a>
            </div>
        </div>
    </section>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scrolling for internal links
    const links = document.querySelectorAll('a[href^="#"]');
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Animate stats on scroll
    const observerOptions = {
        threshold: 0.5,
        rootMargin: '0px 0px -100px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                
                // Animate stat numbers
                if (entry.target.classList.contains('stat-card')) {
                    const numberElement = entry.target.querySelector('.stat-number');
                    animateNumber(numberElement);
                }
            }
        });
    }, observerOptions);

    // Observe elements for animation
    const cards = document.querySelectorAll('.service-card, .stat-card');
    cards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px)';
        card.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
        observer.observe(card);
    });

    // Enhanced brain interaction
    const brain = document.querySelector('.ai-brain');
    if (brain) {
        brain.addEventListener('mouseenter', function() {
            this.style.animation = 'brainFloat 1s ease-in-out infinite';
            const nodes = this.querySelectorAll('.node');
            nodes.forEach(node => {
                node.style.animationDuration = '0.5s';
            });
        });

        brain.addEventListener('mouseleave', function() {
            this.style.animation = 'brainFloat 4s ease-in-out infinite';
            const nodes = this.querySelectorAll('.node');
            nodes.forEach(node => {
                node.style.animationDuration = '1.5s';
            });
        });
    }

    function animateNumber(element) {
        const text = element.textContent;
        const number = parseInt(text.replace(/[^\d]/g, ''));
        const suffix = text.replace(/[\d]/g, '');
        
        if (isNaN(number)) return;
        
        const duration = 2000;
        const steps = 60;
        const increment = number / steps;
        let current = 0;
        
        const timer = setInterval(() => {
            current += increment;
            if (current >= number) {
                current = number;
                clearInterval(timer);
            }
            
            if (suffix.includes('%')) {
                element.textContent = Math.floor(current) + '%';
            } else if (suffix.includes('M')) {
                element.textContent = Math.floor(current) + 'M+';
            } else if (suffix.includes('+')) {
                element.textContent = Math.floor(current) + '+';
            } else {
                element.textContent = current.toFixed(0) + suffix;
            }
        }, duration / steps);
    }
});
</script>
@endsection