@extends('layouts.app')

@section('meta_title', 'Contact ScoreKings - Get in Touch')
@section('meta_description', 'Have questions or feedback about ScoreKings? Contact our team and we\'ll get back to you as soon as possible.')
@section('meta_keywords', 'contact ScoreKings, football scores support, feedback')

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

@section('head')
<style>
    .contact-header {
        background: linear-gradient(135deg, #1a1a2e 0%, #2a2a4e 50%, #1a1a2e 100%);
        padding: 50px 0 35px;
        border-radius: 12px;
        margin-bottom: 40px;
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
    }
    .contact-header::before {
        content: '';
        position: absolute;
        top: -60%;
        right: -10%;
        width: 400px;
        height: 400px;
        background: rgba(229, 9, 20, 0.08);
        border-radius: 50%;
    }
    .contact-header h1 {
        font-size: 2.8rem;
        font-weight: 800;
        position: relative;
        z-index: 1;
    }
    .contact-header h1 i {
        color: #f5c518;
    }
    .contact-header p {
        color: rgba(255,255,255,0.7);
        font-size: 1.2rem;
        max-width: 600px;
        margin: 10px auto 0;
        position: relative;
        z-index: 1;
    }
    .contact-form-box {
        background: #fff;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .contact-form-box h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 5px;
    }
    .contact-form-box .subtitle {
        color: #6c757d;
        margin-bottom: 25px;
    }
    .contact-form-box label {
        font-weight: 600;
        color: #343a40;
        font-size: 0.9rem;
    }
    .contact-form-box .form-control,
    .contact-form-box .form-select {
        border-radius: 10px;
        border: 2px solid #e9ecef;
        padding: 12px 16px;
        transition: all 0.2s;
        background: #f8f9fa;
    }
    .contact-form-box .form-control:focus,
    .contact-form-box .form-select:focus {
        border-color: #e10600;
        box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.08);
        background: #fff;
    }
    .contact-form-box .btn-submit {
        background: #e10600;
        color: #fff;
        border: none;
        padding: 12px 40px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 1rem;
        transition: all 0.3s;
        cursor: pointer;
        width: 100%;
    }
    .contact-form-box .btn-submit:hover {
        background: #b80500;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
    }
    .info-box {
        background: #fff;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        height: 100%;
    }
    .info-box h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 20px;
    }
    .info-box h2 i {
        color: #e10600;
        margin-right: 10px;
    }
    .info-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 12px 0;
        border-bottom: 1px solid #f1f3f5;
    }
    .info-item:last-child {
        border-bottom: none;
    }
    .info-item .icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #e10600;
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    .info-item .details .label {
        font-weight: 600;
        color: #1a1a2e;
        display: block;
        font-size: 0.85rem;
    }
    .info-item .details .value {
        color: #6c757d;
        font-size: 0.95rem;
    }
    .social-links {
        display: flex;
        gap: 12px;
        margin-top: 15px;
    }
    .social-links a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1a1a2e;
        font-size: 1.2rem;
        transition: all 0.3s;
        text-decoration: none;
    }
    .social-links a:hover {
        background: #e10600;
        color: #fff;
        transform: translateY(-3px);
    }
    .alert-success {
        background: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
        padding: 15px 20px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    @media (max-width: 768px) {
        .contact-header h1 { font-size: 2rem; }
        .contact-form-box { padding: 20px; }
        .info-box { margin-top: 20px; }
    }
    @media (max-width: 576px) {
        .contact-header h1 { font-size: 1.5rem; }
        .contact-header p { font-size: 1rem; }
        .contact-form-box .btn-submit { width: 100%; }
    }
</style>
@endsection

@section('content')
<div class="contact-header">
    <div class="container">
        <h1><i class="fas fa-envelope"></i> Contact Us</h1>
        <p>Have questions, suggestions, or feedback? We'd love to hear from you!</p>
    </div>
</div>

<div class="container">
    @if(session('success'))
    <div class="alert-success">
        <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
    </div>
    @endif

    <div class="row">
        <div class="col-lg-7">
            <div class="contact-form-box">
                <h2>Send Us a Message</h2>
                <p class="subtitle">Fill out the form below and we'll get back to you as soon as possible.</p>

                <form method="POST" action="{{ route('contact.submit') }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Your Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" placeholder="Enter your name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email Address <span class="text-danger">*</span></label>
                        <input type="email" name="email" class="form-control" placeholder="Enter your email" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Subject <span class="text-danger">*</span></label>
                        <select name="subject" class="form-select" required>
                            <option value="">Select a subject</option>
                            <option value="general">General Inquiry</option>
                            <option value="feedback">Feedback</option>
                            <option value="bug">Bug Report</option>
                            <option value="suggestion">Suggestion</option>
                            <option value="advertising">Advertising</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Message <span class="text-danger">*</span></label>
                        <textarea name="message" class="form-control" rows="6" placeholder="Write your message here..." required></textarea>
                    </div>
                    <button type="submit" class="btn-submit">
                        <i class="fas fa-paper-plane me-2"></i> Send Message
                    </button>
                </form>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="info-box">
                <h2><i class="fas fa-info-circle"></i> Contact Info</h2>

                <div class="info-item">
                    <div class="icon"><i class="fas fa-envelope"></i></div>
                    <div class="details">
                        <span class="label">Email</span>
                        <span class="value">info@kingtoolskit.com</span>
                    </div>
                </div>
                <div class="info-item">
                    <div class="icon"><i class="fas fa-globe"></i></div>
                    <div class="details">
                        <span class="label">Website</span>
                        <span class="value">kingtoolskit.com</span>
                    </div>
                </div>
                <div class="info-item">
                    <div class="icon"><i class="fas fa-clock"></i></div>
                    <div class="details">
                        <span class="label">Response Time</span>
                        <span class="value">Within 24 hours</span>
                    </div>
                </div>
                <div class="info-item">
                    <div class="icon"><i class="fas fa-futbol"></i></div>
                    <div class="details">
                        <span class="label">Passion</span>
                        <span class="value">Football &amp; Data</span>
                    </div>
                </div>

                <hr>

                <h6 class="mt-3"><i class="fas fa-share-alt me-2" style="color: #e10600;"></i> Follow Us</h6>
                <div class="social-links">
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>

                <hr>

                <p class="text-muted small mt-3 mb-0">
                    <i class="fas fa-lock me-1"></i> Your information is safe with us. We never share your data with third parties.
                </p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const alert = document.querySelector('.alert-success');
    if (alert) {
        setTimeout(() => {
            alert.style.transition = 'opacity 0.5s ease';
            alert.style.opacity = '0';
            setTimeout(() => { alert.style.display = 'none'; }, 500);
        }, 5000);
    }
});
</script>
@endpush
@endsection