@extends('layouts.frontend')

@section('title', 'About — Bavly × Movix')
@section('meta_description', 'Bavly builds the engineering. Movix delivers branding, digital design and support. Developer expertise plus agency execution for real businesses in Egypt.')

@section('content')
<section class="page-hero">
    <div class="container">
        <p class="eyebrow">About</p>
        <h1 class="display-4 fw-semibold">Engineering meets creative execution.</h1>
        <p class="lead text-secondary">We focus on real businesses, production systems, scalable products, useful software and measurable business value. Not templates. Not theatre.</p>
    </div>
</section>

@include('frontend.partials.about-split')
@include('frontend.partials.skills')

<section class="section">
    <div class="container">
        <header class="section-header text-center mb-4">
            <p class="eyebrow">How we work</p>
            <h2 class="display-6 fw-semibold mx-auto">A studio structure, not two disconnected brands.</h2>
        </header>
        @if($experiences->isNotEmpty())
            <div class="row g-4">
                @foreach($experiences as $experience)
                    <div class="col-md-6">
                        <article class="surface h-100 p-4">
                            <p class="text-secondary small mb-2">{{ $experience->start_date->format('Y') }} — {{ $experience->end_date?->format('Y') ?? 'Present' }}</p>
                            <h3 class="h4">{{ $experience->company }}</h3>
                            <p class="role">{{ $experience->title }}</p>
                            <p class="text-secondary mb-0">{{ $experience->description }}</p>
                        </article>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>

@include('frontend.partials.industries')
@include('frontend.partials.contact-cta')
@endsection