@extends('layouts.frontend')

@section('title', $setting->site_title ?? 'Portfolio')

@section('content')
<section class="hero-section">
    <div class="container hero-container">
        <div class="hero-content reveal">
            <!-- Freelance Badge -->
            <div class="hero-badge">
                <span class="dot"></span>
                Available for Freelance Projects
            </div>
            
            <h1>I Build <span class="text-gradient">Modern Web Systems</span> That Turn Ideas Into <span class="text-gradient">Real Products</span></h1>
            
            <p class="hero-desc">I create fast, secure, and scalable Laravel web applications, dashboards, and business systems that help brands grow online.</p>
            
            <div class="hero-buttons-wrapper">
                <div class="hero-buttons">
                    <a class="btn btn-primary" href="{{ route('contact') }}">Start Your Project</a>
                    <a class="btn btn-outline" href="{{ route('projects.index') }}">View My Work</a>
                </div>
                <span class="hero-micro-text">Trusted for dashboards, business websites, and custom web systems.</span>
            </div>
            
            <!-- Mini stats elements of trust -->
            <div class="hero-mini-stats">
                <div class="mini-stat-card">
                    <span class="mini-stat-num">20+</span>
                    <span class="mini-stat-label">Projects</span>
                </div>
                <div class="mini-stat-card">
                    <span class="mini-stat-num">10+</span>
                    <span class="mini-stat-label">Admin Panels</span>
                </div>
                <div class="mini-stat-card">
                    <span class="mini-stat-num">100%</span>
                    <span class="mini-stat-label">Custom Code</span>
                </div>
            </div>
        </div>
        
        <div class="hero-visual reveal">
            <div class="tech-core-wrapper">
                <!-- Concentric Orbit Ring -->
                <div class="core-orbit"></div>
                
                <!-- Glowing Background Orb -->
                <div class="core-glow-orb"></div>
                
                <!-- Central 3D Diamond Core -->
                <div class="core-diamond">
                    <div class="diamond-face top-front"></div>
                    <div class="diamond-face top-right"></div>
                    <div class="diamond-face top-back"></div>
                    <div class="diamond-face top-left"></div>
                    <div class="diamond-face bottom-front"></div>
                    <div class="diamond-face bottom-right"></div>
                    <div class="diamond-face bottom-back"></div>
                    <div class="diamond-face bottom-left"></div>
                    <div class="core-energy-sphere"></div>
                </div>

                <!-- Connection Lines -->
                <div class="conn-line line-to-editor"></div>
                <div class="conn-line line-to-db"></div>
                <div class="conn-line line-to-dash"></div>

                <!-- Floating Mini Panels -->
                <!-- Code Editor Card -->
                <div class="tech-card card-editor">
                    <div class="card-header">
                        <span class="dot-red"></span>
                        <span class="dot-yellow"></span>
                        <span class="dot-green"></span>
                        <span class="card-title">index.php</span>
                    </div>
                    <div class="editor-lines">
                        <div class="editor-line"><span class="code-keyword">Route</span>::get(<span class="code-str">'/'</span>);</div>
                        <div class="editor-line"><span class="code-comment">// Systems builder</span></div>
                    </div>
                </div>

                <!-- Dashboard UI Card -->
                <div class="tech-card card-dashboard">
                    <div class="dash-header">
                        <span>Active Users</span>
                        <span class="dash-pulse-dot"></span>
                    </div>
                    <div class="dash-stat">14.2K</div>
                    <div class="dash-mini-graph">
                        <div class="graph-bar" style="height: 40%"></div>
                        <div class="graph-bar" style="height: 60%"></div>
                        <div class="graph-bar" style="height: 50%"></div>
                        <div class="graph-bar" style="height: 80%"></div>
                    </div>
                </div>

                <!-- Database Node -->
                <div class="tech-card card-database">
                    <div class="db-node-title">
                        <span class="db-icon">🗄️</span>
                        <span>DB Cluster</span>
                    </div>
                    <div class="db-status">
                        <span class="status-indicator"></span>
                        <span>Online</span>
                    </div>
                </div>

                <!-- SaaS / Admin Panel / Laravel / MySQL Badges -->
                <div class="tech-badge badge-laravel">Laravel</div>
                <div class="tech-badge badge-mysql">MySQL</div>
                <div class="tech-badge badge-admin">Admin Panel</div>
                <div class="tech-badge badge-saas">SaaS</div>
            </div>
        </div>
    </div>
</section>

<!-- About / Stats Overview -->
<section class="section reveal">
    <div class="container">
        <div class="section-header">
            <span class="section-eyebrow">About</span>
            <h2 class="section-title">Systems that look sharp and work harder behind the scenes.</h2>
        </div>
        <div class="stats-grid">
            <article class="stat-card glass-card">
                <div class="stat-number text-gradient">4+</div>
                <div class="stat-label">Years Experience</div>
            </article>
            <article class="stat-card glass-card">
                <div class="stat-number text-gradient">{{ $projects->count() ?? '10' }}+</div>
                <div class="stat-label">Featured Projects</div>
            </article>
            <article class="stat-card glass-card">
                <div class="stat-number text-gradient">SMB</div>
                <div class="stat-label">Startup and Business Clients</div>
            </article>
        </div>
    </div>
</section>

@include('frontend.partials.skills')
@include('frontend.partials.services')
@include('frontend.partials.projects', ['projects' => $projects])
@include('frontend.partials.timeline')
@include('frontend.partials.testimonials')
@include('frontend.partials.contact-cta')
@endsection