@extends('layouts.app')

@section('content')
    <!-- Hero Section -->
    <section class="hero" id="hero">
        <div class="hero-glow"></div>
        <div class="container hero-content">
            <!-- Large Logo Center -->
            <div class="hero-logo-center">
                <img src="{{ asset('assets/logo.png') }}" alt="Sundcode Logo" width="150" height="150" loading="lazy">
            </div>
            <h1 class="hero-title">
                {{ \App\Models\Setting::get('hero_title_1', 'Sundcode') }}
                <span class="hero-subtitle-text">{{ \App\Models\Setting::get('hero_title_2', 'NUSANTARA') }}</span>
            </h1><br>
            <p class="hero-description">
                {{ \App\Models\Setting::get('hero_description', 'Solusi Software Custom untuk Pengembangan Bisnis Anda') }}
            </p>
            <div class="hero-buttons">
                <a href="#contact" class="btn btn-gradient btn-lg">
                    <span>Konsultasi Gratis</span>
                </a>
                <a href="{{ route('products') }}" class="btn btn-outline btn-lg">
                    <span>Lihat Produk</span>
                </a>
            </div>

            <!-- Floating Dashboard Cards -->
            <div class="floating-cards">
                <!-- Left Card - Code Editor -->
                <div class="float-card card-left">
                    <div class="card-glow"></div>
                    <div class="card-header">
                        <div class="card-dots">
                            <span class="dot-red"></span>
                            <span class="dot-yellow"></span>
                            <span class="dot-green"></span>
                        </div>
                        <span class="card-title">index.js</span>
                    </div>
                    <div class="card-body code-body">
                        <div class="code-line"><span class="code-keyword">const</span> <span class="code-var">app</span> = <span class="code-func">createApp</span>();</div>
                        <div class="code-line"><span class="code-keyword">const</span> <span class="code-var">db</span> = <span class="code-func">connect</span>(<span class="code-string">'database'</span>);</div>
                        <div class="code-line"><span class="code-var">app</span>.<span class="code-func">use</span>(<span class="code-var">db</span>);</div>
                        <div class="code-line"><span class="code-var">app</span>.<span class="code-func">listen</span>(<span class="code-num">3000</span>);</div>
                        <div class="code-line"><span class="code-comment">// Server running ✓</span></div>
                    </div>
                </div>

                <!-- Center Card - Python -->
                <div class="float-card card-center">
                    <div class="card-glow"></div>
                    <div class="card-header">
                        <div class="card-dots">
                            <span class="dot-red"></span>
                            <span class="dot-yellow"></span>
                            <span class="dot-green"></span>
                        </div>
                        <span class="card-title">main.py</span>
                        <span class="card-badge" style="margin-left: 10px; background: rgba(55, 118, 171, 0.2); color: #3776ab; border: 1px solid rgba(55, 118, 171, 0.3);">Python</span>
                    </div>
                    <div class="card-body code-body">
                        <div class="code-line"><span class="code-keyword">from</span> <span class="code-var">fastapi</span> <span class="code-keyword">import</span> <span class="code-var">FastAPI</span></div>
                        <div class="code-line"><span class="code-var">app</span> = <span class="code-func">FastAPI</span>()</div>
                        <div class="code-line"><span class="code-var">@app</span>.<span class="code-func">get</span>(<span class="code-string">"/"</span>)</div>
                        <div class="code-line"><span class="code-keyword">def</span> <span class="code-func">root</span>():</div>
                        <div class="code-line">&nbsp;&nbsp;<span class="code-keyword">return</span> {<span class="code-string">"status"</span>: <span class="code-string">"running"</span>}</div>
                        <div class="code-line"><span class="code-comment"># API Ready ✓</span></div>
                    </div>
                </div>

                <!-- Right Card - Konsultasi -->
                <div class="float-card card-right">
                    <div class="card-glow"></div>
                    <div class="card-header">
                        <span class="card-title">Konsultasi</span>
                        <span class="card-badge">Active</span>
                    </div>
                    <div class="card-body dashboard-body">
                        <div class="dash-row">
                            <div class="dash-card">
                                <div class="dash-icon">💬</div>
                                <span class="dash-value">98%</span>
                                <span class="dash-label">Kepuasan</span>
                            </div>
                            <div class="dash-card">
                                <div class="dash-icon">📅</div>
                                <span class="dash-value">24/7</span>
                                <span class="dash-label">Support</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services" id="services">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">🚀 Our Services</span>
                <h2 class="section-title">Layanan Premium untuk Bisnis Anda</h2>
                <p class="section-subtitle">Kami menyediakan solusi teknologi end-to-end dengan kualitas enterprise</p>
            </div>
            <div class="services-grid">
                @forelse($services as $service)
                <div class="service-card glass">
                    <div class="service-icon-wrap">
                        <div class="service-glow"></div>
                        <img src="{{ asset($service->icon) }}" alt="{{ $service->title }}" width="40" height="40" loading="lazy">
                    </div>
                    <h3>{{ $service->title }}</h3>
                    <p>{{ $service->description }}</p>
                </div>
                @empty
                    <!-- Static Fallback if Seeder not run -->
                @endforelse
            </div>
        </div>
    </section>

    <!-- Featured Products Section -->
    <section class="portfolio" id="portfolio">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">💼 Featured Products</span>
                <h2 class="section-title">Produk Unggulan Kami</h2>
                <p class="section-subtitle">Rangkaian produk inovatif yang terbukti membantu bisnis berkembang.</p>
            </div>
            <div class="portfolio-grid">
                @foreach($featuredProducts as $product)
                <div class="portfolio-card glass">
                    <div class="portfolio-image">
                        <img src="{{ str_starts_with($product->image, 'http') ? $product->image : asset('storage/' . $product->image) }}" alt="{{ $product->name }}" loading="lazy" width="600" height="400">
                        <div class="portfolio-overlay">
                            <a href="{{ route('products') }}">
                                <span class="overlay-text">View Details →</span>
                            </a>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <h3>{{ $product->name }}</h3>
                        <p>{{ Str::limit(strip_tags($product->description), 100) }}</p>
                        <div class="portfolio-tags">
                            @foreach($product->features ?? [] as $feature)
                                <span>{{ $feature }}</span>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-header"><span class="section-tag">⭐ Portfolio</span>
            <h2 class="section-title">Proyek yang Pernah Kami Kerjakan</h2>
            <p class="section-subtitle">Kepuasan klien adalah prioritas utama kami.</p>
            </div>
            <div class="testimonials-grid">
                <div class="testimonial-card glass">
                    <div class="testimonial-stars">★★★★★</div>
                    <p class="testimonial-text">"Pembuatan website company profile profesional yang terintegrasi dengan sistem internal perusahaan — dinamis, SEO-friendly, dan informatif."</p>
                    <div class="testimonial-author">
                        <div class="author-avatar"><span>Cp</span></div>
                        <div class="author-info">
                            <h4>Web Developer</h4>
                            <p>Static & Dynamic Web</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card glass">
                    <div class="testimonial-stars">★★★★★</div>
                    <p class="testimonial-text">"Pengembangan sistem informasi berskala besar dengan produk ERP, penambahan fitur, serta perbaikan bug untuk peningkatan performa."</p>
                    <div class="testimonial-author">
                        <div class="author-avatar"><span>SD</span></div>
                        <div class="author-info">
                            <h4>Software Engineer</h4>
                            <p>Enterprise Applications</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card glass">
                    <div class="testimonial-stars">★★★★★</div>
                    <p class="testimonial-text">"Konsultasi kebutuhan digital dan pengembangan script integrasi antara aplikasi dan middleware untuk efisiensi sistem."</p>
                    <div class="testimonial-author">
                        <div class="author-avatar"><span>DR</span></div>
                        <div class="author-info">
                            <h4>Konsultan Digital</h4>
                            <p>Digital Consulting & Integration</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta" id="contact">
        <div class="container">
            <div class="cta-content glass">
                <div class="cta-glow"></div>
                <h2 class="cta-title">Siap Memulai Project Anda?</h2>
                <p class="cta-subtitle">Konsultasi gratis untuk membahas kebutuhan bisnis Anda. Tim kami siap membantu.</p>
                <div class="cta-buttons">
                    <a href="https://wa.me/{{ \App\Models\Setting::get('whatsapp_number', '6281297573477') }}?text=Halo%20Tim%20Sundcode%20Nusantara..." 
                        class="btn btn-gradient btn-lg" target="_blank">
                        <span>Mulai Sekarang</span>
                    </a>
                    <a href="mailto:{{ \App\Models\Setting::get('contact_email', 'sundcode@gmail.com') }}" 
                        class="btn btn-outline btn-lg" target="_blank">
                        <span>Buat Jadwal</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection