<?php
require_once __DIR__ . '/config.php';

if (isset($_SESSION['admin'])) {
    header('Location: admin/dashboard');
    exit;
}

$appName = 'SHORTLY';

// Build base URL
$scheme   = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https://' : 'http://';
$host     = $_SERVER['HTTP_HOST'] ?? 'localhost';
$baseUrl  = rtrim($scheme . $host, '/');
$canonical = $baseUrl . '/';

/* ==== SNAPSHOT METRICS ==== */
$totalLinks  = 0;
$totalClicks = 0;
$totalAdmins = 0;

try {
    // total shortlink
    $totalLinks = (int)$pdo->query("SELECT COUNT(*) FROM short_links")->fetchColumn();

    // total klik (handle NULL)
    $totalClicks = (int)$pdo->query("SELECT COALESCE(SUM(clicks),0) FROM short_links")->fetchColumn();

    // total admin
    $totalAdmins = (int)$pdo->query("SELECT COUNT(*) FROM admins")->fetchColumn();
} catch (Throwable $e) {
    // kalau error, biarin aja 0 semua (jangan ganggu halaman depan)
    $totalLinks  = 0;
    $totalClicks = 0;
    $totalAdmins = 0;
}

$login_error = null;
$open_login  = false;

// Handle login
if ($_SERVER['REQUEST_METHOD'] === 'POST' && ($_POST['action'] ?? '') === 'login') {
    $u = trim($_POST['user'] ?? '');
    $p = trim($_POST['pass'] ?? '');
    if (login_admin($u, $p)) {
        header('Location: admin/dashboard');
        exit;
    } else {
        $login_error = "Login failed. Please check your username / password.";
        $open_login  = true;
    }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title><?= htmlspecialchars($appName) ?> - Minimal Link Management</title>
<meta name="description" content="SHORTLY is a fast, secure, and minimal shortlink platform for teams. Create, manage, and track links with confidence.">
<link rel="canonical" href="<?= htmlspecialchars($canonical) ?>">
<meta name="robots" content="index,follow">
<meta property="og:title" content="<?= htmlspecialchars($appName) ?> – Minimal Link Management">
<meta property="og:description" content="Create, manage, and track shortlinks in a clean, distraction-free interface.">
<meta property="og:type" content="website">
<meta property="og:url" content="<?= htmlspecialchars($canonical) ?>">
<meta property="og:image" content="<?= htmlspecialchars($baseUrl) ?>/assets/icon.png">
<link rel="shortcut icon" href="<?= htmlspecialchars($baseUrl) ?>/assets/icon.png">

<style>
:root {
    --bg: #050505;
    --bg-soft: #0b0b0b;
    --fg: #f7f7f7;
    --muted: #a0a0a0;
    --border: #2a2a2a;
    --border-soft: #1a1a1a;
    --accent: #ffffff; /* putih aja */
    --radius: 14px;
    --space: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: radial-gradient(circle at top, #141414 0%, #050505 50%, #000 100%);
    color: var(--fg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Layout */
.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--space);
}

/* ================= NAVBAR ================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(5,5,5,0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
}

.nav {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg);
}

.logo-mark {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 0px 0px 4px 1px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
}

.nav-links a {
    padding: 8px 0;
    position: relative;
    color: var(--muted);
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width .18s ease-out;
}

.nav-links a:hover {
    color: var(--fg);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links .active {
    color: var(--fg);
}
.nav-links .active::after {
    width: 100%;
}

/* Buttons */

.btn-ghost,
.btn-solid {
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    font-weight: bold;
}

.btn-ghost:hover {
    background: #101010;
}

.btn-solid {
    background: var(--fg);
    color: #000;
    border-color: var(--fg);
}

.btn-solid:hover {
    background: #e4e4e4;
}

/* Mobile hamburger */

.hamb {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--border);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hamb span {
    width: 16px;
    height: 1.5px;
    background: var(--fg);
    position: relative;
}

.hamb span::before,
.hamb span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 1.5px;
    background: var(--fg);
}

.hamb span::before { top: -5px; }
.hamb span::after  { top:  5px; }

/* === MOBILE NAV === */
.mobile-panel {
    display: none;
    background: #050505;
    border-top: 1px solid var(--border);
}

.mobile-panel.open {
    display: block;
}

.mobile-inner {
    padding: 10px var(--space) 16px;
    border-top: 1px solid var(--border-soft);
}

.mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-list li + li {
    margin-top: 4px;
}

.mobile-list a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: #e5e5e5;              /* teks putih lembut */
    border-bottom: 1px solid #151515;
}

.mobile-list a:last-child {
    border-bottom: 0;
}

.mobile-list a:hover {
    color: #ffffff;
    background: #0b0b0b;
}

.mobile-login-btn {
    margin-top: 14px;
}

@media (max-width: 960px) {
    .nav-links { display: none; }
    .hamb { display: flex; }

    .mobile-panel {
        border-bottom: 1px solid var(--border-soft);
    }
}

/* ================= HERO ================= */

.hero {
    padding: 72px 0 54px;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(0,0.9fr);
    gap: 40px;
    align-items: center;
}

.hero-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted);
    margin-bottom: 10px;
    font-weight: bold;
}

.hero-title {
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 16px;
}

.hero-title span {
    color: var(--fg);
    border-bottom: 1px solid var(--border);
}

.hero-text {
    font-size: 14px;
    color: var(--muted);
    max-width: 420px;
    line-height: 1.6;
    margin-bottom: 22px;
    font-weight: bold;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-note {
    margin-top: 14px;
    font-size: 12px;
    color: #777;
    font-weight: bold;
}

/* hero right card */

.hero-card {
    background: rgba(10,10,10,0.95);
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 16px 18px 18px;
}

.hero-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.hero-card-title {
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: bold;
}

.hero-pill {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid #333;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
}

.hm-label {
    font-size: 11px;
    color: #7b7b7b;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: bold;
    text-align: center;
}
.hm-value {
    margin-top: 4px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* ================= FEATURE ROW ================= */

.features {
    padding: 40px 0 36px;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.features-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 18px;
}

.features-title {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.features-sub {
    font-size: 13px;
    color: var(--muted);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
}

.feature-card {
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 14px 14px 16px;
    background: rgba(9,9,9,0.92);
}

.feature-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 6px;
    font-weight: bold;
}

.feature-text {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    font-weight: bold;
}

/* ================= FOOTER ================= */

.footer {
    padding: 32px 0 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 18px;
    border-top: 1px solid var(--border-soft);
    padding-top: 22px;
    font-size: 13px;
}

.footer-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 8px;
    color: #e0e0e0;
}

.footer-link {
    color: var(--muted);
    margin-bottom: 4px;
}

.footer-link a:hover {
    color: var(--fg);
}

.footer-copy {
    color: #7a7a7a;
    font-weight: bold;
}

/* ================= LOGIN MODAL ================= */

.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 80;
}

.backdrop.show {
    display: flex;
}

.login-box {
    background: #050505;
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 22px 20px 20px;
    max-width: 340px;
    width: 92vw;
}

.login-title {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #d3d3d3;
    margin-bottom: 2px;
    text-align: center;
    font-weight: bold;
}

.login-sub {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px;
    text-align: center;
    font-weight: bold;
}

.form-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #b5b5b5;
    margin-bottom: 4px;
    font-weight: bold;
}

.form-group {
    margin-bottom: 14px;
}

.input {
    width: 100%;
    padding: 9px 0;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--fg);
    font-size: 13px;
}

.input:focus {
    outline: none;
    border-color: #e5e5e5;
}

.login-actions {
    margin-top: 4px;
}

.alert {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #4b1b1b;
    background: #210c0c;
    font-size: 12px;
    color: #f2b2b2;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 960px) {
    .nav-links { display: none; }
    .hamb { display: flex; }

    .hero-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 30px;
    }

    .hero {
        padding-top: 52px;
    }

    .features-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: minmax(0,1fr);
    }
}

.topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .badge-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:4px 10px 6px;
      border-radius:999px;
      border:1px solid var(--border);
      background:#020617;
      color:var(--text-soft);
      font-size:12px;
    }
    .badge-pill span.dot{
      width:8px;height:8px;border-radius:999px;
      background:#00ff66;box-shadow:0 0 6px #00ff66;
      animation: blinkGreen 1.2s infinite ease-in-out;
    }
    @keyframes blinkGreen {
      0%, 100% {opacity:1; box-shadow:0 0 6px #00ff66;}
      50% {opacity:0.2; box-shadow:0 0 2px #009944;}
    }
    .badge-pill-link{text-decoration:none}
    .badge-pill-link:hover .badge-pill{
      border-color: var(--accent-neon);
      box-shadow: 0 0 12px rgba(34,211,238,.4);
    }
</style>

<!-- JSON-LD: WebSite -->
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"WebSite",
  "name":"<?= htmlspecialchars($appName) ?>",
  "url":"<?= htmlspecialchars($canonical) ?>"
}
</script>

<!-- JSON-LD: Organization -->
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"Organization",
  "name":"<?= htmlspecialchars($appName) ?>",
  "url":"<?= htmlspecialchars($canonical) ?>",
  "logo":"<?= htmlspecialchars($baseUrl) ?>/assets/icon.png"
}
</script>

<!-- JSON-LD: Breadcrumb -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "<?= htmlspecialchars($canonical) ?>"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Features",
      "item": "<?= htmlspecialchars($baseUrl) ?>/features"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Pricing",
      "item": "<?= htmlspecialchars($baseUrl) ?>/pricing"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "FAQ",
      "item": "<?= htmlspecialchars($baseUrl) ?>/faq"
    },
    {
      "@type": "ListItem",
      "position": 5,
      "name": "Contact",
      "item": "<?= htmlspecialchars($baseUrl) ?>/contact"
    },
    {
      "@type": "ListItem",
      "position": 6,
      "name": "About Us",
      "item": "<?= htmlspecialchars($baseUrl) ?>/about-us"
    }
  ]
}
</script>
</head>
<body>

<header class="site-header">
  <div class="wrap nav">
    <div class="brand">
      <div class="logo-mark">S</div>
      <div class="logo"><?= htmlspecialchars($appName) ?></div>
    </div>

    <nav class="nav-links" aria-label="Primary">
      <a href="/" class="active">Home</a>
      <a href="features">Features</a>
      <a href="pricing">Pricing</a>
      <a href="faq">FAQ</a>
      <a href="contact">Contact</a>
      <a href="about-us">About Us</a>
      <button class="btn-solid" id="btn-open-login" type="button">Login</button>
    </nav>

    <button class="hamb" id="btn-menu" type="button" aria-label="Toggle navigation">
      <span></span>
    </button>
  </div>

  <!-- Mobile nav -->
  <div class="mobile-panel" id="mobile-menu">
    <div class="mobile-inner">
      <ul class="mobile-list">
        <li><a href="/">Home</a></li>
        <li><a href="features">Features</a></li>
        <li><a href="pricing">Pricing</a></li>
        <li><a href="faq">FAQ</a></li>
        <li><a href="contact">Contact</a></li>
        <li><a href="about-us">About Us</a></li>
      </ul>
      <div class="mobile-login-btn">
        <button class="btn-solid" style="width:100%;" type="button" onclick="openLogin()">Login</button>
      </div>
    </div>
  </div>
</header>

<main>
  <!-- HERO -->
  <section class="hero">
    <div class="wrap hero-grid">
      <div>
        <div class="hero-kicker">Link management</div>
        <h1 class="hero-title">Short links. <span>Long-term control.</span></h1>
        <p class="hero-text">
          Create short URLs, group them by project, and keep a clear view of clicks —
          without noisy colors or clutter. Just black, white, and data.
        </p>
        <div class="hero-cta">
          <a href="features" class="btn-solid">View Features</a>
          <a href="pricing" class="btn-ghost">View Pricing</a>
        </div>
        <div class="hero-note">
          No public signup. Access is managed by the owner via admin roles.
        </div>
      </div>

        <aside class="hero-card" aria-label="Dashboard summary">
          <div class="hero-card-header">
            <div>
              <a href="https://cawangrup4d.com/panel/customer/login" target="_blank" class="badge-pill-link">
              <div class="badge-pill"><span class="dot"></span> API</div>
              </a>
            </div>
            <div class="hero-pill">Private Panel</div>
          </div>
        
          <div class="hero-metrics">
            <div>
              <div class="hm-label">Shortlinks</div>
              <div class="hm-value"><?= number_format($totalLinks) ?></div>
            </div>
            <div>
              <div class="hm-label">Clicks</div>
              <div class="hm-value"><?= number_format($totalClicks) ?></div>
            </div>
            <div>
              <div class="hm-label">Admins</div>
              <div class="hm-value"><?= number_format($totalAdmins) ?></div>
            </div>
          </div>
        </aside>
    </div>
  </section>

  <!-- FEATURE STRIP -->
  <section class="features">
    <div class="wrap">
      <div class="features-head">
        <h2 class="features-title">Core Features</h2>
        <p class="features-sub">Everything you need, without visual noise.</p>
      </div>

      <div class="features-grid">
        <article class="feature-card">
          <div class="feature-title">Teams & Roles</div>
          <p class="feature-text">
            Owners see everything, admins only see their own links. Perfect for
            separating projects or brands without separate tools.
          </p>
        </article>

        <article class="feature-card">
          <div class="feature-title">Clean Redirects</div>
          <p class="feature-text">
            Server-side redirects with minimal logging. No third-party scripts,
            no tracking pixels, no color-heavy dashboards.
          </p>
        </article>

        <article class="feature-card">
          <div class="feature-title">Domain control</div>
          <p class="feature-text">
            Use your own domain for public links. Switch active domain via
            settings — all new shortlinks will follow automatically.
          </p>
        </article>
      </div>
    </div>
  </section>
</main>

<footer class="footer">
  <div class="wrap footer-grid">
    <div>
      <div class="footer-title">Shortly</div>
      <p class="footer-copy">© <?= date('Y') ?> <?= htmlspecialchars($appName) ?>. All rights reserved.</p>
    </div>

    <div>
      <div class="footer-title">Product</div>
      <p class="footer-link"><a href="features">Features</a></p>
      <p class="footer-link"><a href="pricing">Pricing</a></p>
    </div>

    <div>
      <div class="footer-title">Company</div>
      <p class="footer-link"><a href="about-us">About Us</a></p>
      <p class="footer-link"><a href="contact">Contact</a></p>
    </div>

    <div>
      <div class="footer-title">Admin</div>
      <p class="footer-link"><a href="admin/login">Login</a></p>
      <p class="footer-link"><a href="admin/dashboard">Dashboard</a></p>
    </div>
  </div>
</footer>

<!-- LOGIN MODAL -->
<div class="backdrop" id="login-modal" aria-hidden="true">
  <div class="login-box">
    <div class="login-title">Admin Login</div>
    <div class="login-sub">Access to the dashboard is restricted.</div>

    <form method="post" autocomplete="off">
      <input type="hidden" name="action" value="login">

      <div class="form-group">
        <label class="form-label">Username</label>
        <input class="input" type="text" name="user" required>
      </div>

      <div class="form-group">
        <label class="form-label">Password</label>
        <input class="input" type="password" name="pass" required>
      </div>

      <div class="login-actions">
        <button type="submit" class="btn-solid" style="width:100%;">Login</button>
      </div>

      <?php if ($login_error): ?>
        <div class="alert"><?= htmlspecialchars($login_error) ?></div>
      <?php endif; ?>
    </form>

    <div style="margin-top:10px;">
      <button type="button" class="btn-ghost" style="width:100%;" id="btn-close-login">Close</button>
    </div>
  </div>
</div>

<script>
// Mobile menu
const menuBtn   = document.getElementById('btn-menu');
const mobileNav = document.getElementById('mobile-menu');

if (menuBtn && mobileNav) {
  menuBtn.addEventListener('click', () => {
    const opened = mobileNav.classList.toggle('open');
    menuBtn.setAttribute('aria-expanded', opened ? 'true' : 'false');
  });
}

// Login modal
const loginModal = document.getElementById('login-modal');
const openLoginBtn  = document.getElementById('btn-open-login');
const closeLoginBtn = document.getElementById('btn-close-login');

function openLogin() {
  if (!loginModal) return;
  loginModal.classList.add('show');
  loginModal.setAttribute('aria-hidden', 'false');
}
function closeLogin() {
  if (!loginModal) return;
  loginModal.classList.remove('show');
  loginModal.setAttribute('aria-hidden', 'true');
}

if (openLoginBtn)  openLoginBtn.addEventListener('click', openLogin);
if (closeLoginBtn) closeLoginBtn.addEventListener('click', closeLogin);
if (loginModal) {
  loginModal.addEventListener('click', (e) => {
    if (e.target === loginModal) closeLogin();
  });
}

// Expose for mobile Login button
window.openLogin = openLogin;

<?php if ($open_login): ?>
openLogin();
<?php endif; ?>
</script>
</body>
</html>