<x-layouts.app title="About Us">
    @php
        $section = function (string $key, string $title, string $subtitle, string $body, string $icon = 'MGG') use ($sections) {
            $item = $sections->get($key);

            return [
                'title' => $item?->title ?: $title,
                'subtitle' => $item?->subtitle ?: $subtitle,
                'body' => $item?->body ?: $body,
                'icon' => $item?->icon ?: $icon,
            ];
        };

        $story = $section('story', 'Creative work organized from request to delivery', 'Our Story', 'M Ghaffar Graphics helps brands manage social media designs, branding, ads, websites, video work, and seller services through a clear production system.');
        $mission = $section('mission', 'Mission & Vision', 'What we believe', 'Give every client a transparent plan, every designer a clean task list, and every admin a reliable operating dashboard for approvals, payments, files, and delivery.');
        $skills = $section('skills', 'Core Skills', 'What we do best', "Social media post design\nBrand identity systems\nMeta ads creative\nVideo editing and reel covers\nWebsite and landing page design\nReal estate and restaurant campaigns");
        $education = $section('education', 'Learning & Process', 'How quality improves', 'We combine design practice, campaign research, client feedback, and delivery reports to improve every brief, visual style, and production handoff.');
        $values = $section('values', 'Values', 'How we work', 'Fast communication, organized files, clear approvals, honest pricing, and consistent brand quality.');
    @endphp

    <section class="about-hero landing-hero">
        <div class="hero-copy">
            <p class="eyebrow">About M Ghaffar Graphics</p>
            <h1>{{ $story['title'] }}</h1>
            <p class="lead">{{ $story['body'] }}</p>
            <div class="hero-pills">
                <span>Design Agency</span>
                <span>Client Portal</span>
                <span>Task Tracking</span>
                <span>GTS Seller Flow</span>
            </div>
            <div class="actions">
                <a class="btn" href="{{ route('service.order') }}">Start a Project</a>
                <a class="ghost" href="{{ route('portfolio') }}">View Portfolio</a>
            </div>
        </div>
        <div class="about-profile-card card">
            <span>{{ $story['icon'] }}</span>
            <h2>Premium digital agency system</h2>
            <p>Design production, client requests, payment proof, delivery files, and progress visibility in one clean workflow.</p>
            <div>
                <b>{{ $team->count() ?: 4 }}</b><small>Team roles</small>
                <b>{{ $projects->count() ?: 3 }}</b><small>Featured works</small>
                <b>24/7</b><small>Support flow</small>
            </div>
        </div>
    </section>

    <section class="section about-split">
        <article class="card">
            <p class="eyebrow">{{ $mission['subtitle'] }}</p>
            <h2>{{ $mission['title'] }}</h2>
            <p class="muted">{{ $mission['body'] }}</p>
        </article>
        <article class="card">
            <p class="eyebrow">{{ $values['subtitle'] }}</p>
            <h2>{{ $values['title'] }}</h2>
            <p class="muted">{{ $values['body'] }}</p>
        </article>
    </section>

    <section class="section soft-band">
        <div class="section-intro">
            <p class="eyebrow">{{ $skills['subtitle'] }}</p>
            <h2>{{ $skills['title'] }}</h2>
        </div>
        <div class="about-skill-grid">
            @foreach (array_filter(array_map('trim', preg_split('/\r\n|\r|\n|,/', $skills['body']))) as $skill)
                <article class="card"><span>{{ str($skill)->substr(0, 2)->upper() }}</span><h3>{{ $skill }}</h3><p class="muted">Managed with briefs, status updates, approvals, and delivery records.</p></article>
            @endforeach
        </div>
    </section>

    <section class="section about-education">
        <div>
            <p class="eyebrow">{{ $education['subtitle'] }}</p>
            <h2>{{ $education['title'] }}</h2>
            <p class="muted">{{ $education['body'] }}</p>
        </div>
        <ol class="workflow-track about-track">
            <li>Research brief</li>
            <li>Prepare creative direction</li>
            <li>Assign designer</li>
            <li>Submit work</li>
            <li>Review revision</li>
            <li>Final delivery</li>
        </ol>
    </section>

    <section class="section">
        <div class="section-intro split-intro">
            <div><p class="eyebrow">Team</p><h2>People behind the creative workflow</h2></div>
            <a class="ghost" href="{{ route('contact') }}">Work With Us</a>
        </div>
        <div class="team-grid">
            @forelse ($team as $member)
                <article class="team-card card">
                    <div class="team-avatar">
                        @if ($member->image_path)
                            <img src="{{ asset('storage/'.$member->image_path) }}" alt="{{ $member->name }}">
                        @else
                            <span>{{ str($member->name)->substr(0, 1)->upper() }}</span>
                        @endif
                    </div>
                    <p class="eyebrow">{{ $member->role_title ?: 'Creative Team' }}</p>
                    <h3>{{ $member->name }}</h3>
                    <p class="muted">{{ $member->bio ?: 'Supports client briefs, creative production, revisions, and delivery quality.' }}</p>
                    @if ($member->skills)
                        <div class="team-skills">
                            @foreach ($member->skills as $skill)
                                <b>{{ $skill }}</b>
                            @endforeach
                        </div>
                    @endif
                    @if ($member->education)
                        <small><strong>Education:</strong> {{ $member->education }}</small>
                    @endif
                    @if ($member->experience)
                        <small><strong>Experience:</strong> {{ $member->experience }}</small>
                    @endif
                    @if ($member->portfolio_url)
                        <a class="ghost small" href="{{ $member->portfolio_url }}" target="_blank">Portfolio</a>
                    @endif
                </article>
            @empty
                @foreach ([
                    ['Admin Lead', 'Operations & client management', 'Plans, payments, requests, and reports.'],
                    ['Creative Designer', 'Brand and post design', 'Social media, real estate, restaurant, and academy visuals.'],
                    ['Video Editor', 'Reels and motion content', 'Short video edits, reel covers, and campaign assets.'],
                ] as $fallback)
                    <article class="team-card card">
                        <div class="team-avatar"><span>{{ str($fallback[0])->substr(0, 1) }}</span></div>
                        <p class="eyebrow">{{ $fallback[1] }}</p>
                        <h3>{{ $fallback[0] }}</h3>
                        <p class="muted">{{ $fallback[2] }}</p>
                    </article>
                @endforeach
            @endforelse
        </div>
    </section>

    <section class="section portal-band">
        <div class="section-intro split-intro">
            <div><p class="eyebrow">Portfolio</p><h2>Recent work connected to our agency flow</h2></div>
            <a class="ghost" href="{{ route('portfolio') }}">All Portfolio</a>
        </div>
        <div class="portfolio-board">
            @forelse ($projects as $project)
                <article class="portfolio-preview">
                    <div class="portfolio-art">@if($project->image_path)<img src="{{ asset('storage/'.$project->image_path) }}" alt="{{ $project->title }}">@else{{ str($project->category ?: $project->title)->substr(0, 2)->upper() }}@endif</div>
                    <span class="badge">{{ $project->category ?: 'Project' }}</span>
                    <h3>{{ $project->title }}</h3>
                    <p>{{ $project->description }}</p>
                </article>
            @empty
                @foreach (['Real Estate Designs', 'Restaurant Campaigns', 'Brand Identity'] as $project)
                    <article class="portfolio-preview"><div class="portfolio-art">{{ str($project)->substr(0, 2)->upper() }}</div><span class="badge">Portfolio</span><h3>{{ $project }}</h3><p>Managed from brief to delivery inside the MGG workflow.</p></article>
                @endforeach
            @endforelse
        </div>
    </section>
</x-layouts.app>
