@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.advertise');
@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 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 property="twitter:title" content="{{ @$mTitle }}" />
<meta property="twitter:description" content="{{ @$mDescr }}" />
<meta property="twitter:url" content="{{ @$mUrl }}" />
<meta property="twitter:image" content="{{ @$mImage }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
@endpush
<div>
<section class="brdcrumb">
  <div class="container">
    <ul class="mb-0">
      <li><a href="{{ URL::to('/') }}" class="text-decoration-none text-white" title="Home">होम</a></li>
      <li>{{ $seoData['breadcrumb'] ?: 'Verification Page' }}</li>
    </ul>
  </div>
</section>

<div class="verification-page">
  <div class="container">
    <div class="row justify-content-center mb-4">
      <div class="col-xl-12">
        <div class="verification-header text-center headingfont">
          <h1 class="fw-bold">Project Verification Center</h1>
          <p class="lead">Build investor trust with our comprehensive verification process</p>
        </div>
      </div>

      <!-- Email Verify Card -->
      <div class="col-lg-4" wire:ignore.self>
        <div class="card">
          <div class="card-body text-center p-5">
            <div class="icon-css 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 btn-lg {{ $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" wire:ignore.self>
        <div class="card">
          <div class="card-body text-center p-5">
            <div class="icon-css-red 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 btn-lg {{ $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" wire:ignore.self>
        <div class="card">
          <div class="card-body text-center p-5">
            <div class="icon-css-tele 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 btn-lg {{ $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>

    <!-- Intro / Contact -->
    <div class="row mb-5 align-items-center">
      <div class="col-lg-7">
        <h2 class="section-title">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 class="d-flex gap-3 mt-4 flex-wrap mb-3 mb-sm-0">
          <a href="#process" class="btn btn-primary" title="Submit for Verification">
            <i class="fas fa-circle-check me-2"></i> Submit for Verification
          </a>
          <a href="#benefits" class="btn btn-outline-primary" title="Why Verify?">
            <i class="far fa-circle-question me-2"></i> Why Verify?
          </a>
        </div>
      </div>

      <div class="col-lg-5 mt-3 mt-lg-0">
        <div class="contact-card p-4">
          <h3 class="mb-4">Contact Our Verification Team</h3>

          <div class="d-flex align-items-center mb-3">
            <div class="contact-icon me-3">
              <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">
              <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="noopener noreferrer nofollow">@CryptoPresaleBD</a>
            </div>
          </div>

          <div class="d-flex align-items-center mb-3">
            <div class="contact-icon me-3">
              <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="noopener noreferrer nofollow">@CryptoPresale_admin</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Benefits -->
    <div class="row mb-5" id="benefits">
      <div class="col-12">
        <h3 class="h2 section-title">Why Verification Matters</h3>
      </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"><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"><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"><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>

    <!-- Process -->
    <div class="row mb-5" id="process">
      <div class="col-12">
        <h4 class="h2 section-title">Verification Process</h4>
      </div>

      <div class="col-lg-6">
        <div class="card mb-4 overflow-visible">
          <div class="card-body p-4 step-card">
            <div class="step-number">1</div>
            <p class="h4 fw-bold">Submit Application</p>
            <p>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-4 overflow-visible">
          <div class="card-body p-4 step-card">
            <div class="step-number">2</div>
            <p class="h4 fw-bold">Verification Review</p>
            <p>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">
            <div class="step-number">3</div>
            <p class="h4 fw-bold">Receive Verification</p>
            <p>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">
          <div class="card-header bg-themebg text-white py-3">
            <h5 class="h3 mb-0">Required Documentation</h5>
          </div>
          <div class="card-body p-4">
            <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 pe-3 text-success"></i>
                <div>
                  <p class="h4 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 pe-3 text-success"></i>
                <div>
                  <p class="h4 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 pe-3 text-success"></i>
                <div>
                  <p class="h4 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 pe-3 text-success"></i>
                <div>
                  <p class="h4 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>

    <!-- CTA -->
    <div class="row">
      <div class="col-12">
        <div class="card bg-gradient bg-themebg">
          <div class="card-body p-5 text-center text-white">
            <h6 class="h2 mb-3">Ready to Build Trust?</h6>
            <p class="lead mb-4">Don't wait! Get your project verified today and start building investor confidence.</p>
            <a  href="#benefits" class="btn btn-lg bg-themebg-button" title="Start Verification Now">
              <i class="fas fa-shield-alt me-2"></i> Start Verification Now
            </a>
          </div>
        </div>
      </div>
    </div>
     @if(!empty($seoData['description']))
            <div class=" bg-white py-4 contentview">
              <div class="details-page">
              {!! $seoData['description'] !!}
            </div>
            </div>
            @endif
  </div>
</div>

</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