<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ProDocBuilder | Instant Legal Document Generator</title>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- PDF Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

    <style>
        /* --- CSS VARIABLES & RESET (From LifeBackupNow) --- */
        :root {
            --primary: #6a11cb;
            --secondary: #2575fc;
            --accent: #00f2fe;
            --dark: #0f172a;
            --dark-glass: rgba(15, 23, 42, 0.8);
            --light: #f8fafc;
            --text-main: #334155;
            --text-light: #f1f5f9;
            --glass-bg: rgba(255, 255, 255, 0.7);
            --glass-border: 1px solid rgba(255, 255, 255, 0.5);
            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
            --gradient-main: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            --gradient-animated: linear-gradient(-45deg, #6a11cb, #2575fc, #00f2fe, #6a11cb);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
        body { font-family: 'Outfit', sans-serif; color: var(--text-main); background-color: var(--light); line-height: 1.6; overflow-x: hidden; }
        h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: -0.5px; }
        a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
        ul { list-style: none; }
        img { max-width: 100%; height: auto; }

        /* --- BACKGROUND SHAPES & ANIMATIONS --- */
        .bg-shape { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 0; opacity: 0.6; animation: float-shape 10s infinite alternate; }
        @keyframes float-shape { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, 50px); } }
        .shape-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: rgba(106, 17, 203, 0.3); }
        .shape-2 { bottom: 10%; right: -5%; width: 400px; height: 400px; background: rgba(0, 242, 254, 0.2); animation-delay: -5s; }

        /* --- UTILITIES --- */
        .container { width: 90%; max-width: 1280px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
        .btn { position: relative; display: inline-block; padding: 14px 35px; border-radius: 50px; font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; cursor: pointer; border: none; transition: all 0.4s; overflow: hidden; z-index: 1; }
        .btn-primary { background: var(--gradient-main); color: white; box-shadow: 0 10px 20px rgba(37, 117, 252, 0.3); }
        .btn-primary:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(37, 117, 252, 0.5); }
        .btn-outline { background: transparent; border: 2px solid rgba(255,255,255,0.8); color: white; backdrop-filter: blur(5px); }
        .btn-outline:hover { background: white; color: var(--primary); border-color: white; box-shadow: 0 0 20px rgba(255,255,255,0.4); }
        .section-padding { padding: 100px 0; position: relative; }
        .section-header { text-align: center; margin-bottom: 70px; position: relative; z-index: 2; }
        .section-header h2 { font-size: 3rem; color: var(--dark); margin-bottom: 15px; background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
        .section-header p { color: #64748b; font-size: 1.2rem; max-width: 600px; margin: 0 auto; }

        /* --- HEADER --- */
        header { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(16px); position: fixed; width: 100%; top: 0; z-index: 1000; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
        nav { display: flex; justify-content: space-between; align-items: center; height: 80px; }
        .logo { font-size: 1.8rem; font-weight: 800; font-family: 'Montserrat', sans-serif; color: var(--dark); display: flex; align-items: center; gap: 12px; cursor: pointer; }
        .logo i { font-size: 2rem; background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .nav-links { display: flex; gap: 40px; align-items: center; }
        .nav-links li a { font-weight: 600; font-size: 1rem; color: var(--text-main); position: relative; }
        .nav-links li a:hover { color: var(--primary); }
        .hamburger { display: none; cursor: pointer; font-size: 1.8rem; color: var(--dark); }

        /* --- HERO --- */
        .hero { min-height: 100vh; background: var(--gradient-animated); background-size: 400% 400%; animation: gradientBG 15s ease infinite; position: relative; display: flex; align-items: center; color: white; overflow: hidden; padding-top: 80px; }
        @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
        .hero-text h1 { font-size: 4.5rem; line-height: 1.1; margin-bottom: 25px; font-weight: 800; text-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .hero-text p { font-size: 1.3rem; margin-bottom: 40px; opacity: 0.9; font-weight: 300; max-width: 600px; }
        .glass-panel { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); padding: 40px; border-radius: 30px; box-shadow: 0 25px 50px rgba(0,0,0,0.2); text-align: center; transform: rotateY(-10deg) rotateX(5deg); transition: transform 0.5s ease; animation: float 6s ease-in-out infinite; }
        .hero-image:hover .glass-panel { transform: rotateY(0) rotateX(0); }
        @keyframes float { 0% { transform: rotateY(-10deg) rotateX(5deg) translateY(0px); } 50% { transform: rotateY(-10deg) rotateX(5deg) translateY(-20px); } 100% { transform: rotateY(-10deg) rotateX(5deg) translateY(0px); } }
        .hero-stats { display: flex; justify-content: space-between; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 20px; }
        .stat-item h4 { font-size: 1.5rem; margin-bottom: 5px; }
        .stat-item span { font-size: 0.8rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; }

        /* --- CARDS (Templates) --- */
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; position: relative; z-index: 2; }
        .feature-card { background: var(--glass-bg); backdrop-filter: blur(10px); padding: 50px 30px; border-radius: 24px; border: var(--glass-border); box-shadow: var(--glass-shadow); text-align: center; transition: all 0.4s ease; position: relative; overflow: hidden; }
        .feature-card:hover { transform: translateY(-15px); box-shadow: 0 20px 40px rgba(106, 17, 203, 0.15); }
        .icon-box { width: 80px; height: 80px; background: linear-gradient(135deg, rgba(106, 17, 203, 0.1), rgba(37, 117, 252, 0.1)); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 2rem; color: var(--primary); transition: 0.4s; }
        .feature-card:hover .icon-box { background: var(--gradient-main); color: white; transform: rotate(10deg); border-radius: 50%; }

        /* --- PRICING (Compact & Curvy) --- */
        .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; justify-items: center; }
        
        .pricing-card { 
            background: white; 
            border-radius: 50px; /* Enhanced curvature */
            overflow: hidden; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.05); 
            transition: 0.4s; 
            border: 1px solid rgba(0,0,0,0.03); 
            display: flex; 
            flex-direction: column; 
            height: 100%; 
            position: relative;
            width: 100%;
            max-width: 360px; /* Reduced width to not look "big" */
        }
        
        .pricing-card:hover { transform: translateY(-10px); }
        
        .pricing-card.featured { 
            transform: scale(1.05); 
            border: 2px solid var(--secondary); 
            box-shadow: 0 20px 60px rgba(37, 117, 252, 0.15); 
            z-index: 2; 
        }
        
        .pricing-card.featured:hover { transform: translateY(-10px) scale(1.07); }
        
        .price-header { 
            padding: 40px 30px 20px; /* Reduced top padding */
            text-align: center; 
        }
        
        .price { 
            font-size: 3rem; /* Slightly smaller font */
            font-weight: 800; 
            background: var(--gradient-main); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
        }
        
        .price-features { 
            padding: 0 30px 30px; /* Reduced side padding */
            flex-grow: 1; 
        }
        
        .price-features li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 0.95rem; }
        .price-features i { color: var(--secondary); }
        
        .price-footer { 
            padding: 0 30px 40px; /* Reduced bottom padding */
        }
        
        .btn-price { 
            width: 100%; 
            padding: 12px; 
            border: 2px solid var(--secondary); 
            color: var(--secondary); 
            background: transparent; 
            border-radius: 25px; /* Curvier buttons */
            font-weight: 700; 
            cursor: pointer; 
            transition: 0.3s; 
        }
        .btn-price:hover { background: var(--gradient-main); color: white; border-color: transparent; }
        .popular-tag {
            background: var(--gradient-main);
            color: white;
            text-align: center;
            padding: 8px 0;
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* --- EDITOR & DASHBOARD (Custom for LegalFlow) --- */
        .spa-view { display: none; padding-top: 100px; min-height: 100vh; animation: fadeIn 0.5s ease-out; }
        .spa-view.active { display: block; }
        
        /* Editor Layout */
        .editor-container { display: flex; flex-wrap: wrap; gap: 40px; }
        .editor-form { flex: 1; min-width: 300px; background: white; padding: 40px; border-radius: 24px; box-shadow: var(--glass-shadow); height: fit-content; }
        .editor-preview { flex: 1.5; min-width: 300px; display: flex; justify-content: center; background: #e2e8f0; padding: 40px; border-radius: 24px; position: relative; }
        
        .legal-paper { 
            background: white; 
            width: 100%; 
            max-width: 210mm; 
            min-height: 297mm; 
            padding: 25mm; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
            font-family: 'Times New Roman', Times, serif; 
            font-size: 12pt; 
            line-height: 1.6; 
            color: black;
            position: relative;
        }
        
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark); font-size: 0.9rem; }
        .form-group input, .form-group select { width: 100%; padding: 12px 20px; border: 2px solid #e2e8f0; border-radius: 12px; font-family: 'Outfit', sans-serif; font-size: 1rem; transition: 0.3s; outline: none; }
        .form-group input:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(37, 117, 252, 0.1); }

        .watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 4rem; font-weight: 900; color: rgba(0,0,0,0.05); white-space: nowrap; pointer-events: none; user-select: none; }

        /* Dashboard Table */
        .dashboard-card { background: white; border-radius: 24px; overflow: hidden; box-shadow: var(--glass-shadow); }
        .dash-table { width: 100%; border-collapse: collapse; }
        .dash-table th { background: #f8fafc; text-align: left; padding: 20px; color: #64748b; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; }
        .dash-table td { padding: 20px; border-bottom: 1px solid #f1f5f9; }
        .dash-table tr:hover { background: #f8fafc; }
        .status-badge { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; background: #dcfce7; color: #166534; }

        /* --- MODAL --- */
        .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.85); backdrop-filter: blur(5px); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
        .modal.show { opacity: 1; }
        .modal-content { background: white; padding: 40px; border-radius: 30px; width: 90%; max-width: 450px; position: relative; transform: scale(0.9); transition: transform 0.3s ease; text-align: center; }
        .modal.show .modal-content { transform: scale(1); }
        .close-modal { position: absolute; top: 20px; right: 25px; font-size: 24px; cursor: pointer; color: #94a3b8; }
        .close-modal:hover { color: var(--dark); }

        /* --- FOOTER --- */
        footer { background: #020617; color: #94a3b8; padding: 80px 0 30px; font-size: 0.95rem; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 50px; margin-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 60px; }
        .social-icons a { width: 40px; height: 40px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: white; margin-right: 10px; transition: 0.3s; }
        .social-icons a:hover { background: var(--gradient-main); transform: translateY(-3px); }

        /* Animation Keyframes */
        .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .fade-in.visible { opacity: 1; transform: translateY(0); }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        @media (max-width: 768px) {
            .hero-content { grid-template-columns: 1fr; text-align: center; padding-top: 40px; }
            .hero-text h1 { font-size: 3rem; }
            .hero-btns { justify-content: center; }
            .nav-links { position: absolute; right: 0; top: 80px; background: white; flex-direction: column; width: 100%; text-align: center; padding: 40px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: none; }
            .nav-links.active { display: flex; }
            .hamburger { display: block; }
            .glass-panel { transform: none; animation: none; margin: 0 auto; max-width: 350px; }
            .editor-container { flex-direction: column; }
        }
    </style>
</head>
<body>

    <!-- Header -->
    <header>
        <div class="container">
            <nav>
                <div class="logo" onclick="router('home')">
                    <i class="fa-solid fa-scale-balanced"></i> ProDocBuilder
                </div>
                <ul class="nav-links" id="navLinks">
                    <li><a href="#" onclick="router('home'); scrollToSection('templates')">Templates</a></li>
                    <li><a href="#" onclick="router('home'); scrollToSection('pricing')">Pricing</a></li>
                    <li><a href="#" onclick="router('dashboard')">My Dashboard</a></li>
                    <li><a href="#" class="btn btn-primary" style="padding: 10px 25px; font-size: 0.8rem;" onclick="router('home'); scrollToSection('templates')">Create Now</a></li>
                </ul>
                <div class="hamburger" onclick="toggleMenu()">
                    <i class="fa-solid fa-bars-staggered"></i>
                </div>
            </nav>
        </div>
    </header>

    <!-- MAIN SPA CONTAINER -->
    <main id="app">
        <!-- Content injected via JS -->
    </main>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h4 class="logo" style="color: white; margin-bottom: 20px; display: inline-block;">
                        <i class="fa-solid fa-scale-balanced" style="font-size: 1.5rem;"></i> ProDocBuilder
                    </h4>
                    <p style="opacity: 0.8; line-height: 1.8;">Secure, instant, and professional legal document generation. Binding contracts made simple.</p>
                </div>
                <div class="footer-col">
                    <h4 style="color: white; margin-bottom: 25px;">Documents</h4>
                    <ul style="opacity: 0.8; line-height: 2;">
                        <li><a href="#">NDA Generator</a></li>
                        <li><a href="#">Rental Agreements</a></li>
                        <li><a href="#">Freelance Contracts</a></li>
                        <li><a href="#">Invoices</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4 style="color: white; margin-bottom: 25px;">Connect</h4>
                    <div class="social-icons" style="display: flex;">
                        <a href="#"><i class="fa-brands fa-twitter"></i></a>
                        <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
                        <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div style="text-align: center; opacity: 0.7; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px;">
                <p>&copy; 2023 ProDocBuilder Inc. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Payment Modal -->
    <div id="paymentModal" class="modal">
        <div class="modal-content">
            <span class="close-modal" onclick="closePaymentModal()">&times;</span>
            <div class="modal-icon">
                <i class="fa-solid fa-credit-card"></i>
            </div>
            <h2 style="color: var(--dark); margin-bottom: 5px;">Secure Payment</h2>
            <p id="modalPrice" style="color: var(--primary); font-size: 1.5rem; font-weight: 700; margin-bottom: 20px;">$3.99</p>
            
            <form onsubmit="event.preventDefault(); processPayment();">
                <div class="form-group" style="text-align: left;">
                    <label>Card Number</label>
                    <div style="position: relative;">
                        <i class="fa-solid fa-lock" style="position: absolute; left: 15px; top: 15px; color: #94a3b8;"></i>
                        <input type="text" placeholder="0000 0000 0000 0000" style="padding-left: 40px;" required>
                    </div>
                </div>
                <div style="display: flex; gap: 15px;">
                    <div class="form-group" style="flex: 1; text-align: left;">
                        <label>Expiry</label>
                        <input type="text" placeholder="MM/YY" required>
                    </div>
                    <div class="form-group" style="flex: 1; text-align: left;">
                        <label>CVC</label>
                        <input type="text" placeholder="123" required>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" style="width: 100%; padding: 15px; margin-top: 10px;">
                    Pay & Download <i class="fa-solid fa-download"></i>
                </button>
            </form>
            <p style="font-size: 0.8rem; margin-top: 20px; color: #94a3b8;">
                <i class="fa-solid fa-shield-halved"></i> 256-bit SSL Encrypted Transaction
            </p>
        </div>
    </div>

    <!-- Scripts -->
    <script>
        // --- DATA STORE ---
        const state = {
            currentDocId: null,
            docData: {},
            paid: false
        };

        const documents = [
            {
                id: 'nda',
                title: 'Non-Disclosure Agreement',
                desc: 'Protect your confidential info and trade secrets.',
                price: 3.99,
                icon: 'fa-user-secret',
                fields: [
                    { id: 'disclosingParty', label: 'Disclosing Party Name', type: 'text', placeholder: 'e.g. Acme Corp' },
                    { id: 'receivingParty', label: 'Receiving Party Name', type: 'text', placeholder: 'e.g. John Doe' },
                    { id: 'jurisdiction', label: 'Jurisdiction (State)', type: 'text', placeholder: 'e.g. California' },
                    { id: 'date', label: 'Effective Date', type: 'date' }
                ],
                template: (data) => `
                    <div style="text-align: center; margin-bottom: 40px;">
                        <h1 style="text-transform: uppercase; text-decoration: underline; font-size: 18pt; margin-bottom: 10px;">Non-Disclosure Agreement</h1>
                    </div>
                    <p style="margin-bottom: 20px;">This Non-Disclosure Agreement (the "Agreement") is entered into as of <strong>${data.date || '____'}</strong> (the "Effective Date"), by and between <strong>${data.disclosingParty || '_______'}</strong> ("Disclosing Party") and <strong>${data.receivingParty || '_______'}</strong> ("Receiving Party").</p>
                    
                    <h3 style="font-size: 14pt; margin-top: 20px; margin-bottom: 10px;">1. Purpose</h3>
                    <p style="margin-bottom: 20px;">The Receiving Party understands that the Disclosing Party has disclosed or may disclose information relating to the Disclosing Party's business, which to the extent previously, presently, or subsequently disclosed to the Receiving Party is hereinafter referred to as "Proprietary Information".</p>

                    <h3 style="font-size: 14pt; margin-top: 20px; margin-bottom: 10px;">2. Obligations</h3>
                    <p style="margin-bottom: 20px;">The Receiving Party agrees: (i) to hold the Proprietary Information in strict confidence and to take all reasonable precautions to protect such Proprietary Information, and (ii) not to use any Proprietary Information except for the purpose of the business relationship.</p>

                    <h3 style="font-size: 14pt; margin-top: 20px; margin-bottom: 10px;">3. Jurisdiction</h3>
                    <p style="margin-bottom: 20px;">This Agreement shall be governed in all respects by the laws of <strong>${data.jurisdiction || '_______'}</strong>.</p>
                    
                    <div style="margin-top: 60px; display: flex; justify-content: space-between;">
                        <div style="width: 45%; border-top: 1px solid black; padding-top: 10px;">
                            <p style="font-weight: bold;">Signed (Disclosing Party)</p>
                        </div>
                        <div style="width: 45%; border-top: 1px solid black; padding-top: 10px;">
                            <p style="font-weight: bold;">Signed (Receiving Party)</p>
                        </div>
                    </div>
                `
            },
            {
                id: 'rental',
                title: 'Rental Agreement',
                desc: 'Standard residential lease for landlords.',
                price: 3.99,
                icon: 'fa-house-chimney',
                fields: [
                    { id: 'landlord', label: 'Landlord Name', type: 'text', placeholder: 'Jane Smith' },
                    { id: 'tenant', label: 'Tenant Name', type: 'text', placeholder: 'John Doe' },
                    { id: 'address', label: 'Property Address', type: 'text', placeholder: '123 Main St' },
                    { id: 'rent', label: 'Monthly Rent ($)', type: 'number', placeholder: '1500' },
                    { id: 'start', label: 'Lease Start Date', type: 'date' }
                ],
                template: (data) => `
                    <div style="text-align: center; margin-bottom: 40px;">
                        <h1 style="text-transform: uppercase; text-decoration: underline; font-size: 18pt; margin-bottom: 10px;">Residential Lease Agreement</h1>
                    </div>
                    <p style="margin-bottom: 20px;">This Lease Agreement (the "Lease") is made effective as of <strong>${data.start || '____'}</strong>, by and between <strong>${data.landlord || '_______'}</strong> ("Landlord") and <strong>${data.tenant || '_______'}</strong> ("Tenant").</p>
                    
                    <h3 style="font-size: 14pt; margin-top: 20px; margin-bottom: 10px;">1. Premises</h3>
                    <p style="margin-bottom: 20px;">Landlord agrees to rent to Tenant the property located at <strong>${data.address || '_______'}</strong> (the "Premises").</p>

                    <h3 style="font-size: 14pt; margin-top: 20px; margin-bottom: 10px;">2. Rent</h3>
                    <p style="margin-bottom: 20px;">Tenant agrees to pay Landlord monthly rent in the amount of <strong>$${data.rent || '0.00'}</strong>, payable on the first day of each month.</p>
                    
                    <div style="margin-top: 60px; display: flex; justify-content: space-between;">
                        <div style="width: 45%; border-top: 1px solid black; padding-top: 10px;">
                            <p style="font-weight: bold;">Landlord Signature</p>
                        </div>
                        <div style="width: 45%; border-top: 1px solid black; padding-top: 10px;">
                            <p style="font-weight: bold;">Tenant Signature</p>
                        </div>
                    </div>
                `
            },
            {
                id: 'invoice',
                title: 'Service Invoice',
                desc: 'Get paid faster with a professional invoice.',
                price: 3.99,
                icon: 'fa-file-invoice-dollar',
                fields: [
                    { id: 'fromName', label: 'From (Your Name)', type: 'text', placeholder: 'Your Name' },
                    { id: 'toName', label: 'Bill To (Client)', type: 'text', placeholder: 'Client Name' },
                    { id: 'invNumber', label: 'Invoice Number', type: 'text', placeholder: 'INV-001' },
                    { id: 'desc', label: 'Description', type: 'text', placeholder: 'Web Services' },
                    { id: 'amount', label: 'Total Amount ($)', type: 'number', placeholder: '1000' }
                ],
                template: (data) => `
                    <div style="display: flex; justify-content: space-between; margin-bottom: 40px;">
                        <div>
                            <h1 style="font-size: 30pt; color: #333;">INVOICE</h1>
                            <p>#${data.invNumber || '0000'}</p>
                        </div>
                        <div style="text-align: right;">
                            <h3>${data.fromName || 'YOUR NAME'}</h3>
                        </div>
                    </div>

                    <div style="margin-bottom: 40px;">
                        <p style="font-weight: bold; text-transform: uppercase; color: #666;">Bill To:</p>
                        <h3>${data.toName || 'CLIENT NAME'}</h3>
                    </div>

                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 40px;">
                        <tr style="border-bottom: 2px solid #000;">
                            <th style="text-align: left; padding: 10px 0;">Description</th>
                            <th style="text-align: right; padding: 10px 0;">Amount</th>
                        </tr>
                        <tr style="border-bottom: 1px solid #ccc;">
                            <td style="padding: 15px 0;">${data.desc || 'Services'}</td>
                            <td style="text-align: right; padding: 15px 0;">$${data.amount || '0.00'}</td>
                        </tr>
                    </table>

                    <div style="text-align: right;">
                        <h2 style="font-size: 18pt;">Total Due: $${data.amount || '0.00'}</h2>
                    </div>
                `
            }
        ];

        // --- VIEWS ---
        function renderHome() {
            return `
                <section class="hero">
                    <div class="hero-pattern"></div>
                    <div class="container">
                        <div class="hero-content">
                            <div class="hero-text fade-in">
                                <h1>Legally Binding, Instantly Yours</h1>
                                <p>Generate professional legal contracts, agreements, and invoices in seconds. Save thousands in legal fees with our lawyer-approved templates.</p>
                                <div class="hero-btns">
                                    <button class="btn btn-primary" onclick="scrollToSection('templates')">Start Creating</button>
                                    <button class="btn btn-outline" onclick="scrollToSection('pricing')">View Pricing</button>
                                </div>
                            </div>
                            <div class="hero-image">
                                <div class="glass-panel">
                                    <i class="fa-solid fa-file-contract"></i>
                                    <h3>Document Ready</h3>
                                    <p style="font-size: 0.95rem; opacity: 0.8; margin-top: 10px;">Verified & Secure</p>
                                    <div class="hero-stats">
                                        <div class="stat-item">
                                            <h4>PDF</h4>
                                            <span>Format</span>
                                        </div>
                                        <div class="stat-item">
                                            <h4>100%</h4>
                                            <span>Binding</span>
                                        </div>
                                        <div class="stat-item">
                                            <h4>24/7</h4>
                                            <span>Access</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wave-bottom">
                        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="#f8fafc"></path>
                        </svg>
                    </div>
                </section>

                <section id="templates" class="section-padding">
                    <div class="bg-shape shape-1"></div>
                    <div class="container">
                        <div class="section-header fade-in">
                            <h2>Select a Document</h2>
                            <p>Choose from our library of professional templates.</p>
                        </div>
                        <div class="features-grid">
                            ${documents.map(doc => `
                                <div class="feature-card fade-in">
                                    <div class="icon-box">
                                        <i class="fa-solid ${doc.icon}"></i>
                                    </div>
                                    <h3>${doc.title}</h3>
                                    <p>${doc.desc}</p>
                                    <div style="margin-top: 20px;">
                                        <span style="font-weight: 800; color: var(--dark); font-size: 1.2rem;">$${doc.price}</span>
                                    </div>
                                    <button class="btn btn-outline" style="margin-top: 20px; color: var(--primary); border-color: var(--primary);" onclick="router('editor', '${doc.id}')">Create Now</button>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                </section>

                <section id="pricing" class="pricing section-padding">
                    <div class="container">
                        <div class="section-header fade-in">
                            <h2>Simple Pricing</h2>
                            <p>Pay per document or subscribe for unlimited access.</p>
                        </div>
                        <div class="pricing-grid">
                            <div class="pricing-card fade-in">
                                <div class="price-header">
                                    <h3>Single Doc</h3>
                                    <div class="price">$3.99<span>/each</span></div>
                                </div>
                                <ul class="price-features">
                                    <li><i class="fa-solid fa-check"></i> PDF Download</li>
                                    <li><i class="fa-solid fa-check"></i> Email Delivery</li>
                                    <li><i class="fa-solid fa-check"></i> 7-Day Editing</li>
                                </ul>
                                <div class="price-footer">
                                    <button class="btn btn-price" onclick="scrollToSection('templates')">Select Document</button>
                                </div>
                            </div>

                            <div class="pricing-card featured fade-in">
                                <div class="popular-tag">Best Value</div>
                                <div class="price-header">
                                    <h3>Unlimited</h3>
                                    <div class="price">$6.99<span>/mo</span></div>
                                </div>
                                <ul class="price-features">
                                    <li><i class="fa-solid fa-check"></i> Unlimited Documents</li>
                                    <li><i class="fa-solid fa-check"></i> All Templates</li>
                                    <li><i class="fa-solid fa-check"></i> Priority Support</li>
                                    <li><i class="fa-solid fa-check"></i> Cloud Storage</li>
                                </ul>
                                <div class="price-footer">
                                    <button class="btn btn-price" onclick="alert('Subscription flow would start here.')">Start Trial</button>
                                </div>
                            </div>

                            <div class="pricing-card fade-in">
                                <div class="price-header">
                                    <h3>Bundle</h3>
                                    <div class="price">$14.99<span>/pack</span></div>
                                </div>
                                <ul class="price-features">
                                    <li><i class="fa-solid fa-check"></i> 10 Document Pack</li>
                                    <li><i class="fa-solid fa-check"></i> Lifetime Valid</li>
                                    <li><i class="fa-solid fa-check"></i> Word + PDF</li>
                                </ul>
                                <div class="price-footer">
                                    <button class="btn btn-price" onclick="alert('Bundle purchase flow.')">Buy Bundle</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            `;
        }

        function renderEditor(doc) {
            return `
                <section class="spa-view active" style="padding-bottom: 50px;">
                    <div class="container">
                        <div class="section-header">
                            <button onclick="router('home')" style="background:none; border:none; cursor:pointer; font-size: 1rem; color: #64748b; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 5px;">
                                <i class="fa-solid fa-arrow-left"></i> Back
                            </button>
                            <h2>${doc.title}</h2>
                            <p>Fill in the details below to generate your document.</p>
                        </div>
                        
                        <div class="editor-container">
                            <div class="editor-form fade-in">
                                <form id="docForm">
                                    ${doc.fields.map(field => `
                                        <div class="form-group">
                                            <label>${field.label}</label>
                                            <input type="${field.type}" 
                                                   id="${field.id}" 
                                                   placeholder="${field.placeholder}" 
                                                   oninput="handleInput('${field.id}', this.value)">
                                        </div>
                                    `).join('')}
                                </form>
                                <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                                        <span>Total Cost:</span>
                                        <span class="price" style="font-size: 1.5rem;">$${doc.price}</span>
                                    </div>
                                    <button id="payBtn" class="btn btn-primary" style="width: 100%;" onclick="openPaymentModal()">Generate & Pay</button>
                                </div>
                            </div>

                            <div class="editor-preview fade-in">
                                <div class="legal-paper">
                                    <div id="previewOverlay" class="watermark">PREVIEW</div>
                                    <div id="docContent">
                                        ${doc.template({})}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            `;
        }

        function renderDashboard() {
            const purchased = JSON.parse(localStorage.getItem('myDocs') || '[]');
            return `
                <section class="spa-view active">
                    <div class="bg-shape shape-2"></div>
                    <div class="container">
                        <div class="section-header">
                            <h2>My Dashboard</h2>
                            <p>Access your purchased documents.</p>
                        </div>
                        
                        <div class="dashboard-card fade-in">
                            ${purchased.length === 0 ? `
                                <div style="padding: 60px; text-align: center;">
                                    <i class="fa-regular fa-folder-open" style="font-size: 4rem; color: #cbd5e1; margin-bottom: 20px;"></i>
                                    <h3 style="color: var(--text-main);">No documents found</h3>
                                    <p style="margin-bottom: 30px;">Create your first legal document today.</p>
                                    <button class="btn btn-primary" onclick="router('home')">Browse Templates</button>
                                </div>
                            ` : `
                                <div style="overflow-x: auto;">
                                    <table class="dash-table">
                                        <thead>
                                            <tr>
                                                <th>Document Name</th>
                                                <th>Date</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            ${purchased.map(doc => `
                                                <tr>
                                                    <td style="font-weight: 700; color: var(--dark); display: flex; align-items: center; gap: 10px;">
                                                        <i class="fa-solid fa-file-pdf" style="color: #ef4444;"></i> ${doc.title}
                                                    </td>
                                                    <td>${doc.date}</td>
                                                    <td><span class="status-badge">PAID</span></td>
                                                    <td>
                                                        <button class="btn btn-outline" style="padding: 8px 20px; font-size: 0.8rem; color: var(--secondary); border-color: var(--secondary);" onclick="alert('Redownloading...')">Download</button>
                                                    </td>
                                                </tr>
                                            `).join('')}
                                        </tbody>
                                    </table>
                                </div>
                            `}
                        </div>
                    </div>
                </section>
            `;
        }

        // --- APP LOGIC ---
        function router(route, params = null) {
            const app = document.getElementById('app');
            window.scrollTo(0,0);
            
            // Toggle hamburger icon back
            const icon = document.querySelector('.hamburger i');
            const nav = document.getElementById('navLinks');
            if(nav.classList.contains('active')) {
                nav.classList.remove('active');
                icon.classList.remove('fa-xmark');
                icon.classList.add('fa-bars-staggered');
            }

            if (route === 'home') {
                app.innerHTML = renderHome();
                observeElements();
            } else if (route === 'editor') {
                const doc = documents.find(d => d.id === params);
                state.currentDocId = doc.id;
                state.docData = {};
                state.paid = false;
                app.innerHTML = renderEditor(doc);
                updatePreview();
                observeElements();
            } else if (route === 'dashboard') {
                app.innerHTML = renderDashboard();
                observeElements();
            }
        }

        function handleInput(fieldId, value) {
            state.docData[fieldId] = value;
            updatePreview();
        }

        function updatePreview() {
            const doc = documents.find(d => d.id === state.currentDocId);
            if(doc) {
                const contentDiv = document.getElementById('docContent');
                if(contentDiv) contentDiv.innerHTML = doc.template(state.docData);
            }
        }

        function openPaymentModal() {
            // Simple validation
            const inputs = document.querySelectorAll('#docForm input');
            let filled = true;
            inputs.forEach(i => { if(!i.value) filled = false; });
            
            if(!filled) {
                alert("Please fill in all details first.");
                return;
            }
            
            const modal = document.getElementById('paymentModal');
            document.getElementById('modalPrice').innerText = '$' + documents.find(d => d.id === state.currentDocId).price;
            modal.style.display = "flex";
            setTimeout(() => modal.classList.add('show'), 10);
        }

        function closePaymentModal() {
            const modal = document.getElementById('paymentModal');
            modal.classList.remove('show');
            setTimeout(() => modal.style.display = "none", 300);
        }

        function processPayment() {
            const btn = document.querySelector('.modal-content button');
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Processing...';
            
            setTimeout(() => {
                state.paid = true;
                btn.innerHTML = '<i class="fa-solid fa-check"></i> Paid!';
                btn.style.background = "#10b981";
                btn.style.boxShadow = "none";
                
                // Save to local storage
                const doc = documents.find(d => d.id === state.currentDocId);
                const myDocs = JSON.parse(localStorage.getItem('myDocs') || '[]');
                myDocs.push({
                    title: doc.title,
                    date: new Date().toLocaleDateString(),
                    id: Date.now()
                });
                localStorage.setItem('myDocs', JSON.stringify(myDocs));

                setTimeout(() => {
                    closePaymentModal();
                    generatePDF();
                    
                    // Update editor UI
                    const payBtn = document.getElementById('payBtn');
                    payBtn.innerHTML = "Download Again";
                    payBtn.style.background = "#10b981";
                    payBtn.onclick = generatePDF;
                    document.getElementById('previewOverlay').remove(); // remove watermark
                    
                    alert("Document successfully generated and emailed!");
                }, 1000);
            }, 2000);
        }

        function generatePDF() {
            const { jsPDF } = window.jspdf;
            const element = document.getElementById('docContent');
            const docTitle = documents.find(d => d.id === state.currentDocId).title;

            const doc = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a4'
            });

            doc.html(element, {
                callback: function (doc) {
                    doc.save(`${docTitle.replace(/\s+/g, '_')}.pdf`);
                },
                x: 15,
                y: 15,
                width: 170,
                windowWidth: 650
            });
        }

        // --- UTILS ---
        function toggleMenu() {
            const nav = document.getElementById('navLinks');
            nav.classList.toggle('active');
            const icon = document.querySelector('.hamburger i');
            if(nav.classList.contains('active')) {
                icon.classList.remove('fa-bars-staggered');
                icon.classList.add('fa-xmark');
            } else {
                icon.classList.remove('fa-xmark');
                icon.classList.add('fa-bars-staggered');
            }
        }

        function scrollToSection(id) {
            const section = document.getElementById(id);
            if(section) section.scrollIntoView({ behavior: 'smooth' });
        }
        
        // Scroll Animation Observer
        function observeElements() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
        }

        // Init
        window.addEventListener('load', () => {
            router('home');
            
            // Header scroll effect
            window.addEventListener('scroll', () => {
                const header = document.querySelector('header');
                if (window.scrollY > 50) {
                    header.style.background = "rgba(255, 255, 255, 0.95)";
                    header.style.boxShadow = "0 4px 20px rgba(0,0,0,0.05)";
                } else {
                    header.style.background = "rgba(255, 255, 255, 0.8)";
                    header.style.boxShadow = "none";
                }
            });
        });

    </script>
</body>
</html>