@extends('layouts.app', [
    'title' => 'Contact SEO Specialist Kenya | Collins Meroka',
    'description' => 'Contact SEO Specialist Kenya for search engineering, technical SEO, and consultation enquiries. Based in Westlands, Nairobi.',
    'keywords' => 'contact SEO Specialist Kenya, SEO consultant Nairobi, Collins Meroka contact',
    'canonical' => url('/contact-us'),
])

@section('content')
    @if(session('success'))
        <section class="sk-lead-hero sk-lead-hero--success">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8 text-center">
                        <p class="sk-lead-hero__eyebrow">Message sent</p>
                        <h1 class="sk-lead-hero__title">Thank you for reaching out</h1>
                        <p class="sk-lead-hero__lead">
                            We received your message and will respond within one business day. For urgent enquiries,
                            WhatsApp is fastest.
                        </p>
                        <a href="{{ url('/') }}" class="btn btn-primary btn-lg mt-3">Back to homepage</a>
                    </div>
                </div>
            </div>
        </section>
    @else
        <section class="sk-lead-hero">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-9 text-center">
                        <p class="sk-lead-hero__eyebrow">Get in touch</p>
                        <h1 class="sk-lead-hero__title">Contact {{ config('specialist.brand.name') }}</h1>
                        <p class="sk-lead-hero__lead">
                            Questions about search engineering, packages, or an existing engagement? Send a message and
                            Collins will review it personally.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="sk-lead-section">
            <div class="container">
                <div class="row justify-content-center g-4 g-lg-5">
                    <div class="col-lg-8">
                        <div class="sk-lead-card">
                            @if(session('error'))
                                <div class="alert alert-danger">{{ session('error') }}</div>
                            @endif

                            <form method="POST" action="{{ url('/contact-us') }}" class="sk-lead-form">
                                @csrf
                                <input type="text" name="website" value="" tabindex="-1" autocomplete="off" class="visually-hidden" aria-hidden="true">

                                <div class="mb-3">
                                    <label for="name" class="form-label">Name</label>
                                    <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $email ?? '') }}" required>
                                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="phone" class="form-label">Phone (optional)</label>
                                        <input type="text" name="phone" id="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone') }}">
                                        @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="company" class="form-label">Company (optional)</label>
                                        <input type="text" name="company" id="company" class="form-control @error('company') is-invalid @enderror" value="{{ old('company') }}">
                                        @error('company')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>

                                <div class="mb-3 mt-3">
                                    <label for="message" class="form-label">Message</label>
                                    <textarea name="message" id="message" rows="6" class="form-control @error('message') is-invalid @enderror" required>{{ old('message') }}</textarea>
                                    @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <button type="submit" class="btn btn-primary btn-lg px-4">Send message</button>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="sk-lead-card h-100">
                            <h2 class="h5 fw-bold mb-3">Direct contact</h2>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><strong>WhatsApp:</strong> <a href="https://wa.me/254704043466">+254 704 043 466</a></li>
                                <li class="mb-2"><strong>Email:</strong> <a href="mailto:merokacollins@gmail.com">merokacollins@gmail.com</a></li>
                                <li class="mb-0"><strong>Location:</strong> Westlands, Nairobi, Kenya</li>
                            </ul>
                            <p class="small text-muted mb-3">Prefer a structured call? Use our consultation booking flow instead.</p>
                            <a href="{{ \App\Support\Consultation::url('free_discovery', ['ref' => 'contact']) }}" class="btn btn-outline-primary w-100">Book free consultation</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection