@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-12">
                <div class="table-container">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Citation</th>
                                    <th>Industry</th>
                                    <th class="text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody class="small">
                                @foreach($latestTaxAudittriggers as $key => $trigger)
                                <tr>
                                    <td class="fw-bold">{{$trigger->citation}}</td>
                                    <td><span class="status success">{{$trigger->industry}}</span></td>
                                    <td>
                                        <a href="{{url('audit-trigger/'.$trigger->slug)}}" class="btn-cta text-nowrap">click to View Summary</a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <a href="{{url('audit-triggers')}}" class="d-block mx-auto btn-cta fill mt-3 mt-md-4">
                    {{'All Triggers'}}
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#024c53" fill="#024c53" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12.001 5.00003V19.002" />
                        <path d="M19.002 12.002L4.99998 12.002" />
                    </svg>
                </a>
            </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>

@if(isset($blogs))
<!-- Start Blogs  -->
<section class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h2 class="section-heading mb-1">{{'Blogs'}}</h2>
            </div>
        </div>
        <div class="row g-3 g-md-3">
            @foreach($blogs as $blog)
            <x-ui.blog-card
                :title="$blog->title"
                :featured_image="$blog->featured_image"
                :slug="$blog->slug" />
            @endforeach
        </div>
        @endif
    </div>
</section>
@endsection