<?php
//Developer: core tech web designTechnology
//Whatsapp: +2349162671360
//Telegram: @jeditech
include('header.php');
$page_title  = WEB_NAME . " | Boost Social Media";
$page_title2 = "Boost Social";

// Fetch active SMM services — EXACT original query
try {
    $svc_stmt     = $pdo->query("SELECT * FROM smm_services WHERE status = 1 ORDER BY category ASC, name ASC");
    $all_services = $svc_stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $all_services = [];
}

// Group by category
$grouped = [];
foreach ($all_services as $s) {
    $grouped[$s['category']][] = $s;
}
$categories   = array_keys($grouped);
$user_balance = (float)$user['main_balance'];

// ── Detect platform for each category ─────────────────────────
function detectPlatform($cat) {
    $c = strtolower($cat);
    if (strpos($c,'instagram') !== false)                                         return 'Instagram';
    if (strpos($c,'tiktok') !== false || strpos($c,'douyin') !== false)           return 'TikTok';
    if (strpos($c,'youtube') !== false)                                           return 'YouTube';
    if (strpos($c,'facebook') !== false)                                          return 'Facebook';
    if (strpos($c,'twitter') !== false || strpos($c,'(x)') !== false)             return 'Twitter/X';
    if (strpos($c,'telegram') !== false)                                          return 'Telegram';
    if (strpos($c,'spotify') !== false  || strpos($c,'audiomack') !== false
     || strpos($c,'boomplay') !== false || strpos($c,'apple music') !== false
     || strpos($c,'deezer') !== false   || strpos($c,'mixcloud') !== false
     || strpos($c,'itunes') !== false)                                            return 'Music';
    if (strpos($c,'whatsapp') !== false)                                          return 'WhatsApp';
    if (strpos($c,'snapchat') !== false)                                          return 'Snapchat';
    if (strpos($c,'linkedin') !== false)                                          return 'LinkedIn';
    if (strpos($c,'threads') !== false)                                           return 'Threads';
    if (strpos($c,'twitch') !== false || strpos($c,'kick') !== false)             return 'Twitch';
    if (strpos($c,'discord') !== false)                                           return 'Discord';
    if (strpos($c,'website') !== false || strpos($c,'traffic') !== false
     || strpos($c,'google') !== false)                                            return 'Website';
    return 'Other';
}

// Build platform → categories map
$platform_cats = [];
foreach ($categories as $cat) {
    $p = detectPlatform($cat);
    $platform_cats[$p][] = $cat;
}

// Sort platforms — big ones first
$platform_order = ['Instagram','TikTok','YouTube','Facebook','Twitter/X','Telegram',
                   'WhatsApp','Music','Snapchat','Threads','LinkedIn','Twitch','Discord','Website','Other'];
uksort($platform_cats, function($a, $b) use ($platform_order) {
    $ai = array_search($a, $platform_order);
    $bi = array_search($b, $platform_order);
    return ($ai === false ? 99 : $ai) - ($bi === false ? 99 : $bi);
});

// Platform meta
$platform_icons = [
    'Instagram' => 'fa-brands fa-instagram',
    'TikTok'    => 'fa-brands fa-tiktok',
    'YouTube'   => 'fa-brands fa-youtube',
    'Facebook'  => 'fa-brands fa-facebook',
    'Twitter/X' => 'fa-brands fa-x-twitter',
    'Telegram'  => 'fa-brands fa-telegram',
    'WhatsApp'  => 'fa-brands fa-whatsapp',
    'Music'     => 'fa-solid fa-music',
    'Snapchat'  => 'fa-brands fa-snapchat',
    'Threads'   => 'fa-brands fa-threads',
    'LinkedIn'  => 'fa-brands fa-linkedin',
    'Twitch'    => 'fa-brands fa-twitch',
    'Discord'   => 'fa-brands fa-discord',
    'Website'   => 'fa-solid fa-globe',
    'Other'     => 'fa-solid fa-ellipsis',
];
$platform_colors = [
    'Instagram' => '#e1306c','TikTok'    => '#010101','YouTube'   => '#ff0000',
    'Facebook'  => '#1877f2','Twitter/X' => '#14171a','Telegram'  => '#0088cc',
    'WhatsApp'  => '#25d366','Music'     => '#1db954','Snapchat'  => '#fffc00',
    'Threads'   => '#000000','LinkedIn'  => '#0a66c2','Twitch'    => '#9147ff',
    'Discord'   => '#5865f2','Website'   => '#4D148C','Other'     => '#64748b',
];

$platform_keys  = array_keys($platform_cats);
$first_platform = $platform_keys[0] ?? '';
$first_cat      = $platform_cats[$first_platform][0] ?? '';
?>
<title><?php echo htmlspecialchars($page_title); ?></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
/* ─── Animations ─────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0);    }
}
.anim   { opacity:0; animation:fadeUp .45s ease-out forwards; }
.anim-1 { animation-delay:.05s; }
.anim-2 { animation-delay:.12s; }
.anim-3 { animation-delay:.19s; }

/* ─── Hero card ──────────────────────────────────────── */
.boost-hero {
    background: linear-gradient(145deg,#2d0a5e 0%,#3b0f6b 35%,#4D148C 70%,#4D148C 100%);
    border: 1px solid rgba(245,158,11,.18);
    border-radius: 20px; padding: 20px;
    position: relative; overflow: hidden; margin-bottom: 16px;
}
.boost-hero::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(45deg,transparent,transparent 40px,
        rgba(245,158,11,.012) 40px,rgba(245,158,11,.012) 41px);
}
.boost-orb {
    position:absolute; border-radius:50%; filter:blur(55px); pointer-events:none;
    width:200px; height:200px;
    background:radial-gradient(circle,rgba(236,72,153,.18),transparent);
    top:-50px; right:-50px;
}

/* ─── Generic section card ───────────────────────────── */
.boost-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    border-radius: 16px; padding: 18px;
}

/* ─── Step badge ─────────────────────────────────────── */
.step-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:50%;
    background:linear-gradient(135deg,#6b23c2,#4D148C);
    color:white; font-size:.6rem; font-weight:800; flex-shrink:0;
}

/* ─── Platform buttons ───────────────────────────────── */
.plat-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 12px; border-radius:10px;
    border:1.5px solid var(--card-border);
    font-size:.75rem; font-weight:600; cursor:pointer;
    transition:all .15s ease;
    background:var(--btn-bg); color:var(--text-muted);
    white-space:nowrap;
}
.plat-btn.is-active {
    border-color:#6b23c2;
    background:rgba(77,20,140,.10);
    color:#4D148C;
    transform:translateY(-2px);
}
.dark .plat-btn.is-active { background:rgba(77,20,140,.14); color:#7c3aed; }
.plat-btn:hover:not(.is-active) {
    border-color:rgba(77,20,140,.3);
    color:var(--text-primary);
    background:rgba(77,20,140,.04);
}

/* ─── Custom <select> wrapper ────────────────────────── */
.sel-wrap { position:relative; }
.sel-wrap::after {
    content:'\f107'; font-family:'Font Awesome 6 Free'; font-weight:900;
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    pointer-events:none; color:var(--text-muted); font-size:.8rem;
}
.boost-sel {
    width:100%; padding:11px 38px 11px 14px;
    border-radius:10px; border:1.5px solid var(--card-border);
    background:var(--btn-bg); color:var(--hd-title);
    font-size:.85rem; outline:none;
    transition:border-color .2s;
    -webkit-appearance:none; appearance:none;
}
.boost-sel:focus  { border-color:#6b23c2; }
.boost-sel option { padding:8px; }
.boost-sel optgroup { font-weight:700; }

/* Hide options that belong to other platforms */
#categorySelect option[disabled] { display:none; }



/* ─── Info badge row ─────────────────────────────────── */
.info-chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 11px; border-radius:99px; font-size:.68rem; font-weight:600;
    background:var(--btn-bg); border:1px solid var(--card-border);
    color:var(--text-muted);
}

/* ─── Order form inputs ──────────────────────────────── */
.order-inp {
    width:100%; padding:11px 14px; border-radius:10px;
    border:1.5px solid var(--card-border);
    background:var(--btn-bg); color:var(--hd-title);
    font-size:.85rem; outline:none; transition:border-color .2s;
}
.order-inp:focus    { border-color:#6b23c2; }
.order-inp::placeholder { color:var(--hd-sub); }

/* ─── Price breakdown ────────────────────────────────── */
.price-tbl { background:var(--btn-bg); border:1px solid var(--card-border); border-radius:10px; overflow:hidden; }
.price-row { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; }
.price-row + .price-row { border-top:1px solid var(--card-border); }
.price-lbl { font-size:.75rem; color:var(--text-muted); display:flex; align-items:center; gap:5px; }
.price-val { font-family:monospace; font-weight:600; font-size:.78rem; color:var(--text-primary); }
.price-val.green { font-weight:800; font-size:1rem; color:#4D148C; }
.dark .price-val.green { color:#7c3aed; }

/* ─── Two-col layout — stack on mobile ───────────────── */
.boost-grid {
    display:grid;
    grid-template-columns: 1fr;   /* mobile: single column */
    gap: 14px;
    margin-bottom: 14px;
}
@media (min-width: 1024px) {
    .boost-grid { grid-template-columns: 3fr 2fr; }
}

/* ─── Platform scroller on small screens ─────────────── */
.plat-scroll {
    display:flex; flex-wrap:wrap; gap:6px;
    /* allow wrapping so buttons never overflow */
}
</style>

<div class="max-w-5xl mx-auto">

<!-- ─── Hero ──────────────────────────────────────────────────── -->
<div class="boost-hero anim anim-1">
    <div class="boost-orb"></div>
    <div style="position:relative;z-index:1;
                display:flex;flex-wrap:wrap;
                align-items:center;justify-content:space-between;gap:14px;">
        <div>
            <h2 style="font-size:1.1rem;font-weight:800;color:white;
                       margin-bottom:4px;display:flex;align-items:center;gap:8px;">
                <i class="fas fa-rocket" style="color:#f9a8d4;"></i>Boost Social Media
            </h2>
            <p style="color:rgba(255,255,255,.55);font-size:.78rem;max-width:380px;line-height:1.5;">
                Grow your Instagram, TikTok, YouTube, Facebook &amp; more —
                instant delivery, cheapest rates.
            </p>
        </div>
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
            <div style="background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
                        border-radius:12px;padding:10px 16px;text-align:center;">
                <p style="font-size:.6rem;color:rgba(255,255,255,.5);font-weight:700;
                          text-transform:uppercase;letter-spacing:.06em;">Balance</p>
                <p style="font-weight:800;color:white;font-size:.95rem;font-family:monospace;">
                    &#8358;<?php echo number_format($user_balance,2); ?>
                </p>
            </div>
            <a href="my-orders"
               style="background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
                      color:white;font-weight:600;font-size:.78rem;
                      padding:10px 16px;border-radius:10px;text-decoration:none;
                      display:inline-flex;align-items:center;gap:6px;">
                <i class="fas fa-list-check" style="font-size:.7rem;"></i>My Orders
            </a>
        </div>
    </div>
</div>

<?php if (empty($all_services)): ?>
<!-- ─── Empty state ──────────────────────────────────────────── -->
<div class="boost-card anim anim-1" style="text-align:center;padding:40px;">
    <div style="width:56px;height:56px;border-radius:50%;background:rgba(77,20,140,.07);
                display:flex;align-items:center;justify-content:center;margin:0 auto 14px;">
        <i class="fas fa-rocket" style="font-size:1.4rem;color:var(--text-muted);"></i>
    </div>
    <h3 style="font-weight:700;font-size:.95rem;color:var(--text-primary);margin-bottom:6px;">Services Loading</h3>
    <p style="font-size:.78rem;color:var(--text-muted);">SMM services are being synced. Check back shortly.</p>
</div>

<?php else: ?>

<!-- ─── STEP 1 : Platform ─────────────────────────────────────── -->
<div class="boost-card anim anim-1" style="margin-bottom:14px;">
    <p style="font-size:.68rem;font-weight:700;color:var(--text-muted);
              text-transform:uppercase;letter-spacing:.1em;
              margin-bottom:12px;display:flex;align-items:center;gap:7px;">
        <span class="step-num">1</span>Choose Platform
    </p>
    <div class="plat-scroll" id="platformGrid">
        <?php $pi = 0; foreach ($platform_cats as $platform => $pcats):
            $icon  = $platform_icons[$platform]  ?? 'fa-solid fa-star';
            $color = $platform_colors[$platform] ?? '#64748b';
        ?>
        <button onclick="selectPlatform('<?php echo htmlspecialchars($platform,ENT_QUOTES); ?>')"
                data-platform="<?php echo htmlspecialchars($platform,ENT_QUOTES); ?>"
                class="plat-btn <?php echo ($pi===0)?'is-active':''; ?>">
            <span style="width:20px;height:20px;border-radius:5px;
                         background:<?php echo $color; ?>;
                         display:inline-flex;align-items:center;justify-content:center;
                         flex-shrink:0;">
                <i class="<?php echo $icon; ?> text-white" style="font-size:.6rem;"></i>
            </span>
            <?php echo htmlspecialchars($platform); ?>
            <span style="font-size:.6rem;opacity:.6;font-weight:700;"><?php echo count($pcats); ?></span>
        </button>
        <?php $pi++; endforeach; ?>
    </div>
</div>

<!-- ─── STEPS 2 + 3  +  ORDER FORM ───────────────────────────── -->
<div class="boost-grid">

    <!-- Left col : Category + Service selects ─────────────────── -->
    <div style="display:flex;flex-direction:column;gap:14px;">

        <!-- Step 2 : Category -->
        <div class="boost-card anim anim-2">
            <label style="display:flex;align-items:center;gap:7px;
                          font-size:.68rem;font-weight:700;color:var(--text-muted);
                          text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;">
                <span class="step-num">2</span>Select Category
            </label>
            <div class="sel-wrap">
                <select id="categorySelect" class="boost-sel" onchange="onCategoryChange()">
                    <?php foreach ($platform_cats as $platform => $pcats): ?>
                    <optgroup label="——— <?php echo htmlspecialchars($platform); ?> ———">
                        <?php foreach ($pcats as $cat): ?>
                        <option value="<?php echo htmlspecialchars($cat,ENT_QUOTES); ?>"
                                data-platform="<?php echo htmlspecialchars(detectPlatform($cat),ENT_QUOTES); ?>">
                            <?php echo htmlspecialchars($cat); ?>
                        </option>
                        <?php endforeach; ?>
                    </optgroup>
                    <?php endforeach; ?>
                </select>
            </div>
            <p style="font-size:.7rem;color:var(--text-muted);margin-top:7px;">
                <i class="fas fa-list-ul mr-1" style="color:#4D148C;font-size:.65rem;"></i>
                <span id="catSvcCount">0</span> services in this category
            </p>
        </div>

        <!-- Step 3 : Service -->
        <div class="boost-card anim anim-2">
            <label style="display:flex;align-items:center;gap:7px;
                          font-size:.68rem;font-weight:700;color:var(--text-muted);
                          text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;">
                <span class="step-num">3</span>Select Service
            </label>
            <!-- NOTE: keeping original <select multiple> approach — data-* values
                 are written directly from PHP with no intermediate encoding,
                 so parseFloat/parseInt on them is safe.
                 The column names MUST match the database: our_rate, min_quantity, max_quantity. -->
            <div class="sel-wrap">
                <select id="serviceSelect" class="boost-sel"
                        onchange="onServiceSelect()">
                    <?php foreach ($grouped as $cat => $services): ?>
                    <optgroup label="&#9658; <?php echo htmlspecialchars($cat); ?>"
                              data-category="<?php echo htmlspecialchars($cat,ENT_QUOTES); ?>">
                        <?php foreach ($services as $s): ?>
                        <option value="<?php echo (int)$s['id']; ?>"
                                data-category="<?php echo htmlspecialchars($s['category'],ENT_QUOTES); ?>"
                                data-platform="<?php echo htmlspecialchars(detectPlatform($s['category']),ENT_QUOTES); ?>"
                                data-name="<?php echo htmlspecialchars($s['name'],ENT_QUOTES); ?>"
                                data-rate="<?php echo (float)$s['our_rate']; ?>"
                                data-min="<?php echo (int)$s['min_quantity']; ?>"
                                data-max="<?php echo (int)$s['max_quantity']; ?>"
                                data-refill="<?php echo $s['refill']; ?>"
                                data-cancel="<?php echo $s['cancel']; ?>"
                                data-type="<?php echo htmlspecialchars($s['type'],ENT_QUOTES); ?>">
                            <?php echo htmlspecialchars($s['name']); ?> — &#8358;<?php echo number_format((float)$s['our_rate'],2); ?>/1K
                        </option>
                        <?php endforeach; ?>
                    </optgroup>
                    <?php endforeach; ?>
                </select>
            </div>
            <p style="font-size:.7rem;color:var(--text-muted);margin-top:7px;">
                <i class="fas fa-info-circle mr-1" style="color:#4D148C;font-size:.65rem;"></i>
                Click a service to view details and pricing
            </p>
        </div>

        <!-- Service info card (appears after selection) -->
        <div id="serviceInfoCard" class="hidden boost-card anim anim-2"
             style="background:rgba(77,20,140,.04);border-color:rgba(77,20,140,.18);">
            <p style="font-weight:700;font-size:.82rem;color:var(--text-primary);margin-bottom:10px;"
               id="info_name">—</p>
            <div style="display:flex;flex-wrap:wrap;gap:6px;">
                <span class="info-chip">
                    <i class="fas fa-arrow-down-to-line" style="color:#4D148C;font-size:.6rem;"></i>
                    Min: <strong id="info_min">—</strong>
                </span>
                <span class="info-chip">
                    <i class="fas fa-arrow-up-from-line" style="color:#4D148C;font-size:.6rem;"></i>
                    Max: <strong id="info_max">—</strong>
                </span>
                <span class="info-chip">
                    <i class="fas fa-tag" style="color:#4D148C;font-size:.6rem;"></i>
                    <strong id="info_type">—</strong>
                </span>
                <span id="info_refill_badge" class="hidden info-chip"
                      style="background:rgba(77,20,140,.1);border-color:rgba(77,20,140,.2);color:#4D148C;">
                    <i class="fas fa-rotate-right" style="font-size:.6rem;"></i>Refill Guaranteed
                </span>
                <span id="info_cancel_badge" class="hidden info-chip"
                      style="background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2);color:#d97706;">
                    <i class="fas fa-ban" style="font-size:.6rem;"></i>Cancellable
                </span>
            </div>
        </div>

    </div><!-- /left col -->

    <!-- Right col : Order form ────────────────────────────────── -->
    <div>
        <div class="boost-card anim anim-3" style="position:sticky;top:80px;">
            <p style="font-weight:700;font-size:.88rem;color:var(--text-primary);
                      margin-bottom:16px;display:flex;align-items:center;gap:7px;">
                <span class="step-num">4</span>Order Details
            </p>

            <div style="display:flex;flex-direction:column;gap:12px;">

                <!-- Link -->
<div>
    <label style="display:block;font-size:.75rem;font-weight:600;
                  color:var(--text-muted);margin-bottom:5px;">
        Link / URL <span style="color:#ef4444;">*</span>
    </label>
    <input type="url" id="orderLink"
           placeholder="https://instagram.com/yourpage"
           class="order-inp">
    <!-- Dynamic link guide box -->
    <div id="linkGuideBox" class="hidden"
         style="margin-top:8px;padding:10px 13px;
                border-radius:10px;
                background:rgba(77,20,140,.05);
                border:1px solid rgba(77,20,140,.15);
                font-size:.72rem;line-height:1.6;">
        <p id="linkGuideText" style="color:var(--text-primary);margin:0 0 4px 0;">
            📌 Paste the direct link related to this service.
        </p>
        <p id="linkExampleText"
           style="color:var(--text-muted);margin:0;font-family:monospace;font-size:.68rem;
                  word-break:break-all;">
            Example: https://instagram.com/yourpage
        </p>
    </div>
</div>

                <!-- Quantity -->
                <div>
                    <label style="display:block;font-size:.75rem;font-weight:600;
                                  color:var(--text-muted);margin-bottom:5px;">
                        Quantity <span style="color:#ef4444;">*</span>
                    </label>
                    <input type="number" id="orderQuantity"
                           placeholder="Enter quantity"
                           oninput="calcCharge()"
                           class="order-inp" style="font-family:monospace;">
                    <p id="qty_hint"
                       style="font-size:.68rem;color:var(--text-muted);margin-top:4px;"></p>
                </div>

                <!-- Price table -->
                <div class="price-tbl">
                    <div class="price-row">
                        <span class="price-lbl">
                            <i class="fas fa-tag" style="font-size:.65rem;"></i>Rate
                        </span>
                        <span class="price-val" id="preview_rate">—</span>
                    </div>
                    <div class="price-row">
                        <span class="price-lbl">
                            <i class="fas fa-receipt" style="font-size:.65rem;"></i>Total Charge
                        </span>
                        <span class="price-val green" id="preview_charge">&#8358;0.00</span>
                    </div>
                    <div class="price-row">
                        <span class="price-lbl">
                            <i class="fas fa-wallet" style="font-size:.65rem;"></i>Your Balance
                        </span>
                        <span class="price-val">&#8358;<?php echo number_format($user_balance,2); ?></span>
                    </div>
                </div>

                <!-- Submit -->
                <button onclick="submitOrder()" id="submitOrderBtn"
                        style="width:100%;
                               background:linear-gradient(135deg,#4D148C,#6b23c2);
                               color:white;font-weight:700;padding:13px;
                               border-radius:10px;border:none;cursor:pointer;
                               font-size:.88rem;
                               display:flex;align-items:center;justify-content:center;gap:8px;
                               box-shadow:0 4px 14px rgba(77,20,140,.28);
                               transition:all .2s;">
                    <i class="fas fa-rocket"></i>Place Order
                </button>

                <a href="fund-wallet"
                   style="display:block;text-align:center;
                          font-size:.72rem;color:var(--text-muted);text-decoration:none;">
                    <i class="fas fa-wallet mr-1"></i>Need more balance? Fund your wallet
                </a>
            </div>
        </div>
    </div><!-- /right col -->

</div><!-- /boost-grid -->
<?php endif; ?>

</div><!-- /max-w -->

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
/* ─────────────────────────────────────────────────────────────────
   IMPORTANT: This JS is the ORIGINAL working logic from the source
   file, unchanged except for confirmButtonColor → green.
   Column names used in data-* attributes:
     data-rate   → $s['our_rate']
     data-min    → $s['min_quantity']
     data-max    → $s['max_quantity']
   These MUST match the PHP above.
───────────────────────────────────────────────────────────────── */
const userBalance  = <?php echo $user_balance; ?>;
const platformCats = <?php echo json_encode($platform_cats); ?>;

// Pre-build category → service count map
const catSvcCounts = {};
<?php foreach ($grouped as $cat => $svcs): ?>
catSvcCounts[<?php echo json_encode($cat); ?>] = <?php echo count($svcs); ?>;
<?php endforeach; ?>

let selectedService = null;
let activePlatform  = <?php echo json_encode($first_platform); ?>;
let activeCategory  = <?php echo json_encode($first_cat); ?>;

/* ─────────────────────────────────────────────────────────────────
   LINK GUIDE SYSTEM — determines placeholder, example URL, and
   description based on platform + service name keywords.
───────────────────────────────────────────────────────────────── */
function getLinkGuide(platform, serviceName) {
    var name = (serviceName || '').toLowerCase();

    // ─── Detect action type from service name ───
    var isFollower    = /follower|subscribe|subscriber|member|channel member/i.test(name);
    var isLike        = /\blike\b/i.test(name) && !/comment\s*like/i.test(name) && !/live/i.test(name);
    var isCommentLike = /comment\s*(like|dislike)/i.test(name);
    var isComment     = /comment|review/i.test(name) && !isCommentLike;
    var isView        = /\bview\b|\bviews\b|\breach\b|\bimpression/i.test(name) && !/live/i.test(name) && !/story/i.test(name) && !/profile\s*visit/i.test(name);
    var isShare       = /\bshare\b|\brepost\b|\bretw/i.test(name);
    var isSave        = /\bsave\b|\bsaves\b/i.test(name);
    var isStory       = /\bstory\b|\bstories\b/i.test(name);
    var isLive        = /\blive\b.*\b(stream|viewer|view|like|comment|chat)/i.test(name) || /livestream/i.test(name);
    var isPK          = /\bpk\b.*\bbattle\b/i.test(name);
    var isReels       = /\breel\b|\breels\b/i.test(name);
    var isShort       = /\bshort\b|\bshorts\b/i.test(name);
    var isProfileVisit= /profile\s*visit/i.test(name);
    var isAutoPost    = /\bauto\b/i.test(name);
    var isVote        = /\bvote\b|\bpoll\b/i.test(name);
    var isReaction    = /\breaction\b/i.test(name);
    var isStoryView   = isStory && (isView || /view/i.test(name));
    var isStoryLike   = isStory && /like/i.test(name);
    var isWatchTime   = /watch\s*time|monetization|60k\s*min/i.test(name);
    var isTraffic     = /traffic|website|google.*visitor/i.test(name);
    var isTrend       = /trend/i.test(name);
    var isPremiumSub  = /premium\s*subscription/i.test(name);
    var isStar        = /premium\s*star/i.test(name);
    var isPlaylistPlay= /playlist\s*play/i.test(name);
    var isAlbumPlay   = /album\s*play/i.test(name);
    var isTrackPlay   = /track\s*play/i.test(name) || /power\s*play/i.test(name);
    var isMonthlyListener = /monthly\s*listener/i.test(name);
    var isSpotifyFollow = /spotify.*follow/i.test(name);
    var isGroupMember = /group\s*member/i.test(name);
    var isCommunity   = /community/i.test(name);
    var isEvent       = /event/i.test(name);

    // Default fallback
    var result = {
        placeholder: 'https://example.com/your-link',
        example:     'https://example.com/your-link',
        guide:       'Paste the direct link related to this service.'
    };

    // ─── INSTAGRAM ──────────────────────────────────────────
    if (platform === 'Instagram') {
        if (isStoryView || isStoryLike || (isStory)) {
            result.placeholder = 'https://www.instagram.com/yourusername';
            result.example     = 'https://www.instagram.com/yourusername';
            result.guide       = '📸 Enter your Instagram <strong>profile link</strong>. Story views/likes will be applied to your active stories.';
        } else if (isFollower) {
            result.placeholder = 'https://www.instagram.com/yourusername';
            result.example     = 'https://www.instagram.com/yourusername';
            result.guide       = '👥 Enter your Instagram <strong>profile link</strong>. New followers will be added to this account.';
        } else if (isReels || (isView && /reel/i.test(name))) {
            result.placeholder = 'https://www.instagram.com/reel/ABC123xyz/';
            result.example     = 'https://www.instagram.com/reel/DWhYOvUjELt/';
            result.guide       = '🎬 Enter the <strong>Instagram Reel link</strong>. Open the reel → tap Share → Copy Link.';
        } else if (isLike || isComment || isCommentLike || isSave || isShare || isView || isProfileVisit) {
            result.placeholder = 'https://www.instagram.com/p/ABC123xyz/';
            result.example     = 'https://www.instagram.com/p/DWhYOvUjELt/?img_index=1';
            if (isLike) {
                result.guide   = '❤️ Enter your Instagram <strong>post link</strong>. Open the post → tap ⋯ → Copy Link.';
            } else if (isComment) {
                result.guide   = '💬 Enter your Instagram <strong>post link</strong>. Comments will appear on this post.';
            } else if (isCommentLike) {
                result.guide   = '👍 Enter the Instagram <strong>post link</strong> containing the comment you want likes on.';
            } else if (isSave) {
                result.guide   = '🔖 Enter your Instagram <strong>post link</strong>. Saves will be added to this post.';
            } else if (isShare || /repost/i.test(name)) {
                result.guide   = '↗️ Enter your Instagram <strong>post link</strong>. Shares/reposts will be applied to this post.';
            } else if (isProfileVisit) {
                result.guide   = '👁️ Enter your Instagram <strong>post link</strong>. Profile visits will be generated from this post.';
            } else if (isView) {
                result.guide   = '👀 Enter your Instagram <strong>post or video link</strong>. Views will be delivered to this content.';
            } else {
                result.guide   = '📌 Enter your Instagram <strong>post link</strong>. Open the post → tap ⋯ → Copy Link.';
            }
        } else if (isAutoPost) {
            result.placeholder = 'https://www.instagram.com/yourusername';
            result.example     = 'https://www.instagram.com/yourusername';
            result.guide       = '🔄 Enter your Instagram <strong>profile link</strong>. Auto services apply to your future posts.';
        } else {
            result.placeholder = 'https://www.instagram.com/yourusername';
            result.example     = 'https://www.instagram.com/yourusername';
            result.guide       = '📌 Enter your Instagram <strong>profile or post link</strong> depending on the service.';
        }
    }

    // ─── TIKTOK ─────────────────────────────────────────────
    else if (platform === 'TikTok') {
        if (isLive || isPK) {
            result.placeholder = 'https://www.tiktok.com/@yourusername/live';
            result.example     = 'https://www.tiktok.com/@username/live';
            if (isPK) {
                result.guide   = '🏆 Enter your TikTok <strong>live stream link</strong>. PK Battle points will be sent during your live.';
            } else {
                result.guide   = '🔴 Enter your TikTok <strong>live stream link</strong>. You must be live when placing this order.';
            }
        } else if (isFollower) {
            result.placeholder = 'https://www.tiktok.com/@yourusername';
            result.example     = 'https://www.tiktok.com/@username';
            result.guide       = '👥 Enter your TikTok <strong>profile link</strong>. New followers will be added to this account.';
        } else if (isStory || isStoryLike || isStoryView) {
            result.placeholder = 'https://www.tiktok.com/@yourusername';
            result.example     = 'https://www.tiktok.com/@username';
            result.guide       = '📖 Enter your TikTok <strong>profile link</strong>. Story likes/views will apply to your active story.';
        } else if (isLike || isComment || isCommentLike || isView || isShare || isSave || isReels) {
            result.placeholder = 'https://www.tiktok.com/@username/video/1234567890';
            result.example     = 'https://www.tiktok.com/@username/video/7388920347126531';
            if (isLike) {
                result.guide   = '❤️ Enter your TikTok <strong>video link</strong>. Open the video → tap Share → Copy Link.';
            } else if (isComment) {
                result.guide   = '💬 Enter your TikTok <strong>video link</strong>. Comments will appear on this video.';
            } else if (isCommentLike) {
                result.guide   = '👍 Enter the TikTok <strong>video link</strong> containing the comment you want likes/dislikes on.';
            } else if (isView) {
                result.guide   = '👀 Enter your TikTok <strong>video link</strong>. Views will be delivered to this video.';
            } else if (isShare) {
                result.guide   = '🔀 Enter your TikTok <strong>video link</strong>. Shares will be added to this video.';
            } else if (isSave) {
                result.guide   = '🔖 Enter your TikTok <strong>video link</strong>. Saves/bookmarks will be added.';
            } else {
                result.guide   = '📌 Enter your TikTok <strong>video link</strong>.';
            }
        } else {
            result.placeholder = 'https://www.tiktok.com/@yourusername';
            result.example     = 'https://www.tiktok.com/@username';
            result.guide       = '📌 Enter your TikTok <strong>profile or video link</strong> depending on the service.';
        }
    }

    // ─── YOUTUBE ─────────────────────────────────────────────
    else if (platform === 'YouTube') {
        if (isFollower || /subscrib/i.test(name)) {
            result.placeholder = 'https://www.youtube.com/@yourchannel';
            result.example     = 'https://www.youtube.com/@MrBeast';
            result.guide       = '👥 Enter your YouTube <strong>channel link</strong>. Subscribers will be added to this channel.';
        } else if (isShort) {
            result.placeholder = 'https://www.youtube.com/shorts/VIDEO_ID';
            result.example     = 'https://www.youtube.com/shorts/dQw4w9WgXcQ';
            result.guide       = '📱 Enter your YouTube <strong>Shorts link</strong>. Open the Short → tap Share → Copy Link.';
        } else if (isWatchTime) {
            result.placeholder = 'https://www.youtube.com/watch?v=VIDEO_ID';
            result.example     = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
            result.guide       = '⏱️ Enter your YouTube <strong>video link</strong>. Watch time minutes will be generated on this video.';
        } else if (isLike || isComment || isCommentLike || isView) {
            result.placeholder = 'https://www.youtube.com/watch?v=VIDEO_ID';
            result.example     = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
            if (isLike) {
                result.guide   = '👍 Enter your YouTube <strong>video link</strong>. Likes will be added to this video.';
            } else if (isComment) {
                result.guide   = '💬 Enter your YouTube <strong>video link</strong>. Comments will appear on this video.';
            } else if (isCommentLike) {
                result.guide   = '👍 Enter the YouTube <strong>video link</strong> containing the comment you want likes on.';
            } else {
                result.guide   = '👀 Enter your YouTube <strong>video link</strong>. Views will be delivered to this video.';
            }
        } else if (isShare) {
            result.placeholder = 'https://www.youtube.com/watch?v=VIDEO_ID';
            result.example     = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
            result.guide       = '↗️ Enter your YouTube <strong>video link</strong>.';
        } else {
            result.placeholder = 'https://www.youtube.com/watch?v=VIDEO_ID';
            result.example     = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
            result.guide       = '📌 Enter your YouTube <strong>video or channel link</strong> depending on the service.';
        }
    }

    // ─── FACEBOOK ────────────────────────────────────────────
    else if (platform === 'Facebook') {
        if (isFollower && !isGroupMember) {
            result.placeholder = 'https://www.facebook.com/yourpage';
            result.example     = 'https://www.facebook.com/yourpage';
            result.guide       = '👥 Enter your Facebook <strong>page or profile link</strong>. Followers will be added to this account.';
        } else if (isGroupMember) {
            result.placeholder = 'https://www.facebook.com/groups/yourgroupid';
            result.example     = 'https://www.facebook.com/groups/123456789';
            result.guide       = '👥 Enter your Facebook <strong>group link</strong>. Members will be added to this group.';
        } else if (isEvent) {
            result.placeholder = 'https://www.facebook.com/events/EVENT_ID';
            result.example     = 'https://www.facebook.com/events/123456789';
            result.guide       = '📅 Enter your Facebook <strong>event link</strong>. Interested/going responses will be added.';
        } else if (isWatchTime) {
            result.placeholder = 'https://www.facebook.com/watch/?v=VIDEO_ID';
            result.example     = 'https://www.facebook.com/watch/?v=123456789';
            result.guide       = '⏱️ Enter your Facebook <strong>video link</strong>. Watch time minutes will be generated.';
        } else if (/page\s*review/i.test(name)) {
            result.placeholder = 'https://www.facebook.com/yourpage';
            result.example     = 'https://www.facebook.com/yourpage';
            result.guide       = '⭐ Enter your Facebook <strong>page link</strong>. Reviews will be posted on this page.';
        } else if (isStory) {
            result.placeholder = 'https://www.facebook.com/yourprofile';
            result.example     = 'https://www.facebook.com/yourprofile';
            result.guide       = '📖 Enter your Facebook <strong>profile link</strong>. Story views will apply to your active stories.';
        } else if (isLike || isComment || isView || isShare || isReels) {
            result.placeholder = 'https://www.facebook.com/yourpage/posts/POST_ID';
            result.example     = 'https://www.facebook.com/yourpage/posts/123456789';
            if (isLike) {
                result.guide   = '❤️ Enter your Facebook <strong>post link</strong>. Likes/reactions will be added.';
            } else if (isComment) {
                result.guide   = '💬 Enter your Facebook <strong>post link</strong>. Comments will appear on this post.';
            } else if (isView) {
                result.guide   = '👀 Enter your Facebook <strong>video/reel link</strong>. Views will be delivered.';
            } else if (isShare) {
                result.guide   = '↗️ Enter your Facebook <strong>post link</strong>. Shares will be added.';
            } else {
                result.guide   = '📌 Enter your Facebook <strong>post link</strong>.';
            }
        } else {
            result.placeholder = 'https://www.facebook.com/yourpage';
            result.example     = 'https://www.facebook.com/yourpage';
            result.guide       = '📌 Enter your Facebook <strong>page, post, or video link</strong> depending on the service.';
        }
    }

    // ─── TWITTER / X ─────────────────────────────────────────
    else if (platform === 'Twitter/X') {
        if (isFollower || isCommunity) {
            result.placeholder = 'https://x.com/yourusername';
            result.example     = 'https://x.com/elonmusk';
            if (isCommunity) {
                result.guide   = '👥 Enter your Twitter/X <strong>community link</strong>.';
            } else {
                result.guide   = '👥 Enter your Twitter/X <strong>profile link</strong>. Followers will be added to this account.';
            }
        } else if (isTrend) {
            result.placeholder = 'Enter your hashtag or keyword';
            result.example     = '#YourHashtag';
            result.guide       = '📈 Enter the <strong>hashtag or keyword</strong> you want to trend. Do NOT include a URL.';
        } else if (isLike || isComment || isView || /retweet/i.test(name) || isShare) {
            result.placeholder = 'https://x.com/username/status/1234567890';
            result.example     = 'https://x.com/elonmusk/status/1780000000000000000';
            if (isLike) {
                result.guide   = '❤️ Enter the <strong>tweet link</strong>. Likes will be added to this tweet.';
            } else if (isComment) {
                result.guide   = '💬 Enter the <strong>tweet link</strong>. Replies/comments will appear on this tweet.';
            } else if (isView) {
                result.guide   = '👀 Enter the <strong>tweet link</strong>. Views will be delivered to this tweet.';
            } else {
                result.guide   = '🔁 Enter the <strong>tweet link</strong>. Retweets/reposts will be added.';
            }
        } else {
            result.placeholder = 'https://x.com/yourusername';
            result.example     = 'https://x.com/elonmusk';
            result.guide       = '📌 Enter your Twitter/X <strong>profile or tweet link</strong> depending on the service.';
        }
    }

    // ─── TELEGRAM ────────────────────────────────────────────
    else if (platform === 'Telegram') {
        if (isVote || isReaction) {
            result.placeholder = 'https://t.me/yourchannel/POST_ID';
            result.example     = 'https://t.me/yourchannel/123';
            result.guide       = '🗳️ Enter the <strong>Telegram post link</strong> containing the poll or post you want votes/reactions on.';
        } else if (isView || isStar) {
            result.placeholder = 'https://t.me/yourchannel/POST_ID';
            result.example     = 'https://t.me/yourchannel/123';
            result.guide       = '👀 Enter the <strong>Telegram post link</strong>. Views will be delivered to this post.';
        } else if (isStory) {
            result.placeholder = 'https://t.me/yourchannel';
            result.example     = 'https://t.me/yourchannel';
            result.guide       = '📖 Enter your <strong>Telegram channel/username link</strong>. Story views will apply.';
        } else if (isFollower || /member/i.test(name)) {
            result.placeholder = 'https://t.me/yourchannel';
            result.example     = 'https://t.me/yourchannel';
            result.guide       = '👥 Enter your <strong>Telegram channel or group link</strong>. Members will be added.';
        } else if (isPremiumSub) {
            result.placeholder = 'https://t.me/yourusername';
            result.example     = 'https://t.me/yourusername';
            result.guide       = '⭐ Enter the <strong>Telegram username link</strong> for premium subscription.';
        } else if (isAutoPost) {
            result.placeholder = 'https://t.me/yourchannel';
            result.example     = 'https://t.me/yourchannel';
            result.guide       = '🔄 Enter your <strong>Telegram channel link</strong>. Auto views will apply to future posts.';
        } else {
            result.placeholder = 'https://t.me/yourchannel';
            result.example     = 'https://t.me/yourchannel';
            result.guide       = '📌 Enter your <strong>Telegram channel, group, or post link</strong>.';
        }
    }

    // ─── MUSIC (Spotify, Audiomack, Boomplay, etc.) ──────────
    else if (platform === 'Music') {
        if (/spotify/i.test(name)) {
            if (isPlaylistPlay) {
                result.placeholder = 'https://open.spotify.com/playlist/PLAYLIST_ID';
                result.example     = 'https://open.spotify.com/playlist/37i9dQZF1DXcBWIGoYBM5M';
                result.guide       = '🎵 Enter your Spotify <strong>playlist link</strong>. Plays will be delivered to this playlist.';
            } else if (isAlbumPlay) {
                result.placeholder = 'https://open.spotify.com/album/ALBUM_ID';
                result.example     = 'https://open.spotify.com/album/4aawyAB9vmqN3uQ7FjRGTy';
                result.guide       = '💿 Enter your Spotify <strong>album link</strong>. Plays will be delivered to this album.';
            } else if (isTrackPlay || isMonthlyListener) {
                result.placeholder = 'https://open.spotify.com/track/TRACK_ID';
                result.example     = 'https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT';
                result.guide       = '🎶 Enter your Spotify <strong>track link</strong>. Plays/listeners will be delivered.';
            } else if (isSpotifyFollow || isFollower) {
                result.placeholder = 'https://open.spotify.com/artist/ARTIST_ID';
                result.example     = 'https://open.spotify.com/artist/06HL4z0CvFAxyc27GXpf02';
                result.guide       = '👥 Enter your Spotify <strong>artist or playlist link</strong>. Followers will be added.';
            } else if (isSave) {
                result.placeholder = 'https://open.spotify.com/track/TRACK_ID';
                result.example     = 'https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT';
                result.guide       = '🔖 Enter your Spotify <strong>track link</strong>. Saves will be added to the library.';
            } else {
                result.placeholder = 'https://open.spotify.com/track/TRACK_ID';
                result.example     = 'https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT';
                result.guide       = '🎵 Enter your Spotify <strong>track, album, playlist, or artist link</strong>.';
            }
        } else if (/audiomack/i.test(name)) {
            result.placeholder = 'https://audiomack.com/artist/song/your-song';
            result.example     = 'https://audiomack.com/artist/song/your-song';
            result.guide       = '🎵 Enter your Audiomack <strong>song or artist link</strong>.';
        } else if (/boomplay/i.test(name)) {
            result.placeholder = 'https://www.boomplay.com/songs/12345678';
            result.example     = 'https://www.boomplay.com/songs/12345678';
            result.guide       = '🎵 Enter your Boomplay <strong>song or artist link</strong>.';
        } else if (/apple\s*music/i.test(name) || /itunes/i.test(name)) {
            result.placeholder = 'https://music.apple.com/album/your-album/12345';
            result.example     = 'https://music.apple.com/us/album/your-album/12345';
            result.guide       = '🎵 Enter your Apple Music <strong>song or album link</strong>.';
        } else if (/deezer/i.test(name)) {
            result.placeholder = 'https://www.deezer.com/track/12345';
            result.example     = 'https://www.deezer.com/track/12345';
            result.guide       = '🎵 Enter your Deezer <strong>track or album link</strong>.';
        } else {
            result.placeholder = 'https://your-music-platform.com/your-link';
            result.example     = 'https://your-music-platform.com/your-link';
            result.guide       = '🎵 Enter the <strong>direct link</strong> to your song, album, or profile on the music platform.';
        }
    }

    // ─── WHATSAPP ────────────────────────────────────────────
    else if (platform === 'WhatsApp') {
        if (/channel/i.test(name)) {
            result.placeholder = 'https://whatsapp.com/channel/CHANNEL_ID';
            result.example     = 'https://whatsapp.com/channel/0029VaXXXXXXXXXX';
            result.guide       = '👥 Enter your WhatsApp <strong>channel link</strong>. Followers will be added.';
        } else if (/group/i.test(name)) {
            result.placeholder = 'https://chat.whatsapp.com/INVITE_CODE';
            result.example     = 'https://chat.whatsapp.com/AbCdEfGhIjK';
            result.guide       = '👥 Enter your WhatsApp <strong>group invite link</strong>. Members will be added.';
        } else {
            result.placeholder = 'https://whatsapp.com/channel/CHANNEL_ID';
            result.example     = 'https://whatsapp.com/channel/0029VaXXXXXXXXXX';
            result.guide       = '📌 Enter your WhatsApp <strong>channel or group link</strong>.';
        }
    }

    // ─── SNAPCHAT ────────────────────────────────────────────
    else if (platform === 'Snapchat') {
        if (isFollower) {
            result.placeholder = 'https://www.snapchat.com/add/yourusername';
            result.example     = 'https://www.snapchat.com/add/yourusername';
            result.guide       = '👻 Enter your Snapchat <strong>profile link</strong>. Followers will be added.';
        } else {
            result.placeholder = 'https://www.snapchat.com/add/yourusername';
            result.example     = 'https://www.snapchat.com/add/yourusername';
            result.guide       = '👻 Enter your Snapchat <strong>profile or story link</strong>.';
        }
    }

    // ─── THREADS ─────────────────────────────────────────────
    else if (platform === 'Threads') {
        if (isFollower) {
            result.placeholder = 'https://www.threads.net/@yourusername';
            result.example     = 'https://www.threads.net/@yourusername';
            result.guide       = '👥 Enter your Threads <strong>profile link</strong>. Followers will be added.';
        } else if (isLike || isComment || isShare) {
            result.placeholder = 'https://www.threads.net/@username/post/ABC123';
            result.example     = 'https://www.threads.net/@username/post/DWhYOvU';
            if (isLike) {
                result.guide   = '❤️ Enter your Threads <strong>post link</strong>. Likes will be added.';
            } else if (isComment) {
                result.guide   = '💬 Enter your Threads <strong>post link</strong>. Comments will appear on this post.';
            } else {
                result.guide   = '🔁 Enter your Threads <strong>post link</strong>. Reshares will be added.';
            }
        } else {
            result.placeholder = 'https://www.threads.net/@yourusername';
            result.example     = 'https://www.threads.net/@yourusername';
            result.guide       = '📌 Enter your Threads <strong>profile or post link</strong>.';
        }
    }

    // ─── LINKEDIN ────────────────────────────────────────────
    else if (platform === 'LinkedIn') {
        if (isFollower) {
            result.placeholder = 'https://www.linkedin.com/in/yourprofile';
            result.example     = 'https://www.linkedin.com/in/yourprofile';
            result.guide       = '👥 Enter your LinkedIn <strong>profile or company page link</strong>.';
        } else if (isLike || isComment || isView) {
            result.placeholder = 'https://www.linkedin.com/posts/username_post-id';
            result.example     = 'https://www.linkedin.com/posts/username_post-id';
            result.guide       = '📌 Enter your LinkedIn <strong>post link</strong>. Open the post → click ⋯ → Copy link to post.';
        } else {
            result.placeholder = 'https://www.linkedin.com/in/yourprofile';
            result.example     = 'https://www.linkedin.com/in/yourprofile';
            result.guide       = '📌 Enter your LinkedIn <strong>profile or post link</strong>.';
        }
    }

    // ─── TWITCH / KICK ───────────────────────────────────────
    else if (platform === 'Twitch') {
        if (isFollower) {
            result.placeholder = 'https://www.twitch.tv/yourusername';
            result.example     = 'https://www.twitch.tv/yourusername';
            result.guide       = '👥 Enter your Twitch <strong>channel link</strong>. Followers will be added.';
        } else if (isView || isLive) {
            result.placeholder = 'https://www.twitch.tv/yourusername';
            result.example     = 'https://www.twitch.tv/yourusername';
            result.guide       = '👀 Enter your Twitch <strong>channel link</strong>. You must be live for live viewer services.';
        } else if (/kick/i.test(name)) {
            result.placeholder = 'https://kick.com/yourusername';
            result.example     = 'https://kick.com/yourusername';
            result.guide       = '📌 Enter your Kick <strong>channel link</strong>.';
        } else {
            result.placeholder = 'https://www.twitch.tv/yourusername';
            result.example     = 'https://www.twitch.tv/yourusername';
            result.guide       = '📌 Enter your Twitch <strong>channel link</strong>.';
        }
    }

    // ─── DISCORD ─────────────────────────────────────────────
    else if (platform === 'Discord') {
        result.placeholder = 'https://discord.gg/INVITE_CODE';
        result.example     = 'https://discord.gg/AbCdEfGh';
        result.guide       = '💬 Enter your Discord <strong>server invite link</strong>. Members will join this server.';
    }

    // ─── WEBSITE / GOOGLE TRAFFIC ────────────────────────────
    else if (platform === 'Website') {
        if (isTraffic || /google/i.test(name)) {
            result.placeholder = 'https://www.yourwebsite.com';
            result.example     = 'https://www.yourwebsite.com/landing-page';
            result.guide       = '🌐 Enter your <strong>website URL</strong>. Traffic visitors will be directed to this page.';
        } else if (/review/i.test(name)) {
            result.placeholder = 'https://www.google.com/maps/place/your-business';
            result.example     = 'https://www.google.com/maps/place/your-business';
            result.guide       = '⭐ Enter your <strong>Google Maps/Business link</strong>. Reviews will be posted.';
        } else {
            result.placeholder = 'https://www.yourwebsite.com';
            result.example     = 'https://www.yourwebsite.com';
            result.guide       = '🌐 Enter your <strong>website link</strong>.';
        }
    }

    // ─── OTHER (GitHub, Quora, OnlyFans, Fansly, Lemon8, etc.) ──
    else {
        if (/github/i.test(name)) {
            if (/fork/i.test(name)) {
                result.placeholder = 'https://github.com/username/repository';
                result.example     = 'https://github.com/username/repository';
                result.guide       = '🐱 Enter your GitHub <strong>repository link</strong>. Forks will be added.';
            } else if (/like|star/i.test(name)) {
                result.placeholder = 'https://github.com/username/repository';
                result.example     = 'https://github.com/username/repository';
                result.guide       = '⭐ Enter your GitHub <strong>repository link</strong>. Stars will be added.';
            } else {
                result.placeholder = 'https://github.com/yourusername';
                result.example     = 'https://github.com/yourusername';
                result.guide       = '🐱 Enter your GitHub <strong>profile link</strong>. Followers will be added.';
            }
        } else if (/quora/i.test(name)) {
            result.placeholder = 'https://www.quora.com/your-link';
            result.example     = 'https://www.quora.com/your-question-or-profile';
            result.guide       = '📝 Enter your Quora <strong>profile, question, or answer link</strong>.';
        } else if (/onlyfans/i.test(name)) {
            result.placeholder = 'https://onlyfans.com/yourusername';
            result.example     = 'https://onlyfans.com/yourusername';
            result.guide       = '📌 Enter your OnlyFans <strong>profile link</strong>.';
        } else if (/fansly/i.test(name)) {
            result.placeholder = 'https://fansly.com/yourusername';
            result.example     = 'https://fansly.com/yourusername';
            result.guide       = '📌 Enter your Fansly <strong>profile link</strong>.';
        } else if (/fanvue/i.test(name)) {
            result.placeholder = 'https://www.fanvue.com/yourusername';
            result.example     = 'https://www.fanvue.com/yourusername';
            result.guide       = '📌 Enter your Fanvue <strong>profile link</strong>.';
        } else if (/lemon8/i.test(name)) {
            result.placeholder = 'https://www.lemon8-app.com/@yourusername';
            result.example     = 'https://www.lemon8-app.com/@yourusername';
            result.guide       = '🍋 Enter your Lemon8 <strong>profile or post link</strong>.';
        } else {
            result.placeholder = 'https://example.com/your-link';
            result.example     = 'https://example.com/your-link';
            result.guide       = '📌 Paste the <strong>direct link</strong> related to this service.';
        }
    }

    return result;
}

// ── 1. Platform selection ──────────────────────────────────────
function selectPlatform(platform) {
    activePlatform = platform;

    // Update button styles
    document.querySelectorAll('.plat-btn').forEach(function(btn) {
        var on = btn.dataset.platform === platform;
        btn.classList.toggle('is-active', on);
    });

    // Show only this platform's options in category dropdown
    var catSel   = document.getElementById('categorySelect');
    var firstOpt = null;

    catSel.querySelectorAll('optgroup').forEach(function(og) {
        og.querySelectorAll('option').forEach(function(opt) {
            var show     = opt.dataset.platform === platform;
            opt.hidden   = !show;
            opt.disabled = !show;
            if (show && !firstOpt) firstOpt = opt;
        });
    });

    if (firstOpt) {
        catSel.value   = firstOpt.value;
        activeCategory = firstOpt.value;
    }

    refreshServiceList();
}

// ── 2. Category change ─────────────────────────────────────────
function onCategoryChange() {
    activeCategory = document.getElementById('categorySelect').value;
    refreshServiceList();
}

// ── 3. Refresh service select list ────────────────────────────
function refreshServiceList() {
    var select = document.getElementById('serviceSelect');
    var groups = select.querySelectorAll('optgroup');

    groups.forEach(function(og) {
        var isCat        = og.dataset.category === activeCategory;
        og.style.display = isCat ? '' : 'none';
        og.querySelectorAll('option').forEach(function(opt) {
            opt.hidden = !isCat;
        });
    });

    document.getElementById('catSvcCount').textContent = catSvcCounts[activeCategory] || 0;

    // Auto-pick first visible option
    var opts = select.querySelectorAll('option:not([hidden])');
    if (opts.length > 0) {
        select.value = opts[0].value;
        onServiceSelect();
    } else {
        selectedService = null;
        document.getElementById('serviceInfoCard').classList.add('hidden');
    }
}

// ── 4. Service selected ────────────────────────────────────────
function onServiceSelect() {
    var select = document.getElementById('serviceSelect');
    var opt    = select.options[select.selectedIndex];
    if (!opt || opt.hidden) return;

    selectedService = {
        id:     parseInt(opt.value),
        name:   opt.dataset.name,
        rate:   parseFloat(opt.dataset.rate),   // reads data-rate → our_rate
        min:    parseInt(opt.dataset.min),       // reads data-min  → min_quantity
        max:    parseInt(opt.dataset.max),       // reads data-max  → max_quantity
        refill: opt.dataset.refill === '1',
        cancel: opt.dataset.cancel === '1',
        type:   opt.dataset.type,
    };

    document.getElementById('info_name').textContent = selectedService.name;
    document.getElementById('info_min').textContent  = selectedService.min.toLocaleString();
    document.getElementById('info_max').textContent  = selectedService.max.toLocaleString();
    document.getElementById('info_type').textContent = selectedService.type || 'Default';
    document.getElementById('qty_hint').textContent  =
        'Min: ' + selectedService.min.toLocaleString() + '  •  Max: ' + selectedService.max.toLocaleString();
    document.getElementById('preview_rate').textContent =
        '\u20A6' + selectedService.rate.toFixed(2) + ' per 1,000';

    document.getElementById('info_refill_badge').classList.toggle('hidden', !selectedService.refill);
    document.getElementById('info_cancel_badge').classList.toggle('hidden', !selectedService.cancel);
    document.getElementById('serviceInfoCard').classList.remove('hidden');

    document.getElementById('orderQuantity').min = selectedService.min;
    document.getElementById('orderQuantity').max = selectedService.max;

    // ── UPDATE LINK FIELD BASED ON SERVICE ──
    var guide = getLinkGuide(activePlatform, selectedService.name);
    var linkInput = document.getElementById('orderLink');
    linkInput.placeholder = guide.placeholder;
    document.getElementById('linkGuideText').innerHTML = guide.guide;
    document.getElementById('linkExampleText').textContent = 'Example: ' + guide.example;
    document.getElementById('linkGuideBox').classList.remove('hidden');

    calcCharge();
}

// ── 5. Charge calculation ──────────────────────────────────────
function calcCharge() {
    if (!selectedService) return;
    var qty    = parseInt(document.getElementById('orderQuantity').value) || 0;
    var charge = (qty / 1000) * selectedService.rate;
    document.getElementById('preview_charge').textContent = '\u20A6' + charge.toFixed(2);
}

// ── 6. Submit order ────────────────────────────────────────────
function submitOrder() {
    if (!selectedService) {
        Swal.fire('Select Service', 'Please select a service first.', 'warning'); return;
    }
    var link = document.getElementById('orderLink').value.trim();
    var qty  = parseInt(document.getElementById('orderQuantity').value);

    if (!link) {
        Swal.fire('Missing Link', 'Please enter the target social media link.', 'warning'); return;
    }
    if (!qty || qty < selectedService.min || qty > selectedService.max) {
        Swal.fire('Invalid Quantity',
            'Quantity must be between ' + selectedService.min.toLocaleString() +
            ' and ' + selectedService.max.toLocaleString() + '.', 'warning');
        return;
    }

    var charge = (qty / 1000) * selectedService.rate;
    if (userBalance < charge) {
        Swal.fire({
            title: 'Insufficient Balance',
            html: 'You need <strong>\u20A6' + charge.toFixed(2) + '</strong> but only have <strong>\u20A6' + userBalance.toFixed(2) + '</strong>.',
            icon: 'warning', showCancelButton: true,
            confirmButtonText: 'Fund Wallet', confirmButtonColor: '#4D148C'
        }).then(function(r) { if (r.isConfirmed) window.location.href = 'fund-wallet'; });
        return;
    }

    Swal.fire({
        title: 'Confirm Order',
        html: '<div style="text-align:left;font-size:.85rem;line-height:1.9;">' +
              '<p><strong>Service:</strong> ' + selectedService.name + '</p>' +
              '<p><strong>Link:</strong> '    + link + '</p>' +
              '<p><strong>Qty:</strong> '     + qty.toLocaleString() + '</p>' +
              '<p><strong>Charge:</strong> <span style="color:#4D148C;font-weight:700;">\u20A6' + charge.toFixed(2) + '</span></p></div>',
        icon: 'question', showCancelButton: true,
        confirmButtonText: 'Place Order', confirmButtonColor: '#4D148C'
    }).then(function(r) {
        if (!r.isConfirmed) return;

        var btn = document.getElementById('submitOrderBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

        $.ajax({
            url:      'ajax/smm_handler.php',
            type:     'POST',
            data:     { action: 'place_order', service_id: selectedService.id, link: link, quantity: qty },
            dataType: 'json',
            success: function(res) {
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-rocket"></i> Place Order';
                if (res.status === '1') {
                    Swal.fire({
                        title: 'Order Placed! \uD83C\uDF89',
                        html:  res.msg + '<br><br><small>Order ID: #' + res.order_id + '</small>',
                        icon:  'success',
                        confirmButtonText: 'View My Orders',
                        showCancelButton:  true,
                        cancelButtonText:  'Place Another',
                        confirmButtonColor: '#4D148C'
                    }).then(function(r2) {
                        if (r2.isConfirmed) window.location.href = 'my-orders';
                        else                window.location.reload();
                    });
                } else {
                    Swal.fire('Failed', res.msg || 'Order failed. Please try again.', 'error');
                }
            },
            error: function() {
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-rocket"></i> Place Order';
                Swal.fire('Error', 'An error occurred. Please try again.', 'error');
            }
        });
    });
}

// ── Init ───────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function() {
    selectPlatform(<?php echo json_encode($first_platform); ?>);
});
</script>

<?php include('footer.php'); ?>