@extends('layouts.public')
@section('title', config('app.name') . ' – Payment Options')
@section('description', 'Complete your subscription via offline bank transfer. Online payments coming soon.')

@push('styles')
    <style>
        /* ─── PAYMENT WRAPPER ─── */
        .payment-page {
            min-height: calc(100vh - 60px);
            background: var(--bg);
            display: flex;
            flex-direction: column;
        }

        /* ─── HERO ─── */
        .payment-hero {
            background: var(--bg-white);
            border-bottom: 1px solid var(--border);
            padding: 64px 24px 56px;
            text-align: center;
        }

        .payment-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #eff6ff;
            color: var(--blue);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .07em;
            text-transform: uppercase;
            padding: 5px 14px;
            border-radius: 999px;
            margin-bottom: 20px;
            border: 1px solid var(--blue-mid);
        }

        .payment-badge svg {
            width: 14px;
            height: 14px;
        }

        .payment-hero h1 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(1.9rem, 4vw, 2.8rem);
            font-weight: 700;
            letter-spacing: -.03em;
            color: var(--text);
            margin-bottom: 14px;
            line-height: 1.15;
        }

        .payment-hero h1 span {
            color: var(--blue);
        }

        .payment-hero p {
            color: var(--text-muted);
            font-size: 1rem;
            max-width: 500px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /* ─── CONTENT SECTION ─── */
        .payment-content {
            padding: 56px 24px 72px;
            flex: 1;
        }

        .payment-inner {
            max-width: 900px;
            margin: 0 auto;
        }

        .payment-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        /* ─── INFO CARD ─── */
        .info-card {
            background: var(--bg-white);
            border: 1.5px solid var(--border);
            border-radius: 18px;
            padding: 36px 32px;
            position: relative;
            display: flex;
            flex-direction: column;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .info-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
        }

        .card-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: #f0fdf4;
            color: #16a34a;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
        }

        .card-icon svg {
            width: 24px;
            height: 24px;
        }

        .card-icon.blue-icon {
            background: #eff6ff;
            color: var(--blue);
        }

        .info-card h3 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 12px;
            letter-spacing: -.01em;
        }

        .info-card>p {
            color: var(--text-muted);
            font-size: 14px;
            line-height: 1.65;
            margin-bottom: 28px;
        }

        /* ─── BANK DETAILS ─── */
        .bank-details {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 24px;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px dashed var(--border-mid);
        }

        .detail-row:last-child {
            border-bottom: none;
        }

        .detail-row .label {
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 500;
        }

        .detail-row .value {
            font-size: 14px;
            color: var(--text);
            font-weight: 600;
            font-family: 'Space Grotesk', sans-serif;
            text-align: right;
        }

        /* ─── ALERT BOX ─── */
        .alert-box {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 10px;
            padding: 14px 16px;
            margin-top: auto;
        }

        .alert-box svg {
            width: 18px;
            height: 18px;
            color: #d97706;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .alert-box span {
            font-size: 12.5px;
            color: #b45309;
            line-height: 1.5;
            font-weight: 500;
        }

        /* ─── DIVIDER ─── */
        .divider {
            height: 1px;
            background: var(--border);
            border: none;
            margin: 32px 0;
        }

        /* ─── CONTACT SECTION ─── */
        .contact-section h4 {
            font-size: 15px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
        }

        .contact-section p {
            font-size: 13.5px;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 16px;
        }

        .contact-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .contact-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            color: var(--text);
            font-weight: 500;
        }

        .contact-list li svg {
            width: 18px;
            height: 18px;
            color: var(--text-muted);
        }

        .contact-list li a {
            color: var(--blue);
            text-decoration: none;
            transition: color .15s;
        }

        .contact-list li a:hover {
            color: var(--blue-hover);
            text-decoration: underline;
        }

        /* ─── BUTTONS ─── */
        .btn-return {
            display: block;
            width: 100%;
            padding: 13px 20px;
            border-radius: 10px;
            background: var(--bg);
            color: var(--text);
            font-weight: 600;
            font-size: 14px;
            text-align: center;
            text-decoration: none;
            border: 1.5px solid var(--border-mid);
            transition: all .15s ease;
            margin-top: auto;
            font-family: 'Inter', sans-serif;
        }

        .btn-return:hover {
            background: var(--bg-white);
            border-color: var(--text-muted);
        }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 768px) {
            .payment-content {
                padding: 36px 16px 56px;
            }

            .payment-hero {
                padding: 44px 16px 40px;
            }

            .info-card {
                padding: 28px 24px;
            }
        }
    </style>
@endpush

@section('content')
    <div class="payment-page">

        {{-- ── HERO ── --}}
        <div class="payment-hero">
            <div class="payment-badge">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round">
                    <rect x="2" y="5" width="20" height="14" rx="2" ry="2" />
                    <line x1="2" y1="10" x2="22" y2="10" />
                </svg>
                Payment Options
            </div>
            <h1>Complete Your <span>Subscription</span></h1>
            <p>We are configuring our online payment gateways. In the meantime, you can securely activate your plan using
                offline bank transfer.</p>
        </div>

        {{-- ── CONTENT ── --}}
        <div class="payment-content">
            <div class="payment-inner">
                <div class="payment-grid">

                    {{-- ── OFFLINE PAYMENT CARD ── --}}
                    <div class="info-card">
                        <div class="card-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="10" width="18" height="10" rx="2" ry="2" />
                                <path d="M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4" />
                                <line x1="8" y1="14" x2="16" y2="14" />
                            </svg>
                        </div>
                        <h3>Bank Transfer Details</h3>
                        <p>Transfer the precise amount to the account below. Ensure you include your registered email in the
                            transaction reference.</p>

                        <div class="bank-details">
                            <div class="detail-row">
                                <span class="label">Bank Name</span>
                                <span class="value">Commercial Bank</span>
                            </div>
                            <div class="detail-row">
                                <span class="label">Account Name</span>
                                <span class="value">{{ config('app.name', 'LK API') }} (Pvt) Ltd</span>
                            </div>
                            <div class="detail-row">
                                <span class="label">Account Number</span>
                                <span class="value">xxx xxxx xxxxx</span>
                            </div>
                            <div class="detail-row">
                                <span class="label">Branch</span>
                                <span class="value">Colombo Main</span>
                            </div>
                        </div>

                        <div class="alert-box">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10" />
                                <line x1="12" y1="8" x2="12" y2="12" />
                                <line x1="12" y1="16" x2="12.01" y2="16" />
                            </svg>
                            <span>Once the transfer is complete, please email the receipt or slip to our support team for
                                prompt activation.</span>
                        </div>
                    </div>

                    {{-- ── COMING SOON & CONTACT CARD ── --}}
                    <div class="info-card">
                        <div class="card-icon blue-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round">
                                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
                            </svg>
                        </div>
                        <h3>Online Payments Soon</h3>
                        <p>We are actively integrating top-tier payment processing services to provide instant credit and
                            debit card payments soon.</p>

                        <hr class="divider">

                        <div class="contact-section">
                            <h4>Need Immediate Help?</h4>
                            <p>If you have any questions or have just completed a transfer, please contact us:</p>

                            <ul class="contact-list">
                                <li>
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path
                                            d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                                        <polyline points="22,6 12,13 2,6" />
                                    </svg>
                                    <a href="mailto:support@lkapi.lk">support@lkapi.lk</a>
                                </li>
                                <li>
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path
                                            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
                                    </svg>
                                    <a href="tel:+94770000000">+94 77 000 0000</a>
                                </li>
                            </ul>
                        </div>

                        <a href="{{ route('paywall') }}" class="btn-return" style="margin-top: 32px;">
                            Return to Plans
                        </a>
                    </div>

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

    </div>
@endsection