@push('metadata')
@php
$pageId = $seoData['id'];
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords= $seoData['meta_keywords'];
$mUrl = url()->current();
$mImage = config('constants.official_verification');
@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="{{ @$mImage }}" />
<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::webpageSchema($mTitle ?? null, $mDescr ?? null) !!} --}}
{!! SchemaHelper::getBreadcrumbSchema([
['name' => 'Home', 'url' => url('/')],
['name' => 'Crypto Presale Official Verification', 'url' =>
CommonHelper::makeUrl('verify-official-crypto-presale-team')]
]) !!}
{!! SchemaHelper::getImageObjectSchema($mImage, $mTitle, 1200, 630) !!}
{!! SchemaHelper::aboutPageSchema(['name' => $mTitle,'url' => $mUrl,'description' => $mDescr,'website' => url('/'),'image' => $mImage,'breadcrumb' => $mUrl . '#breadcrumb',]) !!}
@if(!empty($seoData['faq']))
{!! SchemaHelper::getFaqSchema($seoData['faq']) !!}
@endif

{!! SchemaHelper::howToSchema([
'id' => $mUrl,
'name' => $mTitle,
'totalTime' => 'PT20S',
'steps' => [
[
"@type" => "HowToStep",
'name' => 'Official Verification',
'text' => 'Go to the Crypto Presale Official Verification page.',
],
[
"@type" => "HowToStep",
'name' => 'Official Verification',
'text' => 'Search for the platform or handle you want to verify.',
],
[
"@type" => "HowToStep",
'name' => 'Official Verification',
'text' => 'Match it with the official links listed under Official Profiles.',
],[
"@type" => "HowToStep",
'name' => 'Official Verification',
'text' => 'If not found, treat the profile as fake and report it.',
],
],
]) !!}
@endpush

@push('styles')
<style>
    .card {
        border-radius: 15px;
        border: none;
        box-shadow: 0 5px 15px rgb(0 0 0 / .05);
        transition: transform 0.3s
    }

    .card-header {
        border-radius: 15px 15px 0 0 !important;
        font-weight: 700
    }

    .btn-primary {
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        border: 1px solid #1e3c72;
        padding: 10px 25px;
        border-radius: 50px;
        box-shadow: 0 4px 15px rgb(0 0 0 / .1)
    }

    .btn-outline-primary {
        border: 2px solid #1e3c72;
        color: #1e3c72;
        border-radius: 50px;
        padding: 10px 25px
    }

    .step-card {
        padding-left: 60px
    }

    .step-number {
        left: -16px;
        width: 35px;
        height: 35px;
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        font-weight: 700;
    }

    @media (max-width : 576px) {
        .step-number {
            left: -8px;
        }
    }

    .section-title {
        padding-bottom: 10px;
        color: #1e3c72;
        font-size: 32px;
    }

    .section-title:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 70px;
        height: 4px;
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        border-radius: 2px
    }
</style>
@endpush

<div>

    <!-- breadcrumb -->
    <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 ms-2"></i></li>
                <li>{{ $seoData['breadcrumb']  }}</li>
            </ul>
        </div>
    </section>

    <!-- content -->
    <section>
        <div class="container">
            <div class="row justify-content-center mb-4">
                <div class="col-xl-12">
                    <div class="verification-header text-center headingfont">
                        {!! $seoData['top_page_content'] !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- verification cards -->
    <section>
        <div class="container">
            <div class="row">
                <!-- Email Verify Card -->
                <div class="col-lg-4 mb-3" wire:ignore.self>
                    <div class="card">
                        <div class="card-body text-center p-5">
                            <div class="icon-css rounded-circle text-white position-relative text-center z-1 mx-auto mb-3 navy-bg">
                                <i class="fa-regular fa-envelope" title="Mail box"></i>
                            </div>

                            <p class="h2 card-title mb-3">Verify Our Email</p>

                            <div class="mb-4">
                                <div class="form-floating">
                                    <input type="email" class="form-control" id="emailInput"
                                        wire:model.defer='verifyemail' placeholder="Please Enter" />
                                    <label for="emailInput">Email Address</label>
                                </div>
                            </div>

                            <button wire:click="verifyEmail" wire:target="verifyEmail" wire:loading.attr="disabled"
                                class="btn {{ $emailStatus === true ? 'btn-success' : 'btn-primary' }}"
                                id="verifyEmailBtn">
                                <i class="fas fa-circle-check me-2" title="Start Verification"></i>
                                <span wire:loading.remove wire:target="verifyEmail">
                                    @if(is_null($emailStatus))
                                    Start Verification
                                    @elseif($emailStatus === true)
                                    ✅ Email Verified
                                    @else
                                    Start Verification
                                    @endif
                                </span>
                                <span wire:loading wire:target="verifyEmail">
                                    Checking...
                                </span>
                            </button>
                            @if(!is_null($emailStatus))
                            <p class="mt-3 fw-semibold {{ $emailStatus ? 'text-success' : 'text-danger' }}">
                                {{ $emailStatus ? '' : '❌ Email Not Found' }}
                            </p>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Wallet Verify Card -->
                <div class="col-lg-4 mb-3" wire:ignore.self>
                    <div class="card">
                        <div class="card-body text-center p-5">
                            <div class="icon-css-red rounded-circle text-white position-relative text-center z-1 mx-auto mb-3 red-bg">
                                <i class="fas fa-wallet" title="Wallet"></i>
                            </div>

                            <p class="h2 card-title mb-3">Verify Our Wallet</p>

                            <div class="mb-4">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="walletInput"
                                        wire:model.defer='walletAddress' placeholder="Please Enter" />
                                    <label for="walletInput">Wallet Address</label>
                                </div>
                            </div>
                            <button class="btn {{ $walletStatus === true ? 'btn-success' : 'btn-primary' }}"
                                id="verifyWalletBtn" wire:click="verifyWallet" wire:target="verifyWallet"
                                wire:loading.attr="disabled">
                                <i class="fas fa-circle-check me-2" title="Start Verification"></i>

                                <span wire:loading.remove wire:target="verifyWallet">
                                    @if(is_null($walletStatus))
                                    Start Verification
                                    @elseif($walletStatus === true)
                                    ✅ Wallet Verified
                                    @else
                                    Start Verification
                                    @endif
                                </span>

                                <span wire:loading wire:target="verifyWallet">
                                    Checking...
                                </span>
                            </button>

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

                <!-- Telegram Verify Card -->
                <div class="col-lg-4 mb-3" wire:ignore.self>
                    <div class="card">
                        <div class="card-body text-center p-5">
                            <div class="icon-css-tele rounded-circle text-white position-relative text-center z-1 mx-auto mb-3 tele-bg">
                                <i class="far fa-paper-plane" title="Telegram"></i>
                            </div>

                            <p class="h2 card-title mb-3">Verify Our Telegram</p>

                            <div class="mb-4">
                                <div class="form-floating">
                                    <input type="text" class="form-control" wire:model.defer='verifyTelegram'
                                        placeholder="Please Enter" />
                                    <label for="telegramInput">Telegram Address</label>
                                </div>
                            </div>
                            <button class="btn {{ $telegramStatus === true ? 'btn-success' : 'btn-primary' }}"
                                id="verifyTelegramBtn" wire:click="verifyTelegrams" wire:loading.attr="disabled"
                                wire:target="verifyTelegram">
                                <i class="fas fa-circle-check me-2" title="Start Verification"></i>

                                <span wire:loading.remove wire:target="verifyTelegram">
                                    @if(is_null($telegramStatus))
                                    Start Verification
                                    @elseif($telegramStatus === true)
                                    ✅ Verified!
                                    @else
                                    Start Verification
                                    @endif
                                </span>
                                <span wire:loading wire:target="verifyTelegram">
                                    Checking...
                                </span>
                            </button>

                            @if(!is_null($telegramStatus))
                            <p class="mt-1 fw-semibold {{ $telegramStatus ? 'text-success' : 'text-danger' }}">
                                {{ $telegramStatus ? '' : '❌ Telegram Not Found' }}
                            </p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Intro / Contact -->
    <section>
        <div class="container">
            <div class="row mb-5 align-items-center">
                <div class="col-lg-7">
                    <h2 class="section-title position-relative fw-bold">Trusted Blockchain Project Verification</h2>
                    <p>In the competitive blockchain space, establishing trust is essential for success. Our
                        verification service helps you demonstrate your project's legitimacy to potential investors.</p>
                    <p>Our thorough verification process examines your team credentials, project roadmap, and technical
                        specifications to ensure transparency and build investor confidence in your venture.</p>
                </div>

                <div class="col-lg-5 mt-3 mt-lg-0">
                    <div class="contact-card p-4">
                        <h2 class="mb-4">Contact Our Verification Team</h2>
                        <div class="d-flex align-items-center mb-3">
                            <div class="contact-icon me-3 d-flex align-items-center justify-content-center rounded-circle">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <div class="text-white-50">Email</div>
                                <a href="mailto:presale@cryptopresalenews.com" class="text-white text-decoration-none"
                                    title="presale@cryptopresalenews.com">presale@cryptopresalenews.com</a>
                            </div>
                        </div>

                        <div class="d-flex align-items-center mb-3">
                            <div class="contact-icon me-3 d-flex align-items-center justify-content-center rounded-circle">
                                <i class="fab fa-telegram"></i>
                            </div>
                            <div>
                                <div class="text-white-50">Telegram</div>
                                <a href="https://t.me/CryptoPresaleBD" class="text-white text-decoration-none"
                                    title="CryptoPresaleBD" target="_blank"
                                    rel="nofollow noopener noreferrer">@CryptoPresaleBD</a>
                            </div>
                        </div>

                        {{-- <div class="d-flex align-items-center mb-3">
                            <div class="contact-icon me-3 d-flex align-items-center justify-content-center rounded-circle">
                                <i class="fab fa-telegram"></i>
                            </div>
                            <div>
                                <div class="text-white-50">Telegram</div>
                                <a href="https://t.me/CryptoPresale_admin" class="text-white text-decoration-none"
                                    title="CryptoPresale_admin" target="_blank"
                                    rel="nofollow noopener noreferrer">@CryptoPresale_admin</a>
                            </div>
                        </div> --}}
                        
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- why matters -->
    <section>
        <div class="container">
            <!-- Benefits -->
            <div class="row mb-5" id="benefits">
                <div class="col-12">
                    <h2 class="h2 section-title position-relative fw-bold">Why Verification Matters</h2>
                </div>

                <div class="col-md-4">
                    <div class="card h-100 mb-0 border border-muted">
                        <div class="card-body text-center py-4 px-3">
                            <div class="benefit-icon mx-auto mb-3 rounded-3 d-flex align-items-center justify-content-center text-white"><i class="fas fa-handshake" title="Build Trust"></i>
                            </div>
                            <span class="fs-4 fw-bold">Build Trust</span>
                            <p class="mb-0">Show potential investors that your project has been thoroughly vetted by a
                                trusted third party.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mt-3 mt-md-0">
                    <div class="card h-100 mb-0 border border-muted">
                        <div class="card-body text-center py-4 px-3">
                            <div class="benefit-icon mx-auto mb-3 rounded-3 d-flex align-items-center justify-content-center text-white"><i class="fas fa-chart-column"></i></div>
                            <span class="fs-4 fw-bold">Increase Visibility</span>
                            <p class="mb-0">Verified projects receive premium placement on our platform and in
                                promotional materials.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mt-3 mt-md-0">
                    <div class="card h-100 mb-0 border border-muted">
                        <div class="card-body text-center py-4 px-3">
                            <div class="benefit-icon mx-auto mb-3 rounded-3 d-flex align-items-center justify-content-center text-white"><i class="fas fa-circle-check"></i></div>
                            <span class="fs-4 fw-bold">Investor Confidence</span>
                            <p class="mb-0">Investors are more likely to support projects with verified credentials and
                                roadmaps.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- process -->
    <section>
        <div class="container">
            <!-- Process -->
            <div class="row mb-4" id="process">
                <div class="col-12">
                    <h3 class="h2 section-title position-relative fw-bold mb-3">Verification Process</h3>
                </div>

                <div class="col-lg-6">
                    <div class="card mb-2 overflow-visible">
                        <div class="card-body p-4 step-card position-relative">
                            <div class="step-number position-absolute top-0 text-white rounded-circle d-flex align-items-center justify-content-center fs-author">1</div>
                            <p class="h4 fw-bold">Submit Application</p>
                            <p class="mb-0">Complete our online form with details about your project, team, and roadmap.
                                Provide links to your website, whitepaper, and social media channels.</p>
                        </div>
                    </div>

                    <div class="card mb-2 overflow-visible">
                        <div class="card-body p-4 step-card position-relative">
                            <div class="step-number position-absolute top-0 text-white rounded-circle d-flex align-items-center justify-content-center fs-author">2</div>
                            <p class="h4 fw-bold">Verification Review</p>
                            <p class="mb-0">Our team will conduct a thorough examination of your project details, team
                                credentials, and technical specifications.</p>
                        </div>
                    </div>

                    <div class="card mb-0 overflow-visible">
                        <div class="card-body p-4 step-card position-relative">
                            <div class="step-number position-absolute top-0 text-white rounded-circle d-flex align-items-center justify-content-center fs-author">3</div>
                            <p class="h4 fw-bold">Receive Verification</p>
                            <p class="mb-0">Once approved, your project will receive a verification badge and be listed
                                as verified on our platform.</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="card h-100 mb-0">
                        <div class="card-header bg-themebg text-white py-3">
                            <h3 class="h4 fw-bold mb-0">Required Documentation</h3>
                        </div>
                        <div class="card-body p-3">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex align-items-start py-3">
                                    <i class="fas fa-circle-check h2 mb-0 pe-3 text-success"></i>
                                    <div>
                                        <p class="h5 mb-1 fw-bolder">Project Details</p>
                                        <p class="mb-0 text-muted">Comprehensive description and roadmap</p>
                                    </div>
                                </li>

                                <li class="list-group-item d-flex align-items-start py-3">
                                    <i class="fas fa-circle-check h2 mb-0 pe-3 text-success"></i>
                                    <div>
                                        <p class="h5 mb-1 fw-bolder">Team Information</p>
                                        <p class="mb-0 text-muted">Team members with LinkedIn profiles</p>
                                    </div>
                                </li>

                                <li class="list-group-item d-flex align-items-start py-3">
                                    <i class="fas fa-circle-check h2 mb-0 pe-3 text-success"></i>
                                    <div>
                                        <p class="h5 mb-1 fw-bolder">Smart Contract Details</p>
                                        <p class="mb-0 text-muted">Contract address and security audit reports</p>
                                    </div>
                                </li>

                                <li class="list-group-item d-flex align-items-start py-3">
                                    <i class="fas fa-circle-check h2 mb-0 pe-3 text-success"></i>
                                    <div>
                                        <p class="h5 mb-1 fw-bolder">Legal Documentation</p>
                                        <p class="mb-0 text-muted">Company registration and compliance documents</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- cta -->
    <section>
        <div class="container">
            <!-- CTA -->
            <div class="row">
                <div class="col-12">
                    <div class="card bg-gradient bg-themebg">
                        <div class="card-body p-4 text-center text-white">
                            <h2 class="h3 mb-3">Reach the Right Crypto Audience</h2>
                            <p class="fs-15 mb-4">
                                Promote your project, exchange, event, or Web3 service to a highly engaged audience of crypto enthusiasts, traders, and investors. Drive brand awareness, generate quality leads, and maximize your reach with our premium advertising solutions and high-visibility placements.
                            </p>
                            <a href="{{ url('crypto-presale-ico-marketing-campaign') }}" class="btn btn-md bg-themebg-button" title="Advertise With Us">
                                <i class="fas fa-bullhorn me-2"></i> Advertise With Us
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    @if(!empty($seoData['description']))
                        <div class=" bg-white py-4 contentview">
                            <div class="details-page">
                                {!! $seoData['description'] !!}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    @if(!empty($faqs))
    <livewire:faq-section pageType="official-verification" />
    @endif

</div>

@push('scripts')
<script>
function copyToClipboard(button) {
    const parentP = button.closest('p');
    if (!parentP) return;

    const target = parentP.querySelector('[data-copy]');
    if (!target) return;

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

    // Fallback-safe copy logic
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text)
            .then(() => showCheck(button))
            .catch(err => {
                console.warn('Clipboard API failed, using fallback', err);
                fallbackCopy(text, button);
            });
    } else {
        fallbackCopy(text, button);
    }
}

// Fallback using a hidden textarea
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 (err) {
        console.error('Fallback copy failed', err);
    }
    document.body.removeChild(textarea);
}

// Feedback ✔️ icon
function showCheck(button) {
    const originalHTML = button.innerHTML;
    button.innerHTML = '✔️';
    setTimeout(() => button.innerHTML = originalHTML, 1000);
}
</script>
@endpush