@extends('layouts.frontend')

@section('title', 'Bavly × Movix — Software Development, SaaS, Branding & Digital Solutions')
@section('meta_description', $setting->meta_description)

@section('content')
<section class="hero-section" data-hero>
    <div class="container hero-container">
        <div class="hero-content">
            <div class="hero-badge">
                <span class="dot"></span>
                BAVLY × MOVIX
            </div>

            <h1>Building <span class="text-gradient">Digital Products</span> That Actually <span class="text-gradient">Move Businesses</span>.</h1>

            <p class="hero-desc">From powerful SaaS platforms and business systems to high-impact websites, branding and digital experiences — we turn ideas into real products.</p>

            <div class="hero-buttons-wrapper">
                <div class="hero-buttons">
                    <a class="hero-btn hero-btn--primary" href="{{ route('contact') }}">Start a Project</a>
                    <a class="hero-btn hero-btn--outline" href="#work">Explore Our Work</a>
                </div>
                <span class="hero-micro-text">Software studio + creative agency — products built to perform.</span>
            </div>

            <div class="hero-mini-stats" aria-label="Studio highlights">
                <div class="mini-stat-card">
                    <span class="mini-stat-num">200+</span>
                    <span class="mini-stat-label">Projects Worked On</span>
                </div>
                <div class="mini-stat-card">
                    <span class="mini-stat-num">SaaS</span>
                    <span class="mini-stat-label">Business Systems</span>
                </div>
                <div class="mini-stat-card">
                    <span class="mini-stat-num">Web</span>
                    <span class="mini-stat-label">Digital Products</span>
                </div>
                <div class="mini-stat-card">
                    <span class="mini-stat-num">Brand</span>
                    <span class="mini-stat-label">Creative</span>
                </div>
            </div>
        </div>

        <div class="hero-visual" aria-hidden="true">
            <div class="tech-core-wrapper" data-parallax="16">
                <div class="core-orbit"></div>
                <div class="core-glow-orb"></div>

                <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>

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

                <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">// Bavly × Movix</span></div>
                    </div>
                </div>

                <div class="tech-card card-dashboard">
                    <div class="dash-header">
                        <span>Projects</span>
                        <span class="dash-pulse-dot"></span>
                    </div>
                    <div class="dash-stat">200+</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>

                <div class="tech-card card-database">
                    <div class="db-node-title">
                        <span class="db-icon" aria-hidden="true"></span>
                        <span>MySQL</span>
                    </div>
                    <div class="db-status">
                        <span class="status-indicator"></span>
                        <span>Production</span>
                    </div>
                </div>

                <div class="tech-badge badge-laravel">Laravel</div>
                <div class="tech-badge badge-mysql">SaaS</div>
                <div class="tech-badge badge-admin">ERP</div>
                <div class="tech-badge badge-saas">CRM</div>
            </div>
        </div>
    </div>
</section>

<section class="section" id="work">
    <div class="container">
        <header class="section-header text-center mb-5">
            <p class="eyebrow">Selected Work</p>
            <h2 class="display-6 fw-semibold mx-auto">Products and platforms built for real businesses.</h2>
            <p class="text-secondary">200+ projects worked on. These are selected projects across SaaS, business systems, eCommerce, education, healthcare, corporate websites and digital products.</p>
        </header>

        @foreach($featuredProjects as $index => $project)
            <article class="row g-4 align-items-center mb-5 {{ $index % 2 ? 'flex-lg-row-reverse' : '' }}">
                <div class="col-lg-7">
                    <a class="shot" href="{{ route('projects.show', $project) }}">
                        @if($project->coverUrl())
                            <img src="{{ $project->coverUrl() }}" alt="{{ $project->title }} screenshot" width="1440" height="900" loading="{{ $index === 0 ? 'eager' : 'lazy' }}">
                        @endif
                    </a>
                </div>
                <div class="col-lg-5">
                    <p class="text-secondary small text-uppercase mb-2">0{{ $index + 1 }} · {{ $project->category }}</p>
                    <h3 class="h3"><a class="link-light text-decoration-none" href="{{ route('projects.show', $project) }}">{{ $project->title }}</a></h3>
                    <p class="text-secondary">{{ $project->short_description }}</p>
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        @foreach($project->technologies ?? [] as $tech)
                            <span class="badge text-bg-dark border">{{ $tech }}</span>
                        @endforeach
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a class="btn btn-light" href="{{ route('projects.show', $project) }}">View Case Study</a>
                        @if($project->hasLiveDemo())
                            <a class="btn btn-outline-light" href="{{ $project->live_demo_url }}" target="_blank" rel="noopener noreferrer">Live Demo</a>
                        @endif
                    </div>
                </div>
            </article>
        @endforeach

        <div class="row g-4">
            @foreach($moreProjects as $project)
                <div class="col-md-6 col-xl-4" data-category="{{ $project->category }}">
                    @include('frontend.partials.project-card', ['project' => $project])
                </div>
            @endforeach
        </div>
    </div>
</section>

@if(($earlyProjects ?? collect())->isNotEmpty())
<section class="section" id="early-work">
    <div class="container">
        <header class="section-header text-center mb-5">
            <p class="eyebrow">Early Work</p>
            <h2 class="display-6 fw-semibold mx-auto">From the beginnings of what I built.</h2>
            <p class="text-secondary mx-auto" style="max-width: 42rem;">These are some of the earliest websites and experiments from the start of my journey — learning layouts, pages, UI and creative front-end before the larger products above.</p>
        </header>
        <div class="row g-4">
            @foreach($earlyProjects as $project)
                <div class="col-md-6 col-xl-4">
                    @include('frontend.partials.project-card', ['project' => $project])
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

@include('frontend.partials.services')
@include('frontend.partials.about-split')
@include('frontend.partials.skills')
@include('frontend.partials.industries')
@include('frontend.partials.contact-cta')
@endsection