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

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

$appName   = 'SHORTLY';
$baseUrl   = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' ? 'https://' : 'http://') . ($_SERVER['HTTP_HOST'] ?? 'localhost');
$canonical = $baseUrl . '/';

$login_error = null;
$open_login  = false;
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) ?> - Smart, Simple Link Management</title>
  <meta name="description" content="SHORTLY is a fast, secure, and simple shortlink platform for teams. Create, manage, and track links with confidence.">
  <link rel="canonical" href="<?= htmlspecialchars($canonical) ?>">
  <meta name="robots" content="index,follow">
  <meta name="google-site-verification" content="6sz5EF48LGLXwLuUtlf7nYtpapl4q69_rr1xNCEcWOU" />

  <!-- Open Graph -->
  <meta property="og:title" content="<?= htmlspecialchars($appName) ?> - Smart, Simple Link Management">
  <meta property="og:description" content="Create, manage, and track shortlinks in seconds.">
  <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:#06080f;--card:#0b1120;--muted:#9db0d3;--line:#17223a;
      --brand:#0ea5e9;--brand-2:#3b82f6;--white:#eaf2ff;--ink:#cfe0ff;
      --glow:0 0 22px rgba(14,165,233,.5);
      --space: clamp(14px, 2.5vw, 22px);
      --radius: 14px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--white);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif}
    a{color:#9ec8ff;text-decoration:none}
    a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--brand)}
    .wrap{max-width:1200px;margin:0 auto;padding:0 var(--space)}

    /* Header */
    .site-header{position:sticky;top:0;background:rgba(6,8,15,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:50}
    .nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:10px}
    .brand{display:flex;align-items:center;gap:12px;min-width:0}
    .logo{font-size:clamp(35px,5vw,28px);font-weight:800;letter-spacing:.4px;margin:0;text-shadow:0 0 20px rgba(0,140,255,.45)}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .nav-links{display:flex;gap:12px;align-items:center}
    .nav-links a{padding:8px 10px;color:var(--ink);border-radius:10px}
    .nav-links a:active{background:#0e172e}

    /* Hamburger */
    .hamb{display:none;gap:8px;align-items:center;border:1px solid var(--line);background:#0c1428;color:var(--ink);height:40px;padding:0 12px;border-radius:12px}
    .hamb i{width:18px;height:2px;background:var(--ink);position:relative;display:block}
    .hamb i::before,.hamb i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
    .hamb i::before{top:-6px}.hamb i::after{top:6px}

    .pill{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#0c1428;color:var(--ink)}
    .pill.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff;box-shadow:var(--glow)}

    /* Mobile menu panel */
    .mobile-panel{display:none}
    .mobile-panel.open{display:block}
    .mobile-card{background:rgba(6,8,15,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 0}
    .mobile-list{display:grid;gap:6px;padding:0 var(--space) var(--space)}
    .mobile-list a,.mobile-list button{width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0b1327;color:var(--ink)}
    .mobile-cta{display:flex;gap:10px;padding:0 var(--space) var(--space)}

    /* Hero */
    .hero{padding:clamp(22px,7vw,22px) 0 22px;border-bottom:1px solid var(--line);background:
      radial-gradient(650px 280px at 20% -20%,rgba(14,165,233,.15),transparent),
      radial-gradient(650px 280px at 80% -20%,rgba(59,130,246,.10),transparent)}
    .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
    .hero h1{font-size:clamp(28px,6.5vw,54px);line-height:1.07;margin:0 0 10px 0;text-wrap:balance;text-shadow:var(--glow)}
    .hero p{color:var(--muted);font-size:clamp(14px,3.7vw,18px);margin:0 0 18px 0}
    .cta-row{display:flex;gap:10px;flex-wrap:wrap}
    .hero-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
    .hero-card h3{margin:0 0 6px 0}
    .hero-card p{margin:0;color:var(--muted);line-height:1.55}

    /* Sections */
    section{padding:40px 0;border-bottom:1px solid var(--line)}
    .section-title{font-size:clamp(20px,5vw,28px);margin:0 0 14px}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
    .card h4{margin:0 0 8px}
    .muted{color:var(--muted)}
    .center{text-align:center}

    /* Pricing */
    .pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .price{font-size:clamp(28px,6vw,40px);font-weight:800;margin:6px 0 10px}

    /* FAQ */
    details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0}
    summary{cursor:pointer;font-weight:600}
    details > div{margin-top:8px;color:var(--muted);line-height:1.6}

    /* Contact */
    .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0c1428;color:#eaf2ff}
    textarea.input{min-height:120px;resize:vertical}

    /* Footer */
    .footer{padding:28px 0}
    .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:14px}
    .tiny{font-size:12px;color:#8aa0c6}

    /* Login Modal (unchanged neon vibe) */
    .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:60}
    .backdrop.show{display:flex}
    .login-box{background:rgba(10,15,30,.96);border:1px solid rgba(0,145,255,.35);border-radius:14px;padding:26px 22px;width:min(92vw,360px);
      box-shadow:0 0 25px rgba(0,140,255,.25);text-align:center;backdrop-filter:blur(10px);animation:fadeIn .35s ease-out}
    .login-logo{font-size:34px;font-weight:800;letter-spacing:.5px;margin:0 0 6px;filter:drop-shadow(0 0 6px #009dff)}
    .login-sub{margin:0 0 10px;color:#9fb8de}
    .lb{display:block;text-align:left;margin:10px 0 6px 2px;font-size:13px;color:#9fb0c6}
    .in{width:100%;padding:12px 14px;margin-bottom:10px;border:none;border-bottom:2px solid #1d4ed8;background:transparent;color:#f1f5f9}
    .in:focus{border-color:#3b82f6}
    .btn{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0c1428;color:var(--ink);cursor:pointer}
    .btn.block{width:100%}
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff;box-shadow:var(--glow)}
    .alert{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.5);color:#fca5a5;border-radius:8px;padding:10px;margin-top:8px;font-size:13px}
    @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

    /* ===== MOBILE FIRST FIXES ===== */
    @media (max-width: 980px){
      .nav-links{display:none}
      .hamb{display:flex}
      .hero-grid{grid-template-columns:1fr}
      .hero-card{order:2}
    }
    @media (max-width: 720px){
      section{padding:32px 0}
      .grid-3,.pricing,.foot-grid,.contact-grid{grid-template-columns:1fr}
      .hero{padding:18px 0 18px}
      .cta-row .pill{flex:1;min-width:46%}
      .card{padding:14px}
      .pill,.hamb{height:44px}
    }
    @media (max-width: 380px){
      .cta-row{gap:8px}
      .pill{padding:10px 12px;border-radius:10px}
      .login-box{padding:22px 16px}
    }
  </style>

  <!-- JSON-LD: WebSite + SearchAction -->
  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@type":"WebSite",
    "name":"<?= htmlspecialchars($appName) ?>",
    "url":"<?= htmlspecialchars($canonical) ?>",
    "potentialAction":{
      "@type":"SearchAction",
      "target":"<?= htmlspecialchars($canonical) ?>?q={search_term_string}",
      "query-input":"required name=search_term_string"
    }
  }
  </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: SiteNavigationElement -->
  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@type":"ItemList",
    "itemListElement":[
      {"@type":"SiteNavigationElement","position":1,"name":"Features","url":"<?= htmlspecialchars($canonical) ?>#features"},
      {"@type":"SiteNavigationElement","position":2,"name":"Pricing","url":"<?= htmlspecialchars($canonical) ?>#pricing"},
      {"@type":"SiteNavigationElement","position":3,"name":"FAQ","url":"<?= htmlspecialchars($canonical) ?>#faq"},
      {"@type":"SiteNavigationElement","position":4,"name":"Contact","url":"<?= htmlspecialchars($canonical) ?>#contact"}
    ]
  }
  </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) ?>"}
    ]
  }
  </script>

  <!-- JSON-LD: FAQPage -->
  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@type":"FAQPage",
    "mainEntity":[
      {"@type":"Question","name":"What is SHORTLY?","acceptedAnswer":{"@type":"Answer","text":"SHORTLY is a privacy-friendly shortlink platform for teams. Create, manage and track links easily."}},
      {"@type":"Question","name":"Can I use my own domain?","acceptedAnswer":{"@type":"Answer","text":"Yes. You can set your public domain in Settings and all new links will use that domain."}},
      {"@type":"Question","name":"Do you track personal data?","acceptedAnswer":{"@type":"Answer","text":"We only store minimal analytics. You remain in control of your data."}},
      {"@type":"Question","name":"Is there an admin dashboard?","acceptedAnswer":{"@type":"Answer","text":"Yes. Admins can log in to manage links, groups, admins, and domains."}}
    ]
  }
  </script>
</head>
<body>

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

      <div class="nav-actions">
        <nav class="nav-links" aria-label="Primary">
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
          <a href="#contact">Contact</a>
          <button class="pill primary" id="btn-open-login">Login</button>
        </nav>

        <button class="hamb" id="btn-menu" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
          <i></i><span style="font-size:14px">Menu</span>
        </button>
      </div>
    </div>

    <!-- Mobile panel -->
    <div id="mobile-menu" class="mobile-panel" role="dialog" aria-modal="false">
      <div class="mobile-card">
        <div class="mobile-list">
          <a href="#features" onclick="closeMenu()">Features</a>
          <a href="#pricing" onclick="closeMenu()">Pricing</a>
          <a href="#faq" onclick="closeMenu()">FAQ</a>
          <a href="#contact" onclick="closeMenu()">Contact</a>
        </div>
        <div class="mobile-cta">
          <button class="pill primary" style="flex:1" onclick="openLogin();closeMenu();">Login</button>
          <button class="pill" style="flex:1" onclick="closeMenu()">Close</button>
        </div>
      </div>
    </div>
  </header>

  <!-- Hero -->
  <section class="hero">
    <div class="wrap hero-grid">
      <div>
        <h1>Shorten. Manage. Track.<br>All in one place.</h1>
        <p>Build memorable links your team can manage in seconds. Custom aliases, groups, click logs, and multi-domain support included.</p>
        <div class="cta-row">
          <a href="#features" class="pill primary">Explore Features</a>
          <a href="#pricing" class="pill">See Pricing</a>
        </div>
      </div>
      <div class="hero-card" aria-label="Why teams switch">
        <h3>Why teams switch to <?= htmlspecialchars($appName) ?>?</h3>
        <p>• Custom short aliases<br>• Per-admin visibility<br>• Owner-level controls<br>• Click logs & export<br>• Fast & reliable</p>
      </div>
    </div>
  </section>

  <!-- Features -->
  <section id="features">
    <div class="wrap">
      <h2 class="section-title">Features that matter</h2>
      <div class="grid-3">
        <div class="card"><h4>Custom Aliases</h4><p class="muted">Create readable, branded shortlinks your users remember.</p></div>
        <div class="card"><h4>Per-Admin Visibility</h4><p class="muted">Admins only see their own links. Owners see everything.</p></div>
        <div class="card"><h4>Groups & Filtering</h4><p class="muted">Keep campaigns tidy with groups and a powerful filter.</p></div>
        <div class="card"><h4>Click Analytics</h4><p class="muted">Track clicks and view logs without invasive tracking.</p></div>
        <div class="card"><h4>Multi-Domain Ready</h4><p class="muted">Switch active public domain without changing code.</p></div>
        <div class="card"><h4>Fast & Secure</h4><p class="muted">Optimized PHP stack with minimal assets.</p></div>
      </div>
    </div>
  </section>

  <!-- Pricing -->
  <section id="pricing">
    <div class="wrap">
      <h2 class="section-title">Simple pricing</h2>
      <div class="pricing">
        <div class="card center">
          <h4>Starter</h4>
          <div class="price">$0</div>
          <p class="muted">Personal projects & testing.</p>
        </div>
        <div class="card center">
          <h4>Teams</h4>
          <div class="price">$99</div>
          <p class="muted">Small teams who need control.</p>
        </div>
        <div class="card center">
          <h4>Business</h4>
          <div class="price">$199</div>
          <p class="muted">Custom SLAs and onboarding.</p>
        </div>
      </div>
    </div>
  </div>
  </section>

  <!-- FAQ -->
  <section id="faq">
    <div class="wrap">
      <h2 class="section-title">Frequently asked questions</h2>
      <details>
        <summary>What is SHORTLY?</summary>
        <div>SHORTLY is a privacy-friendly shortlink platform that keeps admin control simple.</div>
      </details>
      <details>
        <summary>Can I use my own domain?</summary>
        <div>Yes. Set your active public domain in Settings and all new links will use it.</div>
      </details>
      <details>
        <summary>Do you support admin roles?</summary>
        <div>Yes. Owner sees everything; admins see only their own links.</div>
      </details>
      <details>
        <summary>Can I edit destination URLs later?</summary>
        <div>Yes. You can update the destination URL anytime from the dashboard.</div>
      </details>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact">
    <div class="wrap">
      <h2 class="section-title">Contact us</h2>
      <div class="contact-grid">
        <form class="card" onsubmit="event.preventDefault();alert('Thanks! We will get back to you shortly.');">
          <label class="lb">Name</label>
          <input class="input" type="text" placeholder="Your name" required>
          <label class="lb">Email</label>
          <input class="input" type="email" placeholder="you@example.com" required>
          <label class="lb">Message</label>
          <textarea class="input" placeholder="How can we help?" required></textarea>
          <div style="margin-top:10px"><button class="pill primary" type="submit">Send</button></div>
        </form>
        <div class="card">
          <h4>We’re here to help</h4>
          <p class="muted">Have a question about features, pricing, or migration? Send us a message and we’ll respond quickly.</p>
          <p class="muted">Prefer email? <a href="mailto:support@<?= htmlspecialchars($_SERVER['HTTP_HOST'] ?? 'example.com') ?>">support@shortly.com</a></p>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="wrap foot-grid">
      <div>
        <h3 class="logo" style="font-size:22px;margin:0 0 8px"><?= htmlspecialchars($appName) ?></h3>
        <p class="tiny">© <?= date('Y') ?> <?= htmlspecialchars($appName) ?>. All rights reserved.</p>
      </div>
      <div>
        <h4 style="margin:0 0 10px">Product</h4>
        <p class="tiny"><a href="#features">Features</a></p>
        <p class="tiny"><a href="#pricing">Pricing</a></p>
      </div>
      <div>
        <h4 style="margin:0 0 10px">Company</h4>
        <p class="tiny"><a href="#contact">Contact</a></p>
        <p class="tiny"><a href="#faq">FAQ</a></p>
      </div>
      <div>
        <h4 style="margin:0 0 10px">Admin</h4>
        <p class="tiny"><a href="admin/login">Login</a></p>
        <p class="tiny"><a href="admin/dashboard">Dashboard</a></p>
      </div>
    </div>
  </footer>

  <!-- Login Modal -->
  <div class="backdrop" id="login-modal" aria-hidden="true" role="dialog">
    <div class="login-box">
      <div class="login-logo"><?= htmlspecialchars($appName) ?></div>
      <p class="login-sub">Trusted Link Management Platform</p>
      <form method="post" autocomplete="off">
        <input type="hidden" name="action" value="login">
        <label class="lb">Username</label>
        <input class="in" type="text" name="user" required autofocus>
        <label class="lb">Password</label>
        <input class="in" type="password" name="pass" required>
        <button class="btn primary block" type="submit">Log in</button>
        <?php if ($login_error): ?>
          <div class="alert"><?= htmlspecialchars($login_error) ?></div>
        <?php endif; ?>
      </form>
      <div style="margin-top:10px"><button class="btn block" id="btn-close-login">Close</button></div>
    </div>
  </div>

  <script>
    // Mobile menu
    const menuBtn = document.getElementById('btn-menu');
    const menuPanel = document.getElementById('mobile-menu');
    function openMenu(){ menuPanel.classList.add('open'); menuBtn.setAttribute('aria-expanded','true'); }
    function closeMenu(){ menuPanel.classList.remove('open'); menuBtn.setAttribute('aria-expanded','false'); }
    menuBtn?.addEventListener('click', ()=> menuPanel.classList.contains('open') ? closeMenu() : openMenu());

    // Login modal
    const modal = document.getElementById('login-modal');
    const openBtn  = document.getElementById('btn-open-login');
    const closeBtn = document.getElementById('btn-close-login');
    function openLogin(){ modal.classList.add('show'); modal.setAttribute('aria-hidden','false'); }
    function closeLogin(){ modal.classList.remove('show'); modal.setAttribute('aria-hidden','true'); }
    openBtn?.addEventListener('click', openLogin);
    closeBtn?.addEventListener('click', closeLogin);
    modal.addEventListener('click', (e)=>{ if(e.target === modal) closeLogin(); });

    // Expose for mobile panel button
    window.openLogin = openLogin;
    window.closeMenu = closeMenu;

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