@extends('layouts.public')
@section('content')
<main class="home-main">
    <!-- Modern Hero Section -->
    <section class="home-hero">
        <div class="hero-bg-layers">
            <div class="hero-gradient-orb orb-1"></div>
            <div class="hero-gradient-orb orb-2"></div>
            <div class="hero-grid-pattern"></div>
        </div>
        <div class="hero-content-wrapper">
            <div class="hero-copy">
                <span class="badge-pill">Scientific infrastructure for modern institutions</span>
                <h1>Complete Laboratory, Medical & Mapping Solutions</h1>
                <p>Delivering advanced lab equipment, medical training models, and geo-spatial solutions for institutions and industries.</p>
                <div class="hero-actions">
                    <a class="button primary" href="{{ route('products') }}">Explore Products</a>
                    <a class="button secondary-glow" href="{{ route('contact') }}">Contact Us</a>
                </div>
                <div class="hero-stats">
                    <div class="stat-item"><span class="stat-number">1000+</span><span class="stat-label">Products</span></div>
                    <div class="stat-divider"></div>
                    <div class="stat-item"><span class="stat-number">3</span><span class="stat-label">Domains</span></div>
                    <div class="stat-divider"></div>
                    <div class="stat-item"><span class="stat-number">50+</span><span class="stat-label">Institutions</span></div>
                </div>
            </div>
            <div class="hero-visual">
                <div class="hero-image-stack">
                    <div class="hero-img-main">
                        <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1200&q=80" alt="Educational mapping and GIS materials">
                        <div class="img-overlay"></div>
                    </div>
                    <div class="hero-img-secondary">
                        <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=900&q=80" alt="Educational institution learning space">
                    </div>
                    <div class="hero-img-tertiary">
                        <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=900&q=80" alt="Medical training environment">
                    </div>
                </div>
                <div class="floating-card">
                    <div class="floating-card-icon">⚡</div>
                    <div class="floating-card-content">
                        <strong>3 Domains</strong>
                        <span>Nursing, Lab, Education</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Modern Trust Strip -->
    <section class="trust-strip">
        <div class="trust-label"><p>Trusted by Institutions, Labs & Organizations</p></div>
        <div class="trust-logos">
            <span class="trust-pill">Institutions</span>
            <span class="trust-pill">Labs</span>
            <span class="trust-pill">Healthcare Training</span>
            <span class="trust-pill">GIS Projects</span>
        </div>
    </section>

    <!-- Modern About Section -->
    <section class="section home-about">
        <div class="about-grid">
            <div class="about-card main">
                <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=900&q=80" alt="Educational classroom setup">
                <div class="about-card-overlay"></div>
            </div>
            <div class="about-card">
                <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=700&q=80" alt="Maps and GIS project materials">
            </div>
            <div class="about-card">
                <img src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?auto=format&fit=crop&w=700&q=80" alt="Medical simulator training">
            </div>
        </div>
        <div class="about-content">
            <span class="section-badge">About Vinlab</span>
            <h2>Built for organizations that need reliable technical procurement.</h2>
            <p>Vinlab brings laboratory equipment, medical and nursing training models, educational charts, maps and GIS solutions into one consultative B2B experience.</p>
            <ul class="check-list">
                <li><div class="check-icon">✓</div><div><strong>1000+ Products</strong><span>Across lab, medical, education and mapping categories.</span></div></li>
                <li><div class="check-icon">✓</div><div><strong>Multi-domain expertise</strong><span>Support for procurement, setup planning and documentation.</span></div></li>
                <li><div class="check-icon">✓</div><div><strong>Nationwide support</strong><span>Structured assistance for institutions and project teams.</span></div></li>
            </ul>
            <a class="button secondary" href="{{ route('about') }}">Learn More</a>
        </div>
    </section>

    <!-- Modern Solution Section -->
    <section class="section solution-section">
        <div class="section-header centered">
            <span class="section-badge">Core Solutions</span>
            <h2>Three specialist domains. One premium partner.</h2>
        </div>
        <div class="solution-cards">
            <article class="solution-card">
                <div class="solution-card-bg"></div>
                <span class="solution-icon">🔬</span>
                <h3>Laboratory Equipment</h3>
                <p>Microscopes, scientific instruments, kits and lab setup essentials.</p>
                <a href="{{ route('category.show', 'laboratory-equipment') }}" class="solution-link">Explore <span class="arrow">→</span></a>
            </article>
            <article class="solution-card">
                <div class="solution-card-bg"></div>
                <span class="solution-icon">🏥</span>
                <h3>Medical & Nursing Models</h3>
                <p>Manikins, anatomical models, CPR trainers and simulation tools.</p>
                <a href="{{ route('category.show', 'medical-nursing-models') }}" class="solution-link">Explore <span class="arrow">→</span></a>
            </article>
            <article class="solution-card">
                <div class="solution-card-bg"></div>
                <span class="solution-icon">🗺️</span>
                <h3>Education Maps & Charts</h3>
                <p>Charts, globes, maps and geo-spatial project solutions.</p>
                <a href="{{ route('category.show', 'maps-gis-solutions') }}" class="solution-link">Explore <span class="arrow">→</span></a>
            </article>
        </div>
    </section>

    <!-- Modern Products Section -->
    <section class="section home-products">
        <div class="section-header">
            <div>
                <span class="section-badge">Featured Products</span>
                <h2>Preview quote-ready solutions</h2>
            </div>
            <div class="tab-controls" role="tablist" aria-label="Featured product filters">
                <button class="active" type="button" data-product-filter="all">All</button>
                <button type="button" data-product-filter="medical">Nursing & Medical</button>
                <button type="button" data-product-filter="lab">Laboratory</button>
                <button type="button" data-product-filter="maps">Education Maps & Charts</button>
            </div>
        </div>
        <div class="product-grid premium-products">
            @foreach($featured as $product)
                @php($domain = strtolower(optional($product->category->parent)->name ?? optional($product->category)->name ?? ''))
                @php($key = str_contains($domain, 'medical') || str_contains($domain, 'nursing') ? 'medical' : (str_contains($domain, 'map') || str_contains($domain, 'gis') || str_contains($domain, 'chart') ? 'maps' : 'lab'))
                @php($images = is_array($product->images) && count($product->images) ? $product->images : ['https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1200&q=80'])
                <article class="product-card premium-product" data-product-domain="{{ $key }}">
                    <div class="product-card-image">
                        <img src="{{ $images[0] }}" alt="{{ $product->name }}" loading="lazy">
                        <div class="product-card-overlay">
                            <span class="view-details">View Details</span>
                        </div>
                    </div>
                    <div class="product-card-content">
                        <span class="product-category">{{ $product->category->name }}</span>
                        <h3>{{ $product->name }}</h3>
                        <a href="{{ route('products.show', $product->slug) }}" class="product-link">View Details <span class="arrow">→</span></a>
                    </div>
                </article>
            @endforeach
        </div>
    </section>

    <!-- Modern CTA Section -->
    <section class="premium-cta">
        <div class="cta-bg-layers">
            <div class="cta-gradient-orb"></div>
            <div class="cta-grid-pattern"></div>
        </div>
        <div class="cta-content">
            <span class="section-badge light">End-to-end setup support</span>
            <h2>Looking for Complete Lab or Institutional Setup?</h2>
            <p>We provide end-to-end solutions tailored for education, healthcare, and research sectors.</p>
        </div>
        <div class="cta-actions">
            <a class="button light" href="{{ route('quote') }}">Request Quote</a>
            <a class="button ghost" href="{{ route('contact') }}">Talk to Expert</a>
        </div>
    </section>

    <!-- Modern Feature Grid -->
    <section class="section why-grid">
        <div class="section-header centered">
            <span class="section-badge">Why Choose Us</span>
            <h2>Clarity, quality and technical depth.</h2>
        </div>
        <div class="feature-grid">
            @foreach(['One-stop solution' => 'Products, services and planning support in one place.', 'High-quality products' => 'Institution-grade selections for long-term use.', 'Wide product range' => 'Lab, medical, education, maps and GIS categories.', 'Custom solutions' => 'Support for tenders, bulk orders and setup projects.', 'Reliable support' => 'Quote-led assistance from requirement to delivery.', 'Future-ready approach' => 'Built for analytics, CRM, payments and integrations.'] as $title => $text)
                <article class="feature-card">
                    <div class="feature-number">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</div>
                    <h3>{{ $title }}</h3>
                    <p>{{ $text }}</p>
                </article>
            @endforeach
        </div>
    </section>

    <!-- Modern Blog Section -->
    <section class="section home-blog">
        <div class="section-header">
            <div>
                <span class="section-badge">Insights</span>
                <h2>Guides for better institutional decisions</h2>
            </div>
            <a href="{{ route('blog') }}" class="view-all-link">View blog <span class="arrow">→</span></a>
        </div>
        <div class="card-grid three">
            @foreach($posts as $post)
                <article class="blog-card">
                    <div class="blog-card-image">
                        <img src="{{ $post->image_url ?: '/assets/images/products/chart-collection.svg' }}" alt="{{ $post->title }}" loading="lazy">
                        <div class="blog-card-overlay"></div>
                    </div>
                    <div class="blog-card-content">
                        <span class="blog-category">{{ $post->category }}</span>
                        <h2>{{ $post->title }}</h2>
                        <p>{{ $post->excerpt }}</p>
                        <a href="{{ route('blog.show', $post->slug) }}" class="blog-link">Read article <span class="arrow">→</span></a>
                    </div>
                </article>
            @endforeach
        </div>
    </section>
    @include('partials.virtual-tour-map')
</main>
@endsection