@extends('app')
@section('title', 'Verve Streetwear | Modern Fashion')
@php
 
@endphp
@push('styles')
<style>
    @media (max-width: 640px) {
        .hero-slide,
        .lookbook-section {
            background-position: center center !important;
        }
    }
</style>
@endpush
@section('content')

@if(session('error'))
    <div style="position: fixed; top: 100px; right: 20px; z-index: 9999; background: rgba(220, 38, 38, 0.95); color: white; padding: 1rem 1.5rem; border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3); backdrop-filter: blur(10px);">
        {{ session('error') }}
    </div>
    <script>
        setTimeout(() => {
            document.querySelector('[style*="rgba(220, 38, 38"]')?.remove();
        }, 5000);
    </script>
@endif

{{-- HERO --}}
<section class="hero-slider">
    <div class="hero-slide active" style="background-image:url('{{ asset('img/IMG_4816.jpg') }}')">
        <div class="hero-overlay">
            <h1 class="hero-title">{{ __('shop.hero_title_1') }}</h1>
            <a href="#products" class="cta-button">{{ __('shop.shop_now') }}</a>
        </div>
    </div>
    <div class="hero-slide" style="background-image:url('{{ asset('img/IMG_0876.jpg') }}')">
        <div class="hero-overlay">
            <h1 class="hero-title">{{ __('shop.hero_title_2') }}</h1>
               <a href="#products" class="cta-button">{{ __('shop.shop_now') }}</a>
         
        </div>
    </div>
</section>

{{-- PRODUCTS --}}
<section id="products" class="products-section">
    <h2 class="section-title fade-in-up">{{ __('shop.latest_drops') }}</h2>
   
    @if($products->isEmpty())
        <div class="sold-out-message fade-in-up">
            <h3 style="font-size: 3rem; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 1rem;">{{ __('shop.sold_out') }}</h3>
            <p style="font-size: 1.2rem; color: rgba(255,255,255,0.6);">{{ __('shop.sold_out_message') }}</p>
        </div>
    @else
        <div class="products-grid">
            @foreach($products as $p)
                @if($p->slug)
                <a href="{{ route('product', ['product' => $p->slug]) }}" class="product-card fade-in-up">
                    <div class="product-image-wrapper">
                        <img src="{{ asset('storage/' . $p->main_img) }}" 
                             alt="{{ $p->name }}" 
                             class="product-image"
                             loading="eager"
                             decoding="async">
                        @if($p->stock <= 3 && $p->stock > 0)
                            <span class="stock-badge stock-low">{{ __('shop.last_items', ['count' => $p->stock]) }}</span>
                        @endif
                    </div>
                    <div class="product-info">
                        <h3 class="product-name">{{ app()->getLocale() === 'en' && $p->name_en ? $p->name_en : $p->name }}</h3>
                        <p class="product-price">
                            {{ number_format($p->price/100,2) }} PLN
                            <span style="color: rgba(255,255,255,0.6); font-size: 0.85em; display: block; margin-top: 0.25rem;">≈ {{ number_format(($p->price/100) / 4.3, 2) }} EUR</span>
                        </p>
                    </div>
                </a>
                @endif
            @endforeach
        </div>
    @endif
</section>



{{-- LOOKBOOK --}}
<section id="about" class="lookbook-section" style="background-image:url('{{ asset('img/IMG_6726.jpg') }}')">
    <div class="lookbook-overlay"></div>
    <div class="lookbook-content">
        <h2 class="lookbook-title fade-in-up">{{ __('shop.our_story') }}</h2>
        <p class="lookbook-subtitle fade-in-up">{{ __('shop.our_story_text') }}</p>
    </div>
</section>

{{-- CONTACT --}}
<section id="contact" class="about-section">
    <div class="about-content">
        <h2 class="about-title fade-in-up">{{ __('shop.contact_us') }}</h2>
        
        @if(session('contact_success'))
            <div class="alert-success">
                {{ session('contact_success') }}
            </div>
        @endif
        
        @if($errors->any())
            <div class="alert-error">
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        
        <div class="contact-card fade-in-up">
            <form method="POST" action="{{ route('contact.send') }}" class="contact-form">
                @csrf
                
                <div class="form-group">
                    <label for="name">{{ __('shop.name') }}</label>
                    <input 
                        type="text" 
                        id="name" 
                        name="name" 
                        value="{{ old('name') }}"
                        required
                    >
                </div>
                
                <div class="form-group">
                    <label for="email">Email</label>
                    <input 
                        type="email" 
                        id="email" 
                        name="email" 
                        value="{{ old('email') }}"
                        required
                    >
                </div>
                
                <div class="form-group">
                    <label for="message">{{ __('shop.message') }}</label>
                    <textarea 
                        id="message" 
                        name="message" 
                        required
                    >{{ old('message') }}</textarea>
                </div>
                
                <button type="submit" class="cta-button" style="margin-top: 1rem; cursor: pointer;">
                    {{ __('shop.send_message') }}
                </button>
            </form>
            
            <div class="contact-divider">
                <p style="color: #fff;"><strong>Email:</strong> verve.ing@gmail.com</p>
            </div>
        </div>
    </div>
</section>
{{-- CUSTOMER PHOTOS – infinite scroll --}}
<section class="customer-photos-section" id="customer">
  <h2 class="section-title fade-in-up">{{ __('shop.customer_photos') }}</h2>

  <div class="photos-roller fade-in-up">
    <div class="photos-grid">
      @forelse($customerPhotos as $photo)
        <img src="{{ asset('storage/' . $photo->path) }}" alt="Customer" class="customer-photo">
      @empty
        <p style="color: rgba(255,255,255,0.6); text-align: center; width: 100%;">Brak zdjęć od klientów.</p>
      @endforelse
      {{-- Duplicate for seamless infinite scroll --}}
      @foreach($customerPhotos as $photo)
        <img src="{{ asset('storage/' . $photo->path) }}" alt="Customer" class="customer-photo">
      @endforeach
    </div>
  </div>
</section>



@endsection