@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 d-none d-md-block">
                                        <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">
                    @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 p-3 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">
                        {{$trigger->citation}}
                        <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">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
                                <path d="M7.64584 15.7108C7.23279 14.8966 7 13.9755 7 13C7 9.78484 9.5 7.5 13 7C17.0817 6.4169 18.8333 4.16667 20 3C23.5 16 17 19 13 19C11.9071 19 10.8825 18.7078 10 18.1973" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M3 21C3.5 18 5.45791 16.1355 10 15C13.2167 14.1958 15.4634 12.1791 17 10.0549" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
                            </svg>
                            <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="faqs">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="card bg-white border-0">
                    <div class="row">
                        <div class="col">
                            <h2 class="section-heading">Frequently Asked <span>Questions</span></h2>
                        </div>
                        <div class="col"></div>
                    </div>
                    @if(isset($faqs))
                    <div class="row">
                        <!-- Tabs -->
                        <div class="col-lg-6">
                            <div class="nav flex-column gap-3 nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                @foreach($faqs as $key=>$tab)
                                <button
                                    class="nav-link text-start d-flex justify-content-between align-items-center {{$key == 0 ? 'active' : ''}}"
                                    id="v-pills-{{$key}}-tab"
                                    data-bs-toggle="pill"
                                    data-bs-target="#v-pills-{{$key}}"
                                    type="button"
                                    role="tab"
                                    aria-controls="v-pills-{{$key}}"
                                    aria-selected="true">
                                    <span>{{$tab['question']}}</span>
                                    <div class="icon-wrap d-flex justify-content-center align-items-center">
                                        <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="M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9"></path>
                                        </svg>
                                    </div>
                                </button>
                                @endforeach
                            </div>
                        </div>
                        <!-- Tabs Content -->
                        <div class="col-lg-6">
                            <div class="tab-content h-100" id="v-pills-tabContent">
                                @foreach($faqs as $key=>$content)
                                <div
                                    class="tab-pane fade h-100 {{$key == 0 ? 'show active' : ''}}"
                                    id="v-pills-{{$key}}"
                                    role="tabpanel"
                                    aria-labelledby="v-pills-{{$key}}-tab"
                                    tabindex="0">
                                    <div class="card border h-100 p-5">
                                        <div class="d-flex flex-column justify-content-between h-100">
                                            <div>
                                                <h4>{{$content['question']}}</h4>
                                                <p class="text-muted">{{$content['answer']}}</p>
                                            </div>
                                            <a class="btn-cta fill" href="{{url('plans')}}">{{'Our Plans'}}</a>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
<div class="">
    <div class="container">
        <div class="row">

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