@extends('layouts.public')

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

@section('content')
<section class="page-hero">
    <div class="container">
        <div class="page-hero-content">
            <span class="page-kicker">Contact Us</span>
            <h1>Reach the Karwan Welfare Foundation team.</h1>
            <p>
                Send a message, ask about assistance, or connect with us about donations and
                partnership opportunities.
            </p>
        </div>
    </div>
</section>

<section class="page-section">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-5">
                <div class="contact-panel">
                    <h2>Contact Information</h2>
                    <div class="contact-list">
                        <div>
                            <i class="fa-solid fa-phone"></i>
                            <span>{{ $settings['phone'] ?? 'Phone number not configured' }}</span>
                        </div>
                        <div>
                            <i class="fa-solid fa-envelope"></i>
                            <span>{{ $settings['email'] ?? 'Email not configured' }}</span>
                        </div>
                        <div>
                            <i class="fa-solid fa-location-dot"></i>
                            <span>{{ $settings['address'] ?? 'Address not configured' }}</span>
                        </div>
                    </div>

                    <div class="social-row">
                        <a href="{{ $settings['facebook'] ?? 'https://www.facebook.com/KRWANFOUNDATION/' }}" target="_blank" rel="noopener">
                            <i class="fab fa-facebook"></i>
                        </a>
                        <a href="{{ $settings['instagram'] ?? 'https://www.instagram.com/karwanwelfarefoundation/' }}" target="_blank" rel="noopener">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="{{ $settings['youtube'] ?? 'https://www.youtube.com/@karwanwelfarefoundation' }}" target="_blank" rel="noopener">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-lg-7">
                <form method="POST" action="{{ route('contact.store') }}" class="card kw-card p-4 p-lg-5">
                    @csrf
                    <h2 class="h3 fw-bold mb-4">Send a Message</h2>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Full Name</label>
                            <input class="form-control" name="name" value="{{ old('name') }}" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input class="form-control" name="phone" value="{{ old('phone') }}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input class="form-control" type="email" name="email" value="{{ old('email') }}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Subject</label>
                            <input class="form-control" name="subject" value="{{ old('subject') }}" placeholder="Contact Us">
                        </div>

                        <div class="col-12">
                            <label class="form-label">Message</label>
                            <textarea class="form-control" rows="6" name="message" required>{{ old('message') }}</textarea>
                        </div>

                        <div class="col-12">
                            <button class="btn btn-kw" type="submit">Send Message</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection