
/* Tab system styles */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-button {
    transition: all 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PropValue Wizard - Smart Property Evaluation</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
</head>
<body class="bg-gray-50">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <div class="max-w-7xl mx-auto">
            <!-- Hero Section -->
            <section class="mb-12 text-center">
                <h1 class="text-4xl font-bold text-indigo-700 mb-4">Smart Property Evaluation Tool</h1>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    Calculate investment metrics, cash flow projections, and ROI calculations for any residential property
                </p>
            </section>

            <!-- Calculator Dashboard -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <!-- Tabs Navigation -->
                <div class="flex border-b border-gray-200">
                    <button class="tab-button active px-6 py-3 font-medium text-indigo-600 border-b-2 border-indigo-600" data-tab="loan-info">
                        <i data-feather="dollar-sign" class="mr-2"></i>Loan Info
                    </button>
                    <button class="tab-button px-6 py-3 font-medium text-gray-500 hover:text-indigo-600" data-tab="units-rents">
                        <i data-feather="home" class="mr-2"></i>Units & Rents
                    </button>
                    <button class="tab-button px-6 py-3 font-medium text-gray-500 hover:text-indigo-600" data-tab="income-expenses">
                        <i data-feather="pie-chart" class="mr-2"></i>Income/Expenses
                    </button>
                    <button class="tab-button px-6 py-3 font-medium text-gray-500 hover:text-indigo-600" data-tab="valuation">
                        <i data-feather="trending-up" class="mr-2"></i>Valuation
                    </button>
                </div>

                <!-- Calculator Content -->
                <div class="p-6">
                    <!-- Loan Info Section (default visible) -->
                    <div class="tab-content active" id="loan-info">
                        <div class="grid md:grid-cols-2 gap-6">
                            <!-- Left Column -->
                            <div class="space-y-4">
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-gray-700">Address</label>
                                    <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="123 Main St">
                                </div>
                                
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-gray-700">Purchase Price (Asking)</label>
                                    <div class="mt-1 relative rounded-md shadow-sm">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <span class="text-gray-500 sm:text-sm">$</span>
                                        </div>
                                        <input type="number" class="block w-full pl-7 pr-12 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="0.00">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-gray-700">Offer Price</label>
                                    <div class="mt-1 relative rounded-md shadow-sm">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <span class="text-gray-500 sm:text-sm">$</span>
                                        </div>
                                        <input type="number" class="block w-full pl-7 pr-12 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="0.00">
                                    </div>
                                </div>
                                
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="form-group">
                                        <label class="block text-sm font-medium text-gray-700">Points (%)</label>
                                        <input type="number" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="0">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="block text-sm font-medium text-gray-700">LTV (%)</label>
                                        <input type="number" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="80">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Right Column -->
                            <div class="space-y-4">
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <h3 class="text-lg font-medium text-gray-900 mb-3">Cash To Close Summary</h3>
                                    <div class="space-y-2">
                                        <div class="flex justify-between">
                                            <span class="text-sm text-gray-600">Down Payment</span>
                                            <span class="text-sm font-medium">$0.00</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <span class="text-sm text-gray-600">Closing Fees</span>
                                            <span class="text-sm font-medium">$0.00</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <span class="text-sm text-gray-600">Rehab/Repairs Reserve</span>
                                            <span class="text-sm font-medium">$0.00</span>
                                        </div>
                                        <div class="pt-2 mt-2 border-t border-gray-200">
                                            <div class="flex justify-between">
                                                <span class="font-medium">Total Cash To Close</span>
                                                <span class="font-bold text-indigo-600">$5,000.00</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-gray-700">Loan Rate (%)</label>
                                    <input type="number" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" step="0.01" placeholder="4.25">
                                </div>
                                
                                <div class="form-group">
                                    <label class="block text-sm font-medium text-gray-700">Length of Loan (Years)</label>
                                    <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option>30</option>
                                        <option>20</option>
                                        <option>15</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-6 flex justify-between">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-600">Monthly P&I:</span>
                                <span class="font-medium">$0.00</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-600">Monthly PITI:</span>
                                <span class="font-medium">$83.33</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Other sections (hidden by default) -->
                    <div class="tab-content hidden" id="units-rents">
                        <!-- Units & Rents content -->
                    </div>
                    
                    <div class="tab-content hidden" id="income-expenses">
                        <!-- Income/Expenses content -->
                    </div>
                    
                    <div class="tab-content hidden" id="valuation">
                        <!-- Valuation content -->
                    </div>
                </div>
            </div>
        </div>
    </main>

    <custom-footer></custom-footer>
    
    <script src="script.js"></script>
    <script>feather.replace();</script>
</body>
</html>