@push('metadata')
@php
$pageId = 36;
$mTitle = @$cryptoDetails['seo_title'];
$mDescr = @$cryptoDetails['meta_description'];
$mKWords = @$cryptoDetails['meta_keywords'];
$breadCrum = @$cryptoDetails['title'];
$imageUrl = $cryptoDetails['image'];
$mUrl = url()->current();
$mImage = $imageUrl;
$icoIdoType = CommonHelper::getIcoTypeLabel($cryptoDetails['ico_ido_type']);
$seoParams = RssFeedHelper::getIcoType($cryptoDetails['ico_ido_type']);
@endphp
@push('pageId')
<script>
    window.pageId = "{{ $pageId ?? '' }}";
</script>
@endpush
<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')}}" />
<meta property="og:site_name" content="Crypto Presale" />
<meta property="og:title" content="{{ @$mTitle }}" />
<meta property="og:description" content="{{ @$mDescr }}" />
<meta property="og:url" content="{{ @$mUrl }}" />
<meta property="og:image" content="{{ @$imageUrl }}" />
<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="{{ @$imageUrl }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
@endpush

@push('head_scripts')
{!! SchemaHelper::getBreadcrumbSchema([
['name' => 'Home', 'url' => url('/')],
['name' => $seoParams['title'], 'url' => url($seoParams['slug'])],
['name' => $cryptoDetails['title'], 'url' => $mUrl]
]) !!}
{!! SchemaHelper::getImageObjectSchema($imageUrl, $cryptoDetails['title']) !!}
@if(!empty($cryptoDetails['faqs']))
{!! SchemaHelper::getFaqSchema($cryptoDetails['faqs']) !!}
@endif
{!! SchemaHelper::icoDetailArticleSchema($cryptoDetails) !!}
@endpush

<div>
    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li>
                    <a href="{{ URL::to('/') }}" title="Home">Home</a>
                    <i class="fas fa-chevron-right small text-dark mx-2"></i>
                </li>
                <li>
                    <a href="{{ $cryptoDetails['ico_url'] }}" title="Crypto Presale">{{ CommonHelper::stageNameById($cryptoDetails['ico_ido_type']) ?? 'Crypto Presale' }}</a>
                    <i class="fas fa-chevron-right small text-dark mx-2"></i>
                </li>
                <li>{{ $cryptoDetails['title'] ?? 'Crypto Ico Details' }}</li>
            </ul>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="token-card">
                <div class="token-header flex-wrap">
                    <div class="token-title d-flex align-items-center">
                        <img src="{{ $imageUrl }}"
                            class="object-fit-cover rounded-circle me-3 ico-detail-logo"
                            alt="{{ $cryptoDetails['img_alt_title'] ?: $cryptoDetails['title'] }}"
                            title="{{ $cryptoDetails['title'] }}" width="80" height="80" />
                        <div>
                            <div class="token-name d-flex align-items-center gap-2 mb-0 flex-wrap">
                                <h1 class="mb-0 fs-3 fw-semibold">{{ $cryptoDetails['name'] }}</h1>
                                <span class="fs-6">({{ $cryptoDetails['alias'] }})</span>
                                <span class="presale-badge fs-12 py-1 px-3 rounded-3 fw-bold text-uppercase">{{ CommonHelper::stageNameById($cryptoDetails['ico_ido_type']) ?? 'Presale' }}</span>
                            </div>
                            <div class="whitepaper-section mt-2 mt-md-0">
                                <div class="social-icons d-flex justify-content-start flex-wrap gap-2">
                                    @php
                                    $socials = [
                                    'twitter' => [
                                    'url' => $cryptoDetails['twitter'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-twitter text-white'
                                    ],
                                    'discord' => [
                                    'url' => $cryptoDetails['discord'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-discord text-white'
                                    ],
                                    'youtube' => [
                                    'url' => $cryptoDetails['youtube_link'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-youtube text-white'
                                    ],
                                    'telegram' => [
                                    'url' => $cryptoDetails['telegram'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-telegram text-white'
                                    ],
                                    'telegram_group' => [
                                    'url' => $cryptoDetails['telegram_group'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-telegram text-white'
                                    ],
                                    'facebook' => [
                                    'url' => $cryptoDetails['facebook'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-facebook-f text-white'
                                    ],
                                    'medium' => [
                                    'url' => $cryptoDetails['medium'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-medium text-white'
                                    ],
                                    'instagram' => [
                                    'url' => $cryptoDetails['instagram'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-instagram text-white'
                                    ],
                                    'reddit' => [
                                    'url' => $cryptoDetails['reddit'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-reddit text-white'
                                    ],
                                    'linkedin' => [
                                    'url' => $cryptoDetails['linkedin'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-linkedin-in text-white'
                                    ],
                                    'white_paper' => [
                                    'url' => $cryptoDetails['white_paper_url'] ?? null,
                                    'class' => 'buy-button p-2',
                                    'icon' => 'fas fa-file-lines text-white'
                                    ]
                                    ];
                                    @endphp

                                    @foreach($socials as $key => $item)
                                    @if(!empty($item['url']))
                                    <a href="{{ $item['url'] }}" class="{{ $item['class'] }} d-flex text-decoration-none align-items-center justify-content-center" target="_blank"
                                        rel="nofollow noopener noreferrer" title="Share On {{  ucfirst($key) }}">
                                        <i class="{{ $item['icon'] }}"></i>
                                        <span class="visually-hidden">Share on {{ ucfirst($key) }}</span>
                                    </a>
                                    @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="timerSection" class="timer-section mt-3 mt-lg-0">
                        <div class="presale-live">
                            <p class="mb-0">
                                {{ CommonHelper::stageNameById($cryptoDetails['ico_ido_type']) }}
                                <span id="presaleStatus" class="live-now"></span>
                            </p>
                        </div>

                        <div>
                            <span id="countdownTimer">--D : --H : --M : --S</span>
                        </div>

                        <div class="dates">
                            <span id="dateRange">-- - --</span>
                        </div>
                    </div>
                </div>
                <div class="action-buttons d-flex justify-content-between align-items-center flex-wrap px-0 gap-2">
                    <div class="d-flex gap-2 flex-wrap">
                        <a href="{{ URL::to('submit-crypto-presale-ico-ido-ieo-projects') }}"
                            class="btn btn-outline-dark btn-sm action-btn me-2" title="Submit New Crypto Presale">
                            <i class="fas fa-paper-plane me-1"></i> Submit
                        </a>
                        <form action="{{ route('update-request', ['slug' => $slug]) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit"
                                class="btn btn-outline-dark btn-sm action-btn me-2"
                                @guest onclick="openLoginPopup(); return false;" @endguest>
                                                        
                                <i class="fas fa-pen-to-square me-1"></i> Edit
                            </button>
                        </form>
                        <a href="{{ URL::to('crypto-presale-ico-marketing-campaign') }}"
                            class="btn btn-outline-dark btn-sm action-btn"
                            title="Promote your Crypto Presale or ICO on Crypto Presale News">
                            <i class="fas fa-bullhorn me-1"></i> Advertise
                        </a>
                        
                    </div>
                   
                    <div class="d-flex gap-2 flex-wrap">
                        @if(!empty($cryptoDetails['where_to_buy']))
                        <a href="{{ $cryptoDetails['where_to_buy'] }}" target="_blank"
                            rel="noopener noreferrer nofollow" class="link-customize457 buy-button" title="Buy Now">Buy
                            Now</a>
                        @endif
                        @if(!empty($cryptoDetails['website']))
                        <a href="{{ $cryptoDetails['website'] }}" target="_blank" rel="noopener noreferrer nofollow"
                            class="link-customize457 buy-button" title="{{ $cryptoDetails['name'] }} Website">
                            {{ $cryptoDetails['name'] }}
                            Website</a>
                        @endif
                        

                    </div>
                    
                </div>
              
                <div class="d-flex justify-content-between flex-wrap mt-2">
                    <p class="mb-0">Published By: <span>{{ $cryptoDetails['post_author']['dispaly_name'] }}</span></p>
                    <p class="mb-0">Published at: 
                        <time datetime="{{ $cryptoDetails['created_at'] ? \Carbon\Carbon::parse($cryptoDetails['created_at'])->setTimezone('Asia/Kolkata')->toIso8601String() : '' }}">
                            {{ \Carbon\Carbon::parse($cryptoDetails['created_at'])->format('Y-m-d') }}
                        </time>
                    </p>
                </div>
                <!-- Tokonomics Section -->
                <div class="tokonomics-section mt-3">
                    <div>
                        <div class="tokonomics-title">
                            <span>Tokonomics</span>
                        </div>
                    </div>
                    <div class="tokonomics-container">
                        <div class="row tokonomics-row pt-3">
                            <div class="col-sm-4 mb-3 mb-sm-0">
                                <div class="tokonomics-label"><span>Category</span></div>
                                <div class="tokonomics-value">
                                    <span>{{ $cryptoDetails['project_category']['title'] ?? 'N/A'}}</span>
                                </div>
                            </div>
                            <div class="col-sm-4 mb-3 mb-sm-0">
                                <div class="tokonomics-label"><span>Platform</span></div>
                                <div class="tokonomics-value">
                                    <span>{{ $cryptoDetails['ico_launchpad']['title'] ?? 'N/A'}}</span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="tokonomics-label"><span>Accept Type</span></div>
                                <div class="tokonomics-value">
                                    <span>{{ $cryptoDetails['accept_type'] ?? '"USDT'}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row tokonomics-row">
                            <div class="col-sm-4 mb-3 mb-sm-0">
                                <div class="tokonomics-label">
                                    <span>{{ CommonHelper::stageNameById($cryptoDetails['ico_ido_type']) }} Price</span>
                                </div>
                                <div class="tokonomics-value">
                                    <span>{{ $cryptoDetails['ico_price'] . ' (' . $cryptoDetails['accept_type'] . ' )' ?? 'N/A'}}</span>
                                </div>
                            </div>
                            <div class="col-sm-4 mb-3 mb-sm-0">
                                <div class="tokonomics-label"><span>1 USDT</span></div>
                                @php
                                function calculateTokensPerUsdt($price)
                                {
                                if ($price === 'TBA' || empty($price) || !is_numeric($price) || $price <= 0) {
                                    return 'TBA' ;
                                    }
                                    return number_format(1 / $price, 4);
                                    } @endphp <div class="tokonomics-value">
                                    <span>{{ $cryptoDetails['one_usdt'] ?? calculateTokensPerUsdt($cryptoDetails['ico_price']) }}
                                    </span>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="tokonomics-label"><span>Fundraising Goal</span></div>
                            <div class="tokonomics-value">
                                <span>
                                    {{ is_numeric($cryptoDetails['fund_asking_for'] ?? null)
    ? number_format($cryptoDetails['fund_asking_for'])
    : 'TBA' }}
                                </span>

                            </div>
                        </div>
                    </div>
                    <div class="row tokonomics-row">
                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Total Supply</span></div>
                            <div class="tokonomics-value">
                                <span>{{ $cryptoDetails['total_coin'] ? number_format($cryptoDetails['total_coin']) : 'N/A' }}</span>
                            </div>
                        </div>
                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Tokens for Sale</span></div>
                            <div class="tokonomics-value">
                                <span>{{ $cryptoDetails['quantity_of_coin'] ? number_format($cryptoDetails['quantity_of_coin']) : 'N/A' }}</span>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="tokonomics-label"><span>% of Supply</span></div>
                            <div class="tokonomics-value"><span>
                                    @if(
                                    !empty($cryptoDetails['total_coin']) &&
                                    !empty($cryptoDetails['quantity_of_coin']) && $cryptoDetails['quantity_of_coin'] >
                                    0
                                    )
                                    {{ number_format(($cryptoDetails['quantity_of_coin'] / $cryptoDetails['total_coin']) * 100, 2) }}%
                                    @else
                                    N/A
                                    @endif
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="row tokonomics-row pb-0">
                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Blockchain</span></div>
                            <div class="tokonomics-value">
                                <span>{{ $cryptoDetails['project']['title'] ?? 'others' }}</span>
                            </div>
                        </div>
                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Contract Address</span></div>
                            <div class="tokonomics-value d-flex align-items-center mb-2">
                                @if (!empty($cryptoDetails['contract_address']))
                                <span id="tokenId d-block overflow-hidden" data-copy="{{ $cryptoDetails['contract_address'] ?? '' }}">
                                    {{ $cryptoDetails['contract_address'] ?? '' }}
                                </span>
                                <button class="mainbluebtn px-2 rounded-circle" title="Copy to clipboard"
                                    onclick="copyToClipboard(this)">
                                    <i class="far fa-copy fs-14"></i>
                                </button>
                                @else
                                -
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="tokonomics-label"><span>Website</span></div>
                            <div class="tokonomics-value">
                                <a href="{{  $cryptoDetails['website'] ?? '#'}}" target="_blank"
                                    rel="noopener noreferrer nofollow" class="text-decoration-underline"
                                    title="{{ $cryptoDetails['name'] }} Website">
                                    {{ $cryptoDetails['name'] }}
                                    Website</a>
                            </div>
                        </div>

                    </div>
                    @if($cryptoDetails['hard_cap'] || $cryptoDetails['soft_cap'] || $cryptoDetails['personal_cap'])
                    <div class="row tokonomics-row">
                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Hard Cap</span></div>
                            <div class="tokonomics-value">
                                <span>
                                    {{ is_numeric($cryptoDetails['hard_cap'] ?? null)
                            ? number_format($cryptoDetails['hard_cap']) . ' (' . ($cryptoDetails['accept_type'] ?? '-') . ')'
                            : 'N/A' }}
                                </span>
                            </div>
                        </div>

                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Soft Cap</span></div>
                            <div class="tokonomics-value">
                                <span>
                                    {{ is_numeric($cryptoDetails['soft_cap'] ?? null)
                            ? number_format($cryptoDetails['soft_cap']) . ' (' . ($cryptoDetails['accept_type'] ?? '-') . ')'
                            : 'N/A' }}
                                </span>
                            </div>
                        </div>

                        <div class="col-sm-4 mb-3">
                            <div class="tokonomics-label"><span>Personal Cap</span></div>
                            <div class="tokonomics-value">
                                <span>
                                    {{ is_numeric($cryptoDetails['personal_cap'] ?? null)
                            ? number_format($cryptoDetails['personal_cap']) . ' (' . ($cryptoDetails['accept_type'] ?? '-') . ')'
                            : 'N/A' }}
                                </span>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        <!-- Project Description -->
        <div class="row">
            <div class="col-12 mb-3 mt-3 mt-lg-0">
                <div>
                    <h2 class="h4 fw-bold heading-bdr-left position-relative">About {{ $cryptoDetails['name']  }} ({{ $cryptoDetails['alias'] }}) Project {{ CommonHelper::stageNameById($cryptoDetails['ico_ido_type']) ?? 'Presale' }}</h2>
                    <div class="contentview mt-3">
                    <div class="details-page">
                        {!! $cryptoDetails['description'] !!}
                    </div>
                    </div>

                    <div class="nav-buttons d-flex justify-content-center justify-content-sm-between flex-wrap">
                        @if(!empty($prev))
                        <a class="prev-btn interlink-btn text-white border-0 rounded-2 cursor-pointer text-decoration-none d-flex align-center gap-2"
                            href="{{  URL::to(RssFeedHelper::getIcoType($prev['ico_ido_type'])['slug'] . '/' . $prev['slug']) }}"
                            title="{{ $prev['name'] . " " . CommonHelper::stageNameById($prev['ico_ido_type']) }}">
                            <i class="fas fa-arrow-left me-1"></i>
                            {{ $prev['name'] ?? '' }} {{ CommonHelper::stageNameById($prev['ico_ido_type']) }}
                        </a>
                        @endif

                        @if(!empty($next))
                        <a class="next-btn interlink-btn text-white border-0 rounded-2 cursor-pointer text-decoration-none d-flex align-center gap-2"
                            href="{{  URL::to(RssFeedHelper::getIcoType($next['ico_ido_type'])['slug'] . '/' . $next['slug']) }}"
                            title="{{ $next['name'] . " " . CommonHelper::stageNameById($next['ico_ido_type']) }}">
                            {{ $next['name'] ?? '' }} {{ CommonHelper::stageNameById($next['ico_ido_type']) }}
                            <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
</div>
</section>
<section>
    <div class="container pb-4">
        <div class="row">
            <div class="col-xl-12">
            <div class="author-information shadow rounded-4">
        <div class="py-3 px-4">
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <div class="author-img">
                    <img src="{{@$cryptoDetails['post_author']['image'] ?? asset('assets/images/author.png')}} "
                        class="rounded-circle" height="64" width="64"
                        alt="{{ @$cryptoDetails['post_author']!=null ? @$cryptoDetails['post_author']['dispaly_name']: $cryptoDetails['author_name'] }}" >
                </div>
                <div class="author-profile">
                    <div class="author-title">
                        <a href="{{ URL::to('crypto-author/' . @$cryptoDetails['post_author']['slug']) }}"
                            class="text-black d-block h3 mb-0 fw-bold text-decoration-none"
                            title="{{ @$cryptoDetails['post_author']!=null ? @$cryptoDetails['post_author']['dispaly_name']: $cryptoDetails['author_name'] }}">
                            {{ @$cryptoDetails['post_author']!=null ? @$cryptoDetails['post_author']['dispaly_name']: $cryptoDetails['author_name'] }}</a>
                        <p class="mb-0 text-secondary">Crypto Journalist at <a
                                href="https://cryptopresalenews.com" class="textblue fw-bold">
                                cryptopresalenews.com</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="author-middle px-4 py-1">
            {!! $cryptoDetails['post_author']['about_us'] !!}
        </div>
        <div class="d-flex justify-content-end pb-2 me-3 align-items-center gap-2">
            <a class="text-decoration-underline textskyblue fw-semibold fs-14"
                href="{{ URL::to('crypto-author/' . @$cryptoDetails['post_author']['slug']) }}"
                title="{{ @$cryptoDetails['post_author']!=null ? @$cryptoDetails['post_author']['dispaly_name']: $cryptoDetails['author_name'] }}">Read
                More Articles By
                {{ @$cryptoDetails['post_author']!=null ? @$cryptoDetails['post_author']['dispaly_name']: $cryptoDetails['author_name'] }}</a>
            <i class="fa-solid fa-chevron-right textskyblue fs-13"></i>
            @if (!empty($cryptoDetails['post_author']['telegram_id']))
            <a href="{{ $cryptoDetails['post_author']['telegram_id'] }}" title="Telegram"
                target="_blank"
                class="me-2 text-decoration-underline textskyblue btn-link float-end fw-semibold fs-small mt-1"
                ref="noopener nofollow noreffer">Connect Telegram</a>
            @endif
        </div>
    </div>
    </div>
        </div>
    </div>
</section>
@if(!empty($loadedFaqs))
<section class="py-4">
    <div class="container">
        <div class="row">
            <div class="col-xl-8">
                <div class="section-title text-center">
                    <h3 class="fw-bold h4 d-block">Frequently Asked Questions</h3>
                    <p>Have questions? We have answers!</p>
                </div>
                <div class="accordion faq-accordion" id="faqAccordion">
                    @if(!empty($loadedFaqs))
                    @foreach($loadedFaqs as $key => $faq)
                    <div class="accordion-item">
                        <div class="accordion-header fs-author border-0 w-100 text-start">
                            {{ $faq['question'] ?? 'Untitled Question' }}
                            <span class="icon">+</span>
                        </div>
                        <div class="accordion-content">
                            <p>{!! $faq['answer'] ?? 'No answer available.' !!}</p>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <div>
                        <p class="text-center">No Faqs Are Available</p>
                    </div>
                    @endif
                </div>
                @if($hasMore)
                <div class="text-center my-3">
                    <button wire:click="loadMore" wire:key="load-more-{{ count($loadedFaqs) }}"
                        class="btn btn-primary">
                        Load More
                    </button>
                </div>
                @endif

            </div>

            <div class="col-xl-4 aos-init aos-animate" data-aos="fade-down">
                <div class="contact_block text-center">
                    <div class="iconbox mb-3"><img alt="Telegram"
                            
                            loading="lazy" width="64" height="64" decoding="async" data-nimg="1"
                            src="{{ URL::asset('assets/images/telegram-faq.png') }}"><span class="d-none">Banner
                            header</span></div>
                    <div class="contact_faq"><span class="h4 fw-bold text-black mb-2 d-block">Have Questions?</span>
                        <p>Our team will answer all your questions. We ensure a quick response.</p>
                        <a class="btn-main position-relative overflow-hidden primary-btn shadow" href="https://t.me/CryptoPresale_admin"
                            target="blank" rel="nofollow noopener noreferrer" title="Telegram"><i
                                class="fa-brands fa-telegram"></i> Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

@push('scripts')
<script>
    let startTime = @json($cryptoDetails['start_time'] ?? null);
    let endTime = @json($cryptoDetails['end_time'] ?? null);

    const timerSection = document.getElementById("timerSection");
    const statusEl = document.getElementById("presaleStatus");
    const timerEl = document.getElementById("countdownTimer");
    const dateRangeEl = document.getElementById("dateRange");

    if (!timerSection || !statusEl || !timerEl || !dateRangeEl) {
        console.warn('Timer: missing DOM element(s).');
    } else {
        if (!startTime && !endTime) {
            timerSection.style.display = "none";
        } else {
            try {
                const s = startTime.split("T")[0];
                const e = endTime ? endTime.split("T")[0] : "TBA";
                dateRangeEl.textContent = `${s} - ${e}`;
                timerSection.style.display = "";
            } catch (err) {
                console.warn('Timer: invalid date format', err);
            }

            function updateCountdown() {
                const now = Date.now();
                const start = new Date(startTime).getTime();
                const end = new Date(endTime).getTime();

                if (isNaN(start) || isNaN(end)) {
                    statusEl.textContent = "Invalid date";
                    timerEl.textContent = "--D : --H : --M : --S";
                    return;
                }

                if (now < start) {
                    statusEl.textContent = "Coming Soon";
                    let diff = start - now;
                    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
                    const minutes = Math.floor((diff / (1000 * 60)) % 60);
                    const seconds = Math.floor((diff / 1000) % 60);
                    const pad = (n) => String(n).padStart(2, '0');
                    timerEl.style.display = "inline";
                    timerEl.textContent = `${days}D : ${pad(hours)}H : ${pad(minutes)}M : ${pad(seconds)}S`;
                    return;
                }

                if (now > end) {
                    statusEl.textContent = "Ended";
                    timerEl.style.display = "inline";
                    timerEl.textContent = "00D : 00H : 00M : 00S";
                    timerEl.style.display = "none";
                    return;
                }

                statusEl.textContent = "Live Now";
                let diff = end - now;
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
                const minutes = Math.floor((diff / (1000 * 60)) % 60);
                const seconds = Math.floor((diff / 1000) % 60);
                const pad = (n) => String(n).padStart(2, '0');
                timerEl.style.display = "inline";
                timerEl.textContent = `${days}D : ${pad(hours)}H : ${pad(minutes)}M : ${pad(seconds)}S`;
            }

            updateCountdown();
            setInterval(updateCountdown, 1000);
        }
    }
</script>
<script>
    function copyToClipboard(button) {
        const parentDiv = button.closest('.address-text, .copy-icon, div');
        const target = document.querySelector('[data-copy]');

        if (!target) return;

        const text = target.getAttribute('data-copy');
        if (!text) return;

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text)
                .then(() => showCheck(button))
                .catch(() => fallbackCopy(text, button));
        } else {
            fallbackCopy(text, button);
        }
    }

    function fallbackCopy(text, button) {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();

        try {
            document.execCommand('copy');
            showCheck(button);
        } catch {
            alert("Copy failed");
        }

        document.body.removeChild(textarea);
    }

    function showCheck(button) {
        const originalHTML = button.innerHTML;
        button.innerHTML = '✔️';
        setTimeout(() => button.innerHTML = originalHTML, 1000);
    }
    document.addEventListener('DOMContentLoaded', function() {
        // Handle clicks on accordion headers
        document.addEventListener('click', function(e) {
            const header = e.target.closest('.accordion-header');
            if (!header) return;

            const item = header.closest('.accordion-item');
            if (!item) return;

            const openItem = document.querySelector('.accordion-item.active');
            if (openItem && openItem !== item) {
                openItem.classList.remove('active');
            }

            item.classList.toggle('active');
        });
        document.addEventListener('livewire:load', function() {
            Livewire.hook('morph.updated', (component, el) => {
                // Find the first new accordion item (you can customize this logic)
                const allItems = document.querySelectorAll('.accordion-item');
                if (allItems.length > 0) {
                    const lastAdded = allItems[allItems.length - 1];
                    lastAdded.classList.add('active'); // 👈 automatically open the last added FAQ
                }
            });
        });
    });
</script>

@endpush
</div>