@extends('layouts.principal')

@section('titulo', $product['title'] . ' - MNGD Sistemas')
@section('description', $product['description'])
@section('keywords', strtolower($product['title']) . ', MNGD Sistemas, soluções empresariais, Apucarana')
@section('og_title', $product['title'] . ' - MNGD Sistemas')
@section('og_description', $product['description'])

@section('conteudo')
<div class="product-detail-hero">
    <div class="container">
        <div class="product-detail-header" data-aos="fade-up" data-aos-duration="1000">
            <a href="{{ route('product.index') }}" class="back-link">
                <i class="fas fa-arrow-left"></i>
                <span>Voltar para Produtos</span>
            </a>
            <div class="product-icon-large">
                <i class="{{ $product['icon'] }}"></i>
            </div>
            <h1 class="product-detail-title">
                <span class="gradient-text">{{ $product['title'] }}</span>
            </h1>
            <p class="product-detail-subtitle">{{ $product['description'] }}</p>
        </div>
    </div>
</div>

<div class="product-detail-section">
    <div class="container">
        <div class="product-detail-content">
            <div class="product-main-content" data-aos="fade-up" data-aos-duration="800">
                <div class="content-block">
                    <h2>Sobre a Solução</h2>
                    <div class="product-full-description">
                        {!! $product['fullDescription'] !!}
                    </div>
                </div>

                <div class="content-block">
                    <h2>Principais Funcionalidades</h2>
                    <div class="features-grid-detail">
                        @foreach ($product['features'] as $feature)
                        <div class="feature-card" data-aos="fade-up" data-aos-duration="600" data-aos-delay="{{ $loop->index * 50 }}">
                            <div class="feature-icon-small">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <span class="feature-text">{{ $feature }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="product-sidebar" data-aos="fade-left" data-aos-duration="800">
                <div class="sidebar-card">
                    <h3>Quer Saber Mais?</h3>
                    <p>Entre em contato conosco e descubra como podemos ajudar sua empresa a crescer.</p>
                    <a href="{{ route('index.contact') }}" class="btn-primary btn-block">
                        <i class="fas fa-envelope"></i>
                        <span>Fale Conosco</span>
                    </a>
                </div>

                <div class="sidebar-card">
                    <h3>Nossos Outros Produtos</h3>
                    <div class="related-products">
                        @php
                            $allProducts = [
                                'erp-marketplaces' => ['title' => 'ERP para Marketplaces', 'icon' => 'fas fa-store', 'slug' => 'erp-marketplaces'],
                                'desenvolvimento-softwares' => ['title' => 'Desenvolvimento Sob Medida', 'icon' => 'fas fa-code', 'slug' => 'desenvolvimento-softwares'],
                                'sites-landing-pages' => ['title' => 'Sites e Landing Pages', 'icon' => 'fas fa-globe', 'slug' => 'sites-landing-pages']
                            ];
                            $currentSlug = $product['slug'];
                        @endphp
                        @foreach ($allProducts as $slug => $relatedProduct)
                            @if ($slug !== $currentSlug)
                            <a href="{{ route('product.show', $slug) }}" class="related-product-item">
                                <i class="{{ $relatedProduct['icon'] }}"></i>
                                <span>{{ $relatedProduct['title'] }}</span>
                                <i class="fas fa-arrow-right"></i>
                            </a>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="product-cta-section" data-aos="fade-up" data-aos-duration="1000">
    <div class="container">
        <div class="cta-content">
            <h2>Pronto para transformar sua empresa?</h2>
            <p>Entre em contato e descubra como podemos ajudar você a alcançar seus objetivos.</p>
            <div class="cta-actions">
                <a href="{{ route('index.contact') }}" class="btn-primary btn-large">
                    <i class="fas fa-envelope"></i>
                    <span>Entre em Contato</span>
                </a>
                <a href="{{ route('product.index') }}" class="btn-secondary btn-large">
                    <i class="fas fa-arrow-left"></i>
                    <span>Ver Todos os Produtos</span>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection