@extends('layouts.front')

@section('content')
<section class="section-padding">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-lg-5">
                <div class="h-100 d-flex flex-column justify-content-between">
                    <div>
                        <h2 class="section-heading">{{'Let’s simplify your tax research.'}}</h2>
                        <p class="text-muted">Have a question about a specific court precedent, or need a walkthrough of how Firu can streamline your firm's tax intelligence? Our team is ready to help you turn complexity into a competitive advantage.</p>
                    </div>
                    <div class="row">
                        <div class="col-lg-6  mb-3 mb-md-0">
                            <div class="contact-card h-100">
                                <div class="contact-body d-flex flex-column justify-content-between gap-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
                                        <path d="M2 6L8.91302 9.91697C11.4616 11.361 12.5384 11.361 15.087 9.91697L22 6"></path>
                                        <path d="M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z"></path>
                                    </svg>
                                    <div>
                                        <h6>
                                            Email </h6>
                                        <a href="mailto:info@firuafrica.com">info[a]firuafrica.com</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="contact-card h-100">
                                <div class="contact-body d-flex flex-column justify-content-between gap-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                                        <path d="M7 18C5.17107 18.4117 4 19.0443 4 19.7537C4 20.9943 7.58172 22 12 22C16.4183 22 20 20.9943 20 19.7537C20 19.0443 18.8289 18.4117 17 18"></path>
                                        <path d="M14.5 9C14.5 10.3807 13.3807 11.5 12 11.5C10.6193 11.5 9.5 10.3807 9.5 9C9.5 7.61929 10.6193 6.5 12 6.5C13.3807 6.5 14.5 7.61929 14.5 9Z"></path>
                                        <path d="M13.2574 17.4936C12.9201 17.8184 12.4693 18 12.0002 18C11.531 18 11.0802 17.8184 10.7429 17.4936C7.6543 14.5008 3.51519 11.1575 5.53371 6.30373C6.6251 3.67932 9.24494 2 12.0002 2C14.7554 2 17.3752 3.67933 18.4666 6.30373C20.4826 11.1514 16.3536 14.5111 13.2574 17.4936Z"></path>
                                    </svg>
                                    <div>
                                        <h6>Phone</h6>
                                        <a href="tel:"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7">
                <form class="contact-form" action="{{ route('contact.submit') }}" method="post" enctype="multipart/form-data">
                    @csrf

                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label required">Name</label>
                            <input type="text" class="form-control" name="name" value="{{ old('name') }}" required="" />
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label required">Email address</label><br />
                            <input type="email" class="form-control" name="email" value="{{ old('email') }}" required="" />
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">Phone / Alternate Contact</label>
                            <input type="tel" class="form-control" name="phone" value="{{ old('phone') }}" />
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label required">Preferred response mode</label>
                            <div class="d-flex gap-3">
                                <div class="form-check d-flex align-items-center gap-2">
                                    <input class="form-check-input" type="radio" name="responseMode" value="email" {{ old('responseMode', 'email') === 'email' ? 'checked' : '' }} /><br />
                                    <label class="form-check-label small">Email</label>
                                </div>
                                <div class="form-check d-flex align-items-center gap-2">
                                    <input class="form-check-input" type="radio" name="responseMode" value="phone" {{ old('responseMode') === 'phone' ? 'checked' : '' }} /><br />
                                    <label class="form-check-label small">Phone</label>
                                </div>
                                <div class="form-check d-flex align-items-center gap-2">
                                    <input class="form-check-input" type="radio" name="responseMode" value="video" {{ old('responseMode') === 'video' ? 'checked' : '' }} /><br />
                                    <label class="form-check-label small">Video call</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label required">Area of concern / Domain</label>
                            <select class="form-select" name="domain" required="">
                                <option value="" selected="" disabled="">Choose...</option>
                                <option value="Corporate Tax" {{ old('domain') === 'Corporate Tax' ? 'selected' : '' }}>Corporate Tax</option>
                                <option value="VAT" {{ old('domain') === 'VAT' ? 'selected' : '' }}>VAT</option>
                                <option value="Transfer Pricing" {{ old('domain') === 'Transfer Pricing' ? 'selected' : '' }}>Transfer Pricing</option>
                                <option value="Regulatory Compliance" {{ old('domain') === 'Regulatory Compliance' ? 'selected' : '' }}>Regulatory Compliance</option>
                                <option value="Employment & Payroll" {{ old('domain') === 'Employment & Payroll' ? 'selected' : '' }}>Employment & Payroll</option>
                                <option value="Other" {{ old('domain') === 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label required">Brief description of the issue / challenge</label><br />
                            <textarea class="form-control" name="description" rows="4" required="">{{ old('description') }}</textarea>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label required">Urgency / Timeline</label>
                            <select class="form-select" name="urgency" required="">
                                <option value="" selected="" disabled="">Choose urgency</option>
                                <option value="Low (Flexible)" {{ old('urgency') === 'Low (Flexible)' ? 'selected' : '' }}>Low (Flexible)</option>
                                <option value="Medium (Within 2 weeks)" {{ old('urgency') === 'Medium (Within 2 weeks)' ? 'selected' : '' }}>Medium (Within 2 weeks)</option>
                                <option value="High (Within 72 hours)" {{ old('urgency') === 'High (Within 72 hours)' ? 'selected' : '' }}>High (Within 72 hours)</option>
                                <option value="Immediate (Same day)" {{ old('urgency') === 'Immediate (Same day)' ? 'selected' : '' }}>Immediate (Same day)</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Supporting documents (optional)</label>
                            <input class="form-control" type="file" name="attachments[]" multiple="" accept=".pdf,.doc,.docx,.xlsx,.png,.jpg,.jpeg" />
                        </div>
                        <div class="col-12 text-end">
                            <div class="d-flex align-items-center gap-4 justify-content-end">
                                <p class="small text-muted m-0">By submitting, you agree to Firu Africa's <a href="#">Privacy Policy</a></p>
                                <button type="submit" class="btn-cta text-white fill">
                                    Send Message
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection