@extends('layouts.frontend')

@section('title', 'Our Services - Federation of Tax Practitioners of Tamilnadu')

@section('content')
<style>
    /* Unified Card Alignment & Heights */
    .svc-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: #12353b;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        overflow: hidden;
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease;
    }
    .svc-card:hover {
        transform: translateY(-6px);
        border-color: rgba(212, 170, 44, 0.6);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    }
    .svc-card-img {
        height: 210px !important;
        width: 100%;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
    }
    .svc-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .svc-card-body {
        padding: 24px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .svc-card-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .svc-icon {
        margin-bottom: 0 !important;
        width: 46px;
        height: 46px;
        border-radius: 12px;
        background: rgba(212, 170, 44, 0.15);
        color: #d4aa2c;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: all 0.3s ease;
    }
    .svc-card:hover .svc-icon {
        background: #d4aa2c;
        color: #12353b;
    }
    .svc-tag {
        margin-bottom: 0 !important;
        font-size: 12.5px;
        font-weight: 600;
        color: #d4aa2c;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(212, 170, 44, 0.35);
        padding: 6px 14px;
        border-radius: 50px;
        letter-spacing: 0.3px;
        transition: all 0.3s ease;
    }
    .svc-card:hover .svc-tag {
        background: #d4aa2c;
        color: #12353b;
        border-color: #d4aa2c;
    }
    .svc-card-body h3 {
        font-size: 19px;
        font-weight: 700;
        color: #ffffff;
        margin-top: 0;
        margin-bottom: 12px;
        line-height: 1.35;
        display: flex;
        align-items: flex-start;
    }
    .svc-card:hover .svc-card-body h3 {
        color: #eec74b;
    }
    .svc-card-body p {
        color: #bcd4d9;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 0px !important;
        flex-grow: 1;
    }
    .svc-card-body .svc-link {
        margin-top: auto;
        color: #d4aa2c;
        font-weight: 600;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        transition: gap 0.25s ease, color 0.25s ease;
    }
    .svc-card-body .svc-link:hover {
        color: #fde047;
        gap: 10px;
    }
</style>

<!-- Page Header Start -->
<section class="page-header">
    <div class="container">
        <div class="page-header-inner">
            <span class="page-label">
                <i class="fa-solid fa-briefcase"></i> Professional Practice
            </span>
            <h1>Our Services</h1>
            <ul class="breadcrumb">
                <li><a href="{{ route('home') }}">Home</a></li>
                <li><span>/</span></li>
                <li>Services</li>
            </ul>
        </div>
    </div>
</section>
<!-- Page Header End -->

<!-- Service Section Start -->
<section class="services-section py-5">
    <div class="container">
        <div class="row section-head mb-4">
            <div class="col-12 text-center">
                <div class="section-label">
                    <i class="fa-solid fa-scale-balanced"></i> What We Do
                </div>
                <h2>Professional Tax & Financial Services</h2>
                <p class="mx-auto" style="max-width: 760px;">
                    Federation of Tax Practitioners of Tamilnadu (FTPTN) unites certified tax practitioners, GST practitioners, advocates, and accountants providing trusted compliance, advisory, and appellate representation.
                </p>
            </div>
        </div>

        <div class="row g-4 justify-content-center">
            
            <!-- 01. Book Keeping -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="svc-card">
                    <div class="svc-card-img">
                        <img src="{{ asset('assets/img/book-keeping.webp') }}" alt="Book Keeping">
                        <div class="svc-card-img-overlay"></div>
                        <!-- <div class="svc-card-number">01</div> -->
                    </div>
                    <div class="svc-card-body">
                        <div class="svc-card-meta">
                            <div class="svc-icon">
                                <i class="fa-solid fa-book-bookmark"></i>
                            </div>
                            <div class="svc-tag">Accounting</div>
                        </div>
                        <h3>Book Keeping</h3>
                        <p>Accurate maintenance of financial records, day-to-day accounts, journal entries & ledger accounts with complete compliance standards.</p>
                        <a href="{{ route('membership.create') }}" class="svc-link">
                            Consult a Practitioner <i class="fa-solid fa-arrow-right-long"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 02. GST and Income Tax Return Filling -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="svc-card">
                    <div class="svc-card-img">
                        <img src="{{ asset('assets/img/gst-tax-filing.webp') }}" alt="GST and Income Tax Return Filling">
                        <div class="svc-card-img-overlay"></div>
                        <!-- <div class="svc-card-number">02</div> -->
                    </div>
                    <div class="svc-card-body">
                        <div class="svc-card-meta">
                            <div class="svc-icon">
                                <i class="fa-solid fa-file-invoice-dollar"></i>
                            </div>
                            <div class="svc-tag">Tax Compliance</div>
                        </div>
                        <h3>GST & Income Tax Return Filing</h3>
                        <p>Monthly, quarterly & annual GST filings, comprehensive ITR preparation, TDS computation & timely statutory submission.</p>
                        <a href="{{ route('membership.create') }}" class="svc-link">
                            Consult a Practitioner <i class="fa-solid fa-arrow-right-long"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 03. Bank Loans - Prepare Documents -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="svc-card">
                    <div class="svc-card-img">
                        <img src="{{ asset('assets/img/bank-document.webp') }}" alt="Bank Loans - Prepare Documents">
                        <div class="svc-card-img-overlay"></div>
                        <!-- <div class="svc-card-number">03</div> -->
                    </div>
                    <div class="svc-card-body">
                        <div class="svc-card-meta">
                            <div class="svc-icon">
                                <i class="fa-solid fa-landmark"></i>
                            </div>
                            <div class="svc-tag">Banking & Credit</div>
                        </div>
                        <h3>Bank Loans - Prepare Documents</h3>
                        <p>Assistance in loan documentation, CMA data, project reports, net worth statements & proposal preparation for commercial and MSME funding.</p>
                        <a href="{{ route('membership.create') }}" class="svc-link">
                            Consult a Practitioner <i class="fa-solid fa-arrow-right-long"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 04. Authorised Representative to appear Upto Tribunal -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="svc-card">
                    <div class="svc-card-img">
                        <img src="{{ asset('assets/img/appear.webp') }}" alt="Tribunal Representation">
                        <div class="svc-card-img-overlay"></div>
                        <!-- <div class="svc-card-number">04</div> -->
                    </div>
                    <div class="svc-card-body">
                        <div class="svc-card-meta">
                            <div class="svc-icon">
                                <i class="fa-solid fa-scale-balanced"></i>
                            </div>
                            <div class="svc-tag">Legal & Tribunal</div>
                        </div>
                        <h3>Appear Upto Tribunal</h3>
                        <p>Acting on behalf of clients as an authorised representative to appear before assessing authorities, Appellate Commissioners, and Tax Tribunals.</p>
                        <a href="{{ route('membership.create') }}" class="svc-link">
                            Consult a Practitioner <i class="fa-solid fa-arrow-right-long"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 05. GST and Income Tax Notice Reply -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="svc-card">
                    <div class="svc-card-img">
                        <img src="{{ asset('assets/img/tax-reply.webp') }}" alt="Notice Reply">
                        <div class="svc-card-img-overlay"></div>
                        <!-- <div class="svc-card-number">05</div> -->
                    </div>
                    <div class="svc-card-body">
                        <div class="svc-card-meta">
                            <div class="svc-icon">
                                <i class="fa-solid fa-envelope-open-text"></i>
                            </div>
                            <div class="svc-tag">Notice & Scrutiny</div>
                        </div>
                        <h3>GST & Income Tax Notice Reply</h3>
                        <p>Drafting precise legal responses, factual reconciliations & submissions for GST scrutiny, audit intimations, section 148 notices & IT assessments.</p>
                        <a href="{{ route('membership.create') }}" class="svc-link">
                            Consult a Practitioner <i class="fa-solid fa-arrow-right-long"></i>
                        </a>
                    </div>
                </div>
            </div>

        </div>

        <!-- Membership Banner Call to Action -->
        <div class="mt-5 p-4 p-md-5 rounded-4 text-center shadow" style="background: linear-gradient(135deg, #12353b 0%, #0c2428 100%); border: 1.5px solid rgba(212, 170, 44, 0.35);">
            <div class="row align-items-center">
                <div class="col-lg-8 text-lg-start text-center mb-3 mb-lg-0">
                    <span class="badge bg-warning text-dark fw-bold px-3 py-2 rounded-pill mb-2">
                        <i class="fa-solid fa-users me-1"></i> Are you a Tax Practitioner in Tamil Nadu?
                    </span>
                    <h3 class="text-white fw-bold mb-2">Join Federation of Tax Practitioners of Tamilnadu</h3>
                    <p class="text-white-50 mb-0">Empower your practice with state-wide representation, welfare benefits, and professional community support.</p>
                </div>
                <div class="col-lg-4 text-lg-end text-center">
                    <a href="{{ route('membership.create') }}" class="btn btn-warning fw-bold px-4 py-3 rounded-pill shadow">
                        <i class="fa-solid fa-id-card me-1"></i> Apply For Membership
                    </a>
                </div>
            </div>
        </div>

    </div>
</section>
<!-- Service Section End -->
@endsection