@extends('layouts.app')
@section('title', 'About Us - AVIOBOOTS')

@section('content')
<section id="about" class="hero fade-in" @if($heroBg) style="background-image: linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url('{{ asset($heroBg) }}'); background-size:cover; background-position:center;" @else style="background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) center/cover; background-color:#222;" @endif>
    <div class="container">
        <h1>{{ $heroTitle }}</h1>
        <p>{{ $heroSubtitle }}</p>
    </div>
</section>

<section class="section fade-in">
    <div class="container">
        <div class="about-intro" style="max-width:800px; margin:0 auto; text-align:center;">
            <h2 class="section-title">{{ $legacyTitle }}</h2>
            <p style="font-size:1.2rem; line-height:1.8; margin-bottom:3rem;">{{ $legacyText }}</p>
        </div>
    </div>
</section>

<section class="section gray-bg fade-in">
    <div class="container">
        <h2 class="section-title">CRAFTSMANSHIP</h2>
        <div class="about-craft-grid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:2rem;">
            @foreach($crafts as $craft)
                <div>
                    <div style="height:200px; background:#ddd; margin-bottom:1rem; border-radius:8px; overflow:hidden;">
                        @if($craft['image'])
                            <img src="{{ asset($craft['image']) }}" alt="{{ $craft['title'] }}" style="width:100%; height:100%; object-fit:cover;">
                        @endif
                    </div>
                    <h3>{{ $craft['title'] }}</h3>
                    <p>{{ $craft['text'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="section fade-in">
    <div class="container">
        <h2 class="section-title">OUR MILESTONES</h2>
        <div class="about-timeline" style="max-width:800px; margin:0 auto;">
            <div class="about-timeline-item" style="display:flex; margin-bottom:2rem; padding:1rem; border-left:4px solid #000;">
                <div style="width:60px; height:60px; background:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; margin-right:1rem; flex-shrink:0;"><i class="fa-solid fa-shoe-prints"></i></div>
                <div><h4 style="margin-bottom:.5rem;">The Beginning</h4><p>Started crafting bespoke leather shoes by hand in Lahore, Pakistan.</p></div>
            </div>
            <div class="about-timeline-item" style="display:flex; margin-bottom:2rem; padding:1rem; border-left:4px solid #000;">
                <div style="width:60px; height:60px; background:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; margin-right:1rem; flex-shrink:0;"><i class="fa-solid fa-star"></i></div>
                <div><h4 style="margin-bottom:.5rem;">DHA Lahore Showroom</h4><p>Opened our flagship showroom at E 158 C Riffle Range Road, DHA Main Boulevard.</p></div>
            </div>
            <div class="about-timeline-item" style="display:flex; margin-bottom:2rem; padding:1rem; border-left:4px solid #000;">
                <div style="width:60px; height:60px; background:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; margin-right:1rem; flex-shrink:0;"><i class="fa-solid fa-globe"></i></div>
                <div><h4 style="margin-bottom:.5rem;">Online Orders</h4><p>Now accepting bespoke orders online — delivered across Pakistan with size exchange guarantee.</p></div>
            </div>
        </div>
    </div>
</section>
@endsection