<?php
use App\Core\View;
$assetVer = @filemtime(APP_ROOT.'/public/assets/css/app.css') ?: time();
$appName = $appName ?? \App\Core\Config::get('app.name');
$siteLogo = \App\Models\Setting::get('site_logo', '');
$siteFavicon = \App\Models\Setting::get('site_favicon', '');
?>
<!doctype html>
<html dir="rtl" lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= View::e($appName) ?> — سامانه تولید فرم PDF</title>
<?php if ($siteFavicon): ?>
<link rel="icon" href="/public/uploads/<?= htmlspecialchars($siteFavicon) ?>">
<?php endif; ?>
<link rel="stylesheet" href="/public/assets/vendor/bootstrap/bootstrap.rtl.min.css">
<link rel="stylesheet" href="/public/assets/vendor/bootstrap-icons/bootstrap-icons.min.css">
<link rel="stylesheet" href="/public/assets/css/app.css?v=<?= $assetVer ?>">
<style>
/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
.new-landing-body {
    margin: 0;
    padding: 0;
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
    background: #09091e;
    color: #fff;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}
.new-landing-body a { text-decoration: none; }

/* ── Navbar ── */
.nl-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 68px;
    background: rgba(9,9,30,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nl-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
}
.nl-brand-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
    box-shadow: 0 4px 14px rgba(124,58,237,0.4);
}
.nl-brand-logo-img {
    height: 38px; width: auto; max-width: 150px;
    object-fit: contain; border-radius: 8px; display: block;
}
.nl-badge {
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 5px;
    margin-right: 2px;
    vertical-align: middle;
}
.nl-links {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0; padding: 0;
}
.nl-links a {
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 8px;
    transition: color .18s, background .18s;
}
.nl-links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nl-actions {
    display: flex; align-items: center; gap: 10px;
}
.nl-btn-outline {
    border: 1.5px solid rgba(255,255,255,0.22);
    color: #fff; background: transparent;
    padding: 7px 20px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: background .18s, border-color .18s;
    font-family: inherit;
}
.nl-btn-outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
.nl-btn-primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff; border: none;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(124,58,237,0.4);
    transition: opacity .18s, transform .15s;
    font-family: inherit;
}
.nl-btn-primary:hover { opacity: .88; transform: translateY(-1px); }

/* ── Hero ── */
.nl-hero {
    min-height: calc(100vh - 68px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 40px 60px;
    position: relative;
}
.nl-hero::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%; right: -120px;
    height: 700px;
    background: radial-gradient(ellipse at 60% 40%, rgba(124,58,237,0.28), transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.nl-hero-text { position: relative; z-index: 1; }
.nl-hero-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(124,58,237,0.15);
    border: 1px solid rgba(124,58,237,0.35);
    color: #a78bfa;
    font-size: 12.5px; font-weight: 700;
    padding: 6px 14px; border-radius: 999px;
    margin-bottom: 20px;
}
.nl-hero-h1 {
    font-size: 46px;
    font-weight: 900;
    line-height: 1.4;
    margin: 0 0 18px;
    letter-spacing: -0.02em;
    color: #fff;
}
.nl-hero-h1 .accent { color: #818cf8; }
.nl-hero-desc {
    color: rgba(255,255,255,0.62);
    font-size: 16px;
    line-height: 2;
    margin-bottom: 32px;
    max-width: 520px;
}
.nl-hero-badges {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px;
}
.nl-hero-badge {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.78);
    padding: 8px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 600;
}
.nl-hero-badge i { color: #818cf8; }
.nl-hero-cta {
    display: flex; gap: 12px; flex-wrap: wrap;
}
.nl-cta-main {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    padding: 13px 28px;
    border-radius: 12px;
    font-size: 15px; font-weight: 700;
    box-shadow: 0 8px 24px rgba(124,58,237,0.45);
    transition: transform .15s, box-shadow .15s;
}
.nl-cta-main:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(124,58,237,0.55); color: #fff; }
.nl-cta-sec {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.8);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px; font-weight: 600;
    transition: background .18s, border-color .18s;
}
.nl-cta-sec:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.35); color: #fff; }

/* ── Hero Form Card ── */
.nl-hero-card {
    position: relative; z-index: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 28px;
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.nl-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 14px; font-weight: 700; color: #e2e8f0;
}
.nl-card-head-dots { display: flex; gap: 6px; }
.nl-card-head-dot {
    width: 11px; height: 11px; border-radius: 50%;
}
.nl-field-group { margin-bottom: 16px; }
.nl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.nl-field-label {
    display: block; font-size: 12px; color: rgba(255,255,255,0.5);
    font-weight: 600; margin-bottom: 7px;
}
.nl-field-input {
    width: 100%; height: 40px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    padding: 0 12px;
    display: flex; align-items: center;
}
.nl-field-textarea {
    width: 100%; height: 76px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    padding: 10px 12px;
    display: flex; align-items: flex-start;
}
.nl-card-btn {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff; border: none; border-radius: 12px;
    font-size: 14.5px; font-weight: 700;
    cursor: pointer; margin-top: 6px;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 6px 20px rgba(124,58,237,0.4);
    text-decoration: none;
}
.nl-card-btn:hover { opacity: .88; color: #fff; }

/* ── Section divider arrow ── */
.nl-scroll-hint {
    display: flex; justify-content: center;
    padding: 10px 0 20px;
}
.nl-scroll-hint .arrow {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5); font-size: 14px;
}

/* ── Stats ── */
.nl-stats {
    background: #fff;
    padding: 56px 40px;
}
.nl-stats-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.nl-stat {
    display: flex; align-items: center; gap: 16px;
}
.nl-stat-icon {
    width: 54px; height: 54px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.nl-stat-icon.blue { background: rgba(79,70,229,0.1); color: #4f46e5; }
.nl-stat-icon.green { background: rgba(16,185,129,0.1); color: #10b981; }
.nl-stat-icon.orange { background: rgba(245,158,11,0.1); color: #f59e0b; }
.nl-stat-icon.purple { background: rgba(124,58,237,0.1); color: #7c3aed; }
.nl-stat-num {
    font-size: 28px; font-weight: 900; color: #0f172a;
    line-height: 1.1; letter-spacing: -0.02em;
}
.nl-stat-label { font-size: 13px; color: #64748b; margin-top: 3px; font-weight: 500; }

/* ── How it works ── */
.nl-how {
    background: #f3f5fa;
    padding: 72px 40px;
}
.nl-how-inner { max-width: 1200px; margin: 0 auto; }
.nl-section-title {
    font-size: 32px; font-weight: 900;
    color: #0f172a; text-align: center;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.nl-section-line {
    width: 60px; height: 4px; border-radius: 3px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    margin: 0 auto 52px;
}
.nl-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
}
.nl-step {
    background: #fff;
    border-radius: 18px;
    padding: 28px 22px;
    text-align: center;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 12px rgba(15,23,42,0.05);
    position: relative;
    transition: transform .18s, box-shadow .18s;
}
.nl-step:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(15,23,42,0.10); }
.nl-step-num {
    position: absolute;
    top: -14px; left: 50%; transform: translateX(-50%);
    width: 28px; height: 28px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff; border-radius: 50%;
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(124,58,237,0.35);
}
.nl-step-icon {
    width: 62px; height: 62px; border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; margin: 0 auto 16px;
}
.nl-step-icon.c1 { background: rgba(79,70,229,0.1); color: #4f46e5; }
.nl-step-icon.c2 { background: rgba(245,158,11,0.1); color: #f59e0b; }
.nl-step-icon.c3 { background: rgba(16,185,129,0.1); color: #10b981; }
.nl-step-icon.c4 { background: rgba(239,68,68,0.1); color: #ef4444; }
.nl-step-title { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
.nl-step-desc { font-size: 13px; color: #64748b; line-height: 1.85; margin: 0; }

/* ── Why Us ── */
.nl-why {
    background: #fff;
    padding: 80px 40px;
}
.nl-why-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 72px; align-items: center;
}
.nl-why-image {
    display: flex; align-items: center; justify-content: center;
}
.nl-why-img-wrap {
    width: 100%; max-width: 420px;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    box-shadow: 0 16px 48px rgba(79,70,229,0.15);
}
.nl-why-img-icon { font-size: 100px; color: rgba(79,70,229,0.25); }
.nl-why-laptop {
    position: absolute; bottom: 20px;
    font-size: 80px; color: #4f46e5; opacity: 0.6;
}
.nl-why-pdf-badge {
    position: absolute; top: 24px; right: 24px;
    background: #ef4444; color: #fff;
    font-size: 22px; font-weight: 900;
    padding: 10px 16px; border-radius: 12px;
    box-shadow: 0 6px 18px rgba(239,68,68,0.4);
    letter-spacing: 1px;
}
.nl-why-text {}
.nl-why-title {
    font-size: 32px; font-weight: 900;
    color: #0f172a; margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.nl-why-line {
    width: 55px; height: 4px; border-radius: 3px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    margin-bottom: 36px;
}
.nl-why-features { display: flex; flex-direction: column; gap: 22px; }
.nl-why-feat {
    display: flex; align-items: flex-start; gap: 16px;
}
.nl-why-feat-icon {
    width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.nl-why-feat-icon.c1 { background: rgba(79,70,229,0.1); color: #4f46e5; }
.nl-why-feat-icon.c2 { background: rgba(16,185,129,0.1); color: #10b981; }
.nl-why-feat-icon.c3 { background: rgba(245,158,11,0.1); color: #f59e0b; }
.nl-why-feat-icon.c4 { background: rgba(239,68,68,0.1); color: #ef4444; }
.nl-why-feat-title { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.nl-why-feat-desc { font-size: 13px; color: #64748b; line-height: 1.8; margin: 0; }

/* ── Footer ── */
.nl-footer {
    background: #09091e;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 52px 40px 28px;
}
.nl-footer-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px; margin-bottom: 40px;
}
.nl-footer-brand { color: rgba(255,255,255,0.85); }
.nl-footer-brand-name {
    font-size: 17px; font-weight: 800; color: #fff;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.nl-footer-brand-desc {
    font-size: 13.5px; color: rgba(255,255,255,0.45);
    line-height: 1.85; margin: 0;
}
.nl-footer-col-title {
    font-size: 14px; font-weight: 800; color: #fff;
    margin-bottom: 16px;
}
.nl-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nl-footer-links a {
    font-size: 13.5px; color: rgba(255,255,255,0.45);
    transition: color .15s;
}
.nl-footer-links a:hover { color: #a78bfa; }
.nl-footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nl-footer-contact li {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; color: rgba(255,255,255,0.45);
    direction: ltr;
}
.nl-footer-contact i { color: #818cf8; font-size: 15px; }
.nl-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 24px;
    text-align: center;
    font-size: 13px; color: rgba(255,255,255,0.3);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .nl-nav { padding: 0 20px; }
    .nl-links { display: none; }
    .nl-hero { grid-template-columns: 1fr; gap: 36px; padding: 40px 20px; min-height: auto; }
    .nl-hero-h1 { font-size: 32px; }
    .nl-stats-inner { grid-template-columns: repeat(2,1fr); }
    .nl-steps { grid-template-columns: repeat(2,1fr); }
    .nl-why-inner { grid-template-columns: 1fr; }
    .nl-why-image { display: none; }
    .nl-footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .nl-how, .nl-stats, .nl-why, .nl-footer { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 575px) {
    .nl-stats-inner { grid-template-columns: 1fr; }
    .nl-steps { grid-template-columns: 1fr; }
    .nl-hero-h1 { font-size: 26px; }
    .nl-hero-badges { flex-direction: column; }
    .nl-hero-cta { flex-direction: column; }
}
</style>
</head>
<body class="new-landing-body">

<!-- ══ Navbar ══ -->
<nav class="nl-nav">
    <div class="nl-brand">
        <?php if ($siteLogo): ?>
            <img src="/public/uploads/<?= htmlspecialchars($siteLogo) ?>" alt="لوگو" class="nl-brand-logo-img">
        <?php else: ?>
            <div class="nl-brand-icon"><i class="bi bi-file-earmark-text"></i></div>
        <?php endif; ?>
        <span><?= View::e($appName) ?></span>
        <span class="nl-badge">PDF</span>
    </div>

    <ul class="nl-links">
        <?php foreach ($navLinks as $link): ?>
        <li><a href="<?= htmlspecialchars($link['url']) ?>"><?= htmlspecialchars($link['label']) ?></a></li>
        <?php endforeach; ?>
    </ul>

    <div class="nl-actions">
        <a href="/login" class="nl-btn-outline">ورود</a>
        <a href="/register" class="nl-btn-primary">ثبت‌نام رایگان</a>
    </div>
</nav>

<!-- ══ Hero ══ -->
<section class="nl-hero">
    <!-- Right: Text -->
    <div class="nl-hero-text">
        <div class="nl-hero-pill">
            <i class="bi bi-stars"></i>
            بدون نیاز به نصب و ثبت‌نام
        </div>

        <h1 class="nl-hero-h1">
            فرم‌های خود را سریع و حرفه‌ای<br>
            به <span class="accent">PDF</span> تبدیل کنید
        </h1>

        <p class="nl-hero-desc">
            با سامانه آنلاین ما، فرم‌های خود را طراحی کنید و در چند ثانیه خروجی PDF
            زیبا و استاندارد دریافت کنید. کاملاً رایگان و بدون محدودیت.
        </p>

        <div class="nl-hero-badges">
            <div class="nl-hero-badge"><i class="bi bi-globe"></i> کاملاً آنلاین</div>
            <div class="nl-hero-badge"><i class="bi bi-cloud"></i> بدون نصب</div>
            <div class="nl-hero-badge"><i class="bi bi-file-earmark-check"></i> خروجی با کیفیت</div>
        </div>

        <div class="nl-hero-cta">
            <a href="/register" class="nl-cta-main">
                <i class="bi bi-rocket-takeoff"></i>
                همین الان شروع کنید
            </a>
            <a href="/login" class="nl-cta-sec">
                قبلاً ثبت‌نام کرده‌ام
            </a>
        </div>
    </div>

    <!-- Left: Form Card -->
    <div class="nl-hero-card">
        <div class="nl-card-head">
            <span><i class="bi bi-file-earmark-pdf"></i> ایجاد فرم PDF</span>
            <div class="nl-card-head-dots">
                <span class="nl-card-head-dot" style="background:#22c55e"></span>
                <span class="nl-card-head-dot" style="background:#f59e0b"></span>
                <span class="nl-card-head-dot" style="background:#ef4444"></span>
            </div>
        </div>

        <div class="nl-field-group">
            <label class="nl-field-label">نام و نام خانوادگی</label>
            <div class="nl-field-input">مثال: علی محمدی</div>
        </div>

        <div class="nl-field-row">
            <div>
                <label class="nl-field-label">کد ملی</label>
                <div class="nl-field-input">۰۰۰۰۰۰۰۰۰۰</div>
            </div>
            <div>
                <label class="nl-field-label">کد پستی</label>
                <div class="nl-field-input">۱۹۹۶۳۳۳۱۱۰</div>
            </div>
        </div>

        <div class="nl-field-group">
            <label class="nl-field-label">شماره موبایل</label>
            <div class="nl-field-input">۰۹۱۲۰۰۰۰۰۰۰</div>
        </div>

        <div class="nl-field-group">
            <label class="nl-field-label">توضیحات (اختیاری)</label>
            <div class="nl-field-textarea">هر توضیحی که می‌خواهید اینجا بنویسید...</div>
        </div>

        <a href="/register" class="nl-card-btn">
            <i class="bi bi-download"></i>
            دریافت PDF
        </a>
    </div>
</section>

<!-- scroll hint -->
<div class="nl-scroll-hint" style="background:#09091e;padding-bottom:32px">
    <div class="arrow"><i class="bi bi-chevron-down"></i></div>
</div>

<!-- ══ Stats ══ -->
<section class="nl-stats">
    <div class="nl-stats-inner">
        <?php foreach ($landingStats as $stat): ?>
        <div class="nl-stat">
            <div class="nl-stat-icon <?= htmlspecialchars($stat['color']) ?>">
                <i class="bi bi-<?= htmlspecialchars($stat['icon']) ?>"></i>
            </div>
            <div>
                <div class="nl-stat-num"><?= htmlspecialchars($stat['value']) ?></div>
                <div class="nl-stat-label"><?= htmlspecialchars($stat['label']) ?></div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</section>

<!-- ══ How It Works ══ -->
<section class="nl-how">
    <div class="nl-how-inner">
        <h2 class="nl-section-title">چطور کار می‌کند؟</h2>
        <div class="nl-section-line"></div>

        <div class="nl-steps">
            <div class="nl-step">
                <div class="nl-step-num">۱</div>
                <div class="nl-step-icon c1"><i class="bi bi-pencil-square"></i></div>
                <div class="nl-step-title">اطلاعات فرم را وارد کنید</div>
                <p class="nl-step-desc">اطلاعات مورد نیاز در فرم را وارد کنید یا از نمونه‌های آماده استفاده کنید.</p>
            </div>
            <div class="nl-step">
                <div class="nl-step-num">۲</div>
                <div class="nl-step-icon c2"><i class="bi bi-sliders"></i></div>
                <div class="nl-step-title">تنظیمات فرم را انجام دهید</div>
                <p class="nl-step-desc">ظاهر، فونت، و سایر تنظیمات فرم را به دلخواه شخصی‌سازی کنید.</p>
            </div>
            <div class="nl-step">
                <div class="nl-step-num">۳</div>
                <div class="nl-step-icon c3"><i class="bi bi-eye"></i></div>
                <div class="nl-step-title">پیش‌نمایش فرم</div>
                <p class="nl-step-desc">قبل از دریافت، پیش‌نمایش فرم را بررسی و تأیید کنید.</p>
            </div>
            <div class="nl-step">
                <div class="nl-step-num">۴</div>
                <div class="nl-step-icon c4"><i class="bi bi-file-earmark-arrow-down"></i></div>
                <div class="nl-step-title">دریافت PDF</div>
                <p class="nl-step-desc">با یک کلیک، فرم شما به صورت PDF دانلود خواهد شد.</p>
            </div>
        </div>
    </div>
</section>

<!-- ══ Why Us ══ -->
<section class="nl-why">
    <div class="nl-why-inner">
        <!-- Image side -->
        <div class="nl-why-image">
            <div class="nl-why-img-wrap">
                <div class="nl-why-pdf-badge">PDF</div>
                <i class="bi bi-laptop nl-why-laptop"></i>
                <i class="bi bi-file-earmark-pdf nl-why-img-icon"></i>
            </div>
        </div>

        <!-- Text side -->
        <div class="nl-why-text">
            <h2 class="nl-why-title">چرا سامانه ما؟</h2>
            <div class="nl-why-line"></div>

            <div class="nl-why-features">
                <div class="nl-why-feat">
                    <div class="nl-why-feat-icon c1"><i class="bi bi-layout-text-window-reverse"></i></div>
                    <div>
                        <div class="nl-why-feat-title">طراحی آسان فرم‌ها</div>
                        <p class="nl-why-feat-desc">رابط کاربری فارسی و ساده برای همه کاربران</p>
                    </div>
                </div>
                <div class="nl-why-feat">
                    <div class="nl-why-feat-icon c2"><i class="bi bi-shield-check"></i></div>
                    <div>
                        <div class="nl-why-feat-title">ایمن و خصوصی</div>
                        <p class="nl-why-feat-desc">اطلاعات شما محفوظ است و ذخیره نمی‌شود</p>
                    </div>
                </div>
                <div class="nl-why-feat">
                    <div class="nl-why-feat-icon c3"><i class="bi bi-translate"></i></div>
                    <div>
                        <div class="nl-why-feat-title">پشتیبانی از زبان فارسی</div>
                        <p class="nl-why-feat-desc">فونت‌های فارسی و راست‌چین، مناسب برای ایران</p>
                    </div>
                </div>
                <div class="nl-why-feat">
                    <div class="nl-why-feat-icon c4"><i class="bi bi-infinity"></i></div>
                    <div>
                        <div class="nl-why-feat-title">بدون محدودیت</div>
                        <p class="nl-why-feat-desc">بدون محدودیت در تعداد فرم و دانلود</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ══ Footer ══ -->
<footer class="nl-footer">
    <div class="nl-footer-inner">
        <div class="nl-footer-brand">
            <div class="nl-footer-brand-name">
                <?php if ($siteLogo): ?>
                    <img src="/public/uploads/<?= htmlspecialchars($siteLogo) ?>" alt="لوگو" style="height:32px;width:auto;border-radius:8px">
                <?php else: ?>
                    <div class="nl-brand-icon" style="width:32px;height:32px;font-size:15px;border-radius:8px"><i class="bi bi-file-earmark-text"></i></div>
                <?php endif; ?>
                <?= View::e($appName) ?>
            </div>
            <p class="nl-footer-brand-desc"><?= View::e($footerData['desc']) ?></p>
        </div>

        <?php if (!empty($footerData['links'])): ?>
        <div>
            <div class="nl-footer-col-title"><?= View::e($footerData['links_title']) ?></div>
            <ul class="nl-footer-links">
                <?php foreach ($footerData['links'] as $fl): ?>
                <li><a href="<?= htmlspecialchars($fl['url']) ?>"><?= htmlspecialchars($fl['label']) ?></a></li>
                <?php endforeach; ?>
            </ul>
        </div>
        <?php endif; ?>

        <div>
            <div class="nl-footer-col-title"><?= View::e($footerData['contact_title']) ?></div>
            <ul class="nl-footer-contact">
                <?php if ($footerData['email']): ?><li><i class="bi bi-envelope"></i> <?= View::e($footerData['email']) ?></li><?php endif; ?>
                <?php if ($footerData['phone']): ?><li><i class="bi bi-telephone"></i> <?= View::e($footerData['phone']) ?></li><?php endif; ?>
            </ul>
        </div>
    </div>

    <div class="nl-footer-bottom">
        &copy; <?= date('Y') ?> <?= View::e($appName) ?> — <?= View::e($footerData['copyright']) ?>
    </div>
</footer>

<script src="/public/assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
</body>
</html>
