@extends('layouts.customer')

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

@section('content')
<div class="contact-page">
    <!-- Page Header -->
    <div class="page-header">
        <h1>Contact Us</h1>
        <p class="subtitle">We'd love to hear from you</p>
    </div>

    <div class="contact-container">
        <!-- Contact Information Section -->
        <div class="contact-info-section">
            <h2>Get in Touch</h2>
            <p class="intro-text">
                Have questions about our wines or want to visit our winery?
                Feel free to reach out to us using the information below.
            </p>

            <div class="info-cards">
                <div class="info-card">
                    <div class="info-icon">
                        <svg 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>
                    </div>
                    <h3>Visit Us</h3>
                    <p>
                        Vineyard Lane 123<br>
                        Wine Valley, 12345<br>
                        Czech Republic
                    </p>
                </div>

                <div class="info-card">
                    <div class="info-icon">
                        <svg fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
                        </svg>
                    </div>
                    <h3>Call Us</h3>
                    <p>
                        Phone: +420 123 456 789<br>
                        Fax: +420 123 456 788
                    </p>
                </div>

                <div class="info-card">
                    <div class="info-icon">
                        <svg fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
                        </svg>
                    </div>
                    <h3>Email Us</h3>
                    <p>
                        info@winery.com<br>
                        sales@winery.com
                    </p>
                </div>

                <div class="info-card">
                    <div class="info-icon">
                        <svg fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <h3>Opening Hours</h3>
                    <p>
                        Monday - Friday: 9:00 - 18:00<br>
                        Saturday: 10:00 - 16:00<br>
                        Sunday: Closed
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Map or Additional Info Section (Optional) -->
    <div class="additional-info-section">
        <div class="info-box">
            <h3>Wine Tastings</h3>
            <p>
                We offer guided wine tastings by appointment. Experience our wines paired with local delicacies
                in our beautiful tasting room overlooking the vineyards.
            </p>
        </div>

        <div class="info-box">
            <h3>Vineyard Tours</h3>
            <p>
                Join us for a tour of our vineyards and winery. Learn about our winemaking process and the
                history of our estate. Tours available on weekends by reservation.
            </p>
        </div>

        <div class="info-box">
            <h3>Private Events</h3>
            <p>
                Our winery is available for private events, corporate gatherings, and celebrations.
                Contact us to discuss your special occasion.
            </p>
        </div>
    </div>
</div>

<style>
    .contact-page {
        max-width: 100%;
    }

    .page-header {
        text-align: center;
        margin-bottom: 3rem;
    }

    .page-header h1 {
        font-size: 2.5rem;
        color: #2d3748;
        margin-bottom: 0.5rem;
        font-weight: 700;
    }

    .subtitle {
        font-size: 1.1rem;
        color: #718096;
    }

    /* Contact Container */
    .contact-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-bottom: 4rem;
    }

    /* Contact Info Section */
    .contact-info-section h2 {
        font-size: 2rem;
        color: #2d3748;
        margin-bottom: 1.5rem;
        font-weight: 700;
    }

    .intro-text {
        font-size: 1.1rem;
        color: #4a5568;
        line-height: 1.6;
        margin-bottom: 2rem;
    }

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

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

    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

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

    .info-icon svg {
        width: 24px;
        height: 24px;
    }

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

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

    /* Additional Info Section */
    .additional-info-section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-bottom: 4rem;
    }

    .info-box {
        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
        padding: 2rem;
        border-radius: 12px;
        border-left: 4px solid #89b4d9;
    }

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

    .info-box p {
        font-size: 1rem;
        color: #4a5568;
        line-height: 1.6;
        margin: 0;
    }

    /* Mobile Responsive */
    @media (max-width: 968px) {
        .info-cards {
            grid-template-columns: 1fr;
        }

        .additional-info-section {
            grid-template-columns: 1fr;
        }

        .page-header h1 {
            font-size: 2rem;
        }
    }
</style>
@endsection