@extends('layouts.user')

@section('title', 'Contact Us | Smart Dermatology')

@push('styles')
    <style>
        .contact-glass-form { background: rgba(246, 144, 166, 0.15); backdrop-filter: blur(8px); border: 1px solid rgba(246, 144, 166, 0.3); border-radius: 25px; padding: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); }
        .form-label { color: #444; font-weight: 600; margin-bottom: 8px; }
        .contact-input { border: 1px solid #eee !important; border-radius: 12px !important; padding: 12px 15px; transition: 0.3s; }
        .contact-input:focus { border-color: var(--brand-pink) !important; box-shadow: 0 0 10px rgba(246, 144, 166, 0.2) !important; }
        .hero-mini-contact { height: 60vh; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: white; }
        .contact-section { padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #fff0f3 100%); }
    </style>
@endpush

@section('content')
    <section class="hero-mini-contact">
        <div class="container animate__animated animate__fadeIn">
            <h1 class="display-3 fw-bold">Contact <span style="color: var(--brand-pink);">Us</span></h1>
            <p class="lead">We're here to answer your questions and hear your feedback.</p>
        </div>
    </section>

    <section class="contact-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6 text-center mb-5">
                    <h2 class="fw-bold">Send a Message</h2>
                    <p class="text-muted">Fill out the form below and our team will get back to you shortly.</p>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-7 col-lg-6">
                    <div class="contact-glass-form">
                        @if (session('status'))
                            <div class="alert alert-success rounded-4">{{ session('status') }}</div>
                        @endif

                        <form method="POST" action="{{ route('contact.store') }}">
                            @csrf
                            <div class="mb-4">
                                <label class="form-label">Full Name</label>
                                <input type="text" name="name" class="form-control contact-input @error('name') is-invalid @enderror" placeholder="Enter your full name" value="{{ old('name', auth()->user()->name ?? '') }}" required>
                                @error('name') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                            </div>
                            <div class="mb-4">
                                <label class="form-label">Email Address</label>
                                <input type="email" name="email" class="form-control contact-input @error('email') is-invalid @enderror" placeholder="example@mail.com" value="{{ old('email', auth()->user()->email ?? '') }}" required>
                                @error('email') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                            </div>
                            <div class="mb-4">
                                <label class="form-label">Phone Number</label>
                                <input type="tel" name="phone" class="form-control contact-input @error('phone') is-invalid @enderror" placeholder="+1 234 567 890" value="{{ old('phone') }}">
                                @error('phone') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                            </div>
                            <div class="mb-4">
                                <label class="form-label">Message</label>
                                <textarea name="message" class="form-control contact-input @error('message') is-invalid @enderror" rows="5" placeholder="How can we help you today?" required>{{ old('message') }}</textarea>
                                @error('message') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                            </div>
                            <button type="submit" class="btn btn-pink w-100 py-3 fw-bold shadow-sm">Submit Inquiry</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection