<?php
require_once 'config/db.php';
require_once 'config/auth.php';

if (isLoggedIn()) {
    header("Location: " . (isAdmin() ? '/lostfound_relink/admin/dashboard.php' : '/lostfound_relink/user/dashboard.php'));
    exit;
}

// Public stats
$total_lost = $conn->query("SELECT COUNT(*) c FROM lost_items")->fetch_assoc()['c'];
$total_found = $conn->query("SELECT COUNT(*) c FROM found_items")->fetch_assoc()['c'];
$total_returned = $conn->query("SELECT COUNT(*) c FROM lost_items WHERE status='returned'")->fetch_assoc()['c'];
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RELINK - Lost & Found Management System</title>
<link rel="stylesheet" href="/lostfound_relink/assets/css/style.css?v=5">
</head>
<body>

<!-- HERO SECTION -->
<div class="landing">
    <nav class="landing-nav">
        <div class="landing-logo">
            <img src="/lostfound_relink/cyn_logo.png" alt="City Hall Logo" class="landing-logo-img">
            <div>
                <span class="landing-brand">🔗 RELINK</span>
                <span class="landing-brand-sub">Cauayan City Hall</span>
            </div>
        </div>
        <div class="nav-links">
            <a href="/lostfound_relink/public/browse.php" class="btn btn-outline-white btn-sm">Browse Items</a>
            <a href="/lostfound_relink/auth/login.php" class="btn btn-outline-white btn-sm">Sign In</a>
            <a href="/lostfound_relink/auth/register.php" class="btn btn-primary btn-sm">Register</a>
        </div>
    </nav>

    <div class="landing-hero">
        <div class="hero-badge">🏛️ Official City Hall System</div>
        <h1>Lost Something?<br><span class="hero-accent">We'll Help You Find It.</span></h1>
        <p>RELINK is the official Lost & Found Management System of Cauayan City Hall. Report lost items, browse found items, and get notified when a match is detected.</p>
        <div class="hero-btns">
            <a href="/lostfound_relink/auth/register.php" class="btn btn-primary btn-lg">🚀 Get Started Free</a>
            <a href="/lostfound_relink/public/browse.php" class="btn btn-outline-white btn-lg">🔍 Browse Found Items</a>
        </div>

        <div class="hero-stats">
            <div class="hero-stat">
                <div class="hero-stat-icon">📋</div>
                <div class="hero-stat-num"><?= $total_lost ?></div>
                <div class="hero-stat-label">Lost Reports</div>
            </div>
            <div class="hero-stat-divider"></div>
            <div class="hero-stat">
                <div class="hero-stat-icon">📦</div>
                <div class="hero-stat-num"><?= $total_found ?></div>
                <div class="hero-stat-label">Found Reports</div>
            </div>
            <div class="hero-stat-divider"></div>
            <div class="hero-stat">
                <div class="hero-stat-icon">✅</div>
                <div class="hero-stat-num"><?= $total_returned ?></div>
                <div class="hero-stat-label">Items Returned</div>
            </div>
        </div>
    </div>

    <div class="hero-scroll-hint">↓ Learn More</div>
</div>

<!-- HOW IT WORKS -->
<div class="landing-steps">
    <div class="steps-header">
        <span class="steps-label">Simple Process</span>
        <h2 class="section-title">How It Works</h2>
        <p class="section-sub">From reporting to reclaiming — done in 4 easy steps</p>
    </div>
    <div class="steps-timeline">
        <div class="steps-line"></div>

        <div class="step-item">
            <div class="step-bubble step-bubble--1"><span class="step-bubble-icon">📝</span><span class="step-bubble-num">1</span></div>
            <div class="step-body">
                <span class="step-tag">Start Here</span>
                <h3>Report Your Item</h3>
                <p>Fill out a quick form with your item's name, category, date, location, and an optional photo for better identification.</p>
                <div class="step-chips"><span>📷 Photo Upload</span><span>📍 Location</span><span>🗂️ Category</span></div>
            </div>
        </div>

        <div class="step-item step-item--alt">
            <div class="step-bubble step-bubble--2"><span class="step-bubble-icon">🤖</span><span class="step-bubble-num">2</span></div>
            <div class="step-body">
                <span class="step-tag step-tag--blue">Automatic</span>
                <h3>Smart Matching Runs</h3>
                <p>RELINK's algorithm instantly scans all reports and compares names, descriptions, categories, and locations to find the best match.</p>
                <div class="step-chips step-chips--blue"><span>🔍 Name Match</span><span>🗂️ Category</span><span>📍 Location</span></div>
            </div>
        </div>

        <div class="step-item">
            <div class="step-bubble step-bubble--3"><span class="step-bubble-icon">👨‍💼</span><span class="step-bubble-num">3</span></div>
            <div class="step-body">
                <span class="step-tag step-tag--orange">Admin Review</span>
                <h3>Verification &amp; SMS Alert</h3>
                <p>The admin reviews the suggested match. Once verified, you automatically receive an SMS notification on your registered number.</p>
                <div class="step-chips step-chips--orange"><span>✅ Admin Verified</span><span>📲 SMS Sent</span></div>
            </div>
        </div>

        <div class="step-item step-item--alt">
            <div class="step-bubble step-bubble--4"><span class="step-bubble-icon">🎉</span><span class="step-bubble-num">4</span></div>
            <div class="step-body">
                <span class="step-tag step-tag--green">Final Step</span>
                <h3>Claim Your Item</h3>
                <p>Visit Cauayan City Hall, present a valid ID to verify ownership, and walk away with your recovered item.</p>
                <div class="step-chips step-chips--green"><span>🪪 Valid ID</span><span>🏛️ City Hall</span></div>
            </div>
        </div>
    </div>
</div>

<!-- KEY FEATURES -->
<div class="landing-features">
    <h2 class="section-title">Key Features</h2>
    <p class="section-sub">Everything you need to manage lost and found items efficiently</p>
    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon-wrap green">📦</div>
            <h3>Easy Reporting</h3>
            <p>Submit lost or found item reports online with image upload support for faster identification.</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon-wrap blue">🤖</div>
            <h3>Smart Matching</h3>
            <p>Intelligent algorithm automatically compares item names, descriptions, categories, and locations.</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon-wrap orange">📱</div>
            <h3>SMS Notifications</h3>
            <p>Get notified via SMS the moment a possible match is detected for your reported item.</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon-wrap purple">📊</div>
            <h3>Real-Time Analytics</h3>
            <p>Live statistics, monthly trends, and demographic insights for administrators.</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon-wrap red">📍</div>
            <h3>Location Insights</h3>
            <p>Track hotspots inside City Hall where items are frequently lost or found.</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon-wrap teal">🔐</div>
            <h3>Secure & Reliable</h3>
            <p>Role-based access control, password hashing, and secure file upload protection.</p>
        </div>
    </div>
</div>

<!-- DEVELOPERS -->
<div style="background:var(--bg);padding:48px 24px;text-align:center">
    <div style="max-width:700px;margin:0 auto">
        <span style="display:inline-block;background:var(--primary-light);color:var(--primary);font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">The Team</span>
        <h2 class="section-title" style="margin-bottom:6px;font-size:24px">Meet the Developers</h2>
        <p class="section-sub" style="margin-bottom:32px;font-size:13px">The people behind RELINK Lost &amp; Found Management System</p>
        <div style="display:flex;justify-content:center;gap:16px;flex-wrap:wrap">

            <div style="background:var(--white);border:1px solid var(--border);border-radius:16px;padding:20px 24px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;min-width:160px" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 8px 20px rgba(0,0,0,.1)'" onmouseout="this.style.transform='';this.style.boxShadow='0 2px 8px rgba(0,0,0,.06)'">
                <div style="width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#4f9d1c,#84cc16);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#fff;margin:0 auto 10px;box-shadow:0 3px 8px rgba(79,157,28,.3)">J</div>
                <div style="font-size:14px;font-weight:800;color:var(--text)">John Miles Abat</div>
            </div>

            <div style="background:var(--white);border:1px solid var(--border);border-radius:16px;padding:20px 24px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;min-width:160px" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 8px 20px rgba(0,0,0,.1)'" onmouseout="this.style.transform='';this.style.boxShadow='0 2px 8px rgba(0,0,0,.06)'">
                <div style="width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#60a5fa);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#fff;margin:0 auto 10px;box-shadow:0 3px 8px rgba(59,130,246,.3)">L</div>
                <div style="font-size:14px;font-weight:800;color:var(--text)">Lloyd Raguindin</div>
            </div>

            <div style="background:var(--white);border:1px solid var(--border);border-radius:16px;padding:20px 24px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;min-width:160px" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 8px 20px rgba(0,0,0,.1)'" onmouseout="this.style.transform='';this.style.boxShadow='0 2px 8px rgba(0,0,0,.06)'">
                <div style="width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#f97316,#fb923c);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#fff;margin:0 auto 10px;box-shadow:0 3px 8px rgba(249,115,22,.3)">R</div>
                <div style="font-size:14px;font-weight:800;color:var(--text)">Reymart Zuniega</div>
            </div>

        </div>
    </div>
</div>

<!-- CTA BANNER -->
<div class="landing-cta">
    <div class="cta-inner">
        <h2>Ready to Find What You Lost?</h2>
        <p>Join the RELINK system and let us help you recover your belongings.</p>
        <div class="hero-btns">
            <a href="/lostfound_relink/auth/register.php" class="btn btn-primary btn-lg">Create Free Account</a>
            <a href="/lostfound_relink/auth/login.php" class="btn btn-outline-white btn-lg">Sign In</a>
        </div>
    </div>
</div>

<!-- FOOTER -->
<footer class="landing-footer">
    <div class="footer-inner">
        <div class="footer-brand">
            <img src="/lostfound_relink/cyn_logo.png" alt="Logo" class="footer-logo">
            <div>
                <div class="footer-brand-name">🔗 RELINK</div>
                <div class="footer-brand-sub">Cauayan City Hall Lost & Found</div>
            </div>
        </div>
        <div class="footer-links">
            <a href="/lostfound_relink/public/browse.php">Browse Items</a>
            <a href="/lostfound_relink/auth/login.php">Sign In</a>
            <a href="/lostfound_relink/auth/register.php">Register</a>
        </div>
    </div>
    <div class="footer-copy">© <?= date('Y') ?> RELINK — Cauayan City Hall. All rights reserved.</div>
</footer>

<script src="/lostfound_relink/assets/js/main.js"></script>
</body>
</html>
