<?php
require_once __DIR__ . '/api/functions.php';
require_once __DIR__ . '/includes/site-layout.php';

function icon_marquee(array $icons, string $speed = '', bool $reverse = false, bool $large = false): string {
  $trackClass = 'live-icons-track';
  if ($speed) $trackClass .= ' live-icons-track--' . $speed;
  if ($reverse) $trackClass .= ' live-icons-track--reverse';
  $cellClass = 'live-icon-cell' . ($large ? ' live-icon-cell--lg' : '');
  $items = '';
  foreach (array_merge($icons, $icons) as $icon) {
    $items .= '<div class="' . $cellClass . '"><i data-lucide="' . htmlspecialchars($icon) . '"></i></div>';
  }
  return '<div class="live-icons-wrap"><div class="live-icons-strip"><div class="' . $trackClass . '">' . $items . '</div></div></div>';
}

$siteTrust    = SiteContent::trustSection(db());
$siteNews     = SiteContent::newsSection(db());
$siteContact  = site_contact();
$siteBranding = site_branding();
$brandName    = $siteBranding['name'];
$brandLogo    = site_brand_asset('logo');

function render_service_card(array $item, string $catSlug = ''): string {
  $saleBadge = !empty($item['sale_active'])
    ? '<div class="absolute top-4 left-4 badge-sale">' . (int) $item['sale_percent'] . '٪ تخفیف</div>'
    : '';
  $badge = !empty($item['badge'])
    ? '<div class="absolute top-4 ' . (!empty($item['sale_active']) ? 'right-4' : 'left-4') . ' badge-success">' . htmlspecialchars($item['badge']) . '</div>'
    : '';
  $orderUrl = url_panel_order((string) ($item['slug'] ?? ''));
  $priceHtml = !empty($item['sale_active'])
    ? '<div class="sale-price-wrap"><span class="sale-price-old">' . htmlspecialchars($item['price_label'] ?: $item['price']) . '</span><span class="sale-price-new">' . htmlspecialchars($item['sale_price_label'] ?: $item['price']) . '</span></div>'
    : '<span class="text-brand font-bold text-sm">' . htmlspecialchars($item['price']) . '</span>';
  return '<div class="glass-card p-6 group relative service-card-item">' . $saleBadge . $badge . '
    <div class="icon-box w-12 h-12 rounded-xl flex items-center justify-center mb-4">
      <i data-lucide="' . htmlspecialchars($item['icon']) . '" class="w-6 h-6 text-brand"></i>
    </div>
    <h3 class="text-lg font-bold text-[#1a1a2e] mb-2">' . htmlspecialchars($item['title']) . '</h3>
    <p class="text-muted text-sm leading-relaxed mb-4">' . htmlspecialchars($item['desc']) . '</p>
    <div class="flex items-center justify-between pt-4 border-t border-[#eef2f6] gap-3">
      ' . $priceHtml . '
      <a href="' . htmlspecialchars($orderUrl) . '" class="btn-primary text-sm px-4 py-2 rounded-xl whitespace-nowrap">ثبت سفارش</a>
    </div>
  </div>';
}

site_layout_start(['active_nav' => 'home']);
$serviceCategories = ServiceCatalog::forSite(db());
$saleItems         = ServiceItemSale::allActive(db());
$siteCurrentUser   = AuthService::currentUser(db());
?>

    <!-- Hero (Liara-style split) -->
    <section class="py-16 lg:py-24 overflow-hidden relative">
      <div class="blob blob-1" aria-hidden="true"></div>
      <div class="blob blob-2" aria-hidden="true"></div>
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          <div class="animate-on-scroll text-center lg:text-right">
            <div class="live-badge mx-auto lg:mx-0">
              <span class="live-dot"></span>
              زیرساخت <?= htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') ?> — همه سرویس‌ها آنلاین
            </div>
            <h1 class="section-title mb-5">
              در کمتر از ۵ دقیقه،
              <br>
              <span class="text-gradient">سرویس خود را راه‌اندازی کنید</span>
            </h1>
            <p class="section-subtitle mb-8 max-w-lg mx-auto lg:mx-0">
              با <?= htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') ?>، هاست، سرور مجازی و دامنه را بدون دردسر فنی فعال کنید — از دیتاسنترهای ایرانی با پشتیبانی ۲۴ ساعته.
            </p>
            <a href="#services" class="btn-primary inline-flex items-center justify-center gap-2 px-7 py-3.5 text-base">
              شروع کنید
              <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
          </div>

          <!-- Dashboard Mockup -->
          <div class="relative animate-on-scroll hero-sandbox-wrap" data-delay="2">
            <div class="floating-icon floating-icon--1 icon-wiggle hidden sm:flex" aria-hidden="true"><i data-lucide="cloud"></i></div>
            <div class="floating-icon floating-icon--2 float-slow-delay hidden sm:flex" aria-hidden="true"><i data-lucide="shield-check"></i></div>
            <div class="floating-icon floating-icon--3 float-slow hidden sm:flex" aria-hidden="true"><i data-lucide="zap"></i></div>
          <a href="<?= htmlspecialchars($siteCurrentUser ? url_panel('dashboard') : url_panel('login'), ENT_QUOTES, 'UTF-8') ?>" class="dashboard-mock block hover:opacity-95 transition-opacity" title="<?= $siteCurrentUser ? 'پیشخوان ' . htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') : 'ورود به پنل کاربری ' . htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') ?>">
            <div class="dashboard-bar">
              <div class="dashboard-bar-dots">
                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-400"></div>
                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-400"></div>
                <div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-400"></div>
              </div>
              <div class="dashboard-bar-url" dir="ltr">
                <i data-lucide="lock" class="w-3 h-3 text-brand shrink-0"></i>
                <span>server-net.ir/panel</span>
              </div>
              <div class="dashboard-bar-brand">
                <img src="<?= htmlspecialchars($brandLogo, ENT_QUOTES, 'UTF-8') ?>" alt="" class="brand-logo brand-logo--xs" width="18" height="18" aria-hidden="true">
                <span><?= htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') ?></span>
              </div>
            </div>
            <div class="dashboard-body">
              <aside class="dashboard-sidebar" aria-hidden="true">
                <div class="dashboard-sidebar-logo">
                  <img src="<?= htmlspecialchars($brandLogo, ENT_QUOTES, 'UTF-8') ?>" alt="" width="28" height="28" aria-hidden="true">
                </div>
                <nav class="dashboard-sidebar-nav">
                  <span class="dashboard-nav-item is-active" title="پیشخوان"><i data-lucide="layout-dashboard"></i></span>
                  <span class="dashboard-nav-item" title="سرویس‌ها"><i data-lucide="server"></i></span>
                  <span class="dashboard-nav-item" title="مالی"><i data-lucide="wallet"></i></span>
                  <span class="dashboard-nav-item" title="تیکت"><i data-lucide="ticket"></i></span>
                </nav>
              </aside>
              <div class="dashboard-main">
                <div class="dashboard-welcome">
                  <div class="dashboard-welcome-text">
                    <span class="dashboard-welcome-greeting">پیشخوان <?= htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') ?></span>
                    <span class="dashboard-welcome-sub">مدیریت هاست، سرور و دامنه در یک جا</span>
                  </div>
                  <span class="badge-success dashboard-status-pill">
                    <span class="live-dot live-dot--sm"></span>
                    آنلاین
                  </span>
                </div>
                <div class="dashboard-section-head">
                  <span class="text-xs sm:text-sm font-bold text-[#1a1a2e]">سرویس‌های فعال شما</span>
                  <span class="badge-success text-[10px] sm:text-xs" id="services-status-badge">همه آنلاین</span>
                </div>
                <div id="services-rotator" class="services-rotator" aria-live="polite"></div>
                <div class="dashboard-stats">
                  <div class="dashboard-stat">
                    <i data-lucide="activity" class="w-3.5 h-3.5 text-brand"></i>
                    <div class="dashboard-stat-value">۹۹.۹٪</div>
                    <div class="dashboard-stat-label">آپتایم <?= htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') ?></div>
                  </div>
                  <div class="dashboard-stat">
                    <i data-lucide="wifi" class="w-3.5 h-3.5 text-brand"></i>
                    <div class="dashboard-stat-value ping-value" data-live-ping>۲۴ms</div>
                    <div class="dashboard-stat-label">پینگ تهران</div>
                  </div>
                  <div class="dashboard-stat">
                    <i data-lucide="hard-drive" class="w-3.5 h-3.5 text-brand"></i>
                    <div class="dashboard-stat-value">NVMe</div>
                    <div class="dashboard-stat-label">دیسک Gen4</div>
                  </div>
                </div>
              </div>
            </div>
          </a>
          </div>
        </div>
      </div>
      <div class="mt-14 animate-on-scroll" data-delay="3">
        <?= icon_marquee(['server', 'cloud', 'database', 'cpu', 'hard-drive', 'network', 'shield', 'lock', 'globe', 'zap'], 'fast') ?>
      </div>
    </section>

    <!-- Trust Logos -->
    <?php if (!empty($siteTrust['logos'])): ?>
    <section class="py-10 border-y border-[#eef2f6] animate-on-scroll">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-6 text-center">
        <p class="text-sm text-muted font-medium"><?= htmlspecialchars($siteTrust['title']) ?></p>
      </div>
      <div class="logo-marquee">
        <div class="logo-track">
          <?php foreach (array_merge($siteTrust['logos'], $siteTrust['logos']) as $logo): ?>
          <?php if (!empty($logo['logo_url'])): ?>
          <span class="logo-item logo-item--image">
            <?php if (!empty($logo['href'])): ?>
            <a href="<?= htmlspecialchars($logo['href']) ?>" target="_blank" rel="noopener noreferrer">
              <img src="<?= htmlspecialchars($logo['logo_url']) ?>" alt="<?= htmlspecialchars($logo['name']) ?>" loading="lazy">
            </a>
            <?php else: ?>
            <img src="<?= htmlspecialchars($logo['logo_url']) ?>" alt="<?= htmlspecialchars($logo['name']) ?>" loading="lazy">
            <?php endif; ?>
          </span>
          <?php else: ?>
          <span class="logo-item"><?= htmlspecialchars($logo['name']) ?></span>
          <?php endif; ?>
          <?php endforeach; ?>
        </div>
      </div>
    </section>
    <?php endif; ?>

    <!-- Differentiators -->
    <section class="py-20 lg:py-28">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16 animate-on-scroll">
          <h2 class="section-title mb-4">
            کاملاً متفاوت با هر سرویسی که
            <br>تا به حال استفاده کرده‌اید
          </h2>
          <p class="section-subtitle">با تمرکز روی نیازمندی‌های توسعه‌دهندگان، مجموعه‌ای از ابزارها و محصولات را طراحی کرده‌ایم.</p>
        </div>

        <div class="grid md:grid-cols-3 gap-6 stagger-children">
          <div class="feature-card text-center">
            <div class="w-14 h-14 rounded-2xl icon-box flex items-center justify-center mx-auto mb-5">
              <i data-lucide="zap" class="w-7 h-7 text-brand"></i>
            </div>
            <h3 class="text-xl font-bold text-[#1a1a2e] mb-3">سرعت بی‌نظیر</h3>
            <p class="text-muted text-sm leading-relaxed">سرورهای قدرتمند NVMe، میزبانی شده در دیتاسنترهای ایرانی برای بهترین ping</p>
          </div>
          <div class="feature-card text-center">
            <div class="w-14 h-14 rounded-2xl icon-box flex items-center justify-center mx-auto mb-5">
              <i data-lucide="credit-card" class="w-7 h-7 text-brand"></i>
            </div>
            <h3 class="text-xl font-bold text-[#1a1a2e] mb-3">پرداخت ساعتی</h3>
            <p class="text-muted text-sm leading-relaxed">فقط برای چند ساعت یا چند روز به سرور نیاز دارید؟ فقط به اندازه مصرف‌تان پرداخت کنید.</p>
          </div>
          <div class="feature-card text-center">
            <div class="w-14 h-14 rounded-2xl icon-box flex items-center justify-center mx-auto mb-5">
              <i data-lucide="terminal" class="w-7 h-7 text-brand"></i>
            </div>
            <h3 class="text-xl font-bold text-[#1a1a2e] mb-3">خط فرمان، گوش به فرمان</h3>
            <p class="text-muted text-sm leading-relaxed">با CLI <?= htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') ?>، انعطاف بیشتری برای مدیریت سرویس‌های خود دارید.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CLI + Deploy Log -->
    <section class="py-16 lg:py-24 section-alt">
      <div class="mb-12 animate-on-scroll">
        <?= icon_marquee(['terminal', 'git-branch', 'code-2', 'package', 'box', 'workflow', 'layers', 'settings'], 'slow', true) ?>
      </div>
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-12 items-start">
          <div class="animate-on-scroll">
            <h2 class="section-title mb-4">
              خط فرمان،
              <br>گوش به فرمان شماست
            </h2>
            <p class="section-subtitle mb-8">با ServerNet CLI، انعطاف بیشتری برای مدیریت سرویس‌های خود دارید.</p>
            <div class="terminal">
              <div class="terminal-header">
                <div class="terminal-dot bg-red-400"></div>
                <div class="terminal-dot bg-yellow-400"></div>
                <div class="terminal-dot bg-green-400"></div>
              </div>
              <div class="terminal-body">
                <div><span class="prompt">$</span> <span class="cmd" data-type-line>npm install -g @servernet/cli</span></div>
                <div class="hint mt-2 opacity-0" data-type-line>> hint: servernet --help</div>
                <div class="mt-4"><span class="prompt">$</span> <span class="cmd" data-type-line>servernet vps create --plan basic</span></div>
                <div class="hint mt-2 opacity-0" data-type-line>> ✓ سرور مجازی با موفقیت ایجاد شد</div>
                <div class="hint opacity-0"><span data-type-line>> IP: 185.x.x.x | Status: running</span><span class="terminal-cursor"></span></div>
              </div>
            </div>
          </div>

          <div class="animate-on-scroll" data-delay="2">
            <h2 class="section-title mb-4">
              طراحی شده
              <br>برای تیم‌های حرفه‌ای
            </h2>
            <p class="section-subtitle mb-6">مدیریت زیرساخت، به‌گونه‌ای که لذت می‌برید</p>
            <div class="space-y-3">
              <div class="deploy-card">
                <div class="flex items-center justify-between mb-2">
                  <div class="flex items-center gap-2">
                    <i data-lucide="git-branch" class="w-4 h-4 text-muted"></i>
                    <span class="text-xs text-muted">۱ روز پیش</span>
                  </div>
                  <span class="badge-current">فعلی</span>
                </div>
                <div class="text-sm font-semibold text-[#1a1a2e] mb-1">بهبود مدیریت خطاها</div>
                <div class="text-xs text-muted" dir="ltr">ServerNet Panel / 2.1.1</div>
              </div>
              <div class="deploy-card">
                <div class="flex items-center justify-between mb-2">
                  <div class="flex items-center gap-2">
                    <i data-lucide="git-branch" class="w-4 h-4 text-muted"></i>
                    <span class="text-xs text-muted">۲ روز پیش</span>
                  </div>
                  <span class="badge-success">موفق</span>
                </div>
                <div class="text-sm font-semibold text-[#1a1a2e] mb-1">بهینه‌سازی بارگذاری تصاویر</div>
                <div class="text-xs text-muted" dir="ltr">@servernet/cli/3.0.0</div>
              </div>
              <div class="deploy-card">
                <div class="flex items-center justify-between mb-2">
                  <div class="flex items-center gap-2">
                    <i data-lucide="git-branch" class="w-4 h-4 text-muted"></i>
                    <span class="text-xs text-muted">۴ روز پیش</span>
                  </div>
                  <span class="badge-failed">ناموفق</span>
                </div>
                <div class="text-sm font-semibold text-[#1a1a2e] mb-1">افزودن پشتیبانی چندزبانه</div>
                <div class="text-xs text-muted" dir="ltr">@servernet/cli/2.9.5</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <?php if ($saleItems !== []): ?>
    <section class="py-8">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <a href="<?= htmlspecialchars(url_site_sale(), ENT_QUOTES, 'UTF-8') ?>" class="sale-promo-banner block animate-on-scroll">
          <div class="sale-promo-banner__icon"><i data-lucide="percent"></i></div>
          <div class="sale-promo-banner__text">
            <strong>فروش ویژه — <?= count($saleItems) ?> پلن با تخفیف</strong>
            <span>تا <?= (int) max(array_column($saleItems, 'sale_percent')) ?>٪ تخفیف روی پلن‌های منتخب</span>
          </div>
          <span class="sale-promo-banner__cta">مشاهده <i data-lucide="arrow-left" class="w-4 h-4"></i></span>
        </a>
      </div>
    </section>
    <?php endif; ?>

    <!-- Services -->
    <section id="services" class="py-20 lg:py-28">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-10 animate-on-scroll">
          <?= icon_marquee(['globe', 'cpu', 'hard-drive', 'link', 'mail', 'shield', 'wifi', 'radio'], 'fast', false, true) ?>
        </div>
        <div class="text-center max-w-2xl mx-auto mb-12 animate-on-scroll">
          <h2 class="section-title mb-4">خدمات <?= htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') ?></h2>
          <p class="section-subtitle">از هاست اشتراکی تا سرور اختصاصی — همه‌چیز برای رشد دیجیتال شما</p>
        </div>

        <div class="service-tabs-grid mb-6">
          <button type="button" class="service-tab-v2 active" data-category="all">
            <div class="service-tab-v2__icon"><i data-lucide="layout-grid"></i></div>
            <div class="service-tab-v2__text">
              <span class="service-tab-v2__title">همه خدمات</span>
              <span class="service-tab-v2__desc">۱۷+ سرویس</span>
            </div>
          </button>
          <?php foreach ($serviceCategories as $key => $cat): ?>
          <button type="button" class="service-tab-v2" data-category="<?= htmlspecialchars($key) ?>">
            <div class="service-tab-v2__icon"><i data-lucide="<?= htmlspecialchars($cat['icon']) ?>"></i></div>
            <div class="service-tab-v2__text">
              <span class="service-tab-v2__title"><?= htmlspecialchars($cat['label']) ?></span>
              <span class="service-tab-v2__desc"><?= count($cat['items']) ?> سرویس</span>
            </div>
            <i data-lucide="chevron-down" class="service-tab-v2__chevron"></i>
          </button>
          <?php endforeach; ?>
        </div>

        <div class="service-panels-wrap">
          <div class="service-panel active" data-panel="all">
            <div class="service-panel-head">
              <i data-lucide="layout-grid" class="w-5 h-5 text-brand"></i>
              <div>
                <h3 class="font-bold text-[#1a1a2e]">همه خدمات <?= htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') ?></h3>
                <p class="text-xs text-muted">مجموعه کامل راهکارهای زیرساختی</p>
              </div>
            </div>
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 service-panel-grid">
              <?php foreach ($serviceCategories as $cat): foreach ($cat['items'] as $item): ?>
                <?= render_service_card($item, $key ?? '') ?>
              <?php endforeach; endforeach; ?>
            </div>
          </div>
          <?php foreach ($serviceCategories as $key => $cat): ?>
          <div class="service-panel" data-panel="<?= htmlspecialchars($key) ?>">
            <div class="service-panel-head">
              <i data-lucide="<?= htmlspecialchars($cat['icon']) ?>" class="w-5 h-5 text-brand"></i>
              <div>
                <h3 class="font-bold text-[#1a1a2e]"><?= htmlspecialchars($cat['label']) ?></h3>
                <p class="text-xs text-muted"><?= htmlspecialchars($cat['desc']) ?></p>
              </div>
            </div>
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 service-panel-grid">
              <?php foreach ($cat['items'] as $item): ?>
                <?= render_service_card($item, $key) ?>
              <?php endforeach; ?>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </section>

    <!-- Feature Blocks (alternating) -->
    <section class="section-alt py-20 lg:py-28">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-24">
        <div class="grid lg:grid-cols-2 gap-12 items-center animate-on-scroll">
          <div class="order-2 lg:order-1">
            <div class="glass-card p-8">
              <div class="space-y-5">
                <div data-monitor data-min="20" data-max="45">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-[#1a1a2e]">CPU</span>
                    <span class="text-sm text-brand font-bold" data-monitor-value>۳۲٪</span>
                  </div>
                  <div class="monitor-bar"><div class="monitor-fill" style="width:32%"></div></div>
                </div>
                <div data-monitor data-min="40" data-max="70">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-[#1a1a2e]">RAM</span>
                    <span class="text-sm text-brand font-bold" data-monitor-value>۵۸٪</span>
                  </div>
                  <div class="monitor-bar"><div class="monitor-fill" style="width:58%"></div></div>
                </div>
                <div data-monitor data-min="10" data-max="35">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-[#1a1a2e]">Disk</span>
                    <span class="text-sm text-brand font-bold" data-monitor-value>۲۱٪</span>
                  </div>
                  <div class="monitor-bar"><div class="monitor-fill" style="width:21%"></div></div>
                </div>
              </div>
            </div>
          </div>
          <div class="order-1 lg:order-2">
            <h2 class="section-title mb-4">همه چیز تحت کنترل شماست</h2>
            <p class="section-subtitle mb-4">دید شفاف از عملکرد هر سرویس با مانیتورینگ پیشرفته</p>
            <p class="text-muted text-sm leading-relaxed"><?= htmlspecialchars($brandName, ENT_QUOTES, 'UTF-8') ?> در هر لحظه سرویس‌های شما را مانیتور می‌کند و به‌صورت زنده، گزارش مصرف منابع و لاگ‌های خروجی را در اختیار شما قرار می‌دهد.</p>
          </div>
        </div>

        <div class="grid lg:grid-cols-2 gap-12 items-center animate-on-scroll">
          <div>
            <h2 class="section-title mb-4">پشتیبان‌گیری روزانه، خودکار و رایگان</h2>
            <p class="section-subtitle">۱۰ برابر فضای پلنی که انتخاب می‌کنید، فضای رایگان پشتیبان دریافت می‌کنید تا نگران از دست‌رفتن داده‌ها نباشید.</p>
          </div>
          <div class="glass-card p-8 text-center float-slow">
            <i data-lucide="archive" class="w-16 h-16 text-brand mx-auto mb-4 opacity-80 icon-wiggle"></i>
            <div class="text-3xl font-extrabold text-[#1a1a2e] mb-1">بکاپ روزانه</div>
            <div class="text-muted text-sm">خودکار · رایگان · ۳۰ روز نگهداری</div>
          </div>
        </div>

        <div class="grid lg:grid-cols-2 gap-12 items-center animate-on-scroll">
          <div class="order-2 lg:order-1 glass-card p-8 text-center">
            <div class="text-5xl font-extrabold text-brand mb-2" data-count="99.99" data-suffix="٪" data-decimals="2">۰٪</div>
            <div class="text-muted text-sm">آپتایم تضمینی سرویس‌ها</div>
          </div>
          <div class="order-1 lg:order-2">
            <h2 class="section-title mb-4">زیرساختی که همیشه در دسترس است</h2>
            <p class="section-subtitle">ما با استفاده از شیوه‌های مدرن DevOps، زیرساختی طراحی کرده‌ایم که سرویس‌های شما را همیشه در دسترس نگه می‌دارد.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Tech Stack -->
    <section class="py-20 lg:py-28 overflow-hidden">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-12 animate-on-scroll">
          <h2 class="section-title mb-4">
            از هر تکنولوژی مدرنی که استفاده می‌کنید،
            <br>ما آن را میزبانی می‌کنیم
          </h2>
        </div>
        <?php
        $techIcons = ['code-2', 'braces', 'file-code', 'database', 'box', 'blocks', 'binary', 'circuit-board'];
        $techPills = ['PHP', 'Node.js', 'Python', 'Django', 'Laravel', 'React', 'Next.js', 'Vue.js', 'WordPress', 'Docker', 'MySQL', 'PostgreSQL', 'MongoDB', 'Redis', 'Nginx', '.NET'];
        $pillHtml = '';
        foreach (array_merge($techPills, $techPills) as $pill) {
          $pillHtml .= '<span class="tech-pill">' . htmlspecialchars($pill) . '</span>';
        }
        ?>
        <div class="mb-6 animate-on-scroll">
          <?= icon_marquee($techIcons, 'slow') ?>
        </div>
        <div class="tech-marquee live-icons-wrap animate-on-scroll" data-delay="1">
          <div class="live-icons-strip">
            <div class="live-icons-track live-icons-track--fast live-icons-track--reverse">
              <?= $pillHtml ?>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- News -->
    <?php if (!empty($siteNews['items'])): ?>
    <section id="news" class="section-alt py-20 lg:py-28">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-12">
          <div>
            <h2 class="section-title"><?= htmlspecialchars($siteNews['title']) ?></h2>
          </div>
          <?php if (!empty($siteNews['archive_link'])): ?>
          <a href="<?= htmlspecialchars($siteNews['archive_link']) ?>" class="btn-outline inline-flex items-center gap-2 px-5 py-2.5 text-sm self-start sm:self-auto">
            <?= htmlspecialchars($siteNews['archive_label']) ?>
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
          </a>
          <?php endif; ?>
        </div>

        <div class="mb-10 animate-on-scroll">
          <?= icon_marquee(['newspaper', 'megaphone', 'bell', 'radio', 'rss', 'bookmark', 'calendar', 'sparkles'], 'fast', true) ?>
        </div>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
          <?php
          $newsCount = count($siteNews['items']);
          foreach ($siteNews['items'] as $newsIndex => $newsItem):
            $colClass = ($newsCount === 3 && $newsIndex === 2) ? ' sm:col-span-2 lg:col-span-1' : '';
            $coverClass = SiteContent::newsCoverClass($newsItem['cover_tone']);
          ?>
          <article class="news-card group<?= $colClass ?>">
            <div class="h-44 bg-gradient-to-br <?= htmlspecialchars($coverClass) ?> to-surface-2 flex items-center justify-center">
              <div class="news-icon-wrap"><i data-lucide="<?= htmlspecialchars($newsItem['icon']) ?>" class="w-14 h-14 text-brand/50"></i></div>
            </div>
            <div class="p-6">
              <div class="flex items-center gap-3 text-xs text-muted mb-3">
                <?php if (!empty($newsItem['category'])): ?>
                <span class="badge-success"><?= htmlspecialchars($newsItem['category']) ?></span>
                <?php endif; ?>
                <?php if (!empty($newsItem['date_label'])): ?>
                <span><?= htmlspecialchars($newsItem['date_label']) ?></span>
                <?php endif; ?>
              </div>
              <h3 class="text-base font-bold text-[#1a1a2e] mb-2 group-hover:text-brand transition-colors"><?= htmlspecialchars($newsItem['title']) ?></h3>
              <?php if (!empty($newsItem['excerpt'])): ?>
              <p class="text-muted text-sm leading-relaxed mb-4"><?= htmlspecialchars($newsItem['excerpt']) ?></p>
              <?php endif; ?>
              <a href="<?= htmlspecialchars($newsItem['link']) ?>" class="text-sm text-brand flex items-center gap-1">ادامه مطلب <i data-lucide="chevron-left" class="w-4 h-4"></i></a>
            </div>
          </article>
          <?php endforeach; ?>
        </div>
      </div>
    </section>
    <?php endif; ?>

    <!-- Stats (Liara-style) -->
    <section id="about" class="py-20 lg:py-28">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 gap-16 items-center">
          <div class="text-center md:text-right animate-on-scroll">
            <img src="<?= htmlspecialchars($brandLogo, ENT_QUOTES, 'UTF-8') ?>" alt="" class="brand-logo brand-logo--md mx-auto md:mx-0 mb-6 opacity-80 float-slow" width="48" height="48" aria-hidden="true">
            <div class="stat-number mb-3" data-count="8" data-suffix="+">۰+</div>
            <h3 class="text-2xl font-extrabold text-[#1a1a2e] mb-3">سال‌هاست که هستیم</h3>
            <p class="section-subtitle">۸ سال در کنار شما تجربه جمع کردیم. تازه در ابتدای مسیر هستیم.</p>
          </div>
          <div class="text-center md:text-right animate-on-scroll" data-delay="2">
            <div class="stat-number mb-3" data-count="5" data-prefix="+" data-suffix="K">+۰K</div>
            <h3 class="text-2xl font-extrabold text-[#1a1a2e] mb-3">جمع‌مان، جمع است</h3>
            <p class="section-subtitle">بیش از ۵ هزار کسب‌وکار در جمع ما هستند. جای شما خالی‌ست...</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section id="contact" class="section-alt py-20 lg:py-28 overflow-hidden">
      <div class="mb-12 animate-on-scroll">
        <?= icon_marquee(['headphones', 'message-circle', 'phone', 'mail', 'life-buoy', 'help-circle', 'ticket', 'users'], 'slow') ?>
      </div>
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="glass-card p-10 lg:p-16 text-center max-w-3xl mx-auto animate-on-scroll">
          <img src="<?= htmlspecialchars($brandLogo, ENT_QUOTES, 'UTF-8') ?>" alt="" class="brand-logo brand-logo--lg mx-auto mb-6 opacity-90 float-slow icon-wiggle" width="72" height="72" aria-hidden="true">
          <h2 class="section-title mb-4">همراه شما هستیم</h2>
          <p class="section-subtitle mb-8">در خصوص سفارش یا استفاده از سرویس‌ها سوالی دارید؟</p>
          <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="<?= htmlspecialchars(url_panel('login'), ENT_QUOTES, 'UTF-8') ?>" class="btn-primary px-8 py-3.5 text-base w-full sm:w-auto flex items-center justify-center gap-2">
              <i data-lucide="ticket" class="w-5 h-5"></i>
              ارسال تیکت (۲۴ ساعته)
            </a>
            <a href="tel:<?= htmlspecialchars($siteContact['phone'], ENT_QUOTES, 'UTF-8') ?>" class="btn-outline px-8 py-3.5 text-base w-full sm:w-auto flex items-center justify-center gap-2">
              <i data-lucide="phone" class="w-5 h-5"></i>
              <?= htmlspecialchars($siteContact['phone_display']) ?>
            </a>
          </div>
        </div>
      </div>
    </section>

<?php site_layout_end(); ?>
