{{ define "main" }}
<div class="bg-gray-900 min-h-screen py-16 px-4 sm:px-6 lg:px-8" x-data="earningsCalculator()">
    <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-12">
            <h1 class="text-4xl font-extrabold text-gray-100 tracking-tight sm:text-5xl mb-4">
                Discover Your Potential Earnings
            </h1>
            <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                See what you could earn with my sterile hydroponics methodology. Based on proven results: <span class="text-primary font-semibold">1.5lb of cannabis from a 2x2.5x7 space</span>.
            </p>
        </div>

        <!-- Calculator Form -->
        <div class="bg-gray-800 rounded-lg shadow-xl p-8 mb-8 border border-gray-700">
            <h2 class="text-2xl font-bold text-gray-100 mb-6">Grow Room Specifications</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- CFM Airflow -->
                <div>
                    <label for="cfm" class="block text-sm font-medium text-gray-300 mb-2">
                        Room CFM (Cubic Feet per Minute) Airflow
                    </label>
                    <input 
                        type="number" 
                        id="cfm" 
                        x-model="cfm"
                        @input="calculate()"
                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        placeholder="Enter CFM"
                        min="0"
                    >
                </div>

                <!-- Number of Plants -->
                <div>
                    <label for="plants" class="block text-sm font-medium text-gray-300 mb-2">
                        Number of Plants
                    </label>
                    <input 
                        type="number" 
                        id="plants" 
                        x-model="plants"
                        @input="calculate()"
                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        placeholder="Enter number"
                        min="1"
                    >
                </div>

                <!-- Number of Lights -->
                <div>
                    <label for="lights" class="block text-sm font-medium text-gray-300 mb-2">
                        Number of Lights
                    </label>
                    <input 
                        type="number" 
                        id="lights" 
                        x-model="lights"
                        @input="calculate()"
                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        placeholder="Enter number"
                        min="1"
                    >
                </div>

                <!-- Total Wattage -->
                <div>
                    <label for="wattage" class="block text-sm font-medium text-gray-300 mb-2">
                        Total Wattage
                    </label>
                    <input 
                        type="number" 
                        id="wattage" 
                        x-model="wattage"
                        @input="calculate()"
                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        placeholder="Enter watts"
                        min="0"
                    >
                </div>

                <!-- Width -->
                <div>
                    <label for="width" class="block text-sm font-medium text-gray-300 mb-2">
                        Width (feet)
                    </label>
                    <input 
                        type="number" 
                        id="width" 
                        x-model="width"
                        @input="calculate()"
                        step="0.1"
                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        placeholder="Enter width"
                        min="0"
                    >
                </div>

                <!-- Height -->
                <div>
                    <label for="height" class="block text-sm font-medium text-gray-300 mb-2">
                        Height (feet)
                    </label>
                    <input 
                        type="number" 
                        id="height" 
                        x-model="height"
                        @input="calculate()"
                        step="0.1"
                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        placeholder="Enter height"
                        min="0"
                    >
                </div>

                <!-- Length -->
                <div>
                    <label for="length" class="block text-sm font-medium text-gray-300 mb-2">
                        Length (feet)
                    </label>
                    <input 
                        type="number" 
                        id="length" 
                        x-model="length"
                        @input="calculate()"
                        step="0.1"
                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        placeholder="Enter length"
                        min="0"
                    >
                </div>

                <!-- Method (Fixed to Hydro) -->
                <div>
                    <label for="method" class="block text-sm font-medium text-gray-300 mb-2">
                        Growing Method
                    </label>
                    <input 
                        type="text" 
                        id="method" 
                        value="Hydroponics"
                        disabled
                        class="w-full px-4 py-2 bg-gray-600 border border-gray-500 rounded-md text-gray-400 cursor-not-allowed"
                    >
                    <p class="mt-1 text-xs text-gray-400">Always set to Hydroponics</p>
                </div>
            </div>
        </div>

        <!-- Results Section -->
        <div x-show="hasResults" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 transform translate-y-4"
             x-transition:enter-end="opacity-100 transform translate-y-0"
             class="space-y-6">
            
            <!-- Breakdown Table -->
            <div class="bg-gray-800 rounded-lg shadow-xl p-8 border border-gray-700">
                <h2 class="text-2xl font-bold text-gray-100 mb-6">Your Potential Results</h2>
                
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead>
                            <tr class="border-b border-gray-700">
                                <th class="pb-4 text-sm font-semibold text-gray-300 uppercase">Metric</th>
                                <th class="pb-4 text-sm font-semibold text-gray-300 uppercase text-right">Value</th>
                            </tr>
                        </thead>
                        <tbody class="text-gray-200">
                            <tr class="border-b border-gray-700">
                                <td class="py-4 font-medium">Reservoir Size Needed</td>
                                <td class="py-4 text-right">
                                    <span class="text-primary font-bold text-lg" x-text="formatNumber(results.waterGallons)"></span>
                                    <span class="text-gray-400 ml-2">gallons</span>
                                </td>
                            </tr>
                            <tr class="border-b border-gray-700">
                                <td class="py-4 font-medium">Total Yield (Grams)</td>
                                <td class="py-4 text-right">
                                    <span class="text-primary font-bold text-lg" x-text="formatNumber(results.totalGrams)"></span>
                                    <span class="text-gray-400 ml-2">grams</span>
                                </td>
                            </tr>
                            <tr class="border-b border-gray-700">
                                <td class="py-4 font-medium">Price per Gram</td>
                                <td class="py-4 text-right">
                                    <span class="text-primary font-bold text-lg">$10.00</span>
                                </td>
                            </tr>
                            <tr class="border-b border-gray-700">
                                <td class="py-4 font-medium">Grow Cycle Duration</td>
                                <td class="py-4 text-right">
                                    <span class="text-primary font-bold text-lg">2.5</span>
                                    <span class="text-gray-400 ml-2">months</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Grand Totals - Exciting Display -->
            <div class="bg-gradient-to-br from-primary/20 to-emerald-600/20 rounded-lg shadow-xl p-8 border-2 border-primary">
                <div class="text-center">
                    <h2 class="text-3xl font-extrabold text-gray-100 mb-4">
                        🎉 Potential Earnings 🎉
                    </h2>
                    <div class="mb-6">
                        <p class="text-lg text-gray-300 mb-2">Total Revenue</p>
                        <p class="text-6xl font-bold text-primary mb-2" x-text="'$' + formatNumber(results.totalRevenue)"></p>
                        <p class="text-xl text-gray-400" x-text="'From ' + formatNumber(results.totalGrams) + ' grams in just 2.5 months!'"></p>
                    </div>
                    
                    <div class="mt-8 p-6 bg-gray-800/50 rounded-lg border border-primary/30">
                        <p class="text-2xl font-bold text-gray-100 mb-2">
                            <span class="text-primary">WOAH!</span> You could make that much!
                        </p>
                        <p class="text-gray-300 mt-4">
                            This is what's possible with my sterile hydroponics methodology. 
                            <span class="text-primary font-semibold">Ready to make it happen?</span>
                        </p>
                        <a href="/services/" class="inline-block mt-6 px-8 py-3 bg-primary text-white rounded-lg font-semibold hover:bg-emerald-700 transition-colors shadow-lg hover:shadow-xl">
                            Work With Me
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Empty State -->
        <div x-show="!hasResults" 
             class="text-center py-12 bg-gray-800 rounded-lg border border-gray-700">
            <p class="text-gray-400 text-lg">Enter your grow room specifications above to see your potential earnings!</p>
        </div>
    </div>
</div>

<script>
function earningsCalculator() {
    return {
        // Input values
        cfm: '',
        plants: '',
        lights: '',
        wattage: '',
        width: '',
        height: '',
        length: '',
        
        // Results
        results: {
            waterGallons: 0,
            totalGrams: 0,
            totalRevenue: 0
        },
        
        // Calculation constants
        // Base ratio: 2x2.5x7 space = 1.5lb
        // 2 * 2.5 * 7 = 35 cubic feet = 1.5lb = 680.39 grams
        BASE_CUBIC_FEET: 35, // 2 * 2.5 * 7
        BASE_GRAMS: 680.39, // 1.5lb in grams
        GALLONS_PER_PLANT: 0.7,
        PRICE_PER_GRAM: 10,
        
        get hasResults() {
            return this.width > 0 && this.height > 0 && this.length > 0 && this.plants > 0;
        },
        
        calculate() {
            if (!this.hasResults) {
                return;
            }
            
            // Calculate cubic feet of grow space
            const cubicFeet = parseFloat(this.width) * parseFloat(this.height) * parseFloat(this.length);
            
            // Calculate yield based on ratio
            // If user's space is 35 cubic feet, they get 680.39 grams
            // Scale proportionally
            const scaleFactor = cubicFeet / this.BASE_CUBIC_FEET;
            const totalGrams = this.BASE_GRAMS * scaleFactor;
            
            // Calculate water needed: 0.7 gallons per plant
            const waterGallons = parseFloat(this.plants) * this.GALLONS_PER_PLANT;
            
            // Calculate total revenue
            const totalRevenue = totalGrams * this.PRICE_PER_GRAM;
            
            // Update results
            this.results = {
                waterGallons: Math.round(waterGallons * 10) / 10, // Round to 1 decimal
                totalGrams: Math.round(totalGrams * 10) / 10, // Round to 1 decimal
                totalRevenue: Math.round(totalRevenue * 100) / 100 // Round to 2 decimals
            };
        },
        
        formatNumber(num) {
            return new Intl.NumberFormat('en-US', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 2
            }).format(num);
        }
    }
}
</script>
{{ end }}