@extends('layout')
@section('content')

<main>
        
        <!-- Bootstrap 5.3.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<style>
  :root{
    --tashan-red: #066ca5;
    --tashan-red-dark: #6717cd;
    --tashan-red-darker: #0a8df4;
    --tashan-red-light: #ccc
    --tashan-red-tint: #ccc;
    --tashan-ink: #1A1A1A;
    --tashan-gray: #6C757D;
    --gold: #F0A93D;
  }

  *{ box-sizing: border-box; }

  body{
    font-family: 'Poppins', sans-serif;
    background:
      radial-gradient(circle at 15% 0%, #066ca5, transparent 45%),
      radial-gradient(circle at 100% 10%, #0a8df4, transparent 40%),
      #F6F5F8;
    color: var(--tashan-ink);
  }

  /* ---------- HERO ---------- */
  .hero-band{
    position: relative;
    background: radial-gradient(120% 180% at 50% -30%, #3a0505 0%, var(--tashan-red-darker) 38%, var(--tashan-red-dark) 62%, var(--tashan-red) 100%);
    padding: 3.25rem 0 4.75rem;
    overflow: hidden;
    isolation: isolate;
  }

  .hero-band::before,
  .hero-band::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter: blur(2px);
    opacity:.18;
    background: #fff;
    z-index:-1;
  }
  .hero-band::before{ width:260px; height:260px; top:-90px; left:-70px; }
  .hero-band::after{ width:180px; height:180px; bottom:-60px; right:6%; }

  .hero-band svg.grid-pattern{
    position:absolute; inset:0; width:100%; height:100%; opacity:.08; z-index:-1;
  }

  .logo-mark{
    height: 30px;
    filter: brightness(0) invert(1);
  }

  .check-badge{
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    display:flex; align-items:center; justify-content:center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 8px rgba(255,255,255,.12);
    animation: pop .5s cubic-bezier(.34,1.56,.64,1) both;
  }
  .check-badge i{ color: var(--tashan-red); font-size: 2.1rem; }

  @keyframes pop{
    0%{ transform: scale(0); opacity:0; }
    100%{ transform: scale(1); opacity:1; }
  }

  .page-heading{
    font-weight: 800;
    letter-spacing: .3px;
    font-size: clamp(1.5rem, 3.4vw, 2.5rem);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
  }

  .lead-sub{
    color: rgba(255,255,255,.85);
    font-size: 1.05rem;
  }

  .email-pill{
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    border-radius: 50rem;
    font-weight: 600;
    font-size: .92rem;
  }

  /* ---------- CARDS ---------- */
  .cards-row{
    margin-top: -3.25rem;
  }

  .info-card{
    border: none;
    border-radius: 18px;
    background: #fff;
    height: 100%;
    box-shadow: 0 14px 34px rgba(20,10,10,.09);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
  }
  .info-card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:4px;
    background: linear-gradient(90deg, var(--tashan-red), var(--gold));
  }
  .info-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(20,10,10,.14);
  }

  .card-eyebrow{
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--tashan-red);
    text-transform: uppercase;
  }

  .icon-circle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tashan-red-light), var(--tashan-red-tint));
    color: var(--tashan-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(225,19,19,.15);
  }

  .phone-number{
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .2px;
  }

  .pulse-dot{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background: var(--tashan-red);
    box-shadow: 0 0 0 0 rgba(225,19,19,.5);
    animation: pulse 1.8s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(225,19,19,.45); }
    70%{ box-shadow: 0 0 0 9px rgba(225,19,19,0); }
    100%{ box-shadow: 0 0 0 0 rgba(225,19,19,0); }
  }

  .callback-box{
    background: linear-gradient(135deg, #FFF7E4, #FFEEC4);
    border: 1px solid #FBE4A0;
    border-radius: 12px;
  }

  .offer-box{
    background: linear-gradient(135deg, var(--tashan-red) 0%, var(--tashan-red-dark) 100%);
    border-radius: 12px;
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .offer-box::after{
    content:"";
    position:absolute; top:-30px; right:-30px; width:90px; height:90px; border-radius:50%;
    background: rgba(255,255,255,.12);
  }
  .offer-box .badge-hot{
    background:#fff; color: var(--tashan-red-dark); font-weight:700; font-size:.68rem;
    letter-spacing:.5px; border-radius:50rem; padding:.2rem .6rem;
  }

  /* ---------- STEPS / CTA PANEL ---------- */
  .right-col-panel{
    border: none;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(20,10,10,.07);
  }

  .step-number{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tashan-red), var(--tashan-red-dark));
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(225,19,19,.3);
  }

  .step-item{
    position: relative;
    padding-bottom: 1.75rem;
  }
  .step-item:not(:last-child)::before{
    content:"";
    position: absolute;
    left: 19px;
    top: 38px;
    bottom: -4px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--tashan-red-tint) 0 6px, transparent 6px 12px);
  }

  .step-title{
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 1rem;
  }

  .step-desc{
    color: var(--tashan-gray);
    font-size: .9rem;
  }

  .btn-call-now {
    background: linear-gradient(135deg, #0568a8, #6717cd);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 12px;
    padding: .85rem 1rem;
    box-shadow: 0 10px 22px rgb(4 107 235);
    transition: transform .2s ease, box-shadow .2s ease;
}
  .btn-call-now:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 26px #6717cd);
    color:#fff;
  }

  .btn-whatsapp{
    background: linear-gradient(135deg, #29D96A, #1DA851);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 12px;
    padding: .85rem 1rem;
    box-shadow: 0 10px 22px rgba(37,211,102,.3);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .btn-whatsapp:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(37,211,102,.38);
    color:#fff;
  }

  .fallback-note{
    font-size: .86rem;
    color: var(--tashan-gray);
    background: #FAFAFA;
    border-radius: 10px;
    padding: .65rem .9rem;
  }

  .fallback-note .fw-num{
    color: var(--tashan-red);
    font-weight: 700;
  }

  .badge-card{
    border: 1px solid #F1E7E7;
    border-radius: 12px;
    background: #fff;
    padding: .8rem .9rem;
    font-size: .86rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .65rem;
    height: 100%;
    transition: border-color .2s ease, background .2s ease;
  }
  .badge-card:hover{
    border-color: var(--tashan-red-tint);
    background: var(--tashan-red-light);
  }

  .badge-icon{
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: var(--tashan-red-light);
    color: var(--tashan-red);
    display:flex; align-items:center; justify-content:center;
    font-size: .95rem;
  }

  .section-label{
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--tashan-red);
    margin-bottom: .9rem;
  }

  .divider-soft{
    height:1px;
    background: linear-gradient(90deg, transparent, #EDEDED, transparent);
    margin: 1.75rem 0;
  }

  footer.page-footer{
    color: var(--tashan-gray);
    font-size: .82rem;
  }

  @media (max-width: 767.98px){
    .cards-row{ margin-top: -2.25rem; }
    .hero-band{ padding-bottom: 3.5rem; }
  }
</style>
<!-- ---------- HERO ---------- -->
<div class="hero-band text-center">
  <svg class="grid-pattern" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="grid" width="34" height="34" patternUnits="userSpaceOnUse">
        <path d="M 34 0 L 0 0 0 34" fill="none" stroke="#fff" stroke-width="1"></path>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)"></rect>
  </svg>

  <div class="container position-relative">
    <img src="/images/logo.png" alt="Tashan TV" class="logo-mark mb-4">

    <div class="check-badge">
      <i class="bi bi-check-lg"></i>
    </div>

    <h1 class="page-heading mb-2">Thank You. Your Request Has Been Received</h1>
    <p class="lead-sub mb-3">Our adviser will reach out to you shortly on your registered number.</p>
    <span class="email-pill d-inline-flex align-items-center gap-2 px-3 py-2">
      <i class="bi bi-envelope-fill"></i>
      A copy of this information has been sent to your email
    </span>
  </div>
</div>
<div class="container pb-5">

  <!-- ---------- Three info cards ---------- -->
  <div class="row g-3 cards-row position-relative">
    <div class="col-12 col-md-4">
      <div class="info-card p-4">
        <div class="card-eyebrow mb-3">Expect a call from this number</div>
        <div class="d-flex align-items-center gap-3 mb-3">
          <div class="icon-circle"><i class="bi bi-telephone-fill"></i></div>
          <div>
            <div class="phone-number">+1-403-775-2000</div>
            <div class="text-muted small">VOIS IPTV – Dedicated Support Line</div>
          </div>
        </div>
        <div class="small d-flex align-items-center gap-2" style="color: var(--tashan-red-dark); font-weight:500;">
          <span class="pulse-dot"></span>
          Save this number now so you don’t miss our call
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <div class="info-card p-4">
        <div class="card-eyebrow mb-3">Callback timeline</div>
        <div class="callback-box p-3 d-flex align-items-center gap-3 h-auto">
          <i class="bi bi-clock-history fs-3" style="color:#C98A0A;"></i>
          <div class="small">
            Our advisor will call you within the next <strong>30 minutes</strong>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <div class="info-card p-4">
        <div class="card-eyebrow mb-3">Today’s exclusive offer</div>
        <div class="offer-box p-3 d-flex gap-3">
          <i class="bi bi-gift-fill fs-4"></i>
          <div class="small">
            <span class="badge-hot mb-1 d-inline-block">LIMITED TIME</span><br>
            <strong>Win up to 6 months of free IPTV service.</strong><br>
            Speak with our advisor to claim this offer – available only on this callback.
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ---------- Steps + CTA ---------- -->
  <div class="row g-3 mt-3">
    <div class="col-12 col-lg-6">
      <div class="right-col-panel p-4 h-100">
        <div class="section-label">What happens next</div>

        <div class="step-item d-flex gap-3">
          <div class="step-number">1</div>
          <div>
            <div class="step-title">We review your request</div>
            <div class="step-desc">Our team checks your details and prepares the best plan options for you.</div>
          </div>
        </div>
        <div class="step-item d-flex gap-3">
          <div class="step-number">2</div>
          <div>
            <div class="step-title">Our advisor calls you</div>
            <div class="step-desc">Expect a call from our dedicated number within 1 hour during callback hours.</div>
          </div>
        </div>
        <div class="step-item d-flex gap-3 pb-0">
          <div class="step-number">3</div>
          <div>
            <div class="step-title">We help you choose &amp; activate</div>
            <div class="step-desc">Pick the right plan, confirm your order, and we handle the rest – fast activation guaranteed.</div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-6">
      <div class="right-col-panel p-4 h-100 d-flex flex-column">
        <div class="section-label">Talk to us now</div>

        <div class="row g-2 mb-3">
          <div class="col-6">
            <a href="tel:+4037752000" class="btn btn-call-now w-100 d-flex align-items-center justify-content-center gap-2">
              <i class="bi bi-telephone-fill"></i> Call Now
            </a>
          </div>
          <div class="col-6">
            <a href="https://wa.me/14037752000" class="btn btn-whatsapp w-100 d-flex align-items-center justify-content-center gap-2">
              <i class="bi bi-whatsapp"></i> WhatsApp
            </a>
          </div>
        </div>
        <p class="fallback-note text-center mb-0">
          Missed our call? Just call or WhatsApp us back on
          <span class="fw-num">+1-403-775-2000</span> – we’ll pick up right away.
        </p>

        <div class="divider-soft mt-0 mb-0"></div>

        <div class="row g-2 mt-auto">
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-lightning-charge-fill"></i></span> Fast Activation in 24 Hours</div>
          </div>
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-headset"></i></span> Live Support 6 AM–11 PM</div>
          </div>
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-shield-check"></i></span> 100% Secure Payment</div>
          </div>
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-gear-fill"></i></span> Easy Setup, We Guide You</div>
          </div>
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-file-earmark-text"></i></span> No Contract, Cancel Anytime</div>
          </div>
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-display"></i></span> Works On All Devices</div>
          </div>
        </div>
      </div>
    </div>
  </div>

    </div></main>
<!-- ThankYou -->
<!-- 
<section class="content-area py-5 border-primary border-1 border-top">
    <div class="container">                
        <div class="row">
            <div class="col-sm-12">
                <div class="thankyou-wrapper text-center">
                    <svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4 12.6111L8.92308 17.5L20 6.5" stroke="#00b73b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                    <h1 class="display-4">Thank You!</h1>
                    <p class="fs-5">For Connecting With Us We Will get in touch with you shortly !!!</p>
                    <p class="fs-5">Having trouble? <a href="{{url('/contact')}}" class="text-link">Contact us</a></p>
                    <a class="rounded-3 border-0 text-white btn btn-primary py-2 px-3 fs-6" href="{{url('/main')}}" role="button">Continue to homepage</a>
                </div>
            </div>
        </div>    
    </div>
</section> -->

<!-- /ThankYou -->


@endsection

@section("meta")

<title>Thank you</title>
<meta name="description" content="Thank you" />
<link rel="canonical" href="{{url('/thank-you')}}" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Thank you " />
<meta property="og:description" content="Thank you" />
<meta property="og:url" content="{{url('/')}}" />
<meta property="og:site_name" content="{{url('/')}}" />
<meta property="og:image" content="{{asset('images/request-bc.jpg')}}" />
<meta property="og:image:secure_url" content="{{asset('images/request-bc.jpg')}}" />
<meta property="og:image:width" content="500"/>
<meta property="og:image:height" content="400"/>
<meta property="og:image:alt" content="Thank you" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description"
    content="Thank you" />
<meta name="twitter:title" content="Thank you" />
<meta property="article:author" content="{{url('/')}}" />
<meta property="article:publisher" content="{{url('/')}}" />

    
@endsection

@section("scripts")


@endsection