@php $locale = app()->getLocale(); @endphp
@extends('layouts.app')

@section('title', 'Çisa Salotti — '.__('site.nav.about'))

@section('content')
<main class="about-page">
  <section class="about-hero">
    <img class="about-hero__image" src="{{ asset('images/collections/porto/cover.jpg') }}" alt="" loading="eager" decoding="async">
    <div class="about-hero__overlay"></div>
    <div class="container about-hero__content reveal">
      <p class="section-label about-hero__label">{{ __('site.about.label') }}</p>
      <h1 class="about-hero__title">{{ __('site.about.title') }}</h1>
    </div>
  </section>

  <section class="about-manifesto">
    <div class="container">
      <blockquote class="about-manifesto__quote reveal">{{ __('site.story.lead') }}</blockquote>
    </div>
  </section>

  <section class="about-editorial">
    <div class="about-editorial__grid reveal">
      <div class="about-editorial__media">
        <img class="about-editorial__image" src="{{ asset('images/collections/mona/cover.jpeg') }}" alt="Çisa Salotti koleksiyon" loading="lazy" decoding="async">
        <p class="about-editorial__caption">{{ __('site.about.caption') }}</p>
      </div>
      <div class="about-editorial__content">
        <p class="section-label">{{ __('site.story.label') }}</p>
        <h2 class="about-editorial__title">{{ __('site.story.title') }}</h2>
        <p class="about-editorial__text">{{ __('site.story.p1') }}</p>
      </div>
    </div>
  </section>

  <section class="about-pillars">
    <div class="container">
      <div class="about-pillars__grid reveal">
        @foreach([
          ['site.about.pillar1.title', 'site.about.pillar1.text'],
          ['site.about.pillar2.title', 'site.about.pillar2.text'],
          ['site.about.pillar3.title', 'site.about.pillar3.text'],
        ] as $index => $pillar)
          <article class="about-pillar">
            <span class="about-pillar__num">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
            <h3 class="about-pillar__title">{{ __($pillar[0]) }}</h3>
            <p class="about-pillar__text">{{ __($pillar[1]) }}</p>
          </article>
        @endforeach
      </div>
    </div>
  </section>

  <section class="about-editorial about-editorial--reverse about-workshop">
    <div class="about-editorial__grid reveal">
      <div class="about-editorial__content">
        <p class="section-label">{{ __('site.about.workshop.label') }}</p>
        <h2 class="about-editorial__title">{{ __('site.about.workshop.title') }}</h2>
        <p class="about-editorial__text">{{ __('site.about.p1') }}</p>
        <p class="about-editorial__text">{{ __('site.about.p2') }}</p>
        <a href="{{ menu_route('collections.index', $locale) }}" class="section-cta">
          {{ __('site.about.cta') }}
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.2"/></svg>
        </a>
      </div>
      <div class="about-editorial__media">
        <img class="about-editorial__image" src="{{ asset('images/collections/london/cover.jpg') }}" alt="" loading="lazy" decoding="async">
      </div>
    </div>
  </section>
</main>
@endsection