@extends('layouts.app')

@section('title', 'About Us')

@section('content')
<section class="sh-hero"@if ($banner) style="background-image:url('{{ $banner }}')"@endif>
  <div class="sh-hero-in">
    <h1>About us</h1>
    <nav class="sh-crumb"><a href="{{ route('home') }}">Home</a><i></i><span>About us</span></nav>
  </div>
</section>

<section class="ab-story container">
  <div class="ab-pics">
    @foreach ($photos as $i => $ph)<span class="ab-pic p{{ $i }}"><img src="{{ $ph }}" alt="" loading="lazy"></span>@endforeach
  </div>
  <div class="ab-text">
    <small>Our story</small>
    <h2>Made with care, chosen with love</h2>
    <p>{{ $company->name }} started with a simple idea: beautiful pieces should be easy to find, comfortable to wear and fair in price. We design and curate every collection with an eye for quality and timeless style.</p>
    <p>Every season we work with trusted makers and focus on honest materials, careful finishing and sizing you can rely on, so your favourite pieces stay with you for years.</p>
    <a href="{{ route('collection') }}" class="btn">Shop the collection</a>
  </div>
</section>

<section class="ab-stats">
  <div class="container">
    <div><b>{{ $productCount }}</b><span>Products</span></div>
    <div><b>{{ $collectionCount }}</b><span>Collections</span></div>
    <div><b>{{ $categoryCount }}</b><span>Categories</span></div>
    <div><b>{{ $company->return_days ?: 30 }}</b><span>Days easy returns</span></div>
  </div>
</section>

<section class="ab-values container">
  <div class="sec-head"><div><small>What we believe</small><h2 class="title">Our promise to you</h2></div></div>
  <div class="ab-grid">
    <div><span><svg viewBox="0 0 24 24"><path d="M12 3l2.6 5.600 6.100.8-4.500 4.200 1.200 6.100L12 16.800 6.600 19.700l1.200-6.100L3.300 9.400l6.100-.8z"/></svg></span><h3>Quality you can feel</h3><p>Careful finishing and honest materials, at prices that stay fair.</p></div>
    <div><span><svg viewBox="0 0 24 24"><path d="M12 21c-5-3-8-6.500-8-11a8 8 0 0116 0c0 4.500-3 8-8 11z"/><path d="M9 11l2 2 4-4"/></svg></span><h3>Responsible by design</h3><p>We choose responsible materials and makers wherever we can.</p></div>
    <div><span><svg viewBox="0 0 24 24"><path d="M20 12a8 8 0 10-2.300 5.700"/><path d="M20 5v5h-5"/></svg></span><h3>Simple returns</h3><p>Changed your mind? Return within {{ $company->return_days ?: 30 }} days, no fuss.</p></div>
    <div><span><svg viewBox="0 0 24 24"><path d="M4 14v-2a8 8 0 0116 0v2"/><rect x="3" y="14" width="4" height="6" rx="1"/><rect x="17" y="14" width="4" height="6" rx="1"/></svg></span><h3>Friendly support</h3><p>{{ $company->hours ?: 'Reach us any day' }}. Real people, quick answers.</p></div>
  </div>
</section>

<section class="ab-cta">
  <div class="container">
    <h2>Questions? We would love to hear from you.</h2>
    <a href="{{ route('contact') }}" class="btn">Contact us</a>
  </div>
</section>
@endsection