@extends('layouts.app')
@section('title', 'Contact')

@section('content')
<header class="page-hero">
    <div class="container" data-aos="fade-up">
        <div class="crumb">Home — Contact</div>
        <h1>Get In Touch</h1>
    </div>
</header>

<section class="section bg-cream">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-5" data-aos="fade-right">
                <span class="eyebrow">Contact Details</span>
                <h2 class="section-title mt-2 mb-4">Let's Talk</h2>

                <div class="d-flex mb-4">
                    <div class="ic me-3" style="width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--fg-cream);color:var(--fg-gold)"><i class="bi bi-geo-alt fs-5"></i></div>
                    <div><strong>Address</strong><br><span class="text-muted">New Delhi, India</span></div>
                </div>
                <div class="d-flex mb-4">
                    <div class="ic me-3" style="width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--fg-cream);color:var(--fg-gold)"><i class="bi bi-envelope fs-5"></i></div>
                    <div><strong>Email</strong><br><a class="text-muted" href="mailto:fashiongrace111@gmail.com">fashiongrace111@gmail.com</a></div>
                </div>
                <div class="d-flex mb-4">
                    <div class="ic me-3" style="width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--fg-cream);color:var(--fg-gold)"><i class="bi bi-telephone fs-5"></i></div>
                    <div><strong>Phone</strong><br><a class="text-muted" href="tel:+918910747245">+91 8910747245</a></div>
                </div>

                <div class="d-flex gap-2 mt-4">
                    <a href="#" class="soc" style="border-color:var(--fg-line);color:var(--fg-ink)"><i class="bi bi-instagram"></i></a>
                    <a href="#" class="soc" style="border-color:var(--fg-line);color:var(--fg-ink)"><i class="bi bi-facebook"></i></a>
                    <a href="#" class="soc" style="border-color:var(--fg-line);color:var(--fg-ink)"><i class="bi bi-youtube"></i></a>
                </div>
            </div>

            <div class="col-lg-7" data-aos="fade-left">
                @if(session('success'))
                <div class="alert alert-success rounded-4 border-0 shadow-sm mb-4">
                    <i class="bi bi-check-circle-fill me-2 text-success"></i>{{ session('success') }}
                </div>
                @endif
                <form class="fg-form" action="{{ route('contact.store') }}" method="POST">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label>Name <span class="text-coral">*</span></label>
                            <input type="text" name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label>Email <span class="text-coral">*</span></label>
                            <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" required>
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12">
                            <label>Message <span class="text-coral">*</span></label>
                            <textarea name="message" rows="5" class="form-control @error('message') is-invalid @enderror" required>{{ old('message') }}</textarea>
                            @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12">
                            <button class="btn btn-gold btn-lg w-100">Send Message</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection
