@extends('User.layout')

<style>

    @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Outfit:wght@300;400;500;600;700&display=swap');

    :root{
        --navy-deep:#061330;
        --navy:#0A1F44;
        --navy-light:#13294F;
        --gold:#D4AF37;
        --gold-light:#F4D777;
        --gold-soft:rgba(212,175,55,.16);
        --cream:#F7F1E3;
        --muted:rgba(247,241,227,.58);
        --hairline:rgba(212,175,55,.25);
    }

   
    .o5-wrap{
        position:relative;
        font-family:'Outfit', sans-serif;
        color:var(--cream);
        padding-bottom:10px;
    }



    .o5-wrap > *{ position:relative; z-index:1; }

    /*==============================
        PAGE TITLE
    ===============================*/
    .page-title{
        background:linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
        border:1px solid var(--hairline);
        border-radius:18px;
        padding:26px 30px;
        box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
        overflow:hidden;
        position:relative;
    }

    .page-title::after{
        content:"";
        position:absolute;
        top:-60%;
        right:-10%;
        width:280px;
        height:280px;
        background:radial-gradient(circle, rgba(212,175,55,.18), transparent 70%);
        pointer-events:none;
    }

    .title-icon{
        width:64px;
        height:64px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        background:linear-gradient(135deg,var(--gold-light),var(--gold));
        color:var(--navy-deep);
        font-size:28px;
        box-shadow:0 0 0 6px rgba(212,175,55,.12), 0 10px 22px rgba(212,175,55,.25);
        flex-shrink:0;
        animation:crownFloat 4s ease-in-out infinite;
    }

    @keyframes crownFloat{
        0%,100%{ transform:translateY(0); }
        50%{ transform:translateY(-4px); }
    }

    .title-text{
        font-family:'Fraunces', serif;
        font-size:30px;
        font-weight:600;
        color:#fff;
        margin:0;
        letter-spacing:.3px;
    }

    .title-text span{
        color:var(--gold-light);
        font-style:italic;
        background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
        background-size:200% auto;
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;
        animation:shimmer 3.5s linear infinite;
    }

    @keyframes shimmer{
        0%{ background-position:0% center; }
        100%{ background-position:200% center; }
    }

    .title-sub{
        color:var(--muted);
        letter-spacing:1.2px;
        text-transform:uppercase;
        font-size:11.5px;
        font-weight:500;
        margin-top:3px;
        display:block;
    }

    .about-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        font-weight:600;
        font-family:'Outfit',sans-serif;
        padding:11px 22px;
        border-radius:999px;
        background:linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
        color:var(--navy-deep) !important;
        border:none;
        box-shadow:0 10px 24px rgba(212,175,55,.30);
        transition:transform .25s ease, box-shadow .25s ease;
        white-space:nowrap;
    }

    .about-btn:hover{
        transform:translateY(-2px);
        box-shadow:0 14px 30px rgba(212,175,55,.42);
        color:var(--navy-deep) !important;
    }

    .hand-icon{
        display:inline-block;
        animation:pointHand .8s ease-in-out infinite;
    }

    @keyframes pointHand{
        0%,100%{ transform:translateX(0); }
        50%{ transform:translateX(6px); }
    }

    @media (max-width:767.98px){
        .page-title{ text-align:center; }
        .title-text{ font-size:23px; }
        .title-sub{ margin-top:6px; }
        .about-btn{ margin-top:16px; }
    }

    /*==============================
        MAIN CARD SURFACE
    ===============================*/
    .card{
        border-radius:18px !important;
        background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%) !important;
        border:1px solid var(--hairline);
        padding:26px !important;
        margin-bottom:10px;
        margin-top:16px;
        box-shadow:0 20px 45px rgba(0,0,0,.30);
    }

    @media (max-width:576px){
        .card{ padding:18px !important; }
    }

    /*==============================
        PREMIUM METRIC CARDS
    ===============================*/
    .premium-card{
        position:relative;
        background:linear-gradient(160deg, var(--navy-light) 0%, var(--navy) 100%);
        border-radius:16px;
        border:1px solid var(--hairline);
        padding:30px 26px !important;
        box-shadow:0 8px 22px rgba(0,0,0,.28);
        transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        overflow:hidden;
        opacity:0;
        transform:translateY(16px);
        animation:cardRise .6s ease forwards;
    }

    .row > .col-lg-3:nth-child(1) .premium-card{ animation-delay:.05s; }
    .row > .col-lg-3:nth-child(2) .premium-card{ animation-delay:.18s; }
    .row > .col-lg-3:nth-child(3) .premium-card{ animation-delay:.31s; }
    .row > .col-lg-3:nth-child(4) .premium-card{ animation-delay:.44s; }

    @keyframes cardRise{
        to{ opacity:1; transform:translateY(0); }
    }

    .premium-card::before{
        content:"";
        position:absolute;
        top:0; left:0; right:0;
        height:3px;
        background:linear-gradient(90deg, transparent, var(--gold), transparent);
        opacity:.7;
    }

    .premium-card::after{
        content:"";
        position:absolute;
        width:10px; height:10px;
        top:14px; right:14px;
        border-top:1px solid var(--gold);
        border-right:1px solid var(--gold);
        opacity:.55;
    }

    .premium-card:hover{
        transform:translateY(-6px);
        border-color:var(--gold);
        box-shadow:0 18px 36px rgba(212,175,55,.18), 0 4px 14px rgba(0,0,0,.35);
    }

    .premium-icon{
        width:46px;
        height:46px;
        border-radius:12px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:var(--gold-soft);
        color:var(--gold-light);
        font-size:19px;
        box-shadow:inset 0 0 0 1px rgba(212,175,55,.3);
        transition:transform .3s ease;
    }

    .premium-card:hover .premium-icon{
        transform:scale(1.08) rotate(-4deg);
    }

    .label{
        position:relative;
        color:var(--muted);
        font-weight:600;
        letter-spacing:.4px;
        font-size:13.5px;
        text-transform:uppercase;
        line-height:1.3;
    }

    .premium-card hr{
        border-top:1px solid var(--hairline);
        margin:18px 0 14px;
        opacity:1;
    }

    .value{
        font-family:'Fraunces', serif;
        font-size:24px;
        font-weight:600;
        color:var(--gold-light);
        letter-spacing:.2px;
    }

    .value.small{
        font-size:22px;
    }

    a.value.small{
        font-family:'Outfit', sans-serif;
        font-size:13px;
        font-weight:600;
        color:var(--gold) !important;
        text-decoration:none !important;
        border-bottom:1px solid transparent;
        transition:border-color .25s ease, color .25s ease;
    }

    a.value.small:hover{
        color:var(--gold-light) !important;
        border-color:var(--gold-light);
    }

    .text-gold{ color:var(--gold); }

</style>

@section('content')
<div class="o5-wrap">

    <div class="page-title mb-4">
        <div class="d-flex justify-content-center align-items-center flex-column flex-md-row">

            <!-- Left Section -->
            <div class="d-flex align-items-center w-100">

                <!-- Hide on Mobile -->
                <span class="title-icon me-3 d-none d-md-flex">
                    <i class="ti tabler-crown"></i>
                </span>

                <div>
                    <h3 class="m-0 title-text">
                        Omiga <span>5 Star</span>
                    </h3>

                    <small class="title-sub">
                        Premium Rewards &amp; Income Dashboard
                    </small>
                </div>
            </div>

        </div>
    </div>

    <div class="card mt-3">

       <!-- Top Right Button -->
<div class="w-100 d-flex flex-column flex-md-row justify-content-end gap-2 mb-3">
    <a href="{{ route('geneology_royalty_5star') }}" class="btn btn-submit about-btn">
        <span class="hand-icon">👉🏻</span>
        Geneology&nbsp;Royalty
    </a>

    <a href="{{ route('about_omiga5_star') }}" class="btn btn-submit about-btn">
        <span class="hand-icon">👉🏻</span>
        About&nbsp;Omiga&nbsp;5&nbsp;Star
    </a>
</div>

        <!-- Content -->
        <div class="d-flex align-items-center justify-content-center flex-grow-1">
            <div class="row mt-3 w-100">

                <div class="col-lg-3 col-md-6 mb-3">
                    <div class="premium-card">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="premium-icon me-3">
                                    <i class="ti tabler-star"></i>
                                </span>
                                <div>
                                    <div class="label">Omiga 5 Star<br>Investment</div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between align-items-center mt-1">
                            <h6 class="m-0 value small">₹{{$starpurchase}}</h6>
                            <a href="{{ route('star_investment_report') }}" class="value small">View →</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-3">
                    <div class="premium-card">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="premium-icon me-3">
                                    <i class="ti tabler-star"></i>
                                </span>
                                <div>
                                    <div class="label">Omiga 5 Star<br>Profit</div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between align-items-center mt-1">
                            <h6 class="m-0 value small">₹{{$profitIncome}}</h6>
                            <a href="{{ route('star_profit_report') }}" class="value small">View →</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-3">
                    <div class="premium-card">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="premium-icon me-3">
                                    <i class="ti tabler-star"></i>
                                </span>
                                <div>
                                    <div class="label">Omiga 5 Star<br>Level Income</div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between align-items-center mt-1">
                            <h6 class="m-0 value small">₹{{$levelIncome}}</h6>
                            <a href="{{ route('star_level_income') }}" class="value small">View →</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-3">
                    <div class="premium-card">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="premium-icon me-3">
                                    <i class="ti tabler-star"></i>
                                </span>
                                <div>
                                    <div class="label">Genealogy<br>Royalty</div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between align-items-center mt-1">
                            <h6 class="m-0 value small">₹0</h6>
                            <a href="{{ route('star_geneology') }}" class="value small">View →</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
@endsection