@extends('layouts.redesigned-user-dashboard-layout')
@section('user-dashboard-content')

     <!-- MAIN CONTENT -->
      <div class="col-lg-9">
        <div class="content-wrapper">

          <!-- PAGE TITLE -->
          <h2 class="section-title-referral">
            <i class="fa-solid fa-users"></i>
            Refer a Friend
          </h2>

          <!-- MAIN INTRO CARD -->
          <div class="card-theme text-center mb-5">
            <h4 class="fw-bold">Give 10% OFF, Get 10% OFF</h4>
            <p class="lead-text mt-2 w-75 mx-auto">
              Introduce friends to our service and both of you will receive 10% OFF when they place their first order.
            </p>

            <div class="divider"></div>

            <p class="lead-text w-75 mx-auto">
              Share your unique referral code or link. Once they make their first purchase,
              you'll receive your reward automatically!
            </p>

            <button class="btn-disabled mt-3">Generate My Code</button>

            <p class="mt-3 fw-semibold text-muted">
              You need to place your first order to become eligible for the referral program.
            </p>

            <p class="mt-2 small text-muted">Referral Link: ————</p>
            <p class="mt-0 small text-muted">Reward Points: 0</p>
          </div>


          <!-- REWARD STATUS SECTION -->
          <h3 class="section-title-referral" style="font-size: 1.4rem;">
            <i class="fa-solid fa-ticket"></i>
            My Referral Rewards
          </h3>

          <div class="card-theme mb-5">
            <p class="lead-text mb-4 text-center">
              Your rewards will appear below once you successfully refer a friend.
            </p>

            <div class="row justify-content-center">
              <div class="col-md-4">
                <div class="reward-card disabled">
                  <p class="fw-bold">REFER10</p>
                  <div class="reward-title">10% OFF</div>
                  <div class="divider"></div>
                  <div class="text-start small ms-2">
                    <p><i class="fa-solid fa-circle-check"></i> Earned</p>
                    <p><i class="fa-solid fa-circle-check"></i> Redeemed</p>
                  </div>
                  <p class="small mt-2 mb-3 text-muted">You have not earned this code yet.</p>
                  <button class="btn-disabled">Generate My Code</button>
                </div>
              </div>
            </div>
          </div>


          <!-- HOW IT WORKS -->
          <h3 class="section-title-referral" style="font-size: 1.4rem;">
            <i class="fa-solid fa-book-open"></i>
            How It Works
          </h3>

          <div class="card-theme">

            <div class="row g-3 justify-content-center">

              <div class="col-md-4">
                <div class="step-card h-100">
                  <img src="assets/refer-1.svg" class="mb-2" height="80" alt="">
                  <a href="#" class="step-link">Share Your Link</a>
                  <p class="lead-text mt-2">Generate your referral code and share it with friends and family.</p>
                </div>
              </div>

              <div class="col-md-4">
                <div class="step-card h-100">
                  <img src="assets/refer-2.svg" class="mb-2" height="80" alt="">
                  <a href="#" class="step-link">Friend Gets 10% OFF</a>
                  <p class="lead-text mt-2">Your friends get 10% OFF their first order with your code.</p>
                </div>
              </div>

              <div class="col-md-4">
                <div class="step-card h-100">
                  <img src="assets/refer-3.svg" class="mb-2" height="80" alt="">
                  <a href="#" class="step-link">Claim Your Reward</a>
                  <p class="lead-text mt-2">Once they checkout, you earn your reward automatically.</p>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>
@endsection