<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SolarBee PNG Calculator</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
body{margin:0;font-family:Inter;background:#f5f5f5;color:#333}
header{background:linear-gradient(135deg,#ffb400,#ff6a00);color:#fff;padding:1rem;text-align:center}
.container{max-width:800px;margin:0 auto;padding:0 1rem}
.card{background:#fff;margin:1rem 0;border-radius:12px;padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1)}
input,select,textarea{width:100%;padding:.75rem;margin:.5rem 0;border:1px solid #ddd;border-radius:6px;font-size:1rem;box-sizing:border-box}
button{background:#ff6a00;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:600}
.results{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:1.5rem;border-radius:12px;margin:1rem 0;display:none}
.metric{background:rgba(255,255,255,0.1);padding:1rem;border-radius:8px;margin:.5rem 0;text-align:center}
.metric-value{font-size:2rem;font-weight:700;display:block}
.metric-label{font-size:.9rem;opacity:.9}
.cost-note{font-size:.85rem;opacity:.8;margin:.25rem 0}
@media (max-width:768px){button,input,select{font-size:.9rem}}
</style>
</head>
<body>
<header>
<h1>🔆 SolarBee PNG Calculator</h1>
<p>Calculate solar savings from PNG Power + diesel generator costs</p>
</header>
<div class="container">
<div class="card">
<h3>Your Monthly Power Costs</h3>
<input type="number" id="electricityCost" placeholder="Monthly electricity cost (PGK)" min="0">
<div class="cost-note">PNG Power Ltd bills, connection fees, etc.</div>
<input type="number" id="dieselCost" placeholder="Monthly diesel cost (PGK)" min="0">
<div class="cost-note">Diesel fuel for backup generators</div>
<input type="number" id="roof" placeholder="Available roof area (m²)" min="0">
<div class="cost-note">Approximate usable roof space for solar panels</div>
<button onclick="calculate()">Calculate Solar Savings</button>
</div>
<div id="results" class="results">
<h2>Your Solar Opportunity</h2>
<div class="metric"><span class="metric-value" id="totalCurrent">0</span><div class="metric-label">Current Total Monthly Costs (PGK)</div></div>
<div class="metric"><span class="metric-value" id="savings">0</span><div class="metric-label">Annual Savings with Solar (PGK)</div></div>
<div class="metric"><span class="metric-value" id="size">0</span><div class="metric-label">Recommended System Size (kW)</div></div>
<div class="metric"><span class="metric-value" id="payback">0</span><div class="metric-label">Investment Payback (years)</div></div>
<div class="metric"><span class="metric-value" id="co2">0</span><div class="metric-label">CO₂ Reduction (tonnes/year)</div></div>
<!-- Contact Form -->
<div class="card" style="background:#fff;color:#333;margin-top:1rem">
<h3>Get Your Personalized Solar Quote</h3>
<input type="text" id="name" placeholder="Full Name *" required>
<input type="email" id="email" placeholder="Email Address *" required>
<input type="text" id="company" placeholder="Company / Organization *" required>
<textarea id="details" placeholder="Brief project description (optional)" rows="3"></textarea>
<button onclick="submitForm()">Send Quote Request</button>
</div>
</div>
</div>
<script type="module">
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
// 🔴 REPLACE THESE TWO LINES 👇
const SUPABASE_URL = 'https://abzzufmnpiitrzhpfrgj.supabase.co';
const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFienp1Zm1ucGlpdHJ6aHBmcmdqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTY1MTQxMTksImV4cCI6MjA3MjA5MDExOX0.T6HU4ATs0WR4jmZvoMgy_7tYAW-vuT7o7isWrpy0q3M';
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
let calculatedData = {};
window.calculate = async () => {
const electricityCost = parseFloat(document.getElementById('electricityCost').value || 0);
const dieselCost = parseFloat(document.getElementById('dieselCost').value || 0);
const roof = parseFloat(document.getElementById('roof').value);
const totalMonthlyCost = electricityCost + dieselCost;
if (!totalMonthlyCost || !roof) return alert('Please fill in your monthly costs and roof area');
// PNG constants - updated for diesel displacement
const avgCostPerKwh = totalMonthlyCost > 0 ? (totalMonthlyCost / (totalMonthlyCost / 1.5)) : 1.2; // Estimate kWh from costs
const sunHours = 5.2; // PNG daily average
const installCost = 4.5; // PGK per watt
const roofFactor = 0.7; // 70% usable roof space
const solarEfficiency = 0.85; // System efficiency
// Calculate system size based on roof constraints and power needs
const maxSystemFromRoof = (roof * roofFactor) / 8; // 8m² per kW
const estimatedMonthlyKwh = totalMonthlyCost / 1.2; // Assume avg 1.2 PGK/kWh
const neededSystemFromUsage = estimatedMonthlyKwh / (sunHours * 30 * solarEfficiency);
const systemSize = Math.min(maxSystemFromRoof, neededSystemFromUsage);
// Calculate savings - solar replaces both grid and diesel
const monthlyGeneration = systemSize * sunHours * 30 * solarEfficiency;
const monthlySavings = Math.min(monthlyGeneration * 1.2, totalMonthlyCost); // Cap at total costs
const annualSavings = monthlySavings * 12;
// Investment calculation
const systemCost = systemSize * 1000 * installCost;
const payback = systemCost / annualSavings;
const co2Reduction = systemSize * 1.4; // Tonnes CO2 per year per kW
// Store calculated data
calculatedData = {
electricityCost,
dieselCost,
totalMonthlyCost,
roof,
annualSavings,
systemSize,
payback,
co2Reduction
};
// Display results
document.getElementById('totalCurrent').textContent = Math.round(totalMonthlyCost);
document.getElementById('savings').textContent = Math.round(annualSavings);
document.getElementById('size').textContent = Math.round(systemSize);
document.getElementById('payback').textContent = payback.toFixed(1);
document.getElementById('co2').textContent = co2Reduction.toFixed(1);
document.getElementById('results').style.display = 'block';
};
window.submitForm = async () => {
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const company = document.getElementById('company').value.trim();
const details = document.getElementById('details').value;
if (!name || !email || !company) return alert('Name, Email & Company required');
await supabase.from('calculator_leads').insert({
name,
email,
company,
project_details: details,
monthly_electricity_cost: calculatedData.electricityCost,
monthly_diesel_cost: calculatedData.dieselCost,
roof_area: calculatedData.roof,
calculated_savings: calculatedData.annualSavings,
system_size: calculatedData.systemSize,
payback_period: calculatedData.payback,
co2_reduction: calculatedData.co2Reduction
});
document.getElementById('results').innerHTML = `
<div style="text-align:center;padding:2rem">
<h2>🎉 Thank You!</h2>
<p>We'll email you a detailed quote within 24 hours.</p>
<p>Your potential savings: <strong>PGK ${Math.round(calculatedData.annualSavings)} annually</strong></p>
<p>Check your inbox (and spam folder) for next steps.</p>
</div>
`;
};
</script>
</body>
</html>