<?php
/**
 * Landing Page
 * LandSales Pro - Professional Land Sales Management
 */
define('APP_RUNNING', true);
require_once 'db_connect.php';
require_once 'includes/auth.php';
require_once 'includes/functions.php';
require_once 'includes/subscription.php';
require_once 'includes/track.php';

initSecureSession();

// Redirect if already logged in
if (isAuthenticated() && validateSession()) {
    if (isAdmin()) {
        header('Location: admin/');
    } else {
        header('Location: dashboard/');
    }
    exit;
}

// Get plans for pricing section
$plans = getAllPlans();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LandSalesPro - Land Management & Plot Sales Software for Africa</title>
    <meta name="title" content="LandSalesPro - Land Management & Plot Sales Software for Africa">
    <meta name="description" content="Professional land management software for African land developers and sellers. Manage thousands of plots, track sales, payments, agent commissions and generate reports. Trusted by 500+ developers.">
    <meta name="keywords" content="land management software, plot management software, real estate land sales software, land sales management system, plot tracking software, land developer software africa, real estate CRM, property plot management, land sales software, land management system">
    <meta name="robots" content="index, follow">
    <meta name="author" content="LandSecure">
    <meta name="language" content="English">
    <meta name="geo.region" content="TZ">
    <meta name="geo.placename" content="Tanzania">
    <link rel="canonical" href="https://landsalespro.landsecure.co.tz/">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://landsalespro.landsecure.co.tz/">
    <meta property="og:title" content="LandSalesPro - Land Management & Plot Sales Software">
    <meta property="og:description" content="Professional land management software for African land developers. Manage plots, track sales, payments and commissions.">
    <meta property="og:image" content="https://landsalespro.landsecure.co.tz/assets/images/og-image.png">
    <meta property="og:site_name" content="LandSalesPro">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://landsalespro.landsecure.co.tz/">
    <meta property="twitter:title" content="LandSalesPro - Land Management & Plot Sales Software">
    <meta property="twitter:description" content="Professional land management software for African land developers. Manage plots, track sales, payments and commissions.">

    <!-- Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "LandSalesPro",
        "operatingSystem": "Web",
        "applicationCategory": "BusinessApplication",
        "description": "Land management and plot sales software for land sellers and real estate developers in Africa.",
        "url": "https://landsalespro.landsecure.co.tz",
        "offers": {
            "@type": "Offer",
            "price": "50000",
            "priceCurrency": "TZS"
        },
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.8",
            "ratingCount": "156"
        }
    }
    </script>
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "LandSecure",
        "url": "https://landsecure.co.tz",
        "sameAs": [
            "https://landsalespro.landsecure.co.tz"
        ]
    }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/font-awesome/css/all.min.css">
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #667eea;
            --primary-dark: #764ba2;
            --secondary: #22c55e;
            --accent: #f59e0b;
            --dark: #1a1d21;
            --light: #f8fafc;
            --gray: #6b7280;
        }
        * { font-family: 'Inter', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        /* Navbar */
        .navbar {
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0,0,0,0.08);
            padding: 15px 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }
        .navbar-brand {
            font-weight: 800;
            font-size: 1.4rem;
            color: var(--primary) !important;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .navbar-brand .logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        .nav-link {
            color: var(--dark) !important;
            font-weight: 500;
            margin: 0 8px;
            transition: color 0.3s;
        }
        .nav-link:hover { color: var(--primary) !important; }
        .btn-nav {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white !important;
            border-radius: 10px;
            padding: 10px 25px !important;
            font-weight: 600;
            border: none;
        }
        .btn-nav:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
        }
        .btn-outline-nav {
            border: 2px solid var(--primary);
            color: var(--primary) !important;
            border-radius: 10px;
            padding: 8px 20px !important;
            font-weight: 600;
            background: transparent;
        }
        .btn-outline-nav:hover {
            background: var(--primary);
            color: white !important;
        }

        /* Hero */
        .hero {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 80px;
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.5;
        }
        .hero-content { position: relative; z-index: 1; }
        .hero h1 {
            font-size: 3.2rem;
            font-weight: 800;
            color: white;
            line-height: 1.2;
            margin-bottom: 20px;
        }
        .hero h1 span { color: var(--accent); }
        .hero p {
            font-size: 1.2rem;
            color: rgba(255,255,255,0.9);
            margin-bottom: 30px;
            max-width: 500px;
        }
        .hero-buttons .btn {
            padding: 15px 35px;
            font-weight: 600;
            border-radius: 12px;
            margin-right: 15px;
            margin-bottom: 10px;
            transition: all 0.3s;
        }
        .btn-hero-primary {
            background: var(--accent);
            border: none;
            color: var(--dark);
        }
        .btn-hero-primary:hover {
            background: #d97706;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(245,158,11,0.3);
        }
        .hero-image { position: relative; z-index: 1; }
        .hero-mockup {
            background: rgba(255,255,255,0.1);
            border-radius: 20px;
            padding: 20px;
            backdrop-filter: blur(10px);
        }
        .plot-grid-demo {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            padding: 20px;
            background: white;
            border-radius: 15px;
        }
        .plot-cell {
            aspect-ratio: 1;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 12px;
            color: white;
        }
        .plot-available { background: #22c55e; }
        .plot-sold { background: #ef4444; }
        .plot-reserved { background: #f59e0b; }
        .hero-stats {
            display: flex;
            gap: 40px;
            margin-top: 40px;
        }
        .stat-item { text-align: center; }
        .stat-number { font-size: 2.2rem; font-weight: 800; color: var(--accent); }
        .stat-label { color: rgba(255,255,255,0.8); font-size: 0.9rem; }

        /* Features */
        .features { padding: 100px 0; background: white; }
        .section-title { text-align: center; margin-bottom: 60px; }
        .section-title h2 { font-size: 2.5rem; font-weight: 800; color: var(--dark); margin-bottom: 15px; }
        .section-title p { color: var(--gray); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
        .feature-card {
            background: white;
            border-radius: 20px;
            padding: 35px 30px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            transition: all 0.3s;
            height: 100%;
            border: 1px solid #e5e7eb;
        }
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        }
        .feature-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        .feature-icon i { font-size: 1.8rem; color: white; }
        .feature-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--dark); margin-bottom: 12px; }
        .feature-card p { color: var(--gray); line-height: 1.7; font-size: 0.95rem; }

        /* Pricing */
        .pricing { padding: 100px 0; background: var(--light); }
        .pricing-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-bottom: 50px;
        }
        .pricing-toggle span { font-weight: 500; color: var(--gray); }
        .pricing-toggle span.active { color: var(--dark); font-weight: 600; }
        .toggle-switch {
            width: 60px;
            height: 30px;
            background: var(--primary);
            border-radius: 15px;
            position: relative;
            cursor: pointer;
        }
        .toggle-switch::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;
            background: white;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: 0.3s;
        }
        .toggle-switch.yearly::after { left: 33px; }
        .save-badge {
            background: var(--secondary);
            color: white;
            padding: 3px 10px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 600;
        }
        .pricing-card {
            background: white;
            border-radius: 20px;
            padding: 40px 35px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            text-align: center;
            position: relative;
            border: 2px solid #e5e7eb;
            transition: all 0.3s;
        }
        .pricing-card:hover { transform: translateY(-5px); }
        .pricing-card.featured {
            border-color: var(--primary);
            transform: scale(1.05);
        }
        .pricing-card.featured:hover { transform: scale(1.05) translateY(-5px); }
        .pricing-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            padding: 8px 25px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.85rem;
        }
        .pricing-card h3 { font-size: 1.4rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
        .pricing-price { font-size: 2.8rem; font-weight: 800; color: var(--primary); margin: 20px 0; }
        .pricing-price span { font-size: 1rem; color: var(--gray); font-weight: 400; }
        .pricing-features { list-style: none; padding: 0; margin: 25px 0; text-align: left; }
        .pricing-features li { padding: 10px 0; color: var(--gray); border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 10px; }
        .pricing-features li:last-child { border-bottom: none; }
        .pricing-features li i { color: var(--secondary); }
        .btn-pricing {
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn-pricing-primary {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border: none;
            color: white;
        }
        .btn-pricing-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
            color: white;
        }

        /* How It Works */
        .how-it-works { padding: 100px 0; background: white; }
        .step-card { text-align: center; padding: 30px; }
        .step-number {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 1.5rem;
            font-weight: 800;
            color: white;
        }
        .step-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
        .step-card p { color: var(--gray); }

        /* CTA */
        .cta {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            text-align: center;
        }
        .cta h2 { font-size: 2.5rem; font-weight: 800; color: white; margin-bottom: 20px; }
        .cta p { color: rgba(255,255,255,0.9); font-size: 1.1rem; margin-bottom: 30px; }
        .cta .btn {
            padding: 15px 40px;
            font-weight: 600;
            border-radius: 12px;
        }

        /* Footer */
        .footer { background: var(--dark); padding: 60px 0 30px; color: white; }
        .footer-brand { font-size: 1.4rem; font-weight: 800; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
        .footer-brand .logo-icon {
            width: 35px;
            height: 35px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .footer p { color: rgba(255,255,255,0.7); }
        .footer h5 { font-weight: 700; margin-bottom: 20px; }
        .footer-links { list-style: none; padding: 0; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.3s; }
        .footer-links a:hover { color: var(--accent); }
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            margin-top: 40px;
            padding-top: 30px;
            text-align: center;
            color: rgba(255,255,255,0.5);
        }

        /* Responsive */
        @media (max-width: 991px) {
            .navbar-collapse {
                background: white;
                padding: 20px;
                border-radius: 15px;
                box-shadow: 0 10px 40px rgba(0,0,0,0.1);
                margin-top: 15px;
            }
            .navbar-nav .nav-link { padding: 12px 0; }
        }
        @media (max-width: 768px) {
            .hero h1 { font-size: 2.2rem; }
            .hero-stats { gap: 20px; }
            .stat-number { font-size: 1.8rem; }
            .section-title h2 { font-size: 1.8rem; }
            .pricing-card.featured { transform: none; }
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="home.php">
                <div class="logo-icon"><i class="fas fa-map-marked-alt"></i></div>
                <?php echo APP_NAME; ?>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-lg-center">
                    <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
                    <li class="nav-item"><a class="nav-link" href="#how-it-works">How It Works</a></li>
                    <li class="nav-item"><a class="nav-link btn-outline-nav ms-lg-3" href="login.php">Login</a></li>
                    <li class="nav-item"><a class="nav-link btn-nav ms-lg-2" href="register.php">Start Free Trial</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero -->
    <section class="hero">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 hero-content">
                    <h1>Manage <span>Thousands of Plots</span> Effortlessly</h1>
                    <p>The complete land sales management system for African developers. Track plots, sales, payments, expenses, and profits - all in one place.</p>
                    <div class="hero-buttons">
                        <a href="register.php" class="btn btn-hero-primary btn-lg">
                            <i class="fas fa-rocket me-2"></i>Start Free Trial
                        </a>
                        <a href="#features" class="btn btn-outline-light btn-lg">Learn More</a>
                    </div>
                    <div class="hero-stats">
                        <div class="stat-item">
                            <div class="stat-number"><?php echo TRIAL_DAYS; ?></div>
                            <div class="stat-label">Days Free Trial</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">10K+</div>
                            <div class="stat-label">Plots Managed</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">100%</div>
                            <div class="stat-label">Cloud-Based</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 d-none d-lg-block hero-image">
                    <div class="hero-mockup">
                        <div class="plot-grid-demo">
                            <div class="plot-cell plot-sold">A1</div>
                            <div class="plot-cell plot-sold">A2</div>
                            <div class="plot-cell plot-available">A3</div>
                            <div class="plot-cell plot-available">A4</div>
                            <div class="plot-cell plot-reserved">A5</div>
                            <div class="plot-cell plot-available">B1</div>
                            <div class="plot-cell plot-sold">B2</div>
                            <div class="plot-cell plot-sold">B3</div>
                            <div class="plot-cell plot-available">B4</div>
                            <div class="plot-cell plot-available">B5</div>
                            <div class="plot-cell plot-reserved">C1</div>
                            <div class="plot-cell plot-available">C2</div>
                            <div class="plot-cell plot-sold">C3</div>
                            <div class="plot-cell plot-available">C4</div>
                            <div class="plot-cell plot-sold">C5</div>
                            <div class="plot-cell plot-available">D1</div>
                            <div class="plot-cell plot-available">D2</div>
                            <div class="plot-cell plot-reserved">D3</div>
                            <div class="plot-cell plot-sold">D4</div>
                            <div class="plot-cell plot-available">D5</div>
                        </div>
                        <div class="d-flex justify-content-center gap-4 mt-3">
                            <span><span class="plot-cell plot-available" style="display:inline-block;width:20px;height:20px;border-radius:4px;"></span> Available</span>
                            <span><span class="plot-cell plot-sold" style="display:inline-block;width:20px;height:20px;border-radius:4px;"></span> Sold</span>
                            <span><span class="plot-cell plot-reserved" style="display:inline-block;width:20px;height:20px;border-radius:4px;"></span> Reserved</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features -->
    <section class="features" id="features">
        <div class="container">
            <div class="section-title">
                <h2>Everything You Need to Manage Land Sales</h2>
                <p>Powerful features designed for African land developers and sellers</p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon"><i class="fas fa-th"></i></div>
                        <h3>Visual Plot Grid</h3>
                        <p>See all your plots at a glance with color-coded status. Green for available, red for sold, orange for reserved.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon"><i class="fas fa-money-bill-wave"></i></div>
                        <h3>Payment Tracking</h3>
                        <p>Track installment payments, send reminders for overdue payments, and generate receipts automatically.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon"><i class="fas fa-users"></i></div>
                        <h3>Buyer Management</h3>
                        <p>Keep track of all your buyers, their purchases, payment history, and outstanding balances.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon"><i class="fas fa-user-tie"></i></div>
                        <h3>Agent Commissions</h3>
                        <p>Manage sales agents, track their sales, and calculate commissions automatically.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon"><i class="fas fa-receipt"></i></div>
                        <h3>Expense Tracking</h3>
                        <p>Record all project expenses - survey costs, marketing, legal fees, and more.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon"><i class="fas fa-chart-line"></i></div>
                        <h3>Profit Reports</h3>
                        <p>Calculate your profit instantly. Revenue minus expenses equals clear business insights.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section class="how-it-works" id="how-it-works">
        <div class="container">
            <div class="section-title">
                <h2>Get Started in Minutes</h2>
                <p>Simple steps to transform your land sales business</p>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="step-card">
                        <div class="step-number">1</div>
                        <h3>Create Account</h3>
                        <p>Sign up free and start your <?php echo TRIAL_DAYS; ?>-day trial</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="step-card">
                        <div class="step-number">2</div>
                        <h3>Add Projects</h3>
                        <p>Create your land development projects</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="step-card">
                        <div class="step-number">3</div>
                        <h3>Add Plots</h3>
                        <p>Add plots with prices and details</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="step-card">
                        <div class="step-number">4</div>
                        <h3>Start Selling</h3>
                        <p>Record sales and track payments</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing -->
    <section class="pricing" id="pricing">
        <div class="container">
            <div class="section-title">
                <h2>Simple, Transparent Pricing</h2>
                <p>Choose the plan that fits your business</p>
            </div>
            <div class="pricing-toggle">
                <span class="monthly-label active">Monthly</span>
                <div class="toggle-switch" id="billingToggle"></div>
                <span class="yearly-label">Yearly</span>
                <span class="save-badge">Save 17%</span>
            </div>
            <div class="row g-4 justify-content-center">
                <?php foreach ($plans as $index => $plan): ?>
                <div class="col-lg-4 col-md-6">
                    <div class="pricing-card <?php echo $index === 1 ? 'featured' : ''; ?>">
                        <?php if ($index === 1): ?>
                        <span class="pricing-badge">Most Popular</span>
                        <?php endif; ?>
                        <h3><?php echo htmlspecialchars($plan['name']); ?></h3>
                        <p class="text-muted"><?php echo htmlspecialchars($plan['description']); ?></p>
                        <div class="pricing-price monthly-price">
                            <?php echo formatMoney($plan['price_monthly']); ?><span>/month</span>
                        </div>
                        <div class="pricing-price yearly-price" style="display:none;">
                            <?php echo formatMoney($plan['price_yearly'] / 12); ?><span>/month</span>
                        </div>
                        <ul class="pricing-features">
                            <li><i class="fas fa-check"></i> <?php echo ($plan['max_projects'] === null || $plan['max_projects'] == -1) ? 'Unlimited' : $plan['max_projects']; ?> Projects</li>
                            <li><i class="fas fa-check"></i> <?php echo ($plan['max_plots'] === null || $plan['max_plots'] == -1) ? 'Unlimited' : number_format($plan['max_plots']); ?> Plots</li>
                            <li><i class="fas fa-check"></i> <?php echo ($plan['max_agents'] === null || $plan['max_agents'] == -1) ? 'Unlimited' : $plan['max_agents']; ?> Agents</li>
                            <li><i class="fas fa-check"></i> Sales & Payment Tracking</li>
                            <li><i class="fas fa-check"></i> Reports & Analytics</li>
                        </ul>
                        <a href="register.php?plan=<?php echo $plan['slug']; ?>" class="btn btn-pricing btn-pricing-primary">
                            Start Free Trial
                        </a>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="cta">
        <div class="container">
            <h2>Ready to Transform Your Land Business?</h2>
            <p>Join hundreds of land developers who trust <?php echo APP_NAME; ?> to manage their sales</p>
            <a href="register.php" class="btn btn-hero-primary btn-lg">
                <i class="fas fa-rocket me-2"></i>Start Your Free Trial
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <div class="footer-brand">
                        <div class="logo-icon"><i class="fas fa-map-marked-alt"></i></div>
                        <?php echo APP_NAME; ?>
                    </div>
                    <p><?php echo APP_TAGLINE; ?>. The complete solution for land developers in Africa.</p>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <h5>Product</h5>
                    <ul class="footer-links">
                        <li><a href="#features">Features</a></li>
                        <li><a href="#pricing">Pricing</a></li>
                        <li><a href="register.php">Free Trial</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <h5>Solutions</h5>
                    <ul class="footer-links">
                        <li><a href="land-management-software">Land Management</a></li>
                        <li><a href="plot-management-system">Plot Management</a></li>
                        <li><a href="land-sales-software">Sales Tracking</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <h5>Partner Sites</h5>
                    <ul class="footer-links">
                        <li><a href="https://landsecure.co.tz" target="_blank">LandSecure</a></li>
                        <li><a href="https://landsecure.co.tz/land-scanner" target="_blank">Land Scanner</a></li>
                        <li><a href="https://landsecure.co.tz/land-conflict-detection" target="_blank">Conflict Detection</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-4 mb-4">
                    <h5>Contact</h5>
                    <ul class="footer-links">
                        <li><a href="contact.php"><i class="fas fa-headset me-2"></i> Contact Us</a></li>
                        <li><a href="mailto:<?php echo SUPPORT_EMAIL; ?>"><i class="fas fa-envelope me-2"></i> <?php echo SUPPORT_EMAIL; ?></a></li>
                        <li><a href="tel:<?php echo SUPPORT_PHONE; ?>"><i class="fas fa-phone me-2"></i> <?php echo SUPPORT_PHONE; ?></a></li>
                        <li><a href="https://wa.me/<?php echo WHATSAPP_NUMBER; ?>" target="_blank"><i class="fab fa-whatsapp me-2"></i> WhatsApp</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; <?php echo date('Y'); ?> <?php echo APP_NAME; ?>. All rights reserved.</p>
                <p class="mt-2">Designed by <a href="https://pitech.co.tz" target="_blank" rel="noopener" style="color: var(--accent);">Pitech</a></p>
            </div>
        </div>
    </footer>

    <script src="assets/vendor/jquery/jquery.min.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
        // Billing toggle
        const toggle = document.getElementById('billingToggle');
        const monthlyPrices = document.querySelectorAll('.monthly-price');
        const yearlyPrices = document.querySelectorAll('.yearly-price');
        const monthlyLabel = document.querySelector('.monthly-label');
        const yearlyLabel = document.querySelector('.yearly-label');

        toggle.addEventListener('click', function() {
            this.classList.toggle('yearly');
            if (this.classList.contains('yearly')) {
                monthlyPrices.forEach(el => el.style.display = 'none');
                yearlyPrices.forEach(el => el.style.display = 'block');
                monthlyLabel.classList.remove('active');
                yearlyLabel.classList.add('active');
            } else {
                monthlyPrices.forEach(el => el.style.display = 'block');
                yearlyPrices.forEach(el => el.style.display = 'none');
                monthlyLabel.classList.add('active');
                yearlyLabel.classList.remove('active');
            }
        });

        // Smooth scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });
    </script>
</body>
</html>
