<?php
session_start();
if (isset($_SESSION['user_id'])) {
    header('Location: dashboard.php');
    exit;
}
require_once __DIR__ . '/db/config.php';
$pdo = db();
$settings = $pdo->query("SELECT setting_key, setting_value FROM settings")->fetchAll(PDO::FETCH_KEY_PAIR);
$site_name = $settings['site_name'] ?? '全球接码';
$site_logo = $settings['site_logo'] ?? 'assets/pasted-20260210-082628-83f66727.png';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($site_name) ?> - 全球专业接码平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #3b82f6;
            --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            --bg-body: #f8fafc;
            --text-main: #1e293b;
        }
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: #f8fafc;
            color: var(--text-main);
            overflow-x: hidden;
            letter-spacing: -0.01em;
        }
        
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0) 50%);
            position: relative;
        }
        .hero-section::after {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 40%; height: 100%;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(59, 130, 246, 0) 100%);
            clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
            z-index: -1;
        }

        .navbar-brand img { height: 40px; }
        
        .hero-title {
            font-size: 4rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            letter-spacing: -2px;
        }
        .hero-subtitle {
            font-size: 1.25rem;
            color: #64748b;
            margin-bottom: 2.5rem;
            max-width: 600px;
        }

        .btn-main {
            padding: 18px 40px;
            font-weight: 800;
            border-radius: 18px;
            transition: all 0.3s;
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
        }
        .btn-main:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(59, 130, 246, 0.3); }

        .form-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 32px;
            padding: 3rem;
            box-shadow: 0 40px 80px rgba(15, 23, 42, 0.05);
        }

        .input-group-custom {
            margin-bottom: 1.5rem;
        }
        .input-group-custom label {
            font-weight: 700;
            font-size: 13px;
            color: #475569;
            margin-bottom: 8px;
            display: block;
            padding-left: 4px;
        }
        .input-group-custom .form-control {
            border: 1.5px solid #e2e8f0;
            border-radius: 16px;
            padding: 14px 20px;
            background: #fff;
            font-weight: 600;
            transition: all 0.2s;
        }
        .input-group-custom .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .stat-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            padding: 10px 20px;
            border-radius: 100px;
            font-weight: 800;
            font-size: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            margin-bottom: 2rem;
            color: var(--primary);
        }

        .floating-shape {
            position: absolute;
            z-index: -1;
            opacity: 0.1;
            filter: blur(2px);
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

        @media (max-width: 992px) {
            .hero-title { font-size: 3rem; }
            .hero-section { text-align: center; padding-top: 100px; padding-bottom: 100px; }
            .hero-subtitle { margin-left: auto; margin-right: auto; }
            .form-card { margin-top: 3rem; }
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg fixed-top py-4">
    <div class="container">
        <a class="navbar-brand fw-bold d-flex align-items-center gap-2" href="#">
            <img src="<?= htmlspecialchars($site_logo) ?>" alt="Logo">
            <span class="fs-4 fw-800" style="letter-spacing: -1px;"><?= htmlspecialchars($site_name) ?></span>
        </a>
        <div class="ms-auto">
            <a href="support.php" class="text-muted text-decoration-none fw-bold small me-4">联系客服</a>
            <button class="btn btn-outline-primary fw-bold rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#loginModal">登入系统</button>
        </div>
    </div>
</nav>

<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="stat-badge">
                    <i class="fas fa-signal"></i> 节点状态: 全球高可用实时连接
                </div>
                <h1 class="hero-title">
                    专业接码<br><span class="text-primary">从未如此简单</span>
                </h1>
                <p class="hero-subtitle">
                    支持全球 200+ 国家和地区，对接数千个热门社交平台及服务项目。全自动 API 监听，USDT 秒级入账，为您业务保驾护航。
                </p>
                <div class="d-flex gap-3">
                    <button class="btn btn-primary btn-main" data-bs-toggle="modal" data-bs-target="#registerModal">
                        立即开启接码之旅 <i class="fas fa-rocket ms-2"></i>
                    </button>
                </div>
                
                <div class="mt-5 pt-4 d-flex gap-5 opacity-50">
                    <div class="text-center">
                        <div class="h3 fw-800 mb-0">200+</div>
                        <div class="small fw-bold">国家地区</div>
                    </div>
                    <div class="text-center">
                        <div class="h3 fw-800 mb-0">5000+</div>
                        <div class="small fw-bold">日均项目</div>
                    </div>
                    <div class="text-center">
                        <div class="h3 fw-800 mb-0">0.01s</div>
                        <div class="small fw-bold">API 响应</div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-5 offset-lg-1">
                <div class="form-card" id="authForm">
                    <h3 class="fw-800 mb-2">快速加入</h3>
                    <p class="text-muted small mb-4">创建账号即刻开始您的自动化业务流程</p>
                    
                    <form id="registerForm" onsubmit="handleAuth(event, 'register')">
                        <div class="input-group-custom">
                            <label>设置用户名</label>
                            <input type="text" name="username" class="form-control" placeholder="输入 4-12 位英文字符" required>
                        </div>
                        <div class="input-group-custom">
                            <label>登录密码</label>
                            <input type="password" name="password" class="form-control" placeholder="设置您的复杂密码" required>
                        </div>
                        <div class="input-group-custom">
                            <label>确认密码</label>
                            <input type="password" name="confirm_password" class="form-control" placeholder="再次确认您的密码" required>
                        </div>
                        <button type="submit" class="btn btn-primary btn-main w-100 py-3 mt-2">
                            注册并登入 / SIGN UP
                        </button>
                        <p class="text-center mt-4 mb-0 small text-muted fw-bold">
                            已有账号？<a href="javascript:void(0)" class="text-primary text-decoration-none" data-bs-toggle="modal" data-bs-target="#loginModal">立即登入</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded-5 p-4">
            <div class="modal-body p-4">
                <div class="text-center mb-4">
                    <h3 class="fw-800">欢迎回来</h3>
                    <p class="text-muted small">请输入您的凭据以访问控制面板</p>
                </div>
                <form onsubmit="handleAuth(event, 'login')">
                    <div class="input-group-custom">
                        <label>用户名</label>
                        <input type="text" name="username" class="form-control" placeholder="输入您的用户名" required>
                    </div>
                    <div class="input-group-custom">
                        <label>密码</label>
                        <input type="password" name="password" class="form-control" placeholder="输入登录密码" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-main w-100 py-3 mt-3">立即登录 / SIGN IN</button>
                    <div class="text-center mt-4">
                        <a href="javascript:void(0)" class="small text-muted fw-bold text-decoration-none" data-bs-toggle="modal" data-bs-target="#registerModal">没有账号？点击注册</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    async function handleAuth(e, type) {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        const btn = form.querySelector('button[type="submit"]');
        const originalText = btn.innerHTML;
        
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> 处理中...';

        try {
            const res = await fetch(`auth.php?action=${type}`, { method: 'POST', body: formData });
            const data = await res.json();
            if (data.code === 0) {
                window.location.href = 'dashboard.php';
            } else {
                alert(data.msg || '操作失败');
                btn.disabled = false;
                btn.innerHTML = originalText;
            }
        } catch (error) {
            alert('网络异常');
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    }
</script>
</body>
</html>