@extends('layouts.master')


@section('content')

@push('custom-css')
    <style>
        .indexheading {
            display: none;
        }

        /* Awards Section */
        .awards-section {
            padding: 3rem 0;
            background: #E05555;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .awards-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M30 30c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.1;
        }

        .awards-section h6 {
            margin-bottom: 1rem;
            color: #542540;
            font-weight: bold;
            font-size: 14px;
        }

        .awards-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            /* Equal width columns */
            gap: 1.5rem;
            position: relative;
            z-index: 1;
        }

        .banner-video {
            background: #89ac45;
            height: calc(100vh - 90px);
            /* 100px less than viewport */
            overflow: hidden;
        }

        @media (max-width: 1024px) {
            .banner-video {

                height: 100%;
                /* 100px less than viewport */
                overflow: hidden;
            }

            .awards-grid {
                padding: 0 2.5rem;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 576px) {
            .banner-video {

                height: 100%;
                /* 100px less than viewport */
                overflow: hidden;
            }

            .awards-grid {
                grid-template-columns: 1fr;
            }
        }

        .award-card {
            background: #FFEFCC;
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 10px;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #333;
        }

        .award-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .award-logo {
            margin-bottom: 1.5rem;
        }

        .logo-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            display: block;
        }

        .logo-text {
            font-weight: 700;
            font-size: 0.9rem;
            color: #4caf50;
            letter-spacing: 1px;
        }

        .award-content h4 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: #542540;
            font-weight: 600;
        }

        .award-content p {
            color: #666;
            font-size: 0.9rem;
        }

        /* Animation for loading */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .news-item,
        .award-card {
            animation: fadeInUp 0.6s ease forwards;
        }

        .award-card:nth-child(2) {
            animation-delay: 0.1s;
        }

        .award-card:nth-child(3) {
            animation-delay: 0.2s;
        }

        .award-card:nth-child(4) {
            animation-delay: 0.3s;
        }

        .award-card:nth-child(5) {
            animation-delay: 0.4s;
        }

        .award-card {

            /* adjust based on design */
            flex-shrink: 0;
        }

        .main-article {
            height: 400px;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .main-content h3 {
            font-size: 1.2rem;
            margin: 0.5rem 0;
            color: var(--primary-dark);
        }

        .meta {
            font-size: 0.8rem;
            color: var(--text-gray);
        }

        .badge {
            display: inline-block;
            background: var(--badge-bg);
            color: var(--primary-dark);
            padding: 4px 10px;
            font-size: 0.75rem;
            border-radius: 999px;
            margin-left: 0.5rem;
        }

        .main-article-section .desc {
            font-size: 0.9rem;
            color: var(--text-gray);
        }

        .side-articles {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .side-article {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }

        .thumb {
            width: 156px;
            height: 112px;
            background: #ccc;
            border-radius: 4px;
            flex-shrink: 0;
        }

        /* Remove border and background focus outline */
        .dropdown-toggle {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            background-color: #90a955 !important;
            text-align: left;
            /* Optional: keep your green background */
        }

        /* Remove border from dropdown menu */
        .dropdown-menu {
            border: none !important;
            box-shadow: none !important;
            background-color: #90a955 !important;
            /* Optional: match background */
        }

        .dropdown-item:hover {
            background-color: #90a955 !important;
            color: #fff !important;
        }

        /* Align text left, arrow right */
        .btn.dropdown-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        /* Optional: space for the arrow */
        .btn.dropdown-toggle::after {
            margin-left: auto;
        }

        .progarm-icons {
            gap: 5px;
        }

        .progarm-icons img {
            width: 30px;
            height: 30px;
        }

        .carousel-control-next,
        .carousel-control-prev {
            width: 10%;
        }

        .map-loader {
            display: block;
            position: relative;
            height: 12px;
            width: 25%;
            border: 1px solid #fff;
            border-radius: 10px;
            overflow: hidden;
        }

        .map-loader::after {
            content: '';
            width: 40%;
            height: 100%;
            background: #86A34D;
            position: absolute;
            top: 0;
            left: 0;
            box-sizing: border-box;
            animation: animloader 2s linear infinite;
        }

        @keyframes animloader {
            0% {
                left: 0;
                transform: translateX(-100%);
            }

            100% {
                left: 100%;
                transform: translateX(0%);
            }
        }

        .learn-more {
            color: #09383a;
            text-decoration: none;
            background-color: #86a34d;
            padding: 10px 15px;
            border-radius: 25px;
            margin-top: 20px;
            text-decoration: none;
        }

        #home_second_section {
            background-image: url('{{ asset('storage/website/home_second_section.png') }}');
            min-height: 200px;
            background-position: center;
        }

        .open-img {
            display: block;
        }

        .close-img {
            display: none;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
@endpush

    <div class="main-container" id="render-page">

        @php
            $heroBgType = $home['hero_bg_type'] ?? 'video';
            $heroBgColor = $home['hero_bg_color'] ?? '#09383a';
            $heroBgImage = !empty($home['hero_bg_image']) ? asset($home['hero_bg_image']) : asset($home['hero_video_poster'] ?? 'storage/website/poster.jpg');
        @endphp
        <!-- Hero Section -->
        <section class="banner-container" style="{{ $heroBgType === 'color' ? 'background-color:' . $heroBgColor . ';' : '' }}">
            <div class="banner-title tw-xs:w-100p">
                <div class="m-auto text-center" style="line-height: 1.2;">
                    <div class="tw-xs:fs-34 tw-md:fs-70">{{ $home['hero_line_1'] ?? 'Flourishing Forests' }}</div>
                    <div class="tw-xs:fs-34 tw-md:fs-70">{{ $home['hero_line_2'] ?? 'Thriving Farms' }}</div>
                    <p class="tw-xs:fs-34 tw-md:fs-70">{{ $home['hero_line_3'] ?? 'Prospering People' }}</p>
                    <div class="help_btn m-auto fs-16 txt-center" style="width: 150px;border-radius: 25px;padding: 10px 15px;background-color: #86a34d;">
                        <a href="{{ $home['hero_cta_url'] ?? route('support-us') }}">{{ $home['hero_cta_label'] ?? 'Support Us' }}</a>
                    </div>
                </div>
            </div>
            @if($heroBgType === 'video')
                <div class="tw-xs:h-auto banner-video">
                    <video id="video"
                        playsinline
                        muted
                        loop
                        autoplay
                        preload="metadata"
                        poster="{{ asset($home['hero_video_poster'] ?? 'storage/website/poster.jpg') }}"
                        style="width:100%;aspect-ratio:16/9;object-fit:fill;background:#000">
                    </video>
                </div>
            @elseif($heroBgType === 'image')
                <div class="tw-xs:h-auto banner-video" style="width:100%;aspect-ratio:16/9;background-image:url('{{ $heroBgImage }}');background-size:cover;background-position:center;background-repeat:no-repeat;">
                </div>
            @else
                <div class="tw-xs:h-auto banner-video" style="width:100%;aspect-ratio:16/9;background-color:{{ $heroBgColor }};">
                </div>
            @endif
        </section>
        <!-- End Hero Section -->

        <div class="body-container">

    <div class="home-redesign">

            @php
                $aboutBgType = $home['about_bg_type'] ?? (!empty($home['about_bg_image']) ? 'image' : 'color');
                $aboutBgStyle = '';
                if ($aboutBgType === 'image' && !empty($home['about_bg_image'])) {
                    $aboutBgStyle = "background-image: url('" . asset($home['about_bg_image']) . "'); background-size: cover; background-position: center;";
                } else {
                    $aboutBgStyle = 'background-color: ' . ($home['about_bg_color'] ?? '#ffffff') . ';';
                }
            @endphp
            <!-- About -->
            <section class="hr-section hr-about" id="home_second_section" style="position: relative; {{ $aboutBgStyle }}">
                <div class="container">
                    <div class="hr-about-wrap">
                        <div class="hr-about-intro">
                            {{ $home['about_intro'] ?? 'Farmers for Forests (F4F) protects and restores biodiverse farms and forests by harnessing deep community engagement, scientific best practices and AI. We fight climate change and poverty at scale in India.' }}
                        </div>
                        @if(!empty($home['about_highlight']))
                            <p class="hr-about-highlight">
                                {{ $home['about_highlight'] }}
                            </p>
                        @endif
                    </div>
                </div>
            </section>
            <!-- End About -->

        <!-- Our Work on the Ground (Expanding Accordion) -->
        @if(isset($programs) && count($programs))
            @php
                $progBgType = $home['programs_bg_type'] ?? (!empty($home['programs_bg_image']) ? 'image' : 'color');
                $progBgStyle = '';
                if ($progBgType === 'image' && !empty($home['programs_bg_image'])) {
                    $progBgStyle = "background-image: url('" . asset($home['programs_bg_image']) . "'); background-size: cover; background-position: center;";
                } else {
                    $progBgStyle = 'background-color: ' . ($home['programs_bg_color'] ?? '#143823') . ';';
                }
            @endphp
            <section class="hr-section hr-programs hr-dark" style="{{ $progBgStyle }}">
                <div class="container">
                    <div class="hr-head hr-head-light">
                        <span class="hr-eyebrow">{{ $home['programs_eyebrow'] ?? 'Our Work on the Ground' }}</span>
                        <h2>{{ $home['programs_title'] ?? 'Five programs. One integrated vision.' }}</h2>
                        <p>{{ $home['programs_intro'] ?? 'Our work spans five interconnected programs — with agroforestry at the centre, supported by forest protection, human-wildlife coexistence, urban biodiversity, and ecology education. Each program is designed to create lasting ecological and livelihood impact, working hand-in-hand with local communities.' }}</p>
                    </div>

                    <div class="hr-accordion" role="tablist" aria-label="Our Programs">
                        @foreach($programs as $i => $p)
                            @php
                                $isActive = $i === 0;
                                $desc = $p->card_description ?: ($p->excerpt ?: \Illuminate\Support\Str::limit(strip_tags((string) $p->description), 200));
                            @endphp
                            <div class="hr-accordion-panel {{ $isActive ? 'active' : '' }}"
                                 role="tabpanel"
                                 tabindex="0"
                                 aria-expanded="{{ $isActive ? 'true' : 'false' }}"
                                 data-index="{{ $i }}">
                                
                                <!-- Background Image with Fallback -->
                                <div class="hr-accordion-bg">
                                    <img src="{{ $p->image_url }}" alt="{{ $p->title }}" loading="lazy" onerror="this.src='{{ asset('assets/images/post-1.jpg') }}'">
                                    <div class="hr-accordion-overlay"></div>
                                </div>

                                <!-- Collapsed Strip Header -->
                                <div class="hr-accordion-collapsed" aria-hidden="{{ $isActive ? 'true' : 'false' }}">
                                    <div class="hr-accordion-col-title">
                                        <span class="hr-accordion-col-name">{{ $p->title }}</span>
                                    </div>
                                    <span class="hr-accordion-toggle-icon" aria-hidden="true"><i class="fa-solid fa-chevron-down"></i></span>
                                </div>

                                <!-- Expanded Full Content -->
                                <div class="hr-accordion-expanded" aria-hidden="{{ $isActive ? 'false' : 'true' }}">
                                    <div class="hr-accordion-exp-body">
                                        <h3>{{ $p->title }}</h3>
                                        <p>{{ $desc }}</p>
                                        <div class="hr-accordion-exp-action">
                                            <a href="{{ route('programs.show', $p->slug) }}" class="hr-btn hr-btn-light">
                                                <span>{{ $home['our_work_learn_more_label'] ?? 'Learn More' }}</span>
                                                <i class="fa-solid fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        <!-- 1. Our Impact ("Numbers that matter") -->
        @php
            $impactBgType = $home['impact_bg_type'] ?? (!empty($home['impact_bg_image']) ? 'image' : 'color');
            $impactBgStyle = '';
            if ($impactBgType === 'image' && !empty($home['impact_bg_image'])) {
                $impactBgStyle = "background-image: url('" . asset($home['impact_bg_image']) . "'); background-size: cover; background-position: center;";
            } else {
                $impactBgStyle = 'background-color: ' . ($home['impact_bg_color'] ?? '#ffffff') . ';';
            }
        @endphp
        <section class="hr-section hr-impact" style="{{ $impactBgStyle }}">
            <div class="container">
                <div class="hr-head">
                    <span class="hr-eyebrow">{{ $home['impact_eyebrow'] ?? 'Our Impact' }}</span>
                    <h2>{{ $home['impact_title'] ?? 'Numbers that matter' }}</h2>
                    <p>{{ $home['impact_sub'] ?? 'Real outcomes for people, forests, and climate.' }}</p>
                </div>
                <div class="hr-stats">
                    @foreach(($impacts ?? []) as $impact)
                        @php
                            $isImg = $impact->is_image ?? false;
                            $iconSrc = $impact->icon_url ?? null;
                            $faClass = $impact->fa_class ?? 'fa-solid fa-leaf';

                            if (!$iconSrc && !empty($impact->icon)) {
                                $rawIcon = (string) $impact->icon;
                                $lc = strtolower($rawIcon);
                                if (str_ends_with($lc, '.png') || str_ends_with($lc, '.svg') || str_ends_with($lc, '.jpg') || str_ends_with($lc, '.webp')) {
                                    $isImg = true;
                                    $iconSrc = preg_match('#^(https?://|assets/|storage/)#', $rawIcon) ? asset($rawIcon) : asset('storage/' . $rawIcon);
                                }
                            }
                        @endphp
                        <div class="hr-stat">
                            <div class="hr-icon">
                                @if($isImg && $iconSrc)
                                    <img src="{{ $iconSrc }}" alt="{{ $impact->label }}" loading="lazy">
                                @else
                                    <i class="{{ $faClass }}"></i>
                                @endif
                            </div>
                            <div class="hr-stat-value" data-counter data-target="{{ $impact->value }}">{{ $impact->value }}</div>
                            <div class="hr-stat-bar" aria-hidden="true"><div class="hr-stat-bar-fill"></div></div>
                            <div class="hr-stat-label">{{ $impact->label }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <!-- 2. How We Work ("Our Approach") -->
        @php
            $approachBgType = $home['approach_bg_type'] ?? (!empty($home['approach_bg_image']) ? 'image' : 'color');
            $approachBgStyle = '';
            if ($approachBgType === 'image' && !empty($home['approach_bg_image'])) {
                $approachBgStyle = "background-image: url('" . asset($home['approach_bg_image']) . "'); background-size: cover; background-position: center;";
            } else {
                $approachBgStyle = 'background-color: ' . ($home['approach_bg_color'] ?? '#fbfaf6') . ';';
            }
            $displayedHowWeWork = ($howWeWorkItems ?? collect())->take(3);
            $howWeWorkCount = $displayedHowWeWork->count();
        @endphp

        <section class="hr-section hr-approach hr-bg-soft" style="{{ $approachBgStyle }}">
            <div class="container">
                <div class="hr-head">
                    <span class="hr-eyebrow">{{ $home['approach_eyebrow'] ?? 'How We Work' }}</span>
                    <h2>{{ $home['approach_title'] ?? 'Our Approach' }}</h2>
                    <p>{{ $home['approach_intro'] ?? 'The evidence is unambiguous: nature-based solutions succeed when they are rooted in farmer agency, deliver tangible economic returns, and are backed by rigorous monitoring. Our approach is built on three interlocking principles drawn from the latest global research and our own experience on the ground in India.' }}</p>
                </div>

                @if($howWeWorkCount > 0)
                    <div class="hr-approach-grid hr-approach-grid-{{ $howWeWorkCount }}{{ $howWeWorkCount === 3 ? ' hr-grid-3' : '' }}">
                        @foreach($displayedHowWeWork as $item)
                            <div class="hr-principle-card">
                                <div class="hr-principle-aside">
                                    <div class="hr-icon">
                                        @if($item->is_image_icon)
                                            <img src="{{ $item->icon_url }}" alt="{{ $item->title }}" style="width: 32px; height: 32px; object-fit: contain;">
                                        @else
                                            <i class="{{ $item->fa_class }}"></i>
                                        @endif
                                    </div>
                                </div>
                                <div class="hr-principle-content">
                                    <h3>{{ $item->title }}</h3>
                                    <p>{{ $item->description }}</p>
                                    @if(!empty($item->citations) && is_array($item->citations))
                                        <ul class="hr-card-cites">
                                            @foreach($item->citations as $cite)
                                                @if(!empty($cite['label']))
                                                    <li>
                                                        <a href="{{ $cite['url'] ?? '#' }}" @if(($cite['url'] ?? '') !== '#' && ($cite['url'] ?? '') !== '') target="_blank" rel="noopener" @endif>
                                                            <i class="fa-solid fa-arrow-up-right-from-square"></i> {{ $cite['label'] }}
                                                        </a>
                                                    </li>
                                                @endif
                                            @endforeach
                                        </ul>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="col-12 text-center text-muted" style="padding: 40px 0;">Principles will appear here once added in admin.</div>
                @endif


                <div class="hr-center">
                    <a href="{{ $home['approach_cta_url'] ?? url('/our-technology') }}" class="hr-btn hr-btn-outline">{{ $home['approach_cta_label'] ?? 'Learn More About Our Approach' }}</a>
                </div>
            </div>
        </section>

        <!-- Quote -->
        <!-- <section class="hr-quote">
            <div class="container">
                <i class="fa-solid fa-quote-left hr-quote-mark"></i>
                <blockquote>{{ $home['quote_text'] ?? "When a farmer plants a tree, they're making a 20-year bet on the future. We're here to make sure that bet pays off." }}</blockquote>
                <cite>{{ $home['quote_cite'] ?? '— Krutika Ravishankar, Co-Founder' }}</cite>
            </div>
        </section> -->

        <!-- 3. Organisations Supporting Our Work (Partners Marquee) -->
        @php
            $partnersBgType = $home['partners_bg_type'] ?? (!empty($home['partners_bg_image']) ? 'image' : 'color');
            $partnersBgStyle = '';
            if ($partnersBgType === 'image' && !empty($home['partners_bg_image'])) {
                $partnersBgStyle = "background-image: url('" . asset($home['partners_bg_image']) . "'); background-size: cover; background-position: center;";
            } else {
                $partnersBgStyle = 'background-color: ' . ($home['partners_bg_color'] ?? '#ffffff') . ';';
            }
        @endphp
        <section class="hr-section hr-partners" style="{{ $partnersBgStyle }}">
            <div class="container">
                <div class="hr-head">
                    <span class="hr-eyebrow">{{ $home['partners_eyebrow'] ?? 'Organisations Supporting Our Work' }}</span>
                    <h2>{{ $home['partners_title'] ?? 'Backed by partners who share our vision' }}</h2>
                </div>
            </div>

            @if(!empty($partners) && count($partners))
                <div class="hr-partners-marquee">
                    <div class="hr-partners-track">
                        <div class="hr-partners-group">
                            @foreach($partners as $partner)
                                <div class="hr-partner-logo">
                                    @if($partner->logo_url)
                                        <img src="{{ $partner->logo_url }}" alt="{{ $partner->partner_name }}"
                                             onerror="this.onerror=null;this.replaceWith(Object.assign(document.createElement('span'),{className:'hr-partner-name',textContent:@json($partner->partner_name)}));">
                                    @else
                                        <span class="hr-partner-name">{{ $partner->partner_name }}</span>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <div class="hr-partners-group" aria-hidden="true">
                            @foreach($partners as $partner)
                                <div class="hr-partner-logo">
                                    @if($partner->logo_url)
                                        <img src="{{ $partner->logo_url }}" alt=""
                                             onerror="this.onerror=null;this.replaceWith(Object.assign(document.createElement('span'),{className:'hr-partner-name',textContent:@json($partner->partner_name)}));">
                                    @else
                                        <span class="hr-partner-name">{{ $partner->partner_name }}</span>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            <div class="container">
                <div class="hr-center">
                    <a href="{{ $home['partners_cta_url'] ?? url('/our-partners') }}" class="hr-btn hr-btn-primary">{{ $home['partners_cta_label'] ?? 'Meet Our Partners' }}</a>
                </div>
            </div>
        </section>

        <!-- 4. Open-Source Technology -->
        @php
            $techBgType = $home['tech_bg_type'] ?? (!empty($home['tech_bg_image']) ? 'image' : 'color');
            $techBgStyle = '';
            if ($techBgType === 'image' && !empty($home['tech_bg_image'])) {
                $techBgStyle = "background-image: url('" . asset($home['tech_bg_image']) . "'); background-size: cover; background-position: center;";
            } else {
                $techBgStyle = 'background-color: ' . ($home['tech_bg_color'] ?? '#0c3540') . ';';
            }
        @endphp
        <section class="hr-techsol" style="{{ $techBgStyle }}">
            <div class="container">
                <div class="hr-techsol-inner">
                    <div class="hr-techsol-copy">
                        <span class="hr-techsol-eyebrow">{{ $home['tech_eyebrow'] ?? 'Open-Source Technology' }}</span>
                        <h2 class="hr-techsol-title">{{ $home['tech_title_line1'] ?? 'Built to verify.' }}<br><span>{{ $home['tech_title_line2'] ?? 'Built to scale.' }}</span></h2>
                        <p>{{ $home['tech_body'] ?? 'Manual tree counts were slow, and satellite data lacked the resolution we needed — so we built our own. Project Anāhitā is our open-source tech stack for farmer engagement (ChutkiAI), field operations (FieldHQ), drone and satellite data collection, and AI-powered tree and carbon monitoring (TreeLens) — turning field data into transparent, verifiable impact, freely available to the conservation community.' }}</p>
                        <div class="hr-techsol-actions">
                            <a href="{{ $home['tech_cta_primary_url'] ?? 'https://farmersforforests.com/tree-lens/' }}" target="_blank" rel="noopener" class="hr-techsol-btn hr-techsol-btn-primary">{{ $home['tech_cta_primary_label'] ?? 'Explore TreeLens' }} <i class="fa-solid fa-arrow-right"></i></a>
                            <a href="{{ $home['tech_cta_secondary_url'] ?? 'https://github.com/Farmers-For-Forests' }}" target="_blank" rel="noopener" class="hr-techsol-btn hr-techsol-btn-outline"><i class="fa-brands fa-github"></i> {{ $home['tech_cta_secondary_label'] ?? 'Open Source' }}</a>
                        </div>
                    </div>

                    <div class="hr-techsol-visual" aria-hidden="true">
                    <span class="hr-techsol-ring hr-techsol-ring-1"></span>
                    <span class="hr-techsol-ring hr-techsol-ring-2"></span>

                    <span class="hr-techsol-corner tl"><svg viewBox="0 0 32 32" fill="none"><path d="M0 16 L0 0 L16 0" stroke="#86A34D" stroke-width="2.5"/></svg></span>
                    <span class="hr-techsol-corner tr"><svg viewBox="0 0 32 32" fill="none"><path d="M32 16 L32 0 L16 0" stroke="#86A34D" stroke-width="2.5"/></svg></span>
                    <span class="hr-techsol-corner bl"><svg viewBox="0 0 32 32" fill="none"><path d="M0 16 L0 32 L16 32" stroke="#86A34D" stroke-width="2.5"/></svg></span>
                    <span class="hr-techsol-corner br"><svg viewBox="0 0 32 32" fill="none"><path d="M32 16 L32 32 L16 32" stroke="#86A34D" stroke-width="2.5"/></svg></span>

                    <svg class="hr-techsol-drone" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="82" y="82" width="36" height="36" rx="6" fill="#1a5c70" stroke="#e8831a" stroke-width="2"/>
                        <rect x="90" y="90" width="20" height="20" rx="3" fill="#0a3d4a" stroke="#e8831a" stroke-width="1.5"/>
                        <circle cx="100" cy="100" r="7" fill="#0d2a35" stroke="#e8831a" stroke-width="1.5"/>
                        <circle cx="100" cy="100" r="3.5" fill="#e8831a" opacity="0.8"/>
                        <line x1="82" y1="88" x2="52" y2="58" stroke="#e8831a" stroke-width="2.5"/>
                        <line x1="118" y1="88" x2="148" y2="58" stroke="#e8831a" stroke-width="2.5"/>
                        <line x1="82" y1="112" x2="52" y2="142" stroke="#e8831a" stroke-width="2.5"/>
                        <line x1="118" y1="112" x2="148" y2="142" stroke="#e8831a" stroke-width="2.5"/>
                        <g class="drone-propeller drone-propeller-1">
                            <circle cx="52" cy="58" r="14" fill="#1a5c70" stroke="#e8831a" stroke-width="1.5"/>
                            <ellipse cx="52" cy="48" rx="4" ry="9" fill="#e8831a" opacity="0.9"/>
                            <ellipse cx="52" cy="68" rx="4" ry="9" fill="#e8831a" opacity="0.9"/>
                            <ellipse cx="42" cy="58" rx="9" ry="4" fill="#e8831a" opacity="0.7"/>
                            <ellipse cx="62" cy="58" rx="9" ry="4" fill="#e8831a" opacity="0.7"/>
                            <circle cx="52" cy="58" r="4" fill="#0a3d4a" stroke="#e8831a" stroke-width="1"/>
                        </g>
                        <g class="drone-propeller drone-propeller-2">
                            <circle cx="148" cy="58" r="14" fill="#1a5c70" stroke="#e8831a" stroke-width="1.5"/>
                            <ellipse cx="148" cy="48" rx="4" ry="9" fill="#e8831a" opacity="0.9" transform="rotate(45 148 58)"/>
                            <ellipse cx="148" cy="68" rx="4" ry="9" fill="#e8831a" opacity="0.9" transform="rotate(45 148 58)"/>
                            <ellipse cx="138" cy="58" rx="9" ry="4" fill="#e8831a" opacity="0.7" transform="rotate(45 148 58)"/>
                            <ellipse cx="158" cy="58" rx="9" ry="4" fill="#e8831a" opacity="0.7" transform="rotate(45 148 58)"/>
                            <circle cx="148" cy="58" r="4" fill="#0a3d4a" stroke="#e8831a" stroke-width="1"/>
                        </g>
                        <g class="drone-propeller drone-propeller-3">
                            <circle cx="52" cy="142" r="14" fill="#1a5c70" stroke="#e8831a" stroke-width="1.5"/>
                            <ellipse cx="52" cy="132" rx="4" ry="9" fill="#e8831a" opacity="0.9" transform="rotate(90 52 142)"/>
                            <ellipse cx="52" cy="152" rx="4" ry="9" fill="#e8831a" opacity="0.9" transform="rotate(90 52 142)"/>
                            <ellipse cx="42" cy="142" rx="9" ry="4" fill="#e8831a" opacity="0.7" transform="rotate(90 52 142)"/>
                            <ellipse cx="62" cy="142" rx="9" ry="4" fill="#e8831a" opacity="0.7" transform="rotate(90 52 142)"/>
                            <circle cx="52" cy="142" r="4" fill="#0a3d4a" stroke="#e8831a" stroke-width="1"/>
                        </g>
                        <g class="drone-propeller drone-propeller-4">
                            <circle cx="148" cy="142" r="14" fill="#1a5c70" stroke="#e8831a" stroke-width="1.5"/>
                            <ellipse cx="148" cy="132" rx="4" ry="9" fill="#e8831a" opacity="0.9" transform="rotate(135 148 142)"/>
                            <ellipse cx="148" cy="152" rx="4" ry="9" fill="#e8831a" opacity="0.9" transform="rotate(135 148 142)"/>
                            <ellipse cx="138" cy="142" rx="9" ry="4" fill="#e8831a" opacity="0.7" transform="rotate(135 148 142)"/>
                            <ellipse cx="158" cy="142" rx="9" ry="4" fill="#e8831a" opacity="0.7" transform="rotate(135 148 142)"/>
                            <circle cx="148" cy="142" r="4" fill="#0a3d4a" stroke="#e8831a" stroke-width="1"/>
                        </g>
                        <line x1="88" y1="118" x2="84" y2="132" stroke="#e8831a" stroke-width="1.5"/>
                        <line x1="112" y1="118" x2="116" y2="132" stroke="#e8831a" stroke-width="1.5"/>
                        <line x1="80" y1="132" x2="120" y2="132" stroke="#e8831a" stroke-width="2"/>
                        <circle cx="100" cy="100" r="50" stroke="rgba(232,131,26,.2)" stroke-width="1" stroke-dasharray="4 4"/>
                        <circle cx="100" cy="100" r="70" stroke="rgba(232,131,26,.1)" stroke-width="1" stroke-dasharray="3 6"/>
                    </svg>

                    <span class="hr-techsol-tag hr-techsol-tag-top">{{ $home['tech_tag_1'] ?? 'TreeLens' }}</span>
                    <span class="hr-techsol-tag hr-techsol-tag-right">{{ $home['tech_tag_2'] ?? 'Impact Dashboard' }}</span>
                    <span class="hr-techsol-tag hr-techsol-tag-bottom">{{ $home['tech_tag_3'] ?? 'FieldHQ' }}</span>
                    <span class="hr-techsol-tag hr-techsol-tag-left">{{ $home['tech_tag_4'] ?? 'Chutki AI' }}</span>
                </div>
                </div>
            </div>
        </section>

        <!-- 5. Our Work in Action (Projects) -->
        @php
            $projectsBgType = $home['projects_bg_type'] ?? (!empty($home['projects_bg_image']) ? 'image' : 'color');
            $projectsBgStyle = '';
            if ($projectsBgType === 'image' && !empty($home['projects_bg_image'])) {
                $projectsBgStyle = "background-image: url('" . asset($home['projects_bg_image']) . "'); background-size: cover; background-position: center;";
            } elseif (!empty($home['projects_bg_color'])) {
                $projectsBgStyle = 'background-color: ' . $home['projects_bg_color'] . ';';
            }
        @endphp
        <section class="hr-projects2" style="{{ $projectsBgStyle }}">
            <div class="container">
                <div class="hr-projects2-head">
                    <span class="hr-projects2-eyebrow">{{ $home['projects_eyebrow'] ?? 'Our Work in Action' }}</span>
                    <h2 class="hr-projects2-title">{{ $home['projects_title'] ?? 'From degraded land to thriving agroforests' }}</h2>
                    <p class="hr-projects2-sub">{{ $home['projects_sub'] ?? 'See how our projects are transforming landscapes and livelihoods across India.' }}</p>
                </div>

                @if(!empty($projects))
                    <div class="hr-projects2-grid hr-projects2-grid-{{ count($projects) }}">
                        @foreach($projects as $p)
                            <a href="{{ $p['url'] }}" class="hr-project2-card">
                                <div class="hr-project2-media">
                                    <img src="{{ $p['img'] }}" alt="{{ $p['title'] }}" loading="lazy"
                                         onerror="this.onerror=null;this.src='{{ asset('storage/pages/Planting.jpg') }}';">
                                    <span class="hr-project2-badge">{{ $p['badge'] }}</span>
                                    @if(!empty($p['loc']))
                                        <span class="hr-project2-loc"><i class="fa-solid fa-location-dot"></i> {{ $p['loc'] }}</span>
                                    @endif
                                </div>
                                <div class="hr-project2-body">
                                    <h3>{{ $p['title'] }}</h3>
                                    <p>{{ $p['desc'] }}</p>
                                    @if(!empty($p['stats']))
                                        <div class="hr-project2-stats">
                                            @foreach($p['stats'] as $s)
                                                 <div class="hr-project2-stat">
                                                     <div class="hr-project2-stat-val">{{ $s[0] }}</div>
                                                     <div class="hr-project2-stat-label">{{ $s[1] }}</div>
                                                 </div>
                                            @endforeach
                                        </div>
                                    @endif
                                    <span class="hr-project2-link">{{ $home['projects_link_label'] ?? 'View Project' }} <i class="fa-solid fa-arrow-right"></i></span>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @else
                    <div class="text-center text-muted" style="padding: 40px 0;">Featured projects will appear here once added in admin.</div>
                @endif

                <div class="hr-center">
                    <a href="{{ $home['projects_cta_url'] ?? route('projects') }}" class="hr-btn hr-btn-outline">
                        {{ $home['projects_cta_label'] ?? 'View More Projects' }} <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 6. Stay Connected From the Field (News, Insights, Newsletters) -->
        @php
            $fieldBgType = $home['field_bg_type'] ?? (!empty($home['field_bg_image']) ? 'image' : 'color');
            $fieldBgStyle = '';
            if ($fieldBgType === 'image' && !empty($home['field_bg_image'])) {
                $fieldBgStyle = "background-image: url('" . asset($home['field_bg_image']) . "'); background-size: cover; background-position: center;";
            } else {
                $fieldBgStyle = 'background-color: ' . ($home['field_bg_color'] ?? '#fbfaf6') . ';';
            }
        @endphp
        <section class="hr-field" style="{{ $fieldBgStyle }}">
            <div class="container">
                <div class="hr-field-head">
                    <div>
                        <span class="hr-eyebrow">{{ $home['field_eyebrow'] ?? 'Stay Connected' }}</span>
                        <h2 class="hr-field-title">{{ $home['field_title'] ?? 'From the Field' }}</h2>
                        <p class="hr-field-sub">{{ $home['field_sub'] ?? 'Stories, dispatches, and updates from our work on the ground.' }}</p>
                    </div>
                    <a href="{{ $home['field_viewall_url'] ?? url('/news') }}" class="hr-btn hr-btn-outline">{{ $home['field_viewall_label'] ?? 'View All Updates' }} <i class="fa-solid fa-arrow-right"></i></a>
                </div>
            </div>

            @if(!empty($connectedNews) && $connectedNews->isNotEmpty())
                @php
                    $fieldItems = $connectedNews;
                    if ($connectedNews->count() < 8) {
                        $fieldItems = $connectedNews->concat($connectedNews);
                    }
                @endphp
                <div class="hr-field-marquee">
                    <div class="hr-field-track">
                        <div class="hr-field-group">
                            @foreach($fieldItems as $d)
                                <a href="{{ $d->link ?: url('/news') }}" class="hr-field-card" @if($d->link) target="_blank" rel="noopener" @endif>
                                    <div class="hr-field-card-masthead">
                                        <div class="hr-field-publisher">
                                            @if($d->publication_logo_url)
                                                <img src="{{ $d->publication_logo_url }}" alt="{{ $d->title }}" class="hr-field-publisher-logo" loading="lazy">
                                            @else
                                                <span class="hr-field-publisher-fallback">
                                                    <i class="fa-regular fa-newspaper"></i>
                                                    <span>{{ $d->type }}</span>
                                                </span>
                                            @endif
                                        </div>
                                        <span class="hr-field-badge hr-field-badge--{{ strtolower($d->type) }}">{{ $d->type }}</span>
                                    </div>
                                    <div class="hr-field-card-body">
                                        @if($d->published_at)
                                            <span class="hr-field-date"><i class="fa-regular fa-calendar"></i> {{ $d->published_at->format('M j, Y') }}</span>
                                        @endif
                                        <h4 class="hr-field-card-title">{{ $d->title }}</h4>
                                        <p class="hr-field-card-desc">{{ \Illuminate\Support\Str::limit(strip_tags((string) $d->description), 140) }}</p>
                                    </div>
                                    <div class="hr-field-card-footer">
                                        <span class="hr-field-read">{{ $home['field_read_label'] ?? 'Read' }} <i class="fa-solid fa-arrow-right"></i></span>
                                        @php
                                            $host = $d->link ? parse_url($d->link, PHP_URL_HOST) : null;
                                            $domain = $host ? str_replace('www.', '', $host) : null;
                                        @endphp
                                        @if($domain && !in_array($domain, ['farmersforforests.org', 'localhost']))
                                            <span class="hr-field-domain">{{ $domain }}</span>
                                        @endif
                                    </div>
                                </a>
                            @endforeach
                        </div>
                        <div class="hr-field-group" aria-hidden="true">
                            @foreach($fieldItems as $d)
                                <a href="{{ $d->link ?: url('/news') }}" class="hr-field-card" @if($d->link) target="_blank" rel="noopener" @endif>
                                    <div class="hr-field-card-masthead">
                                        <div class="hr-field-publisher">
                                            @if($d->publication_logo_url)
                                                <img src="{{ $d->publication_logo_url }}" alt="" class="hr-field-publisher-logo" loading="lazy">
                                            @else
                                                <span class="hr-field-publisher-fallback">
                                                    <i class="fa-regular fa-newspaper"></i>
                                                    <span>{{ $d->type }}</span>
                                                </span>
                                            @endif
                                        </div>
                                        <span class="hr-field-badge hr-field-badge--{{ strtolower($d->type) }}">{{ $d->type }}</span>
                                    </div>
                                    <div class="hr-field-card-body">
                                        @if($d->published_at)
                                            <span class="hr-field-date"><i class="fa-regular fa-calendar"></i> {{ $d->published_at->format('M j, Y') }}</span>
                                        @endif
                                        <h4 class="hr-field-card-title">{{ $d->title }}</h4>
                                        <p class="hr-field-card-desc">{{ \Illuminate\Support\Str::limit(strip_tags((string) $d->description), 140) }}</p>
                                    </div>
                                    <div class="hr-field-card-footer">
                                        <span class="hr-field-read">{{ $home['field_read_label'] ?? 'Read' }} <i class="fa-solid fa-arrow-right"></i></span>
                                        @php
                                            $host = $d->link ? parse_url($d->link, PHP_URL_HOST) : null;
                                            $domain = $host ? str_replace('www.', '', $host) : null;
                                        @endphp
                                        @if($domain && !in_array($domain, ['farmersforforests.org', 'localhost']))
                                            <span class="hr-field-domain">{{ $domain }}</span>
                                        @endif
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </section>

        <!-- Impact Story Band (Orange Full-Width Band) -->
        <!-- <section class="hr-impact-band">
            <div class="container">
                <div class="hr-impact-band-inner">
                    <div class="hr-impact-band-text">
                        <h2>{{ $home['impact_band_title'] ?? 'Build your Impact Story with us!' }}</h2>
                        <p>{{ $home['impact_band_sub'] ?? "Your donation fights climate change and supports India's most vulnerable farming communities." }}</p>
                    </div>
                    <a href="{{ url('/support-us') }}" class="hr-impact-band-btn">{{ $home['impact_band_cta_label'] ?? 'Support Us' }} &#8599;</a>
                </div>
            </div>
        </section> -->

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

@endsection

@section('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/shpjs@6.2.0/dist/shp.min.js"></script>
<script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
    const videoUrl = "{{ $home['hero_video_url'] ?? 'storage/website/index.m3u8' }}";
    const src = videoUrl.startsWith('http://') || videoUrl.startsWith('https://') ? videoUrl : "{{ asset('') }}" + videoUrl.replace(/^\//, '');
    const video = document.getElementById('video');
    const btn = document.getElementById('playBtn');

    if (video) {
        if (src.includes('.m3u8')) {
            // Load HLS
            if (video.canPlayType('application/vnd.apple.mpegURL')) {
                video.src = src;
            } else if (window.Hls && Hls.isSupported()) {
                const hls = new Hls({
                    startLevel: -1,
                    maxBufferLength: 20
                });
                hls.loadSource(src);
                hls.attachMedia(video);
            }
        } else {
            video.src = src;
        }

        // Try autoplay; if blocked, show the button
        const tryPlay = () => {
            video.play().catch(() => btn?.classList.remove('hidden'));
        };
        video.addEventListener('loadeddata', tryPlay, {
            once: true
        });
        btn?.addEventListener('click', () => {
            btn.classList.add('hidden');
            video.play();
        });
    }
</script>
<script>
    $(document).on('click', ".open-initiatives", function() {
        const $menu = $(this).next('.open-menu');
        // Close all others except this one
        $('.open-menu').not($menu).slideUp();
        // Toggle this one
        $menu.slideToggle();
    });
</script>
@include('partials.programs-map-script')
<script src="{{ asset('js/home-redesign.js') }}?v={{ file_exists(public_path('js/home-redesign.js')) ? filemtime(public_path('js/home-redesign.js')) : '1.1' }}"></script>
@endsection