@extends('layouts.customer')

@section('title', 'Winery - Quality Wine from Our Own Production')

@section('content')
<div class="landing-page">
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="hero-content">
            <h1 class="hero-title">Welcome to Winery</h1>
            <p class="hero-subtitle">Traditional winery with a modern approach</p>
            <p class="hero-description">
                Discover our quality wines from our own production. Each bottle is the result
                of careful grape cultivation and traditional winemaking methods.
            </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>
                    Go to Catalog
                </a>
                @guest
                <a href="{{ route('register') }}" class="btn-hero-secondary">
                    Register
                </a>
                @endguest
            </div>
        </div>

        <div class="hero-image">
            <svg fill="currentColor" viewBox="0 0 24 24">
                <path d="M6 3v11c0 3.87 3.13 7 7 7s7-3.13 7-7V3H6zm12 2v2H6V5h12zm-7 14c-2.76 0-5-2.24-5-5v-5h10v5c0 2.76-2.24 5-5 5z"/>
                <circle cx="13" cy="11" r="1"/>
            </svg>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features-section">
        <h2 class="section-title">Why choose our wines?</h2>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-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 and Tradition</h3>
                <p>We produce wine in a traditional way with emphasis on quality and authenticity</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">
                    <svg fill="currentColor" viewBox="0 0 20 20">
                        <path d="M2 6a2 2 0 012-2h6a2 2 0 012 6v8a2 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>Own Production</h3>
                <p>From grape cultivation to bottling - everything under our control</p>
            </div>

            <div class="feature-card">
                <div class="feature-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>With Love for Wine</h3>
                <p>Every bottle is the result of our passion and care</p>
            </div>
        </div>
    </section>

    <!-- Featured Wines Section -->
    @php
        $featuredWines = \App\Models\Wine::with('grapeVariety')
            ->where('status', 'ready')
            ->where('bottles_in_stock', '>', 0)
            ->orderBy('vintage', 'desc')
            ->limit(3)
            ->get();
    @endphp

    @if($featuredWines->count() > 0)
    <section class="featured-wines-section">
        <h2 class="section-title">Our Featured Wines</h2>

        <div class="wines-grid">
            @foreach($featuredWines as $wine)
            <div class="wine-card-simple">
                <div class="wine-image-simple">
                    @if($wine->image_url)
                        <img src="{{ asset('storage/' . $wine->image_url) }}" alt="{{ $wine->wine_name }}" style="width: 100%; height: 100%; object-fit: contain;">
                    @else
                        <svg fill="currentColor" viewBox="0 0 24 24">
                            <path d="M6 3v11c0 3.87 3.13 7 7 7s7-3.13 7-7V3H6zm12 2v2H6V5h12zm-7 14c-2.76 0-5-2.24-5-5v-5h10v5c0 2.76-2.24 5-5 5z"/>
                            <circle cx="13" cy="11" r="1"/>
                        </svg>
                    @endif
                </div>

                <div class="wine-info-simple">
                    <h3>{{ $wine->wine_name }}</h3>
                    <p class="wine-variety-simple">{{ $wine->grapeVariety->variety_name ?? 'N/A' }}</p>
                    <div class="wine-details-simple">
                        <span class="wine-vintage-simple">{{ $wine->vintage }}</span>
                        <span class="wine-price-simple">{{ number_format($wine->price_per_bottle, 2) }} €</span>
                    </div>
                    <a href="{{ route('catalog.show', $wine->id) }}" class="btn-view-wine">
                        View Details
                    </a>
                </div>
            </div>
            @endforeach
        </div>

        <div class="section-cta">
            <a href="{{ route('catalog.index') }}" class="btn-view-all">
                View All Wines
                <svg style="width: 18px; height: 18px;" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                </svg>
            </a>
        </div>
    </section>
    @endif

    <!-- About Section -->
    <section class="about-section">
        <div class="about-content">
            <h2>About Us</h2>
            <p>
                The Winery was born from a passion for quality wine and traditional viticulture.
                Our vineyards are located in ideal conditions for growing quality grape varieties.
            </p>
            <p>
                We use modern technologies combined with traditional methods to ensure
                the best quality of our wines. Each vintage is unique and reflects the characteristics
                of that particular period.
            </p>
            <p>
                We offer a wide range of white and red wines that are the result of careful
                cultivation and processing of grapes from our own vineyards.
            </p>
        </div>

        <div class="about-stats">
            <div class="stat-card">
                <div class="stat-value">
                    {{ \App\Models\VineyardRow::count() }}
                </div>
                <div class="stat-label">Vineyard Rows</div>
            </div>

            <div class="stat-card">
                <div class="stat-value">
                    {{ \App\Models\Wine::where('status', 'ready')->count() }}
                </div>
                <div class="stat-label">Wine Varieties</div>
            </div>

            <div class="stat-card">
                <div class="stat-value">
                    {{ \App\Models\Harvest::count() }}
                </div>
                <div class="stat-label">Successful Harvests</div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <h2>Start Discovering Our Wines</h2>
        <p>Visit our catalog and choose from our selection of quality wines</p>
        <a href="{{ route('catalog.index') }}" class="btn-cta">
            <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>
            Go to Catalog
        </a>
    </section>
</div>

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

    /* Hero Section */
    .hero-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
        padding: 4rem 2rem;
        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
        border-radius: 16px;
        margin-bottom: 4rem;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        color: #2d3748;
        margin: 0;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1.5rem;
        color: #4a5568;
        margin: 0;
        font-weight: 600;
    }

    .hero-description {
        font-size: 1.1rem;
        color: #718096;
        line-height: 1.6;
        margin: 0;
    }

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

    .btn-hero-primary {
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        color: #1a365d;
        padding: 1rem 2rem;
        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;
    }

    .btn-hero-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(137, 180, 217, 0.4);
    }

    .btn-hero-secondary {
        background: white;
        color: #4a5568;
        padding: 1rem 2rem;
        border-radius: 10px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s;
        border: 2px solid #e2e8f0;
        display: inline-flex;
        align-items: center;
        font-size: 1.1rem;
    }

    .btn-hero-secondary:hover {
        background: #f7fafc;
        border-color: #cbd5e0;
    }

    .hero-image {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #cbd5e0;
    }

    .hero-image svg {
        width: 300px;
        height: 300px;
    }

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

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

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

    .feature-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;
    }

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

    .feature-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;
    }

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

    .feature-card h3 {
        font-size: 1.5rem;
        color: #2d3748;
        margin: 0 0 1rem 0;
    }

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

    /* Featured Wines Section */
    .featured-wines-section {
        padding: 4rem 0;
        background: #f7fafc;
        border-radius: 16px;
        padding: 4rem 2rem;
        margin-bottom: 4rem;
    }

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

    .wine-card-simple {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
    }

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

    .wine-image-simple {
        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #cbd5e0;
    }

    .wine-image-simple svg {
        width: 80px;
        height: 80px;
    }

    .wine-info-simple {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .wine-info-simple h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #2d3748;
        margin: 0;
    }

    .wine-variety-simple {
        font-size: 0.95rem;
        color: #718096;
        margin: 0;
    }

    .wine-details-simple {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
    }

    .wine-vintage-simple {
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        color: #1a365d;
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.9rem;
    }

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

    .btn-view-wine {
        display: block;
        text-align: center;
        padding: 0.75rem;
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        color: #1a365d;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
    }

    .btn-view-wine:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(137, 180, 217, 0.4);
    }

    .section-cta {
        display: flex;
        justify-content: center;
    }

    .btn-view-all {
        background: white;
        color: #4a5568;
        padding: 1rem 2rem;
        border-radius: 10px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s;
        border: 2px solid #e2e8f0;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.1rem;
    }

    .btn-view-all:hover {
        background: #f7fafc;
        border-color: #cbd5e0;
    }

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

    .about-content {
        max-width: 800px;
        margin: 0 auto 3rem;
        text-align: center;
    }

    .about-content h2 {
        font-size: 2.5rem;
        font-weight: 700;
        color: #2d3748;
        margin: 0 0 2rem 0;
    }

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

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

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

    .stat-value {
        font-size: 3rem;
        font-weight: 800;
        color: #2d3748;
        margin-bottom: 0.5rem;
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-label {
        font-size: 1rem;
        color: #718096;
        font-weight: 600;
    }

    /* CTA Section */
    .cta-section {
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        padding: 4rem 2rem;
        border-radius: 16px;
        text-align: center;
        margin-bottom: 4rem;
    }

    .cta-section h2 {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1a365d;
        margin: 0 0 1rem 0;
    }

    .cta-section p {
        font-size: 1.2rem;
        color: #2c5282;
        margin: 0 0 2rem 0;
    }

    .btn-cta {
        background: white;
        color: #1a365d;
        padding: 1rem 2rem;
        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;
    }

    .btn-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    /* Mobile Responsive */
    @media (max-width: 968px) {
        .hero-section {
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        .hero-image svg {
            width: 200px;
            height: 200px;
        }

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

        .features-grid,
        .wines-grid,
        .about-stats {
            grid-template-columns: 1fr;
        }

        .hero-buttons {
            flex-direction: column;
        }

        .section-title,
        .about-content h2,
        .cta-section h2 {
            font-size: 2rem;
        }
    }
</style>
@endsection