@extends('layouts.app')

@section('content')
    {{-- About Us --}}
    <section class="about-us">
        <div class="container">

            <div class="row">
                <div class="col-lg-6">
                    <div class="about-left position-relative">
                        <div class="row">
                            <div class="col-12">
                                <div class="about-img d-flex justify-content-end align-items-center ps-lg-5">
                                    <img src="{{ asset('assets/images/about/loan-1.webp') }}" alt="Loan">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="about-img">
                                    <img src="{{ asset('assets/images/about/loan-2.jpg') }}" style="min-height: 200px;"
                                        alt="Loan">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="about-img">
                                    <img src="{{ asset('assets/images/about/loan-3.jpg') }}" style="min-height: 300px;"
                                        alt="Loan">
                                </div>
                            </div>
                        </div>
                        <img class="about-hero-shape d-none d-md-block"
                            src="{{ asset('assets/images/about/about-hero-shape.svg') }}" alt="About Hero Shape">
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="about-right mt-5 mt-lg-0 ps-lg-2">
                        <h2>Who We Are and What We Stand For</h2>
                        <h1>
                            Bringing You Instant Loans with Complete
                            <span class="auto-type"></span>
                        </h1>

                        <p>
                            {{ config('app.name', 'KreditBharat') }} is a digital lending platform designed to simplify
                            access
                            to credit while ensuring a smooth and secure borrowing experience. As a registered NBFC, we
                            focus on providing quick, transparent, and reliable financial solutions for individuals with
                            urgent cash requirements. Our goal is to eliminate the complexities of traditional lending and
                            replace them with a seamless, customer-first approach.
                        </p>

                        <p>
                            We are transforming the digital lending space by leveraging technology to approve and disburse
                            loans instantly, helping customers meet their financial needs without unnecessary delays or
                            complications.
                        </p>

                        <div class="about-features">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="about-features__wrapper">
                                        <div class="about-feature-item">
                                            <div class="icon"><i class="fa-regular fa-user"></i></div>
                                            <h5>Customer-Centric Lending</h5>
                                        </div>

                                        <div class="about-feature-item">
                                            <div class="icon"><i class="fa-regular fa-server"></i></div>
                                            <h5>Fast and Digital Process</h5>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mt-4 mt-md-0">
                                    <div class="about-features__wrapper">
                                        <div class="about-feature-item">
                                            <div class="icon"><i class="fa-regular fa-trophy"></i></div>
                                            <h5>Reliable and Trustworthy</h5>
                                        </div>

                                        <div class="about-feature-item">
                                            <div class="icon"><i class="fa-regular fa-shield-check"></i></div>
                                            <h5>Regulated and Secure</h5>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

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

        </div>
    </section>

    {{-- Our Team --}}
    <section class="our-team">
        <div class="container">

            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="our-team-left">
                        <h2>Our Team</h2>
                        <h1>The Foundation of {{ config('app.name', 'KreditBharat') }}’s Success</h1>

                        <div class="our-team-features">
                            <div class="our-team-filter">
                                <button class="teams-filter-btn active" data-team-filter-btn="0">
                                    <i class="fa-regular fa-chart-pie-simple"></i>
                                    <span>Expert Leadership</span>
                                </button>
                                <button class="teams-filter-btn" data-team-filter-btn="1">
                                    <i class="fa-regular fa-circle-dollar"></i>
                                    <span>Customer-Centric Approach</span>
                                </button>
                                <button class="teams-filter-btn" data-team-filter-btn="2">
                                    <i class="fa-regular fa-database"></i>
                                    <span>Continuous Innovation</span>
                                </button>
                            </div>

                            <div class="our-team-content mt-4">
                                <div class="team-content" data-team-content="0">
                                    <p>Our company is built by industry leaders with extensive experience in finance,
                                        technology, and customer service. With a shared vision of simplifying digital
                                        lending, our founders and leadership team drive innovation while ensuring ethical
                                        lending practices.</p>
                                </div>
                                <div class="team-content d-none" data-team-content="1">
                                    <p>At {{ config('app.name', 'KreditBharat') }}, our team works with one core
                                        principle—putting customers first. Every decision we make is focused on making
                                        borrowing easier, faster, and more transparent. Our dedicated support team ensures a
                                        smooth experience, guiding customers through every step of the process.</p>
                                </div>
                                <div class="team-content d-none" data-team-content="2">
                                    <p>We believe in constant learning and improvement. Our team regularly assesses,
                                        refines, and enhances our services to stay ahead in the digital lending space. By
                                        leveraging cutting-edge technology and real-time customer insights, we ensure that
                                        our loan solutions remain relevant and efficient.</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-lg-6 mt-4 mt-lg-0">
                    <div class="our-team-right">
                        <img src="{{ asset('assets/images/about/shaking-hands.webp') }}" alt="Our Team">
                    </div>
                </div>
            </div>

        </div>
    </section>
    {{-- Why Choose Us --}}
    @include('shared.why-choose')
    {{-- Testimonial --}}
    @include('shared.testimonial')
    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
        <script>
            // let typed = new Typed('.auto-type', {
            //     strings: ['Ease', 'Transparency', 'Confidence'],
            //     typeSpeed: 130,
            //     cursorChar: '_',
            //     backSpeed: 130,
            //     loop: true,
            // });
            document.addEventListener('DOMContentLoaded', function() {
                new Typed('.auto-type', {
                    strings: ['Ease', 'Transparency', 'Confidence'],
                    typeSpeed: 130,
                    backSpeed: 130,
                    cursorChar: '_',
                    loop: true
                });

                // simple team tab switcher
                document.querySelectorAll('.teams-filter-btn').forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        const id = this.getAttribute('data-team-filter-btn');
                        document.querySelectorAll('.teams-filter-btn').forEach(b => b.classList.remove(
                            'active'));
                        this.classList.add('active');

                        document.querySelectorAll('.team-content').forEach(c => c.classList.add(
                            'd-none'));
                        const active = document.querySelector('.team-content[data-team-content="' + id +
                            '"]');
                        if (active) active.classList.remove('d-none');
                    });
                });
            });
        </script>
    @endpush
@endsection