@extends('layouts.customer')

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

@section('content')
<div class="about-page">
    <!-- Hero Section with Landscape Image -->
    <section class="hero-banner">
        <div class="hero-overlay">
            <h1 class="hero-title">Welcome to Our Winery</h1>
            <p class="hero-subtitle">Where Tradition Meets Excellence</p>
            <p class="hero-text">
                Discover the passion and craftsmanship behind every bottle of wine we produce
            </p>
            <div class="hero-buttons">
                <a href="{{ route('catalog.index') }}" class="btn-hero-primary">
                    <svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                    </svg>
                    Explore Our Wines
                </a>
            </div>
        </div>
    </section>

    <!-- Our Story Section -->
    <section class="story-section">
        <div class="content-container">
            <h2 class="section-title">Our Story</h2>
            <div class="story-content">
                <p>
                    Our winery was born from a deep passion for quality wine and a profound respect for traditional viticulture.
                    Nestled in the heart of wine country, our vineyards benefit from ideal conditions that have been carefully
                    cultivated for generations.
                </p>
                <p>
                    What began as a family dream has blossomed into a thriving winery that combines time-honored winemaking
                    techniques with modern innovation. Every step of our process, from grape cultivation to bottling,
                    is executed with meticulous attention to detail and an unwavering commitment to excellence.
                </p>
                <p>
                    We believe that great wine is made in the vineyard. Our dedication to sustainable farming practices and
                    respect for the terroir ensures that each vintage captures the unique character of our land and the
                    exceptional quality of our grapes.
                </p>
            </div>
        </div>
    </section>

    <!-- Values Section -->
    <section class="values-section">
        <h2 class="section-title">Our Values</h2>

        <div class="values-grid">
            <div class="value-card">
                <div class="value-icon">
                    <svg fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <h3>Quality & Tradition</h3>
                <p>We honor traditional winemaking methods while embracing modern techniques to ensure the highest quality in every bottle</p>
            </div>

            <div class="value-card">
                <div class="value-icon">
                    <svg fill="currentColor" viewBox="0 0 20 20">
                        <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/>
                    </svg>
                </div>
                <h3>Complete Control</h3>
                <p>From vineyard to bottle, we oversee every step of the winemaking process to maintain our exacting standards</p>
            </div>

            <div class="value-card">
                <div class="value-icon">
                    <svg fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <h3>Passion & Care</h3>
                <p>Every bottle represents our love for winemaking and our dedication to creating exceptional experiences</p>
            </div>

            <div class="value-card">
                <div class="value-icon">
                    <svg fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <h3>Sustainable Practices</h3>
                <p>We are committed to environmentally responsible viticulture that preserves our land for future generations</p>
            </div>

            <div class="value-card">
                <div class="value-icon">
                    <svg fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                </div>
                <h3>Award-Winning Wines</h3>
                <p>Our commitment to excellence has been recognized with numerous awards and accolades in the wine industry</p>
            </div>

            <div class="value-card">
                <div class="value-icon">
                    <svg fill="currentColor" viewBox="0 0 20 20">
                        <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
                    </svg>
                </div>
                <h3>Family Tradition</h3>
                <p>Generations of winemaking expertise and family values guide everything we do</p>
            </div>
        </div>
    </section>

    <!-- Winemaking Process Section -->
    <section class="process-section">
        <div class="content-container">
            <h2 class="section-title">Our Winemaking Process</h2>

            <div class="process-grid">
                <div class="process-step">
                    <div class="step-number">1</div>
                    <h3>Vineyard Care</h3>
                    <p>Year-round attention to our vines ensures healthy grapes with optimal flavor development</p>
                </div>

                <div class="process-step">
                    <div class="step-number">2</div>
                    <h3>Harvest</h3>
                    <p>We harvest at peak ripeness, carefully selecting only the finest grapes by hand</p>
                </div>

                <div class="process-step">
                    <div class="step-number">3</div>
                    <h3>Fermentation</h3>
                    <p>Traditional fermentation methods combined with modern temperature control for perfect results</p>
                </div>

                <div class="process-step">
                    <div class="step-number">4</div>
                    <h3>Aging</h3>
                    <p>Our wines mature in carefully selected barrels, developing complexity and character</p>
                </div>

                <div class="process-step">
                    <div class="step-number">5</div>
                    <h3>Blending</h3>
                    <p>Expert blending creates balanced, harmonious wines that showcase our terroir</p>
                </div>

                <div class="process-step">
                    <div class="step-number">6</div>
                    <h3>Bottling</h3>
                    <p>Each bottle is filled, corked, and labeled with care, ready to deliver excellence</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Upcoming Events Section -->
    @php
        $upcomingEvents = collect();

        try {
            if (\Illuminate\Support\Facades\Schema::hasTable('events')) {
                $upcomingEvents = \App\Models\Event::where('status', 'upcoming')
                    ->where('event_date', '>=', now())
                    ->orderBy('event_date', 'asc')
                    ->limit(3)
                    ->get();
            }
        } catch (\Throwable $e) {
            // Table missing or other database issue; fail silently on About page.
            $upcomingEvents = collect();
        }
    @endphp

    @if($upcomingEvents->count() > 0)
    <section class="events-section">
        <div class="content-container-wide">
            <h2 class="section-title">Upcoming Events</h2>
            <p class="section-subtitle">Join us for exclusive wine experiences</p>

            <div class="events-grid">
                @foreach($upcomingEvents as $event)
                <div class="event-card">
                    <div class="event-type-badge event-type-{{ $event->type }}">
                        @if($event->type === 'tasting')
                            🍷 Wine Tasting
                        @elseif($event->type === 'harvest_festival')
                            🍇 Harvest Festival
                        @elseif($event->type === 'vineyard_tour')
                            🚶 Vineyard Tour
                        @endif
                    </div>

                    <h3 class="event-name">{{ $event->name }}</h3>
                    <p class="event-description">{{ Str::limit($event->description, 150) }}</p>

                    <div class="event-details">
                        <div class="detail-item">
                            <svg style="width: 18px; height: 18px;" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
                            </svg>
                            <span>{{ $event->event_date->format('d.m.Y') }} at {{ $event->event_time->format('H:i') }}</span>
                        </div>
                        @if($event->location)
                        <div class="detail-item">
                            <svg style="width: 18px; height: 18px;" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
                            </svg>
                            <span>{{ $event->location }}</span>
                        </div>
                        @endif
                        <div class="detail-item">
                            <svg style="width: 18px; height: 18px;" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
                            </svg>
                            <span>{{ $event->availableSpots() }} / {{ $event->capacity }} spots available</span>
                        </div>
                    </div>

                    <div class="event-footer">
                        <div class="event-price">{{ number_format($event->price_per_person, 2) }} € / person</div>
                        @auth
                            @if($event->isFull())
                                <button class="btn-reserve-disabled" disabled>
                                    Event Full
                                </button>
                            @else
                                <form action="{{ route('events.reserve', $event) }}" method="POST" class="reserve-form">
                                    @csrf
                                    <input type="hidden" name="number_of_guests" value="1">
                                    <button type="submit" class="btn-reserve">
                                        <svg style="width: 18px; height: 18px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                        </svg>
                                        Reserve Now
                                    </button>
                                </form>
                            @endif
                        @else
                            <a href="{{ route('login') }}" class="btn-reserve">
                                <svg style="width: 18px; height: 18px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
                                </svg>
                                Login to Reserve
                            </a>
                        @endauth
                    </div>
                </div>
                @endforeach
            </div>

            <div class="events-cta">
                <a href="{{ route('events.index') }}" class="btn-view-all-events">
                    View All Events
                    <svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                    </svg>
                </a>
            </div>
        </div>
    </section>
    @endif
</div>

<style>
    .about-page {
        max-width: 100%;
        padding: 0;
    }

    /* Hero Banner with Background Image */
    .hero-banner {
        position: relative;
        height: 500px;
        background-image: url('{{ asset('storage/wines/landscape.png') }}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 4rem;
    }

    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        text-align: center;
    }

    .hero-title {
        font-size: 4rem;
        font-weight: 800;
        color: white;
        margin: 0 0 1rem 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .hero-subtitle {
        font-size: 2rem;
        color: rgba(255, 255, 255, 0.95);
        margin: 0 0 1.5rem 0;
        font-weight: 600;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .hero-text {
        font-size: 1.25rem;
        color: rgba(255, 255, 255, 0.9);
        max-width: 700px;
        margin: 0 0 2rem 0;
        line-height: 1.6;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .hero-buttons {
        display: flex;
        gap: 1rem;
    }

    .btn-hero-primary {
        background: white;
        color: #1a365d;
        padding: 1rem 2.5rem;
        border-radius: 10px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .btn-hero-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    /* Content Container */
    .content-container {
        max-width: 900px;
        margin: 0 auto;
    }

    /* Section Title */
    .section-title {
        text-align: center;
        font-size: 2.5rem;
        font-weight: 700;
        color: #2d3748;
        margin: 0 0 3rem 0;
    }

    /* Story Section */
    .story-section {
        padding: 4rem 0;
        margin-bottom: 4rem;
    }

    .story-content p {
        font-size: 1.1rem;
        color: #4a5568;
        line-height: 1.8;
        margin: 0 0 1.5rem 0;
    }

    /* Values Section */
    .values-section {
        padding: 4rem 0;
        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
        border-radius: 16px;
        padding: 4rem 2rem;
        margin-bottom: 4rem;
    }

    .values-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .value-card {
        background: white;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        text-align: center;
        transition: all 0.3s;
    }

    .value-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .value-icon {
        width: 64px;
        height: 64px;
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        color: #1a365d;
    }

    .value-icon svg {
        width: 32px;
        height: 32px;
    }

    .value-card h3 {
        font-size: 1.25rem;
        color: #2d3748;
        margin: 0 0 1rem 0;
        font-weight: 600;
    }

    .value-card p {
        font-size: 1rem;
        color: #718096;
        line-height: 1.6;
        margin: 0;
    }

    /* Process Section */
    .process-section {
        padding: 4rem 0;
        margin-bottom: 4rem;
    }

    .process-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .process-step {
        background: white;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
        position: relative;
    }

    .process-step:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .step-number {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1a365d;
        font-size: 1.5rem;
        font-weight: 700;
        box-shadow: 0 4px 8px rgba(137, 180, 217, 0.3);
    }

    .process-step h3 {
        font-size: 1.25rem;
        color: #2d3748;
        margin: 2rem 0 1rem 0;
        font-weight: 600;
        text-align: center;
    }

    .process-step p {
        font-size: 1rem;
        color: #718096;
        line-height: 1.6;
        margin: 0;
        text-align: center;
    }

    /* Events Section */
    .events-section {
        padding: 4rem 0;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        border-radius: 16px;
        padding: 4rem 2rem;
        margin-bottom: 4rem;
    }

    .content-container-wide {
        max-width: 1200px;
        margin: 0 auto;
    }

    .section-subtitle {
        text-align: center;
        font-size: 1.1rem;
        color: #718096;
        margin: -2rem 0 3rem 0;
    }

    .events-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .event-card {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
    }

    .event-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .event-type-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
        align-self: flex-start;
    }

    .event-type-tasting {
        background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
        color: #78350f;
    }

    .event-type-harvest_festival {
        background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
        color: #581c87;
    }

    .event-type-vineyard_tour {
        background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
        color: #065f46;
    }

    .event-name {
        font-size: 1.5rem;
        color: #2d3748;
        margin: 0 0 1rem 0;
        font-weight: 600;
        line-height: 1.3;
    }

    .event-description {
        font-size: 1rem;
        color: #718096;
        line-height: 1.6;
        margin: 0 0 1.5rem 0;
        flex-grow: 1;
    }

    .event-details {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
        padding-top: 1.5rem;
        border-top: 2px solid #e2e8f0;
    }

    .detail-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #4a5568;
        font-size: 0.95rem;
    }

    .detail-item svg {
        color: #89b4d9;
        flex-shrink: 0;
    }

    .event-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-top: 1.5rem;
        border-top: 2px solid #e2e8f0;
    }

    .event-price {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2d3748;
    }

    .reserve-form {
        margin: 0;
    }

    .btn-reserve {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        font-size: 0.95rem;
    }

    .btn-reserve:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
    }

    .btn-reserve-disabled {
        background: #cbd5e0;
        color: #718096;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        border: none;
        font-weight: 600;
        cursor: not-allowed;
        font-size: 0.95rem;
    }

    .events-cta {
        text-align: center;
    }

    .btn-view-all-events {
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        color: #1a365d;
        padding: 1rem 2.5rem;
        border-radius: 10px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.1rem;
        box-shadow: 0 4px 12px rgba(137, 180, 217, 0.3);
    }

    .btn-view-all-events:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(137, 180, 217, 0.4);
    }

    /* Mobile Responsive */
    @media (max-width: 968px) {
        .hero-banner {
            height: 400px;
        }

        .hero-title {
            font-size: 2.5rem;
        }

        .hero-subtitle {
            font-size: 1.5rem;
        }

        .hero-text {
            font-size: 1.1rem;
        }

        .values-grid,
        .process-grid,
        .events-grid {
            grid-template-columns: 1fr;
        }

        .section-title {
            font-size: 2rem;
        }
    }
</style>
@endsection