<?php
/**
 * CloudForge Theme - Homepage
 * cms.barju.cn 首页 — 以卖 CMS 产品为核心
 */
$latestNews = db_query("SELECT * FROM `articles` WHERE `status`=1 ORDER BY `is_top` DESC, `published_at` DESC LIMIT 4");
$caseList = db_query("SELECT * FROM `cases` WHERE `status`=1 ORDER BY `sort_order` ASC LIMIT 3");
?>
<!-- ==================== HERO ==================== -->
<section class="hero-section">
    <div class="container hero-content" style="padding:var(--sp-20) 0 var(--sp-16);text-align:center;">
        <span class="hero-label" style="display:inline-block;">// BARJUCMS V2.0</span>
        <h1 class="hero-title" style="margin:0 auto var(--sp-4);text-align:center;max-width:18ch;font-size:3.5rem;">
            没预算也能拥有<br>专业企业网站
        </h1>
        <p class="hero-desc" style="margin:0 auto var(--sp-8);text-align:center;max-width:64ch;font-size:var(--fs-lg);">
            纯 PHP 开发的企业级内容管理系统。下载即用，域名自助授权，<br>
            无需卡密、无需审核、无需续费。一个域名，一站拥有。
        </p>
        <div style="display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;">
            <a href="<?php echo cms_url('download'); ?>" class="btn btn--primary btn--lg" style="display:inline-flex;align-items:center;gap:var(--sp-2);">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 3v10M5 8l5 5 5-5M3 14v3h14v-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <span>免费下载</span>
            </a>
            <a href="<?php echo cms_url('barjucms'); ?>" class="btn btn--outline btn--lg">
                <span>了解详情</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </a>
        </div>
        <div style="margin-top:var(--sp-6);display:flex;gap:var(--sp-6);justify-content:center;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);">
            <span>⚡ 无需框架依赖</span>
            <span>🔐 自助授权加密</span>
            <span>🎨 多主题切换</span>
            <span>🔄 一键升级</span>
        </div>
    </div>
</section>

<!-- ==================== STATS BAR ==================== -->
<div style="background:var(--bg-surface-2);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);">
    <div class="container">
        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1px;">
            <div style="padding:var(--sp-8);text-align:center;">
                <div style="font-family:var(--font-mono);font-size:var(--fs-3xl);font-weight:700;color:var(--accent);">22</div>
                <div style="font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-1);">数据表</div>
            </div>
            <div style="padding:var(--sp-8);text-align:center;">
                <div style="font-family:var(--font-mono);font-size:var(--fs-3xl);font-weight:700;color:var(--accent);">16</div>
                <div style="font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-1);">功能模块</div>
            </div>
            <div style="padding:var(--sp-8);text-align:center;">
                <div style="font-family:var(--font-mono);font-size:var(--fs-3xl);font-weight:700;color:var(--accent);">10+</div>
                <div style="font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-1);">预置模板</div>
            </div>
            <div style="padding:var(--sp-8);text-align:center;">
                <div style="font-family:var(--font-mono);font-size:var(--fs-3xl);font-weight:700;color:var(--accent);">365</div>
                <div style="font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-1);">天授权周期</div>
            </div>
        </div>
    </div>
</div>

<!-- ==================== CORE FEATURES ==================== -->
<section style="padding:var(--sp-14) 0;">
    <div class="container">
        <div class="section-header section-header--center">
            <span class="section-label">// FEATURES</span>
            <h2 class="section-title">BarjuCMS 能做什么</h2>
        </div>
        <div class="feature-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 4v6M9 7l3 3 3-3M5 16l3-3M19 16l-3-3M5 20h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </div>
                <h3 class="feature-title">无 CDK 自助授权</h3>
                <p class="feature-desc">提交域名即可自动开通 365 天授权，无需卡密、无需人工审核。到期自动续期，永不中断。</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3" y="11" width="18" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M7 11V7a5 5 0 0110 0v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="16" r="1.5" fill="currentColor"/></svg>
                </div>
                <h3 class="feature-title">AES-256 加密</h3>
                <p class="feature-desc">授权文件 AES-256 加密 + HMAC-SHA256 签名双保险，系统自动校验域名和时间，过期自动锁定。</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 4h16v12H4V4z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 20h8M12 16v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                </div>
                <h3 class="feature-title">多主题 + 响应式</h3>
                <p class="feature-desc">支持多主题自由切换，响应式设计完美适配 PC/平板/手机。后台可直接编辑模板代码。</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M20 12H4M12 4v16M8 8l4-4 4 4M8 16l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </div>
                <h3 class="feature-title">一键升级 + 自动回滚</h3>
                <p class="feature-desc">在线检测新版本，一键升级。升级前自动备份，失败自动回滚。告别手动覆盖文件的繁琐操作。</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M12 1v4M12 19v4M1 12h4M19 12h4M4 4l3 3M17 17l3 3M20 4l-3 3M4 20l3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                </div>
                <h3 class="feature-title">SEO 深度优化</h3>
                <p class="feature-desc">自定义 TDK、伪静态 URL、Sitemap 自动生成、Open Graph 协议。上线即具备搜索引擎友好度。</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M3 9l9-5 9 5v7l-9 5-9-5V9z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M3 9l9 5 9-5M12 14v8" stroke="currentColor" stroke-width="1.5"/></svg>
                </div>
                <h3 class="feature-title">22 表模块化架构</h3>
                <p class="feature-desc">文章 &#x2022; 产品 &#x2022; 案例 &#x2022; 表单 &#x2022; 幻灯片 &#x2022; 导航 &#x2022; 友链 &#x2022; 团队 &#x2022; SEO &#x2022; 媒体库。全功能开箱即用。</p>
            </div>
        </div>
    </div>
</section>

<!-- ==================== USE CASES ==================== -->
<section style="padding:var(--sp-14) 0;background:var(--bg-surface-2);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);">
    <div class="container">
        <div class="section-header section-header--center">
            <span class="section-label">// USE CASES</span>
            <h2 class="section-title">一个系统，多种场景</h2>
        </div>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);">
            <div style="background:var(--bg-surface-1);border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--sp-6);">
                <div style="font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;color:var(--accent);margin-bottom:var(--sp-3);">// 企业官网</div>
                <h3 style="font-family:var(--font-display);font-weight:600;margin-bottom:var(--sp-2);font-size:var(--fs-lg);">展示型网站</h3>
                <p style="font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-normal);">公司介绍、产品展示、新闻动态、案例展示、在线留言，一个后台全搞定。</p>
            </div>
            <div style="background:var(--bg-surface-1);border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--sp-6);">
                <div style="font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;color:var(--accent);margin-bottom:var(--sp-3);">// 个人博客</div>
                <h3 style="font-family:var(--font-display);font-weight:600;margin-bottom:var(--sp-2);font-size:var(--fs-lg);">内容创作平台</h3>
                <p style="font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-normal);">分类管理、标签系统、文章归档、SEO 优化，让您的创作被更多人看到。</p>
            </div>
            <div style="background:var(--bg-surface-1);border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--sp-6);">
                <div style="font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;color:var(--accent);margin-bottom:var(--sp-3);">// 建站服务</div>
                <h3 style="font-family:var(--font-display);font-weight:600;margin-bottom:var(--sp-2);font-size:var(--fs-lg);">多租户建站底座</h3>
                <p style="font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-normal);">基于无 CDK 授权体系，可作为多租户建站平台底座，客户自助授权无需人工干预。</p>
            </div>
        </div>
    </div>
</section>

<!-- ==================== QUICK SETUP ==================== -->
<section style="padding:var(--sp-14) 0;">
    <div class="container">
        <div class="section-header section-header--center">
            <span class="section-label">// QUICK START</span>
            <h2 class="section-title">三分钟上手</h2>
        </div>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);position:relative;">
            <div style="text-align:center;">
                <div style="width:56px;height:56px;margin:0 auto var(--sp-3);border-radius:50%;background:var(--accent-subtle);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:700;color:var(--accent);">1</div>
                <h4 style="font-family:var(--font-display);font-weight:600;font-size:var(--fs-base);margin-bottom:var(--sp-2);">下载并上传</h4>
                <p style="font-size:var(--fs-sm);color:var(--text-muted);">下载安装包，上传至服务器 Web 目录</p>
                <div style="margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--r-sm);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);text-align:left;overflow-x:auto;">
                    # 解压即用<br>
                    unzip BarjuCMS.zip<br>
                    chmod -R 755 ./
                </div>
            </div>
            <div style="text-align:center;">
                <div style="width:56px;height:56px;margin:0 auto var(--sp-3);border-radius:50%;background:var(--accent-subtle);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:700;color:var(--accent);">2</div>
                <h4 style="font-family:var(--font-display);font-weight:600;font-size:var(--fs-base);margin-bottom:var(--sp-2);">访问域名安装</h4>
                <p style="font-size:var(--fs-sm);color:var(--text-muted);">访问您的域名，自动进入安装向导</p>
                <div style="margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--r-sm);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent);text-align:left;">
                    # 填写数据库信息<br>
                    # 设置管理员账号<br>
                    # 一键完成配置
                </div>
            </div>
            <div style="text-align:center;">
                <div style="width:56px;height:56px;margin:0 auto var(--sp-3);border-radius:50%;background:var(--accent-subtle);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:700;color:var(--accent);">3</div>
                <h4 style="font-family:var(--font-display);font-weight:600;font-size:var(--fs-base);margin-bottom:var(--sp-2);">申请授权开用</h4>
                <p style="font-size:var(--fs-sm);color:var(--text-muted);">提交域名，立刻获得 365 天授权</p>
                <div style="margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--r-sm);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);text-align:left;">
                    # 提交域名即可<br>
                    # 无需人工审核<br>
                    # 即刻生效
                </div>
            </div>
        </div>
        <div style="text-align:center;margin-top:var(--sp-8);">
            <a href="<?php echo cms_url('download'); ?>" class="btn btn--primary btn--lg">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2v10M4 7l5 5 5-5M2 13v3h14v-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <span>免费下载 BarjuCMS</span>
            </a>
        </div>
    </div>
</section>

<!-- ==================== LATEST NEWS ==================== -->
<?php if ($latestNews): ?>
<section style="padding:var(--sp-14) 0;background:var(--bg-surface-2);border-top:1px solid var(--border-subtle);">
    <div class="container">
        <div class="section-header section-header--row">
            <div>
                <span class="section-label">// UPDATES</span>
                <h2 class="section-title">最新动态</h2>
            </div>
            <a href="<?php echo cms_url('news'); ?>" class="link-arrow">
                <span>全部文章</span>
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </a>
        </div>
        <div class="news-grid">
            <?php foreach ($latestNews as $a): ?>
            <article class="news-card">
                <a href="<?php echo cms_url('article', ['slug' => $a['slug']]); ?>">
                    <?php if ($a['cover_image']): ?>
                    <div class="news-card-image">
                        <img src="<?php echo $a['cover_image']; ?>" alt="<?php echo xss_clean($a['title']); ?>" loading="lazy">
                    </div>
                    <?php endif; ?>
                    <div class="news-card-body">
                        <div class="news-card-meta">
                            <time datetime="<?php echo date('c', strtotime($a['published_at'] ?: $a['created_at'])); ?>"><?php echo date('Y/m/d', strtotime($a['published_at'] ?: $a['created_at'])); ?></time>
                            <span class="news-card-views"><?php echo $a['views']; ?> views</span>
                        </div>
                        <h3 class="news-card-title"><?php echo xss_clean($a['title']); ?></h3>
                        <p class="news-card-desc"><?php echo xss_clean(str_cut($a['summary'] ?: strip_tags($a['content']), 100)); ?></p>
                    </div>
                </a>
            </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ==================== CASES ==================== -->
<?php if ($caseList): ?>
<section style="padding:var(--sp-14) 0;">
    <div class="container">
        <div class="section-header">
            <span class="section-label">// SHOWCASE</span>
            <h2 class="section-title">用 BarjuCMS 搭建的网站</h2>
        </div>
        <div class="case-grid">
            <?php foreach ($caseList as $c): ?>
            <article class="case-card">
                <a href="<?php echo cms_url('case', ['slug' => $c['slug']]); ?>">
                    <div class="case-card-image">
                        <?php if ($c['cover_image']): ?>
                        <img src="<?php echo $c['cover_image']; ?>" alt="<?php echo xss_clean($c['title']); ?>" loading="lazy">
                        <?php else: ?>
                        <div class="case-card-placeholder"></div>
                        <?php endif; ?>
                    </div>
                    <div class="case-card-body">
                        <?php if ($c['client_name']): ?>
                        <span class="case-card-client"><?php echo xss_clean($c['client_name']); ?></span>
                        <?php endif; ?>
                        <h3 class="case-card-title"><?php echo xss_clean($c['title']); ?></h3>
                        <p class="case-card-desc"><?php echo xss_clean(str_cut($c['summary'], 80)); ?></p>
                    </div>
                </a>
            </article>
            <?php endforeach; ?>
        </div>
        <div class="section-footer-center">
            <a href="<?php echo cms_url('cases'); ?>" class="btn btn--outline">
                <span>查看更多案例</span>
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </a>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ==================== FINAL CTA ==================== -->
<section class="cta-section" style="padding:var(--sp-16) 0;border-top:1px solid var(--border-subtle);">
    <div class="container" style="text-align:center;">
        <span class="cta-label">// GET STARTED</span>
        <h2 class="cta-title">现在开始，完全免费</h2>
        <p class="cta-desc" style="max-width:56ch;margin:0 auto var(--sp-8);">
            下载、部署、授权——三步走完，零成本启动。没有隐藏收费，没有功能阉割。
        </p>
        <div style="display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;">
            <a href="<?php echo cms_url('download'); ?>" class="btn btn--primary btn--lg">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2v10M4 7l5 5 5-5M2 13v3h14v-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <span>立即下载</span>
            </a>
            <a href="<?php echo cms_url('apply'); ?>" class="btn btn--outline btn--lg">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="4" width="14" height="12" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M6 2v4M12 2v4M2 8h14" stroke="currentColor" stroke-width="1.5"/></svg>
                <span>申请授权</span>
            </a>
        </div>
    </div>
</section>
