@extends('layouts.master')

@section('title', strip_tags($page->title) . ' | ' . setting('site.title', 'Farmers For Forests'))

@section('meta_description', $metaDescription ?? 'Our funders and partners at Farmers for Forests.')
@section('meta_keywords', $metaKeywords ?? 'Farmers for Forests, partners, funders, supporters')

@push('custom-css')
<style>
    /* ==========================================================================
       F4F Our Partners Page Redesign Stylesheet
       Scoped under .partners-redesign to maintain design system isolation.
       ========================================================================== */

    .partners-redesign {
        color: #2D3E33;
        font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        background-color: #F8FAF6;
    }

    /* Container matching Team, Footer, and Home Redesign */
    .partners-redesign .container {
        max-width: 1560px;
        width: 100%;
        padding-left: 36px;
        padding-right: 36px;
        box-sizing: border-box;
    }

    @media (min-width: 1600px) {
        .partners-redesign .container {
            max-width: 1680px;
        }
    }

    /* --------------------------------------------------------------------------
       Hero Banner
       -------------------------------------------------------------------------- */
    .partners-banner-heading {
        font-size: 64px;
        font-weight: bold;
        line-height: 1.1;
        display: inline-block;
        transition: font-size 0.2s ease;
    }

    .partners-banner-image {
        height: 400px;
        position: relative;
        overflow: hidden;
    }

    /* --------------------------------------------------------------------------
       Intro Narrative Header
       -------------------------------------------------------------------------- */
    .partners-intro-section {
        max-width: 780px;
        margin: 36px auto 32px;
        text-align: center;
    }

    .partners-intro-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #EEF5E6;
        color: #2F5E3A;
        font-size: 12px;
        font-weight: 700;
        padding: 5px 14px;
        border-radius: 20px;
        border: 1px solid #DCE8D2;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
    }

    .partners-intro-title {
        font-size: 32px;
        font-weight: 800;
        color: #09383A;
        line-height: 1.25;
        margin: 0 0 10px;
        letter-spacing: -0.5px;
    }

    .partners-intro-desc {
        font-size: 15px;
        line-height: 1.6;
        color: #5A6D5E;
        margin: 0;
    }

    /* --------------------------------------------------------------------------
       Filter & Search Toolbar
       -------------------------------------------------------------------------- */
    .partners-toolbar {
        background: #ffffff;
        border: 1px solid #DFE8D7;
        border-radius: 18px;
        padding: 14px 20px;
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        box-shadow: 0 2px 10px rgba(9, 56, 58, 0.03);
    }

    .partners-tabs-list {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
    }

    .partners-tab-btn {
        border: none;
        outline: none;
        background: #F4F8EE;
        color: #4A5B4E;
        font-size: 13.5px;
        font-weight: 600;
        padding: 9px 18px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .partners-tab-btn:hover {
        background: #E8F1DE;
        color: #09383A;
    }

    .partners-tab-btn.active {
        background: #09383A;
        color: #ffffff;
        box-shadow: 0 4px 14px rgba(9, 56, 58, 0.16);
    }

    .partners-tab-btn .tab-count {
        background: #DFE8D7;
        color: #2F5E3A;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 10px;
        transition: all 0.2s ease;
    }

    .partners-tab-btn.active .tab-count {
        background: rgba(255, 255, 255, 0.22);
        color: #ffffff;
    }

    .partners-search-box {
        position: relative;
        min-width: 280px;
        max-width: 340px;
        width: 100%;
        box-sizing: border-box;
    }

    .partners-search-input {
        width: 100%;
        height: 44px;
        border-radius: 12px;
        border: 1px solid #D5E1CC;
        background: #F8FAF6;
        padding: 8px 36px 8px 38px;
        font-size: 13.5px;
        color: #1F3325;
        outline: none;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }

    .partners-search-input:focus {
        background: #ffffff;
        border-color: #86A34D;
        box-shadow: 0 0 0 3px rgba(134, 163, 77, 0.15);
    }

    .partners-search-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #7D8E81;
        font-size: 13px;
        pointer-events: none;
    }

    .partners-search-clear {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: transparent;
        color: #7D8E81;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        display: none;
    }

    /* --------------------------------------------------------------------------
       Grid with Enlarged Cards (Option 2 - Minimalist Architectural Studio Grid)
       -------------------------------------------------------------------------- */
    .partners-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        width: 100%;
        margin-bottom: 48px;
    }

    .partner-card-wrapper {
        min-width: 0;
        width: 100%;
        display: flex;
    }

    .partner-card {
        background: #ffffff;
        border: 1px solid #DFE8D7;
        border-radius: 18px;
        padding: 22px 20px 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        text-decoration: none !important;
        color: inherit;
        box-shadow: 0 2px 10px rgba(9, 56, 58, 0.03);
        transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        min-height: 205px;
        width: 100%;
        box-sizing: border-box;
    }

    .partner-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(9, 56, 58, 0.08);
        border-color: #86A34D;
    }

    /* Card Top: Type pill + subtle corner arrow */
    .partner-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .partner-type-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 700;
        border-radius: 8px;
        padding: 4px 9px;
        line-height: 1;
        letter-spacing: 0.3px;
    }

    .partner-type-tag.funder {
        background: #EEF5E6;
        color: #2F5E3A;
        border: 1px solid #DCE8D2;
    }

    .partner-type-tag.partner {
        background: #E7F0F3;
        color: #0A586B;
        border: 1px solid #CCE2E8;
    }

    .partner-card-arrow {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #F4F8EE;
        color: #09383A;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        transition: all 0.2s ease;
        opacity: 0.65;
    }

    .partner-card:hover .partner-card-arrow {
        background: #09383A;
        color: #ffffff;
        opacity: 1;
        transform: scale(1.1);
    }

    /* Card Center: Generous Logo Container */
    .partner-logo-container {
        height: 92px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        margin: 8px 0 12px;
        box-sizing: border-box;
    }

    .partner-logo-image {
        max-height: 76px;
        max-width: 82%;
        object-fit: contain;
        display: inline-block;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        opacity: 0.82;
        transition: filter 0.35s ease, -webkit-filter 0.35s ease, opacity 0.35s ease, transform 0.3s ease;
    }

    .partner-card:hover .partner-logo-image,
    .partner-card:focus .partner-logo-image {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.05);
    }

    .partner-logo-fallback {
        font-size: 17px;
        font-weight: 800;
        color: #09383A;
        text-align: center;
        line-height: 1.25;
    }

    /* Card Footer: Partner Name & Visit hint */
    .partner-card-footer {
        padding-top: 12px;
        border-top: 1px solid #F0F4EC;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    .partner-card-name {
        font-size: 13.5px;
        font-weight: 700;
        color: #09383A;
        margin: 0;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        transition: color 0.2s ease;
    }

    .partner-card:hover .partner-card-name {
        color: #2F5E3A;
    }

    .partner-visit-hint {
        font-size: 11.5px;
        font-weight: 600;
        color: #86A34D;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        opacity: 0;
        transform: translateX(-4px);
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .partner-card:hover .partner-visit-hint {
        opacity: 1;
        transform: translateX(0);
    }

    /* --------------------------------------------------------------------------
       Empty State
       -------------------------------------------------------------------------- */
    .partners-empty-state {
        background: #ffffff;
        border: 2px dashed #D5E1CC;
        border-radius: 20px;
        padding: 56px 24px;
        text-align: center;
        color: #7D8E81;
        margin: 20px 0 40px;
        width: 100%;
    }

    .partners-empty-state i {
        font-size: 40px;
        color: #86A34D;
        margin-bottom: 14px;
        opacity: 0.85;
    }

    .partners-empty-state h5 {
        font-size: 17px;
        font-weight: 700;
        color: #09383A;
        margin-bottom: 6px;
    }

    .partners-empty-state p {
        font-size: 13.5px;
        margin: 0;
    }

    /* --------------------------------------------------------------------------
       Bottom CTA: Partner With Us
       -------------------------------------------------------------------------- */
    .partners-cta-banner {
        background: #F4F8EE;
        border: 1px solid #DDE7D3;
        border-radius: 24px;
        padding: 26px 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
        box-shadow: 0 4px 18px rgba(9, 56, 58, 0.04);
    }

    .partners-cta-left {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .partners-cta-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        background: #09383A;
        color: #D4E8B0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(9, 56, 58, 0.15);
    }

    .partners-cta-title {
        font-size: 20px;
        font-weight: 800;
        color: #09383A;
        margin: 0 0 4px;
    }

    .partners-cta-subtitle {
        font-size: 13.5px;
        color: #5A6D5E;
        margin: 0;
        max-width: 680px;
        line-height: 1.5;
    }

    .partners-cta-btn {
        background: #09383A;
        color: #ffffff !important;
        text-decoration: none !important;
        padding: 12px 24px;
        border-radius: 14px;
        font-size: 13.5px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 14px rgba(9, 56, 58, 0.16);
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .partners-cta-btn:hover {
        background: #2F5E3A;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(9, 56, 58, 0.22);
    }

    /* ==========================================================================
       MEDIA QUERIES FOR RESPONSIVENESS
       ========================================================================== */

    /* Tablets (max-width: 991.98px) */
    @media (max-width: 991.98px) {
        .partners-grid {
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
            gap: 16px;
        }

        .partners-banner-image {
            height: 320px;
        }

        .partners-banner-heading {
            font-size: 46px;
        }
    }

    /* Mobile Landscape & Phablets (max-width: 767.98px) */
    @media (max-width: 767.98px) {
        .partners-redesign .container {
            padding-left: 16px;
            padding-right: 16px;
        }

        .partners-banner-heading {
            font-size: 34px !important;
        }

        .partners-banner-image {
            height: 260px !important;
        }

        .partners-intro-title {
            font-size: 24px;
        }

        .partners-intro-desc {
            font-size: 13.5px;
        }

        .partners-toolbar {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            padding: 12px 14px;
        }

        .partners-search-box {
            max-width: 100%;
        }

        .partners-cta-banner {
            flex-direction: column;
            text-align: center;
            padding: 22px 18px;
            gap: 18px;
        }

        .partners-cta-left {
            flex-direction: column;
            gap: 12px;
        }

        .partners-cta-btn {
            width: 100%;
            justify-content: center;
        }
    }

    /* Standard Mobile (max-width: 575.98px) - 2 Equal Columns */
    @media (max-width: 575.98px) {
        .partners-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 12px !important;
            width: 100% !important;
        }

        .partner-card-wrapper {
            min-width: 0 !important;
        }

        .partner-card {
            border-radius: 14px;
            padding: 14px 12px 12px;
            min-height: 168px;
            min-width: 0 !important;
        }

        .partner-logo-container {
            height: 68px;
            margin: 6px 0 8px;
            padding: 4px;
        }

        .partner-logo-image {
            max-height: 54px;
            max-width: 86%;
        }

        .partner-card-name {
            font-size: 12px;
        }

        .partner-visit-hint {
            display: none;
        }

        .partner-type-tag {
            font-size: 9.5px;
            padding: 3px 6px;
        }

        .partner-card-arrow {
            width: 22px;
            height: 22px;
            font-size: 9.5px;
        }
    }

    /* Compact Mobile (max-width: 425px) */
    @media (max-width: 425px) {
        .partners-redesign .container {
            padding-left: 12px;
            padding-right: 12px;
        }

        .partners-grid {
            gap: 10px !important;
        }

        .partner-card {
            border-radius: 12px;
            padding: 12px 10px 10px;
            min-height: 154px;
        }

        .partner-logo-container {
            height: 58px;
        }

        .partner-logo-image {
            max-height: 46px;
            max-width: 88%;
        }

        .partner-card-name {
            font-size: 11px;
        }

        .partners-tab-btn {
            padding: 7px 12px;
            font-size: 12px;
        }
    }
</style>
@endpush

@section('content')
<div class="main-container partners-redesign">

    <!-- Hero Banner Container -->
    <section class="banner-container">
        <div class="banner-title">
            <div style="line-height: 1.1;">
                <span class="partners-banner-heading" style="font-weight: bold; margin-bottom: 8px;">{!! $page->heading ?: $page->title !!}</span>
            </div>
        </div>
        <div class="banner-image partners-banner-image">
            <img src="{{ cms_image($page->image) }}" decoding="async" loading="lazy" alt="{{ $page->title }}" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" rel="preload" as="image">
        </div>
    </section>

    <!-- Main Content Container -->
    <div class="container pb-4 mb-4">

        <!-- Intro Section -->
        <div class="partners-intro-section">
            <span class="partners-intro-badge">
                <i class="fa fa-handshake"></i> Our Network
            </span>
            <h2 class="partners-intro-title">Supported by Industry Leaders & Climate Visionaries</h2>
            <p class="partners-intro-desc">
                A trusted coalition of leading philanthropic trusts, enterprises, and research organizations driving biodiverse native reforestation across India.
            </p>
        </div>

        <!-- Filter & Search Toolbar -->
        <div class="partners-toolbar">
            <!-- Filter Tabs -->
            <div class="partners-tabs-list" role="tablist">
                <button type="button"
                    class="partners-tab-btn {{ $activeType === 'all' ? 'active' : '' }}"
                    data-type="all"
                    onclick="filterPartners('all', this)">
                    <span>All</span>
                    <span class="tab-count">{{ $partners->count() }}</span>
                </button>
                <button type="button"
                    class="partners-tab-btn {{ $activeType === 'Funder' ? 'active' : '' }}"
                    data-type="Funder"
                    onclick="filterPartners('Funder', this)">
                    <span>Funders</span>
                    <span class="tab-count">{{ $partners->where('partner_type', 'Funder')->count() }}</span>
                </button>
                <button type="button"
                    class="partners-tab-btn {{ $activeType === 'Partner' ? 'active' : '' }}"
                    data-type="Partner"
                    onclick="filterPartners('Partner', this)">
                    <span>Partners</span>
                    <span class="tab-count">{{ $partners->where('partner_type', 'Partner')->count() }}</span>
                </button>
            </div>

            <!-- Instant Search Input -->
            <div class="partners-search-box">
                <i class="fa fa-search partners-search-icon"></i>
                <input type="text"
                    id="partnerSearchInput"
                    class="partners-search-input"
                    placeholder="Search partners by name..."
                    autocomplete="off"
                    style="padding-left: 32px;">
                <button type="button" id="partnerSearchClear" class="partners-search-clear" title="Clear search">&times;</button>
            </div>
        </div>

        <!-- No Partners Found (Empty State) -->
        <div id="noPartnersMsg" class="partners-empty-state" style="display: none;">
            <i class="fa fa-handshake-slash"></i>
            <h5>No Partners Found</h5>
            <p>We couldn't find any partners matching your search. Try another keyword or clear the search filter.</p>
        </div>

        <!-- Partners Grid (Enlarged Option 2 Architecture) -->
        <div class="partners-grid" id="partnersGrid">
            @foreach($partners as $partner)
                @php
                    $isFunder = $partner->partner_type === 'Funder';
                    $hasLink = !empty($partner->web_link);
                    $partnerUrl = $hasLink ? $partner->web_link : '#';
                @endphp
                <div class="partner-card-wrapper"
                     data-type="{{ $partner->partner_type }}"
                     data-name="{{ strtolower($partner->partner_name) }}">
                    <a href="{{ $partnerUrl }}"
                       @if($hasLink) target="_blank" rel="noopener noreferrer" @endif
                       class="partner-card {{ $hasLink ? 'has-link' : '' }}"
                       title="{{ $partner->partner_name }}">
                        
                        <div class="partner-card-top">
                            <span class="partner-type-tag {{ strtolower($partner->partner_type) }}">
                                <i class="fa {{ $isFunder ? 'fa-award' : 'fa-handshake' }}"></i>
                                <span>{{ $partner->partner_type }}</span>
                            </span>

                            @if($hasLink)
                                <span class="partner-card-arrow" aria-label="Visit {{ $partner->partner_name }}">
                                    <i class="fa fa-arrow-up-right-from-square"></i>
                                </span>
                            @endif
                        </div>

                        <div class="partner-logo-container">
                            @if($partner->logo_url)
                                <img src="{{ $partner->logo_url }}"
                                     alt="{{ $partner->partner_name }} logo"
                                     class="partner-logo-image"
                                     loading="lazy"
                                     decoding="async"
                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                <span class="partner-logo-fallback" style="display: none;">{{ $partner->partner_name }}</span>
                            @else
                                <span class="partner-logo-fallback">{{ $partner->partner_name }}</span>
                            @endif
                        </div>

                        <div class="partner-card-footer">
                            <h4 class="partner-card-name" title="{{ $partner->partner_name }}">
                                {{ $partner->partner_name }}
                            </h4>
                            <!-- @if($hasLink)
                                <span class="partner-visit-hint">
                                    <span>Visit</span>
                                    <i class="fa fa-arrow-right"></i>
                                </span>
                            @endif -->
                        </div>

                    </a>
                </div>
            @endforeach
        </div>

        <!-- Bottom Call to Action: Partner With Us -->
        <div class="partners-cta-banner">
            <div class="partners-cta-left">
                <div class="partners-cta-icon">
                    <i class="fa fa-seedling"></i>
                </div>
                <div>
                    <h3 class="partners-cta-title">Partner With Farmers For Forests</h3>
                    <p class="partners-cta-subtitle">
                        Looking to deploy catalytic CSR capital, purchase high-integrity verified carbon removal credits, or collaborate on tech-driven afforestation?
                    </p>
                </div>
            </div>
            <a href="{{ route('support-us') }}" class="partners-cta-btn">
                <span>Explore Partnerships</span>
                <i class="fa fa-arrow-right"></i>
            </a>
        </div>

    </div>

</div>
@endsection

@push('custom-js-scripts')
<script>
    (function () {
        let currentType = '{{ $activeType }}';
        let currentQuery = '';

        const tabs = document.querySelectorAll('.partners-tab-btn');
        const cards = document.querySelectorAll('.partner-card-wrapper');
        const searchInput = document.getElementById('partnerSearchInput');
        const searchClear = document.getElementById('partnerSearchClear');
        const emptyState = document.getElementById('noPartnersMsg');

        window.filterPartners = function (type, btn) {
            currentType = type;
            tabs.forEach(t => t.classList.remove('active'));
            if (btn) btn.classList.add('active');

            // Update URL without page reload so tab remains shareable
            if (window.history && window.history.replaceState) {
                const url = new URL(window.location.href);
                if (type === 'all') {
                    url.searchParams.delete('type');
                } else {
                    url.searchParams.set('type', type);
                }
                window.history.replaceState({}, '', url.toString());
            }

            applyFilters();
        };

        function applyFilters() {
            let visibleCount = 0;

            cards.forEach(card => {
                const cardType = card.getAttribute('data-type');
                const cardName = card.getAttribute('data-name') || '';

                const matchesType = (currentType === 'all' || cardType === currentType);
                const matchesQuery = (!currentQuery || cardName.includes(currentQuery));

                if (matchesType && matchesQuery) {
                    card.style.display = '';
                    visibleCount++;
                } else {
                    card.style.display = 'none';
                }
            });

            if (emptyState) {
                emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
            }
        }

        if (searchInput) {
            searchInput.addEventListener('input', function () {
                currentQuery = this.value.toLowerCase().trim();
                if (searchClear) {
                    searchClear.style.display = currentQuery ? 'block' : 'none';
                }
                applyFilters();
            });
        }

        if (searchClear) {
            searchClear.addEventListener('click', function () {
                if (searchInput) {
                    searchInput.value = '';
                    currentQuery = '';
                    searchClear.style.display = 'none';
                    searchInput.focus();
                    applyFilters();
                }
            });
        }

        // Apply initial filter if seeded
        if (currentType !== 'all') {
            applyFilters();
        }
    })();
</script>
@endpush