@extends('layouts.app')

@section('title', 'About Harmony')
@section('description', 'Learn about Harmony e-Solution and the experience behind its industrial machinery portfolio.')

@section('content')
<main>
    <section class="page-hero">
        <div class="container">
            <p class="eyebrow">{{ $settings->about_eyebrow }}</p>
            <h1>{{ $settings->about_heading }}</h1>
            <p class="lead">{{ $settings->about_intro }}</p>
        </div>
    </section>

    <section class="block">
        <div class="container">
            <div class="grid grid-2">
                <div>
                    <p class="eyebrow">Who we are</p>
                    <h2>Industrial knowledge with a focused purpose.</h2>
                </div>
                <div>
                    @foreach (explode("\n\n", trim($settings->about_body ?? '')) as $paragraph)
                        @if (trim($paragraph) !== '')
                            <p>{{ trim($paragraph) }}</p>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    @if (!empty($settings->timeline))
    <section class="block" style="border-bottom:none;">
        <div class="container">
            <div class="timeline">
                @foreach ($settings->timeline as $item)
                    <div><strong>{{ $item['year'] }}</strong><span>{{ $item['label'] }}</span></div>
                @endforeach
            </div>
        </div>
    </section>
    @endif
</main>
@endsection