@push('metadata')
@php

$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$mKWords = @$seoData['meta_keywords'];
$faqs = $seoData['faq'] ?? '[]';
$mUrl = url()->current();
$mImage = config('constants.home_page');
@endphp

<title>{{ @$mTitle }}</title>
<meta name="keywords" content="{{ @$mKWords }}" />
<meta name="description" content="{{ @$mDescr }}" />
<meta property=og:locale content="{{ app()->getLocale() }}" />
<meta property=og:type content="{{config('constants.organisation_type_news')}}" />
<meta property="og:site_name" content="Crypto Display" />
<meta property="og:title" content="{{ @$mTitle }}" />
<meta property="og:description" content="{{ @$mDescr }}" />
<meta property="og:url" content="{{ @$mUrl }}" />
<meta property="og:image" content="{{ @$mImage }}" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="628">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{ @$mTitle }}" />
<meta name="twitter:description" content="{{ @$mDescr }}" />
<meta name="twitter:url" content="{{ @$mUrl }}" />
<meta name="twitter:image" content="{{ @$mImage }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
<link rel="alternate" type="application/rss+xml" href="" title="Crypto News RSS Feed English : Crypto Display" />
@endpush

@push('pageId')
<script>
    window.pageId = "{{ $seoData['id'] ?? '' }}";
</script>
@endpush

@push('head_scripts')
{!! SchemaHelper::organizationSchema() !!}
{!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
{!! SchemaHelper::getImageObjectSchema('https://cryptodisplay.io/assets/images/crypto-display.webp',$mTitle) !!}
@endpush

<div>
    @php
        // News split — left column me 3 numbered headlines, right column me cards.
        // slice(3) zaruri hai warna wahi 3 items dono jagah repeat honge.
        $newsList     = collect($smallNews ?? []);
        $headlineNews = $newsList->take(3);
        $cardNews     = $newsList->slice(3);
    @endphp

    {{-- <section class="bg-maintitle position-relative z-0 text-white">
        <div class="container">
            <div class="row mx-0">
                <div class="col-xl-12 text-center headingfont">
                    {!! $seoData['top_page_content'] !!}
                    <a href="{{ URL::to('submit-presale') }}" class="btn-orange rounded-2 mt-3 d-block w-fit mx-auto"
                        title="List Your Project">List Your Project</a>
                </div>
            </div>
        </div>
    </section> --}}

    <!-- Crypto News & Press Release -->
    <section class="my-3">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <h1 class="visually-hidden">Crypto Display : News & Latest ICO, IDO, Presale Listings</h1>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2 class="heading-border h4 mb-0 pb-1">Crypto News</h2>
                        <a href="{{URL::to('crypto-news')}}" class="btn btn-primary rounded-3 fs-14 py-1"
                            title="View All News">View All</a>
                    </div>
                </div>
                <!-- Crypto News -->
                <div class="col-xl-6 col-lg-7">
                    @if($mainNews)
                        <div class="position-relative overflow-hidden mb-4">
                            <img src="{{ $mainNews->image }}" height="636" width="353"
                                class="w-100 h-auto rounded-3" alt="{{ $mainNews->title }}"
                                loading="eager" fetchpriority="high"
                                onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                            <div class="position-absolute overlay-box text-white z-1 top-0 w-100 h-100 rounded-3">
                                <div class="position-absolute w-100 p-3 bottom-0">
                                    <a href="{{ url('/'.$mainNews->alias) }}"
                                        class="two-line-text text-white text-decoration-none fw-semibold h5"
                                        title="{{ $mainNews->seo_title ?? $mainNews->title }}">
                                        {{ $mainNews->title }}
                                    </a>
                                    <div class="mt-3 d-flex align-items-center gap-3">
                                        <a href="{{ URL::to('crypto-author/'. @$mainNews->postAuthor->slug) }}"
                                            class="text-white text-decoration-none text-capitalize border-end pe-3 fs-14"
                                            title="{{ @$mainNews->postAuthor->dispaly_name }}">
                                            {{ @$mainNews->postAuthor->dispaly_name }}
                                        </a>
                                        <span class="small">
                                            {{ !empty($mainNews->publishedAt) ? \Carbon\Carbon::parse($mainNews->publishedAt)->format('d-m-Y') : '' }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- Numbered headlines — dynamic --}}
                    @foreach($headlineNews as $news)
                    <div class="d-flex align-items-start gap-3 mb-3">
                        <div class="light-bg d-flex align-items-center justify-content-center num-circle p-2 rounded-circle">
                            <span class="fs-14 fw-semibold darkredcolor">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        </div>
                        <div>
                            <a href="{{ URL::to($news->alias) }}"
                                class="one-line-text text-dark text-decoration-none fw-semibold"
                                title="{{ $news->seo_title ?? $news->title }}">
                                {{ $news->title }}
                            </a>
                            <div class="mt-2">
                                <a href="{{ URL::to('crypto-author/'. @$news->postAuthor->slug) }}"
                                    class="text-black text-decoration-none text-capitalize border-end pe-1 fs-13"
                                    title="{{ $news->postAuthor->dispaly_name ?? 'Admin' }}">
                                    {{ $news->postAuthor->dispaly_name ?? 'Admin' }}
                                </a>
                                <span class="fs-13 ps-1">
                                    {{ !empty($news->publishedAt) ? \Carbon\Carbon::parse($news->publishedAt)->format('d-m-Y') : '' }}
                                </span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <div class="col-xl-6 col-lg-5">
                    <div class="row small-news">
                        @foreach($cardNews as $news)
                            <x-news-home-card :news="$news" />
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container my-3">
            <div class="row">
                <!-- Press Release -->
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2 class="heading-border h4 mb-0 pb-1">Crypto Press Release</h2>
                        <a href="{{URL::to('crypto-press-release')}}"
                            class="btn btn-primary rounded-3 fs-14 py-1" title="View All">View All</a>
                    </div>
                    <div class="row">
                        @foreach($smallPress as $news)
                        <div class="col-xl-4 col-lg-6 col-md-6 col-12 mb-3">
                            <div class="row g-0">
                                <!-- Left: Image -->
                                <div class="col-5">
                                    <a href="{{ URL::to($news['alias']) }}" class="text-decoration-none text-dark">
                                        <img src="{{ $news['image'] ?? asset('default-news.jpg') }}"
                                            alt="{{ $news['seo_title'] ?? $news['title'] }}"
                                            width="173" height="104" class="w-100 rounded-3"
                                            loading="lazy" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                    </a>
                                </div>
                                <!-- Right: Title Only -->
                                <div class="col-7">
                                    <div class="card h-100 border-0 py-1">
                                        <div class="card-body py-0">
                                            <span class="card-title mb-0 fs-6 lh-base">
                                                <a href="{{ URL::to($news['alias']) }}" class="text-dark text-decoration-none fw-bold two-line-text"
                                                    title="{{ $news['seo_title'] ?? $news['title'] }}">
                                                    {{ $news['title'] ?? '' }}
                                                </a>
                                            </span>
                                        </div>
                                        <!-- Card Footer -->
                                        <div class="card-footer bg-white border-0 d-flex justify-content-between align-items-center py-0">
                                            <span class="text-muted small"> {{ !empty($news['publishedAt']) ? \Carbon\Carbon::parse($news['publishedAt'])->format('d-m-Y') : '' }}</span>
                                            <a href="{{ URL::to('crypto-author/'. @$news['postAuthor']['slug']) }}" class="text-primary text-decoration-none text-dark"
                                                title="{{ $news['postAuthor']['dispaly_name'] ?? 'Admin' }}">
                                                <span class="small fw-semibold"> {{ $news['postAuthor']['dispaly_name'] ?? 'Admin' }}</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Presale & ICO Projects -->
    <section class="py-3">
        <div class="container">
            <div class="row">
                <!-- Presale Projects -->
                <div class="col-xl-12">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <h2 class="heading-border h4 mb-1 pb-1">Presale / ICO / IDO / IEO Projects</h2>
                        <a href="{{ URL('crypto-presale') }}" class="btn btn-primary rounded-3 fs-14 py-1" title="View All">View All</a>
                    </div>
                </div>
                @foreach ($icoData['presale']['data'] as $index => $ico)
                    <div class="col-xl-3 col-lg-4 col-sm-6">
                        <div class="border shadow text-center p-2 position-relative rounded-3 my-2">
                            @if(!empty($ico['featured']))
                            {!! $ico['featured'] !!}
                            @endif

                            <div class="image-card">
                                <a href="{{ URL::to($ico['ico_url']) }}" title="{{ $ico['name'] }}">
                                    <img src="{{ $ico['src'] }}"
                                            width="60" height="60"
                                            class="rounded-circle mb-2"
                                            alt="{{ $ico['img_alt_title'] ?? $ico['name'] }}"
                                            loading="{{ $index < 2 ? 'eager' : 'lazy' }}"
                                            decoding="{{ $index < 2 ? 'sync' : 'async' }}"
                                            onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                    <span class="fw-semibold h6 text-black d-block mb-0">{{ $ico['name'] }}</span>
                                </a>
                            </div>

                            <div class="card-content">
                                <p class="mb-1">({{ $ico['symbol'] }})</p>
                                <div class="btn-orange rounded-pill py-1 px-3 fs-12 ls-1 text-uppercase w-fit mx-auto fw-semibold my-3">
                                    {{ $ico['ico_ido_type'] ?? 'presale' }}
                                </div>
                                <div class="d-flex gap-2 justify-content-center align-items-center">
                                    <span><i class="fa-solid fa-calendar-days pe-2" aria-hidden="true"></i>
                                        {{ $ico['ends_in'] }}</span>
                                    <span class="status-{{ strtolower($ico['status']) }} fs-12">{{ $ico['status'] }}</span>
                                </div>
                                <div class="d-flex justify-content-between gap-2 my-2">
                                    <div class="socialmedia"></div>
                                    <a href="{{ URL::to($ico['ico_url']) }}"
                                        class="btn btn-link darkredcolor fw-bold text-decoration-none fs-14 p-0"
                                        title="{{ $ico['name'] }}">
                                        View Details <i class="fa-solid fa-angle-right ps-1" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Crypto Category & Blockchain -->
    <section class="my-3">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="lightredbg shadowcustom rounded-3 p-4 h-100">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h2 class="heading-border h4 mb-0 pb-1">Crypto Category</h2>
                            <a href="{{URL::to('crypto-categories')}}" class="btn btn-primary rounded-3 fs-14 py-1"
                                title="View All">View All</a>
                        </div>
                        <div class="row">
                            @foreach ($category as $cat)
                            <div class="col-xxl-3 col-lg-4 col-md-6 categoryblock h-100">
                                <div class="bordertopview py-3 px-4 text-center rounded-2 mb-3">
                                    <div class="d-flex gap-2 align-items-center justify-content-between">
                                        <div class="text-start">
                                            <a href="{{URL::to('crypto-categories'.'/'.$cat['slug'])}}"
                                                title="{{ $cat['title'] }}" class="text-decoration-none text-black">
                                                <span class="fw-semibold text-black d-block mb-0 one-line">{{ Str::limit($cat['title'], 12) }}</span>
                                            </a>
                                            <p class="mb-0 fs-14">Total Projects : {{ $cat->projectICOs->count() }}</p>
                                        </div>
                                        <div class="d-flex justify-content-end gap-1 category-image">
                                            @if($cat->projectICOs->count() > 0)
                                                @foreach ($cat->projectICOs->take(3) as $value)
                                                <a href="{{ CommonHelper::makeUrlCommon($value, $value->ico_ido_type) }}"
                                                    title="{{ $value->title }}">
                                                    <img src="{{ $value->imageUrl }}"
                                                        class="rounded wp-post-image"
                                                        alt="{{ $cat['title'] }}"
                                                        width="36" height="36"
                                                        loading="lazy"
                                                        decoding="async"
                                                        onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                                    <span class="d-none">{{ $value->title }}</span>
                                                </a>
                                                @endforeach
                                            @else
                                                <img src="{{ CommonHelper::imgFallback() }}"
                                                    class="rounded wp-post-image"
                                                    alt="No Project"
                                                    width="36" height="36"
                                                    loading="lazy"
                                                    decoding="async">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 mt-4">
                    <div class="lightredbg shadowcustom rounded-3 p-4 h-100">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h2 class="heading-border h4 mb-0 pb-1">Crypto Blockchain</h2>
                            <a href="{{URL::to('crypto-blockchains')}}" class="btn btn-primary rounded-3 fs-14 py-1"
                                title="View All">View All</a>
                        </div>
                        <div class="row">
                            @foreach ($blockchain as $cat)
                            <div class="col-xxl-3 col-lg-4 col-md-6 categoryblock h-100">
                                <div class="bordertopview py-3 px-4 text-center rounded-2 mb-3">
                                    <div class="d-flex gap-2 align-items-center justify-content-between">
                                        <div class="text-start">
                                            <a href="{{URL::to('crypto-blockchains'.'/'.$cat['slug'])}}"
                                                title="{{ $cat['title'] }}" class="text-decoration-none text-black">
                                                <span class="fw-semibold text-black d-block mb-0 one-line">{{ Str::limit($cat['title'], 12) }}</span>
                                            </a>
                                            <p class="mb-0 fs-14">Total Projects : {{ $cat->projectICOs->count() }}</p>
                                        </div>
                                        <div class="d-flex justify-content-end gap-1 category-image">
                                            @if($cat->projectICOs->count() > 0)
                                                @foreach ($cat->projectICOs->take(3) as $value)
                                                <a href="{{ CommonHelper::makeUrlCommon($value, $value->ico_ido_type) }}"
                                                    title="{{ $value->title }}">
                                                    <img src="{{ $value->imageUrl }}"
                                                        class="rounded wp-post-image"
                                                        alt="{{ $cat['title'] }}"
                                                        width="36" height="36"
                                                        loading="lazy"
                                                        decoding="async"
                                                        onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                                    <span class="d-none">{{ $value->title }}</span>
                                                </a>
                                                @endforeach
                                            @else
                                                <img src="{{ CommonHelper::imgFallback() }}"
                                                    class="rounded wp-post-image"
                                                    alt="No Project"
                                                    width="36" height="36"
                                                    loading="lazy"
                                                    decoding="async">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="d-flex flex-column flex-sm-row flex-lg-column gap-3">
                        <div class="d-flex gap-3 align-items-center">
                            <div class="light-bg py-3 px-4 rounded-4 shadow-sm w-100">
                                <i class="fa-regular fa-newspaper darkredcolor fs-5"></i>
                                <span class="fs-4 d-block fw-bold mt-2">{{ number_format($statistics['news'] ?? 0) }}+</span>
                                <span class="fs-14 text-muted">News Published</span>
                            </div>
                            <div class="light-bg py-3 px-4 rounded-4 shadow-sm w-100">
                                <i class="fa-solid fa-list-ul darkredcolor fs-5"></i>
                                <span class="fs-4 d-block fw-bold mt-2">{{ number_format($statistics['projects'] ?? 0) }}+</span>
                                <span class="fs-14 text-muted">Crypto Projects listed</span>
                            </div>
                        </div>
                        <div class="d-flex gap-3 align-items-center">
                            <div class="light-bg py-3 px-4 rounded-4 shadow-sm w-100">
                                <i class="fa-solid fa-bullhorn darkredcolor fs-5"></i>
                                <span class="fs-4 d-block fw-bold mt-2">{{ number_format($statistics['press_release'] ?? 0) }}+</span>
                                <span class="fs-14 text-muted">Press Releases</span>
                            </div>
                            <div class="light-bg py-3 px-4 rounded-4 shadow-sm w-100">
                                <i class="fa-solid fa-layer-group darkredcolor fs-5"></i>
                                <span class="fs-4 d-block fw-bold mt-2">{{ number_format($statistics['categories'] ?? 0) }}+</span>
                                <span class="fs-14 text-muted">Categories Covered</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <span class="fs-3 fw-semibold d-block mb-2">Discover, Track and Promote Crypto Projects</span>
                    <span class="fs-15">CryptoDisplay is a global Crypto News and media platform covering Bitcoin, Ethereum, altcoins, blockchain developments, market trends, regulations and emerging Web3 projects. We also feature crypto presales, token launches, project listings and industry updates.</span>
                    <div class="d-flex my-4 gap-2 align-items-center flex-wrap">
                        <div class="light-bg rounded-pill py-1 px-3 darkredcolor">
                            <i class="fa-solid fa-check me-2"></i>
                            <span class="fs-13">Verified Listings</span>
                        </div>
                        <div class="light-bg rounded-pill py-1 px-3 darkredcolor">
                            <i class="fa-solid fa-check me-2"></i>
                            <span class="fs-13">Global Exposure</span>
                        </div>
                        <div class="light-bg rounded-pill py-1 px-3 darkredcolor">
                            <i class="fa-solid fa-check me-2"></i>
                            <span class="fs-13">Targeted Audience</span>
                        </div>
                    </div>
                    <div class="d-flex gap-3 mt-4">
                        <a href="{{ URL::to('advertise-with-us-crypto-presale-ico-ido-ieo-campaign-marketing') }}" class="btn-orange rounded-4 py-2 px-4"
                            title="Advertise With Us">Advertise With Us</a>
                        <a href="{{ URL::to('/contact-us-list-submit-campaign-market-crypto-presale-ico-ido-ieo') }}" class="mainborderbtn rounded-4 py-2 px-4"
                            title="Contact Us">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('livewire.common.share-modal')

    @push('scripts')
    <script defer>
        function toggleAccordion(button) {
            var item = button.parentElement;
            var content = item.querySelector('.accordion-content');
            var icon = button.querySelector('.icon');

            if (content.style.display === "block") {
                content.style.display = "none";
                button.setAttribute("aria-expanded", "false");
                icon.textContent = "+";
                item.classList.remove('active');
            } else {
                document.querySelectorAll('.accordion-item').forEach(function(i) {
                    i.querySelector('.accordion-content').style.display = 'none';
                    i.querySelector('.accordion-header').setAttribute('aria-expanded', 'false');
                    i.querySelector('.icon').textContent = '+';
                    i.classList.remove('active');
                });
                content.style.display = "block";
                button.setAttribute("aria-expanded", "true");
                icon.textContent = "-";
                item.classList.add('active');
            }
        }

        function submitCoinForm() {
            window.location.href = '{{ CommonHelper::makeUrl('/submit-crypto-presale-ico-ido-ieo-projects') }}';
        }
    </script>
    @endpush

</div>