@extends('layouts.app')
@section('title', __('nav.about'))

@section('content')

<!-- Page Header -->
<div style="height:280px;background:linear-gradient(135deg,var(--ocean-deep),var(--ocean));display:flex;align-items:flex-end;padding-bottom:3rem;">
  <div class="container" style="text-align:center;width:100%;">
    <span class="section-label" style="color:var(--gold-light);">{{ __('about.label') }}</span>
    <h1 style="font-size:clamp(2.5rem,6vw,4.5rem);color:var(--white);">{{ __('about.page_title') }} <em style="color:var(--turquoise-light);">{{ __('about.page_title_em') }}</em></h1>
  </div>
</div>

<section>
  <div class="container">
    <div class="about-grid">
      <div class="about-visual reveal">
        <div class="about-img-placeholder" style="aspect-ratio:4/5;">
          <svg width="120" height="120" viewBox="0 0 120 120" fill="none" style="opacity:0.25;" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 80 Q35 50 60 65 Q85 80 105 55" stroke="white" stroke-width="2.5" fill="none"/>
            <circle cx="60" cy="35" r="18" stroke="white" stroke-width="2.5" fill="none"/>
            <path d="M8 95 Q30 72 55 85 Q80 98 102 75" stroke="white" stroke-width="1.5" fill="none" opacity="0.5"/>
          </svg>
        </div>
        <div class="about-stat-card">
          <div class="about-stat-num">15+</div>
          <div class="about-stat-label">{{ __('about.years') }}</div>
        </div>
      </div>

      <div class="reveal" style="transition-delay:0.15s;">
        <span class="section-label">{{ __('about.label') }}</span>
        <h2 class="section-title">{{ __('about.story_title') }} <em>{{ __('about.story_em') }}</em></h2>
        <p style="color:var(--text-muted);margin-bottom:1.5rem;line-height:1.9;">{{ __('about.story_p1') }}</p>
        <p style="color:var(--text-muted);line-height:1.9;">{{ __('about.story_p2') }}</p>

        <div class="about-features" style="margin-top:2rem;">
          <div class="about-feature">
            <div class="about-feature-icon">🌊</div>
            <div class="about-feature-text">
              <h4>{{ __('features.beach') }}</h4>
              <p>{{ __('features.beach_desc') }}</p>
            </div>
          </div>
          <div class="about-feature">
            <div class="about-feature-icon">🍽️</div>
            <div class="about-feature-text">
              <h4>{{ __('features.restaurant') }}</h4>
              <p>{{ __('features.restaurant_desc') }}</p>
            </div>
          </div>
          <div class="about-feature">
            <div class="about-feature-icon">🍹</div>
            <div class="about-feature-text">
              <h4>{{ __('features.cocktails') }}</h4>
              <p>{{ __('features.cocktails_desc') }}</p>
            </div>
          </div>
          <div class="about-feature">
            <div class="about-feature-icon">🎶</div>
            <div class="about-feature-text">
              <h4>{{ __('features.events') }}</h4>
              <p>{{ __('features.events_desc') }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Stats row -->
<div class="features-strip">
  <div class="container">
    <div class="features-grid">
      @php $stats = [['15+','about.stat_years'],['50K+','about.stat_guests'],['200+','about.stat_events'],['4.9★','about.stat_rating']]; @endphp
      @foreach($stats as [$num,$label])
      <div class="feature-item" style="text-align:center;">
        <div style="font-family:'Cormorant Garamond',serif;font-size:3rem;color:var(--gold-light);line-height:1;">{{ $num }}</div>
        <p style="margin-top:0.5rem;color:rgba(255,255,255,0.55);font-size:13px;text-transform:uppercase;letter-spacing:2px;">{{ __($label) }}</p>
      </div>
      @endforeach
    </div>
  </div>
</div>

@endsection