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

        <!-- Bootstrap 5.3.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  :root{
    --tashan-red: #E11313;
    --tashan-red-dark: #A80D0D;
    --tashan-red-darker: #7A0909;
    --tashan-red-light: #FDEAEA;
    --tashan-red-tint: #FBD8D8;
    --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%, rgba(225,19,19,.06), transparent 45%),
      radial-gradient(circle at 100% 10%, rgba(225,19,19,.05), 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, var(--tashan-red), var(--tashan-red-dark));
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 12px;
    padding: .85rem 1rem;
    box-shadow: 0 10px 22px rgba(225,19,19,.32);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .btn-call-now:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(225,19,19,.4);
    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"/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)"/>
  </svg>

  <div class="container position-relative">
    <img src="https://www.tashantv.com/images/tashan-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-315-856-9077</div>
            <div class="text-muted small">Tashan TV &ndash; 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&rsquo;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&rsquo;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 &ndash; 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 &ndash; 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:+13158569077" 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/16479430707" 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-315-856-9077</span> &ndash; we&rsquo;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&ndash;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>

@endsection('content')
@section("meta")
<meta name="robots" content="noindex, nofollow" />
<title>Thank You for Your Order - Tashantv</title>
<meta name="description" content="Thank you for subscribing to Tashantv. Your IPTV subscription is now active. Enjoy seamless streaming of your favorite channels and shows!">
<link rel="canonical" href="{{url('/sign-up-offer-thank-you')}}">

<meta name="author" content="https://tashantv.com/"> 
<meta property="og:site_name" content="Tashantv" /> 
<meta property="og:locale" content="en" />      
<meta property="og:type" content="website" />    
<meta property="og:image:type" content="image/jpeg" />      
<meta property="og:title" content="Thank You for Your Order - Tashantv" />      
<meta property="og:description" content="Thank you for subscribing to Tashantv. Your IPTV subscription is now active. Enjoy seamless streaming of your favorite channels and shows!" />    
<meta property="og:url" content="https://tashantv.com/" />      
<meta property="og:site_name" content="https://tashantv.com/" />
<meta property="og:image" content="https://tashantv.com/images/tashantv.jpg" />
<meta property="og:image:secure_url" content="https://tashantv.com/images/tashantv.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="200" />
<meta property="og:image:alt" content="Thank You for Your Order - Tashantv" />
@endsection