@extends('layouts.front')

@section('content')
<!-- Home Banner Section -->
<div class="home-banner-section position-relative">
    <div class="hero-content d-flex align-items-end position-relative">
        <img data-aos="fade-in" data-aos-delay="450" class="position-absolute end-0 h-100 w-50 object-fit-contain bottom-0" src="{{asset('assets/images/sections/hero-img.webp')}}" alt="{{env('APP_NAME')}}">
        <div class="container">
            <div class="row text-white">
                <div class="col-lg-6">
                    <div class="position-relative the-content z-3 d-flex flex-column gap-2">
                        <h2 data-aos="fade-right">Find Clarity in Kenya's Complex Tax Landscape</h2>
                        <p data-aos="fade-right" data-aos-delay="150">Access 5,000+ case summaries, commentaries, and legal precedents instantly.</p>
                        <form data-aos="fade-right" data-aos-delay="150">
                            <div class="sc">
                                <div class="position-relative">
                                    <input type="text" class="form-control search-input border-0" placeholder="Search by section, case name, or keyword (e.g. 'VAT Refund')..">
                                    <button type="submit" class="border-0">
                                        <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" stroke-linejoin="round">
                                            <path d="M17 17L21 21"></path>
                                            <path d="M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z"></path>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Start Categories Section -->
<div class="document-categories section-padding pb-0">
    <div class="container">
        <div class="row g-2 g-md-3 align-items-center">
            <div class="col-lg-4">
                <h5 class="section-heading">Explore by Category</h5>
                <p class="text-muted small">Browse our comprehensive library of tax resources, organized by category for easy access to the information you need.</p>
            </div>
            <div class="col-lg-8">
                <div class="row g-3 dr">
                    @if(isset($categories))
                    @foreach($categories as $category)
                    <x-ui.resource-category-card
                        :name="$category->name"
                        :slug="$category->slug"
                        :desc="$category->desc" />
                    @endforeach
                    @else
                    <div class="alert alert-info">
                        {{'Categories yet to be populated'}}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tagline-marquee overflow-hidden">
    <h2 class="m-0">Kenya's first tax intelligence platform</h2>
</div>

<!-- Start Audit Triggers -->
<div class="audit-triggers section-padding bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h2 class="section-heading">
                    Audit triggers
                </h2>
                <p>Real-time alerts on what is currently triggering KRA audits in 2026.</p>
            </div>
        </div>
        @if($latestTaxAudittriggers)
        <div class="row">
            <div class="col-lg-6 mb-lg-0">
                <div class="nav flex-column nav-pills" id="whyChooseUsTab" role="tablist" aria-orientation="vertical">
                    @foreach($latestTaxAudittriggers as $key => $trigger)
                    <button class="nav-link rounded-0 text-start d-flex justify-content-between align-items-center {{$key+1 === 1 ? 'active' : ''}}" id="why-tab-{{$key+1}}" data-bs-toggle="pill" data-bs-target="#why-pane-{{$key+1}}" type="button" role="tab" aria-controls="why-pane-{{$key+1}}" aria-selected="true">
                        <span>{{$trigger->citation}}</span>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
                            <path d="M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </button>
                    @endforeach
                </div>
            </div>
            <div class="col-lg-6">
                <div class="tab-content" id="whyChooseUsTabContent">
                    @foreach($latestTaxAudittriggers as $key => $pane)
                    <div class="tab-pane fade {{$key+1 === 1 ? 'show active' : ''}}" id="why-pane-{{$key + 1}}" role="tabpanel" aria-labelledby="why-tab-{{$key + 1}}">
                        <div class="d-block mt-4">
                            <h3>{{ $pane->citation }}</h3>
                            <div class="awb p-3 mb-4 border-0">
                                <span class="text-uppercase small fw-bold d-block mb-2">AUDIT Trigger</span>
                                <p class="m-0">Variances between the Income tax and VAT returns for the period 2017 to 2021.</p>
                            </div>

                            @if(!empty($pane->industry))
                            <ul class="mb-4">
                                <li>
                                    <span class="text-uppercase small fw-bold d-block mb-2">{{'Industry'}}</span>
                                </li>
                                <li>
                                    <p>{{ $pane->industry }}</p>
                                </li>
                            </ul>
                            @endif
                            <a href="{{url('audit-trigger/'.$trigger->slug)}}" class="btn-cta text-nowrap fill">View Summary</a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
<div class="tax-clarity section-padding bg-light position-relative">
    <img class="position-absolute end-0 h-100 w-100 w-lg-75 object-fit-cover bottom-0" src="{{asset('assets/images/sections/lawyer.webp')}}" alt="{{env('APP_NAME')}}">
    <div class="container position-relative z-3">
        <div class="row">
            <div class="col-lg-6">
                <h2 class="section-heading">Unlock Clarity in Kenya's Complex Tax Landscape</h2>
                <div class="d-flex align-items-center stats gap-4">
                    <img src="{{asset('assets/images/firu-favicon-filled.png')}}" alt="">
                    <div>
                        <ul class="d-flex flex-wrap">
                            <li>
                                <h5>+35</h5>
                                <span class="text-muted">Combined expertise</span>
                            </li>
                            <li>
                                <h5>+35</h5>
                                <span class="text-muted">Combined expertise</span>
                            </li>
                            <li>
                                <h5>+35</h5>
                                <span class="text-muted">Combined expertise</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="pricing-table section-padding">
    <div class="container">
        <div class="row g-3">
            <div class="col-lg-3">
                <div class="card price-card h-100 position-relative wi overflow-hidden d-flex align-items-center justify-content-center">
                    <img class="position-absolute w-100 h-100 object-fit-cover start-0 top-0" src="{{asset('assets/images/banner-image.webp')}}" alt="{{env('APP_NAME')}}">
                    <div class="position-relative z-3 text-white p-4">
                        <h4>Our Subscription Plans</h4>
                        <p>Select a plan that best suits your needs and gain full access to all premium content.</p>
                    </div>
                </div>
            </div>
            @if(isset($plans))
            @foreach($plans as $plan)
            <x-ui.pricing-card
                :id="$plan->id"
                :uuid="$plan->uuid"
                :name="$plan->name"
                :description="$plan->description"
                :slug="$plan->slug"
                :price="$plan->price"
                :currentPlanId="$subscription?->plan_id"
                :features="$plan->features"
                :hasActiveSubscription="$subscription && $subscription->status === 'active'" />
            @endforeach
            @endif
        </div>
    </div>
</div>
<div class="section-padding onboarding-forms">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-lg-4">
                <div class="position-sticky sticky-lg-top">
                    <div class="h-100 d-flex gap-3 gap-lg-5 mb-4 mb-lg-0 flex-column">
                        <div>
                            <h2 class="section-heading">Join as an Expert or Get Tax Advisory</h2>
                            <p class="m-0">Whether you're seeking clarity on complex KRA audits and court precedents or looking to advise businesses as a verified practitioner, our platform bridges the gap.</p>
                        </div>
                        <div>
                            <ul class="nav nav-tabs d-flex gap-2 border-0" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active btn-cta" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Onboard as an Expert</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link btn-cta" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Talk to an Expert</button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                        <div class="card">
                            <div class="card-body p-4 p-sm-4">
                                <h5 class="">Onboard as an expert</h5>
                                <p class="text-muted mb-4">Please complete the following to become part of our expert network. This helps us match you with relevant opportunities.</p>

                                <form action="{{ route('form.submit') }}" method="post" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="action" value="onboard-expert">
                                    @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul class="mb-0">
                                            @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    @endif

                                    <!-- Contact Info (2-Column Grid) -->
                                    <div class="form-section-title text-uppercase text-secondary fw-bold mb-2">1. Contact Info</div>
                                    <div class="row g-2 mb-3">
                                        <div class="col-12">
                                            <label for="fullName" class="form-label form-label-sm fw-semibold">Full Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control form-control-sm" id="fullName" name="name" placeholder="Jane Doe" required="">
                                        </div>

                                        <div class="col-6">
                                            <label for="emailAddress" class="form-label form-label-sm fw-semibold">Email <span class="text-danger">*</span></label>
                                            <input type="email" class="form-control form-control-sm" id="emailAddress" name="email" placeholder="jane@example.com" required="">
                                        </div>

                                        <div class="col-6">
                                            <label for="phoneNumber" class="form-label form-label-sm fw-semibold">Phone <span class="text-danger">*</span></label>
                                            <input type="tel" class="form-control form-control-sm" id="phoneNumber" name="phoneNumber" placeholder="+1 (555) 000-0000" required="">
                                        </div>
                                    </div>

                                    <!-- Profile & Experience (2-Column Grid + Full Width Textarea) -->
                                    <div class="form-section-title text-uppercase text-secondary fw-bold mb-2">2. Profile &amp; Experience</div>
                                    <div class="row g-2 mb-3">
                                        <div class="col-6">
                                            <label for="company" class="form-label form-label-sm fw-semibold">Company <span class="text-muted fw-normal">(Opt)</span></label>
                                            <input type="text" class="form-control form-control-sm" id="company" name="company" placeholder="Acme Inc.">
                                        </div>

                                        <div class="col-6">
                                            <label for="experience" class="form-label form-label-sm fw-semibold">Experience <span class="text-danger">*</span></label>
                                            <select class="form-select form-select-sm" id="experience" name="experience" required="">
                                                <option value="" selected="" disabled="">Select...</option>
                                                <option value="entry">0–2 yrs</option>
                                                <option value="mid">3–5 yrs</option>
                                                <option value="senior">6–10 yrs</option>
                                                <option value="expert">10+ yrs</option>
                                            </select>
                                        </div>

                                        <!-- Full Width Field -->
                                        <div class="col-6">
                                            <label for="specialty" class="form-label form-label-sm fw-semibold">Specialty / Focus <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control form-control-sm" id="specialty" name="specialty" placeholder="e.g. Full-Stack, UI/UX Design" required="">
                                        </div>

                                        <!-- Full Width Textarea -->
                                        <div class="col-6">
                                            <label for="statement" class="form-label form-label-sm fw-semibold">Self-Introduction / Interest <span class="text-danger">*</span></label>
                                            <textarea class="form-control form-control-sm" id="statement" name="statement" rows="3" placeholder="Brief statement..." required=""></textarea>
                                        </div>
                                    </div>

                                    <!-- Attachments (Full Width) -->
                                    <div class="form-section-title text-uppercase text-secondary fw-bold mb-2">3. Attachments</div>
                                    <div class="row g-2 mb-3">
                                        <div class="col-12">
                                            <label for="attachment" class="form-label form-label-sm fw-semibold">Upload CV / Work Samples <span class="text-muted fw-normal">(Optional)</span></label>
                                            <input class="form-control form-control-sm" type="file" id="attachment" name="attachment" accept=".pdf,.doc,.docx,.zip">
                                            <div class="form-text mt-1" style="font-size: 0.75rem;">Accepted: PDF, DOCX, ZIP (Max 10MB)</div>
                                        </div>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="d-flex justify-content-end gap-2">
                                        <button type="submit" class="btn btn-cta fill">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                        <div class="card">
                            <div class="card-body p-4 p-sm-4">

                                <h5 class="">Advisory Consultation Request</h5>
                                <p class="text-muted small mb-3">Provide details regarding your inquiry below.</p>

                                <form action="{{ route('form.submit') }}" method="post" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="action" value="talk-to-expert">
                                    @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul class="mb-0">
                                            @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    @endif
                                    <!-- Contact Details (Full Name + 2-Column Grid) -->
                                    <div class="form-section-title text-uppercase text-secondary fw-bold mb-2">1. Client Details</div>
                                    <div class="row g-2 mb-3">
                                        <div class="col-12">
                                            <label for="fullName" class="form-label form-label-sm fw-semibold">Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control form-control-sm" id="fullName" name="name" placeholder="Jane Doe" required="">
                                        </div>

                                        <div class="col-6">
                                            <label for="emailAddress" class="form-label form-label-sm fw-semibold">Email Address <span class="text-danger">*</span></label>
                                            <input type="email" class="form-control form-control-sm" id="emailAddress" name="email" placeholder="jane@example.com" required="">
                                        </div>

                                        <div class="col-6">
                                            <label for="phoneNumber" class="form-label form-label-sm fw-semibold">Phone / Alt. Contact <span class="text-danger">*</span></label>
                                            <input type="tel" class="form-control form-control-sm" id="phoneNumber" name="phoneNumber" placeholder="+1 (555) 000-0000" required="">
                                        </div>
                                    </div>

                                    <!-- Inquiry & Domain Details (2-Column Grid + Full Width Elements) -->
                                    <div class="form-section-title text-uppercase text-secondary fw-bold mb-2">2. Consultation Details</div>
                                    <div class="row g-2 mb-3">
                                        <div class="col-6">
                                            <label for="responseMode" class="form-label form-label-sm fw-semibold">Response Mode <span class="text-danger">*</span></label>
                                            <select class="form-select form-select-sm" id="responseMode" name="responseMode" required="">
                                                <option value="" selected="" disabled="">Select mode...</option>
                                                <option value="email">Email</option>
                                                <option value="phone">Phone Call</option>
                                                <option value="video">Video Call</option>
                                            </select>
                                        </div>

                                        <div class="col-6">
                                            <label for="urgency" class="form-label form-label-sm fw-semibold">Urgency / Timeline <span class="text-danger">*</span></label>
                                            <select class="form-select form-select-sm" id="urgency" name="urgency" required="">
                                                <option value="" selected="" disabled="">Select timeline...</option>
                                                <option value="immediate">Immediate (&lt; 24h)</option>
                                                <option value="urgent">Urgent (1–3 days)</option>
                                                <option value="standard">Standard (1 week)</option>
                                                <option value="flexible">Flexible / Planning</option>
                                            </select>
                                        </div>

                                        <!-- Full Width Field -->
                                        <div class="col-6">
                                            <label for="domain" class="form-label form-label-sm fw-semibold">Area of Concern / Domain <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control form-control-sm" id="domain" name="domain" placeholder="e.g. Corporate Tax, VAT, Transfer Pricing, Regulatory Compliance" required="">
                                        </div>

                                        <!-- Full Width Textarea -->
                                        <div class="col-6">
                                            <label for="description" class="form-label form-label-sm fw-semibold">Issue / Challenge Description <span class="text-danger">*</span></label>
                                            <textarea class="form-control form-control-sm" id="description" name="description" rows="3" placeholder="Provide a brief summary of the technical or regulatory challenge..." required=""></textarea>
                                        </div>
                                    </div>

                                    <!-- Supporting Documents (Full Width) -->
                                    <div class="form-section-title text-uppercase text-secondary fw-bold mb-2">3. Supporting Documents</div>
                                    <div class="row g-2 mb-3">
                                        <div class="col-12">
                                            <label for="attachment" class="form-label form-label-sm fw-semibold">Attachments or Documents <span class="text-muted fw-normal">(Optional)</span></label>
                                            <input class="form-control form-control-sm" type="file" id="attachment" name="attachment" accept=".pdf,.doc,.docx,.xls,.xlsx,.zip">
                                            <div class="form-text mt-1" style="font-size: 0.75rem;">Accepted: PDF, DOCX, XLSX, ZIP (Max 10MB)</div>
                                        </div>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="d-flex justify-content-end gap-2">
                                        <button type="reset" class="btn btn-sm btn-light border">Reset</button>
                                        <button type="submit" class="btn btn-sm btn-primary px-3">Submit Request</button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection