@extends('layouts.static-page')

@section('meta_title', 'Refund Policy')
@section('meta_description', 'Refund policy for BlackSplit subscription orders and related refund handling.')

@push('style')
<style>
    html,
    body {
        background: #fbfbfb;
    }

    .refund-page {
        min-height: 100svh;
        padding: 2.5rem 1rem 3.5rem;
        background: #fbfbfb;
    }

    .refund-shell {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
    }

    .refund-title {
        margin: 0 0 1.5rem;
        text-align: center;
        font-size: clamp(2rem, 4vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: #111111;
        font-weight: 800;
    }

    .refund-intro-card,
    .refund-section {
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    }

    .refund-intro-card,
    .refund-section {
        padding: 1.45rem 1.55rem;
    }

    .refund-intro,
    .refund-section p,
    .refund-section li {
        margin: 0;
        color: #1b1b1b;
        font-size: 0.99rem;
        line-height: 1.7;
    }

    .refund-block {
        margin-top: 1.9rem;
    }

    .refund-block-title {
        margin: 0 0 1rem;
        font-size: 1.15rem;
        font-weight: 800;
        color: #111111;
        line-height: 1.4;
    }

    .refund-section ul {
        margin: 0.9rem 0 0;
        padding-left: 1.35rem;
    }

    .refund-section li + li,
    .refund-section p + p {
        margin-top: 0.8rem;
    }

    .refund-page a {
        color: #ff8c1a;
        font-weight: 700;
        text-decoration: none;
    }

    .refund-page a:hover {
        text-decoration: underline;
    }

    @media (max-width: 575.98px) {
        .refund-page {
            padding: 1.1rem 0.75rem 2.2rem;
        }

        .refund-title {
            margin-bottom: 1.2rem;
        }

        .refund-intro-card,
        .refund-section {
            padding: 1.1rem 1rem;
            border-radius: 16px;
        }
    }
</style>
@endpush

@section('content')
<div class="refund-page">
    <div class="refund-shell">
        <h1 class="refund-title">Refund Policy</h1>

        <section class="refund-intro-card">
            <p class="refund-intro">
                If you encounter a problem with your subscription and do not agree with the solution suggested by
                Customer Service and request a refund, the refund policy is as follows:
            </p>
        </section>

        <section class="refund-block">
            <h2 class="refund-block-title">1. Prepaid Subscription Refund Policy</h2>
            <section class="refund-section">
                <p>Prepaid products:</p>
                <ul>
                    <li>Subscriptions to prepaid products must be made within 48 hours of order creation, and refund requests are supported if the order is in Trail status.</li>
                    <li>Example: An order was created on January 1, 2022, at 8:00 AM. A refund request can be made before January 3, 2022, at 8:00 AM.</li>
                    <li>The order status will be marked as Completed 48 hours after the order was created. Requesting a refund from customer service for personal reasons violates BlackSplit's refund policy and Terms of Use. BlackSplit may block your BlackSplit account depending on the circumstances.</li>
                </ul>
            </section>
        </section>

        <section class="refund-block">
            <h2 class="refund-block-title">2. Refund Policy for Non-Prepaid Subscriptions</h2>
            <section class="refund-section">
                <p>Non-prepaid products:</p>
                <ul>
                    <li>10 days before your subscription expires, your order status will change from Tracking to Completed, and we will no longer accept refund requests.</li>
                    <li>Please ensure your order status is "Trail." Orders with other statuses are not eligible for refunds.</li>
                    <li>Orders with "Refunded" or "Refund Requested" statuses cannot be re-applied for a refund.</li>
                    <li>If you request a refund from customer service for personal reasons after your order has been completed, this is a violation of BlackSplit's refund policy and Terms of Use, and BlackSplit will appropriately block your account.</li>
                </ul>
                <p>
                    Note: After your YouTube subscription is refunded, your account will be removed from the YouTube
                    Premium family group. After your YouTube account is deleted, you will not be able to subscribe to
                    another premium family plan. Please be careful when requesting a refund.
                </p>
            </section>
        </section>

        <section class="refund-block">
            <h2 class="refund-block-title">3. Reseller Refund Policy</h2>
            <section class="refund-section">
                <p>
                    If you need a refund from a reseller, please contact our online customer service. A specialist
                    will contact you and resolve your refund request.
                </p>
            </section>
        </section>

        <section class="refund-block">
            <h2 class="refund-block-title">4. Principles of Refund Amount</h2>
            <section class="refund-section">
                <p>
                    Amount to be refunded = Order amount / Total order period * Remaining order time - Fees required
                    for payment and refund (determined according to the payment and refund policy of each payment
                    channel).
                </p>
                <p>
                    If you have any problems, please contact our online customer service or submit a ticket at
                    https://help.blacksplit.com.
                </p>
                <p>
                    Thank you for your support and understanding, and we hope you have a pleasant service experience
                    at BlackSplit.
                </p>
            </section>
        </section>
    </div>
</div>
@endsection