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

<title>{{ @$mTitle }}</title>
<meta name="description" content="{{ @$mDescr }}" />
<meta property=og:locale content="en_US" />
<meta property=og:type content="{{config('constants.organisation_type_website')}}" />
<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')}}" />
@endpush
@push('head_scripts')
{!! SchemaHelper::aboutPageSchema([
    'name'        => $mTitle ?? '',
    'url'         => $mUrl ?? '',
    'description' => $mDescr ?? '',
    'website'     => url('/'),
    'image'       => $mImage,
    'breadcrumb'  => $mUrl . '#breadcrumb',
]) !!}
{!! SchemaHelper::getBreadcrumbSchema([
['name' => 'Home', 'url' => url('/')],
['name' =>$seoData['breadcrumb'] ?: 'Official Verification', 'url' => $mUrl],
]) !!}
{!! SchemaHelper::getImageObjectSchema(CommonHelper::s3ImageOrDefault($mImage), $mTitle, 1200, 628) !!}
@if(!empty($seoData['faq']))
{!! SchemaHelper::getFaqSchema($seoData['faq']) !!}
@endif
{!! SchemaHelper::howToSchema([
    'id' => $mUrl,
    'name' => $mTitle,
    'totalTime' => 'PT20S',
    'steps' => [
    [
    "@type" => "HowToStep",
    'name' => 'Step 1: Open the Official Crypto Display Verification Page',
    'text' => 'Visit the official Crypto Display verification page and use the contact details shown there as your main reference.',
    ],
    [
    "@type" => "HowToStep",
    'name' => 'Step 2: Check the Team Member’s Name and Contact',
    'text' => 'Compare the name, Telegram username, email address, or other contact details with the official information provided by Crypto Display.',
    ],
    [
    "@type" => "HowToStep",
    'name' => 'Step 3: Verify the Official Email Address',
    'text' => 'Make sure the message comes from an authorized Crypto Display email address. Avoid trusting unknown personal or lookalike email accounts.',
    ],
    [
    "@type" => "HowToStep",
    'name' => 'Step 4: Confirm the Telegram Username',
    'text' => 'Check the Telegram username carefully. Fake accounts may use similar spellings, extra letters, numbers, or symbols to impersonate the Crypto Display team.',
    ],
    [
    "@type" => "HowToStep",
    'name' => 'Step 5: Verify the Payment Wallet Address',
    'text' => 'Before sending any crypto payment, compare the wallet address with the official wallet details shown on the verification page. Do not use a wallet address received only through an unverified message.',
    ],
    [
    "@type" => "HowToStep",
    'name' => 'Step 6: Contact Crypto Display if You Are Unsure',
    'text' => 'If any contact detail, payment request, wallet address, or message looks suspicious, contact Crypto Display through an official channel and confirm the details before proceeding.',
    ],
    ],
]) !!}
@endpush
@push('pageId')
<script>
    window.pageId = "{{ $seoData['id'] ?? '' }}";
</script>
@endpush
<div>
    <section class="web-color py-2 breadcrumb">
        <div class="container">
            <div class="row">
                <div class="d-flex gap-2 p-0 m-0 list-unstyled justify-content-center text-white">
                    <ul class="d-flex p-0 m-0 list-unstyled">
                        <li class="position-relative"><a href="{{ URL::to('/') }}" title="Home"
                                class="text-white text-decoration-none">Home</a></li>
                        <li class="position-relative">
                            {{$seoData['breadcrumb'] ?: 'Official Verification' }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container my-3">
            <div class="row">
                <div class="col-md-12">
                    <div class="gradientbg p-4 rounded-3">
                        <div class="ico_mainheading headingfont text-center">
                            {!! $seoData['top_page_content'] !!}
                        </div>
                        <div class="d-flex justify-content-center gap-2 flex-wrap mt-3">
                            <a href="{{ URL::to('/contact-us-list-submit-campaign-market-crypto-presale-ico-ido-ieo') }}"
                                class="btn btn-primary fs-14" title="Get In Touch">Get In Touch</a>
                            <a href="{{ URL::to('submit-presale') }}" class="btn btn-primary fs-14"
                                title="List Your Project">List Your Project</a>
                            <a href="{{ URL::to('/advertise-with-us-crypto-presale-ico-ido-ieo-campaign-marketing') }}"
                                class="btn btn-primary fs-14" title="View Other Projects">Advertise With Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row justify-content-center">
                <div class="row mt-3">
                    <div class="col-xl-5 mx-auto col-12 mt-3">
                        <div class="gradientbg shadowcustom p-3 h-100 position-relative text-center">
                            <div class="btn btn-gradient fs-12 rounded-pill fw-bold mt-2 position-absolute end-1 top-1">
                                <span>GET IN TOUCH</span>
                            </div>
                            <img src="{{ URL::asset('assets/images/displayuser.png') }}"
                                onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"
                                class="img-fluid mb-2 presale m-auto" alt="Presale Manager" width="80" height="80">
                            <span class="h3 fw-bold d-block">Presale Manager</span>
                            <div class="d-flex flex-column flex-sm-row flex-lg-column gap-2 gap-sm-4 gap-lg-2 align-items-center mt-2 justify-content-center">
                            <div class="text-center">
                                <a href="mailto:presale@cryptodisplay.io" title="Gmail" rel="noreferrer noopener"
                                    class="d-flex justify-content-center align-items-center text-decoration-none text-dark">
                                    <i class="fa-solid fa-envelope fs-6 text-black me-1"></i>
                                    <span class="fs-15">presale@cryptodisplay.io</span>
                                </a>
                            </div>
                            <div class="text-center">
                                <div class="d-flex justify-content-around align-items-center">
                                    <a href="https://t.me/Display_MrktManager" title="Telegram Group" target="_blank"
                                        rel="nofollow noopener noreferrer"
                                        class="d-flex align-items-center text-decoration-none text-dark">
                                        <i class="fa-brands fa-telegram fs-6 text-black me-1"></i>
                                        <span class="fs-15">@Display_MrktManager</span>
                                    </a>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 text-center mt-4">
                        <span class="h3 fw-bold">Verify With Below</span>
                    </div>
                    <div class="col-lg-4 col-12 mt-3">
                        <div class="gradientbg shadowcustom p-3 h-100">
                            <div class="my-1 mb-3">
                                <i class="fa-solid fa-wallet display-4 web-textcolor my-2"></i>
                            </div>

                            <span class="h5 fw-bold ">Verify Our Wallet</span>

                            <label for="address" class="visually-hidden">Wallet Address</label>

                            <input id="address"
                                type="text"
                                class="form-control inputview my-2"
                                wire:model.defer="walletAddress"
                                placeholder="Enter Wallet Address here">

                            <button type="submit"
                                class="btn btn-primary rounded-3"
                                wire:click="verifyData('wallet_address')"
                                title="Verify">
                                Verify
                            </button>

                            @if(!is_null($walletStatus))
                                <p class="mt-3 fw-semibold {{ $walletStatus ? 'text-success' : 'text-danger' }}">
                                    {{ $walletStatus ? ' ✅ Wallet Verified ' : ' ❌ Wallet Not Found' }}
                                </p>
                            @endif
                        </div>
                    </div>

                    <div class="col-lg-4 col-12 mt-3">
                        <div class="gradientbg shadowcustom p-3 h-100">
                            <div class="my-1 mb-3">
                                <i class="fa-solid fa-envelope-circle-check display-4 web-textcolor my-2"></i>
                            </div>

                            <span class="h5 fw-bold ">Verify Email</span>

                            <label for="address" class="visually-hidden">Wallet Address</label>

                            <input id="address"
                                type="text"
                                class="form-control inputview my-2"
                                wire:model.defer="emailAddress"
                                placeholder="Enter Email Address here">

                            <button type="submit"
                                class="btn btn-primary rounded-3"
                                wire:click="verifyData('email')"
                                title="Verify">
                                Verify
                            </button>

                            @if(!is_null($emailStatus))
                                <p class="mt-3 fw-semibold {{ $emailStatus ? 'text-success' : 'text-danger' }}">
                                    {{ $emailStatus ? ' ✅ Email Verified ' : ' ❌ Email Not Found' }}
                                </p>
                            @endif
                        </div>
                    </div>


                    <div class="col-lg-4 col-12 mt-3">
                        <div class="gradientbg shadowcustom p-3 h-100">
                            <div class="my-1 mb-3">
                                <i class="fa-brands fa-telegram display-4 web-textcolor my-2"></i>
                            </div>

                            <span class="h5 fw-bold ">Verify Telegram</span>

                            <label for="address" class="visually-hidden">Wallet Address</label>

                            <input id="address"
                                type="text"
                                class="form-control inputview my-2"
                                wire:model.defer="telegramInput"
                                placeholder="Enter Telegram here">

                            <button type="submit"
                                class="btn btn-primary rounded-3"
                                wire:click="verifyData('telegram')"
                                title="Verify">
                                Verify
                            </button>

                            @if(!is_null($telegramStatus))
                                <p class="mt-3 fw-semibold {{ $telegramStatus ? 'text-success' : 'text-danger' }}">
                                    {{ $telegramStatus ? ' ✅ Telegram Verified ' : ' ❌ Telegram Not Found' }}
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <section>
        <div class="container pt-3">
            <div class="row">
                <div class="col-xl-12">
                    <div class="contentview contentconditon">
                        {!! $seoData['description'] ?? '' !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <livewire:faq-section pageType="official-verification-verify-crypto-display-team" />
</div>

<script>
    document.addEventListener('livewire:init', () => {
        Livewire.on('verification-message', (event) => {

            setTimeout(() => {

                if (event.type === 'wallet') {
                    @this.set('walletStatus', null);
                }

                if (event.type === 'email') {
                    @this.set('emailStatus', null);
                }

                if (event.type === 'telegram') {
                    @this.set('telegramStatus', null);
                }

            }, 15000);
        });
    });
</script>