@extends('website.layout.app')
@section('title', 'About Us – Invinaa Associates')
@section('meta_description',
    'We offer a wide range of tax consultant services like Tax Compliance, Goods & Service Tax,
    International Taxation, Company and LLP Compliances in Delhi, India.')
@section('content')
 <!-- Header Start -->
  <div class="container-fluid bg-breadcrumb">
    <div class="container text-center py-5" style="max-width: 900px">
      <h3 class="text-white display-3 mb-4 wow fadeInDown" data-wow-delay="0.1s">
        About Us
      </h3>

      <ol class="breadcrumb justify-content-center text-white mb-0 wow fadeInDown" data-wow-delay="0.3s">
        <li class="breadcrumb-item">
          <a href="index.html" class="text-white">Home</a>
        </li>

        <li class="breadcrumb-item active text-secondary">About</li>
      </ol>
    </div>
  </div>
  <!-- Header End -->

  <!-- About Start -->
    <div class="container-fluid py-5" style="overflow-x: hidden">
        <div class="container pt-5">
            <div class="row g-5">

                <!-- Left Images -->
                <div class="col-xl-5 wow fadeInLeft" data-wow-delay="0.1s">
                    <div class="bg-light rounded">
                        <!-- Top Image -->
                        <img src="{{ asset($about->image ?? 'notImage.jpg') }}" class="img-fluid w-100"
                            style="margin-bottom: -240px" alt="About Image" />

                        <!-- Bottom Image -->
                        <img src="{{ asset($about->image ?? 'notImage.jpg') }}"
                            class="img-fluid w-100 border-bottom border-5 border-primary"
                            style="border-top-right-radius: 300px; border-top-left-radius: 300px;" alt="About Image" />
                    </div>
                </div>

                <!-- Right Content -->
                <div class="col-xl-7 wow fadeInRight" data-wow-delay="0.3s">
                    <h5 class="sub-title pe-3">About the Company</h5>

                    <h3 class="display-6 mb-4">
                        {{ $about->title ?? '' }}
                    </h3>

                    <p class="mb-4">
                        {{ $about->sub_title ?? '' }}
                    </p>

                    @php
                        $features = [];
                        if (!empty($about->description)) {
                            $decoded = json_decode($about->description, true);
                            if (is_array($decoded)) {
                                $features = $decoded;
                            }
                        }
                    @endphp

                    <div class="row gy-4 align-items-center">

                        <!-- Feature Icons (first 2 items) -->
                        @foreach (array_slice($features, 0, 2) as $item)
                            <div class="col-12 col-sm-6 d-flex align-items-center">
                                <i class="bi bi-check-circle-fill fa-3x text-secondary"></i>
                                <h5 class="ms-4">{{ $item }}</h5>
                            </div>
                        @endforeach

                        <!-- Experience Box -->
                        <div class="col-4 col-md-3">
                            <div class="bg-light text-center rounded p-3">
                                <div class="mb-2">
                                    <i class="bi bi-bar-chart-line fa-4x text-primary"></i>
                                </div>
                                <h1 class="display-5 fw-bold mb-2">
                                    {{ $setting->no_of_year ?? 10 }}
                                </h1>
                                <p class="text-muted mb-0">Years Experience</p>
                            </div>
                        </div>

                        <!-- Remaining Features -->
                        <div class="col-8 col-md-9">
                            <div class="mb-5">
                                @foreach (array_slice($features, 2) as $item)
                                    <p class="text-primary h6 mb-3">
                                        <i class="bi bi-check-circle-fill text-secondary me-2"></i>
                                        {{ $item }}
                                    </p>
                                @endforeach
                            </div>

                            <!-- Phone Section -->
                            <div class="d-flex flex-wrap">
                                <div id="phone-tada" class="d-flex align-items-center justify-content-center me-4">
                                    <a href="tel:+91{{ $setting->phone ?? '' }}" class="position-relative wow tada"
                                        data-wow-delay=".9s">
                                        <i class="bi bi-telephone-outbound text-primary fa-3x"></i>
                                        <div class="position-absolute" style="top: 0; left: 25px">
                                            <i class="bi bi-chat-dots-fill text-secondary"></i>
                                        </div>
                                    </a>
                                </div>

                                <div class="d-flex flex-column justify-content-center">
                                    <span class="text-primary">Have any questions?</span>
                                    <span class="text-secondary fw-bold fs-5" style="letter-spacing: 2px">
                                        Call: +91 {{ $setting->phone ?? '' }}
                                    </span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- About End -->

  <section class="wc-why-section py-5">
        <div class="container">

            @php
                // Safe defaults
                $wcTitle = $whyChooseUs->title ?? '';
                $wcDesc = $whyChooseUs->short_description ?? '';
                $features = [];

                if (!empty($whyChooseUs->description)) {
                    $decoded = json_decode($whyChooseUs->description, true);
                    if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
                        $features = array_slice($decoded, 0, 4);
                    }
                }

                $icons = [
                    'fas fa-user-tie',
                    'fas fa-shield-alt',
                    'fas fa-headset',
                    'fas fa-check-circle',
                ];
            @endphp
            <div class="row align-items-center mb-5">

                <div class="col-lg-6">
                    <h5 class="sub-title pe-3">WHY CHOOSE US</h5>

                    <h3 class="display-6 mb-4 wc-title">
                        {{ $wcTitle ?: 'Experience is the key to excellence.' }}
                    </h3>
                </div>

                <div class="col-lg-6">
                    <p class="wc-desc">
                        {{ $wcDesc ?: 'We focus on expertise, transparency, and long-term partnerships to help your business grow with confidence.' }}
                    </p>
                </div>

            </div>

            <div class="row wc-card-row">

                @if (!empty($features))
                    @foreach ($features as $key => $item)
                        <div class="col-md-6 col-lg-3">
                            <div class="wc-card-box text-center">

                                <div class="wc-card-icon">
                                    <i class="{{ $icons[$key] ?? 'fas fa-star' }}"></i>
                                </div>

                                <h5 class="wc-card-title">
                                    {{ $item['heading'] ?? 'Quality Service' }}
                                </h5>

                                <p class="wc-card-text">
                                    {{ $item['details'] ?? 'Details coming soon.' }}
                                </p>

                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="col-12 text-center text-muted">
                        <p>No features available at the moment.</p>
                    </div>
                @endif

            </div>

        </div>
    </section>


    <!-- Blog Start -->
    <div class="container-fluid contact overflow-hidden pt-5">
        <div class="container pb-5">
            <div class="office">

                <div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="sub-style">
                        <h5 class="sub-title text-primary px-3">Latest Blogs</h5>
                    </div>
                    <h3 class="display-6 mb-4">Insights on Tax & Finance</h3>
                    <p class="mb-0">
                        Stay informed with expert articles on taxation, compliance,
                        financial planning, GST updates, and advisory guidance from our
                        certified tax professionals.
                    </p>
                </div>

                <div class="row g-4 justify-content-center">

                    @foreach ($blogs as $key => $blog)
                        <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.{{ ($key + 1) * 2 }}s">

                            <div class="office-item p-4">
                                <div class="office-img mb-4">
                                    <img src="{{ asset($blog->image ?? 'notImage.jpg') }}" class="img-fluid w-100 rounded"
                                        alt="{{ $blog->title ?? '' }}" />
                                </div>

                                <div class="office-content d-flex flex-column">
                                    <h4 class="mb-2">
                                        {{ $blog->title ?? '' }}
                                    </h4>

                                    <p class="mb-0">
                                        {{ $blog->short_description ?? '' }}
                                    </p>

                                    <a href="{{ route('blog-detail', $blog->slug_name) }}" class="text-secondary fs-6 mt-2">
                                        Read Article
                                    </a>
                                </div>
                            </div>

                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
    <!-- Blog End -->
   @include('website.faqs')
@endsection