<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>EmbedSolar | ROI & Hardware Sizing Configurator</title>
  <style>
    :root {
      --navy: #0a2540;
      --navy-light: #13385c;
      --gold: #ffc107;
      --gold-dark: #e0a800;
      --green: #10b981;
      --red: #ef4444;
      --bg: #f4f7fa;
      --card: #ffffff;
      --text: #1e293b;
      --muted: #64748b;
      --border: #e2e8f0;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Telugu", sans-serif;
    }

    body {
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.5;
      padding-bottom: 40px;
    }

    /* Header */
    header {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
      color: #fff;
      padding: 20px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      border-bottom: 4px solid var(--gold);
      box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15);
    }

    .brand-box {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .brand-logo {
      width: 44px;
      height: 44px;
      background: var(--gold);
      color: var(--navy);
      font-weight: 900;
      font-size: 20px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: -1px;
    }

    .brand-title h1 {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    .brand-title p {
      font-size: 13px;
      color: #cbd5e1;
    }

    .header-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .btn {
      padding: 9px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all 0.2s ease;
    }

    .btn-lang {
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }

    .btn-lang:hover {
      background: rgba(255, 255, 255, 0.22);
    }

    .btn-print {
      background: var(--gold);
      color: var(--navy);
    }

    .btn-print:hover {
      background: var(--gold-dark);
    }

    /* Main Container */
    .container {
      max-width: 1240px;
      margin: 28px auto;
      padding: 0 20px;
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 24px;
    }

    @media (max-width: 960px) {
      .container {
        grid-template-columns: 1fr;
      }
    }

    .card {
      background: var(--card);
      border-radius: 12px;
      border: 1px solid var(--border);
      padding: 24px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .section-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 18px;
      padding-bottom: 10px;
      border-bottom: 2px solid #f1f5f9;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Preset Buttons */
    .preset-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
    }

    .preset-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 12px;
      font-weight: 600;
      background: #f1f5f9;
      color: var(--navy);
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      cursor: pointer;
      transition: 0.15s;
    }

    .preset-btn:hover, .preset-btn.active {
      background: var(--navy);
      color: var(--gold);
      border-color: var(--navy);
    }

    /* Input Controls */
    .control-group {
      margin-bottom: 20px;
    }

    .control-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
    }

    .control-label {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text);
    }

    .control-val {
      font-size: 15px;
      font-weight: 800;
      color: var(--navy);
      background: #fef9c3;
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid #fde047;
    }

    input[type="range"] {
      width: 100%;
      accent-color: var(--navy);
      cursor: pointer;
      height: 6px;
    }

    .range-limits {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }

    /* Pricing Accordion */
    details {
      margin-top: 16px;
      background: #f8fafc;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
    }

    summary {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--navy);
      cursor: pointer;
    }

    .price-grid {
      display: grid;
      grid-template-columns: 1fr 110px;
      gap: 8px;
      margin-top: 12px;
      align-items: center;
      font-size: 12px;
    }

    .price-grid input {
      padding: 5px 8px;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      font-weight: 600;
      text-align: right;
    }

    /* Right Column Dashboard */
    .right-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* Top KPI Row */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    @media (max-width: 768px) {
      .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .kpi-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

    .kpi-card.highlight {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }

    .kpi-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .kpi-card.highlight .kpi-label {
      color: #cbd5e1;
    }

    .kpi-value {
      font-size: 24px;
      font-weight: 800;
      color: var(--navy);
    }

    .kpi-card.highlight .kpi-value {
      color: var(--gold);
    }

    .kpi-sub {
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 4px;
    }

    .kpi-card.highlight .kpi-sub {
      color: #e2e8f0;
    }

    /* Architecture & Financial Split */
    .mid-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    @media (max-width: 768px) {
      .mid-grid {
        grid-template-columns: 1fr;
      }
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
    }

    .data-table tr {
      border-bottom: 1px solid #f1f5f9;
    }

    .data-table tr:last-child {
      border-bottom: none;
    }

    .data-table td {
      padding: 10px 4px;
      font-size: 13.5px;
    }

    .data-table td:last-child {
      text-align: right;
      font-weight: 700;
      color: var(--navy);
    }

    .badge-aws {
      display: inline-block;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      margin-top: 4px;
    }

    /* Chart Section */
    .chart-wrapper {
      margin-top: 10px;
    }

    .chart-bars {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 14px;
      align-items: end;
      height: 230px;
      padding: 24px 12px 12px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid var(--border);
      position: relative;
    }

    .bar-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
    }

    .bar-val {
      font-size: 11.5px;
      font-weight: 700;
      margin-bottom: 6px;
      text-align: center;
    }

    .bar-fill {
      width: 100%;
      max-width: 56px;
      border-radius: 6px 6px 0 0;
      transition: height 0.35s ease;
      min-height: 8px;
    }

    .bar-fill.negative {
      background: var(--red);
      border-radius: 0 0 6px 6px;
    }

    .bar-fill.positive {
      background: linear-gradient(180deg, var(--navy-light), var(--navy));
      border-top: 3px solid var(--gold);
    }

    .bar-year {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      margin-top: 8px;
    }

    @media print {
      .header-actions, details, .preset-bar {
        display: none !important;
      }
      body {
        background: #fff;
      }
      .container {
        grid-template-columns: 340px 1fr;
        margin: 10px auto;
      }
    }
  </style>
</head>
<body>

  <header>
    <div class="brand-box">
      <div class="brand-logo">ES</div>
      <div class="brand-title">
        <h1 id="t-title">EmbedSolar ROI & Hardware Configurator</h1>
        <p id="t-subtitle">Embed Square Solutions Pvt. Ltd. | AIoT Solar Monitoring & SCADA</p>
      </div>
    </div>
    <div class="header-actions">
      <button class="btn btn-lang" onclick="toggleLang()" id="lang-btn">తెలుగులో చూడండి (Telugu)</button>
      <button class="btn btn-print" onclick="window.print()" id="t-print">Print / Save PDF Quote</button>
    </div>
  </header>

  <div class="container">
    <!-- LEFT PANEL: INPUTS -->
    <div class="card">
      <div class="section-title">
        <span id="t-sec1">1. Client Plant Parameters</span>
      </div>

      <div class="preset-bar">
        <button class="preset-btn" onclick="setPreset(500, 6.5, 4.5, 3.5, this)">500 kW Rooftop</button>
        <button class="preset-btn active" onclick="setPreset(1000, 6.5, 4.5, 3.5, this)">1 MW Commercial</button>
        <button class="preset-btn" onclick="setPreset(5000, 4.5, 4.5, 3.5, this)">5 MW Solar Park</button>
      </div>

      <!-- Slider 1: Capacity -->
      <div class="control-group">
        <div class="control-header">
          <span class="control-label" id="t-cap-label">Plant Capacity (kWp)</span>
          <span class="control-val" id="val-cap">1,000 kWp (1.0 MW)</span>
        </div>
        <input type="range" id="in-cap" min="100" max="10000" step="100" value="1000" oninput="recalc()" />
        <div class="range-limits">
          <span>100 kW</span>
          <span>5 MW</span>
          <span>10 MW</span>
        </div>
      </div>

      <!-- Slider 2: Tariff -->
      <div class="control-group">
        <div class="control-header">
          <span class="control-label" id="t-tariff-label">Electricity Tariff / PPA Rate</span>
          <span class="control-val" id="val-tariff">₹6.50 / kWh</span>
        </div>
        <input type="range" id="in-tariff" min="3.0" max="10.0" step="0.25" value="6.50" oninput="recalc()" />
        <div class="range-limits">
          <span>₹3.0/kWh</span>
          <span>₹6.5/kWh</span>
          <span>₹10.0/kWh</span>
        </div>
      </div>

      <!-- Slider 3: Daily Specific Yield -->
      <div class="control-group">
        <div class="control-header">
          <span class="control-label" id="t-yield-label">Daily Specific Yield</span>
          <span class="control-val" id="val-yield">4.50 kWh/kWp</span>
        </div>
        <input type="range" id="in-yield" min="3.5" max="5.5" step="0.1" value="4.5" oninput="recalc()" />
        <div class="range-limits">
          <span>3.5 kWh</span>
          <span>4.5 kWh (Avg)</span>
          <span>5.5 kWh</span>
        </div>
      </div>

      <!-- Slider 4: Recovery % -->
      <div class="control-group">
        <div class="control-header">
          <span class="control-label" id="t-rec-label">Expected AIoT Generation Recovery</span>
          <span class="control-val" id="val-rec">3.5%</span>
        </div>
        <input type="range" id="in-rec" min="1.5" max="7.0" step="0.5" value="3.5" oninput="recalc()" />
        <div class="range-limits">
          <span>1.5% (Conservative)</span>
          <span>3.5% (Typical)</span>
          <span>7.0% (High Loss)</span>
        </div>
      </div>

      <!-- Editable Base Prices for Sales Rep -->
      <details>
        <summary id="t-price-cfg">⚙️ Customize Unit Pricing (Internal)</summary>
        <div class="price-grid">
          <span>HERON-P2 Gateway (₹):</span>
          <input type="number" id="p-gw" value="28000" oninput="recalc()" />
          <span>Basic Sensor Kit (₹):</span>
          <input type="number" id="p-aws1" value="45000" oninput="recalc()" />
          <span>Standard AWS (₹):</span>
          <input type="number" id="p-aws2" value="140000" oninput="recalc()" />
          <span>Class A Full AWS (₹):</span>
          <input type="number" id="p-aws3" value="280000" oninput="recalc()" />
          <span>SaaS Fee (₹/kW/Yr):</span>
          <input type="number" id="p-saas" value="120" oninput="recalc()" />
        </div>
      </details>
    </div>

    <!-- RIGHT PANEL: OUTPUTS & CHART -->
    <div class="right-col">
      <!-- 4 Headline KPI Cards -->
      <div class="kpi-grid">
        <div class="kpi-card highlight">
          <div class="kpi-label" id="t-kpi1">System Payback Period</div>
          <div class="kpi-value" id="out-payback">6.5 Months</div>
          <div class="kpi-sub" id="t-kpi1-sub">100% CapEx Break-Even</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label" id="t-kpi2">Annual Revenue Saved</div>
          <div class="kpi-value" id="out-rev">₹3.74 Lakhs</div>
          <div class="kpi-sub" id="out-kwh-saved">57,488 kWh/yr recovered</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label" id="t-kpi3">Hardware Investment</div>
          <div class="kpi-value" id="out-capex">₹1.68 Lakhs</div>
          <div class="kpi-sub" id="t-kpi3-sub">One-time Turnkey CapEx</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label" id="t-kpi4">5-Year Net Profit</div>
          <div class="kpi-value" id="out-profit5" style="color: var(--green);">₹11.01 Lakhs</div>
          <div class="kpi-sub" id="t-kpi4-sub">After Hardware & SaaS Fees</div>
        </div>
      </div>

      <!-- Hardware Sizing & Financial Breakdown -->
      <div class="mid-grid">
        <!-- BOM Card -->
        <div class="card">
          <div class="section-title">
            <span id="t-sec2">2. Recommended Hardware BOM</span>
          </div>
          <table class="data-table">
            <tr>
              <td id="t-row-gw">Required HERON-P2 IoT Gateways</td>
              <td id="out-gw">1 Unit</td>
            </tr>
            <tr>
              <td id="t-row-inv">Estimated Inverters Polled</td>
              <td id="out-inv">10 Inverters</td>
            </tr>
            <tr>
              <td id="t-row-nodes">Total Modbus RTU Slave Nodes</td>
              <td id="out-nodes">13 Nodes</td>
            </tr>
            <tr>
              <td id="t-row-cable">Estimated RS485 Daisy-Chain Cable</td>
              <td id="out-cable">455 Meters</td>
            </tr>
          </table>
          <div style="margin-top: 14px;">
            <div style="font-size: 12px; color: var(--muted); font-weight: 600;" id="t-aws-label">Recommended Weather Station Tier:</div>
            <div class="badge-aws" id="out-aws-tier">Standard AWS (Pyranometer + Wind + Temp)</div>
          </div>
        </div>

        <!-- Financial Breakdown Card -->
        <div class="card">
          <div class="section-title">
            <span id="t-sec3">3. Cost & ROI Breakdown</span>
          </div>
          <table class="data-table">
            <tr>
              <td id="t-f-gw">HERON-P2 Gateways Cost</td>
              <td id="out-cost-gw">₹28,000</td>
            </tr>
            <tr>
              <td id="t-f-aws">Weather Station Package Cost</td>
              <td id="out-cost-aws">₹1,40,000</td>
            </tr>
            <tr>
              <td id="t-f-saas">Annual EmbedSolar Cloud SaaS</td>
              <td id="out-cost-saas">₹1,20,000 / yr</td>
            </tr>
            <tr>
              <td id="t-f-net">Net Annual Cash Flow (Client Benefit)</td>
              <td id="out-net-annual" style="color: var(--green);">+₹2,53,669 / yr</td>
            </tr>
          </table>
        </div>
      </div>

      <!-- 5-Year Cumulative Cash Flow Chart -->
      <div class="card">
        <div class="section-title">
          <span id="t-sec4">4. 5-Year Cumulative Net Savings Progression (₹)</span>
        </div>
        <div class="chart-wrapper">
          <div class="chart-bars" id="chart-bars"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    let currentLang = "en";

    const i18n = {
      en: {
        title: "EmbedSolar ROI & Hardware Configurator",
        subtitle: "Embed Square Solutions Pvt. Ltd. | AIoT Solar Monitoring & SCADA",
        langBtn: "తెలుగులో చూడండి (Telugu)",
        printBtn: "Print / Save PDF Quote",
        sec1: "1. Client Plant Parameters",
        capLabel: "Plant Capacity (kWp)",
        tariffLabel: "Electricity Tariff / PPA Rate",
        yieldLabel: "Daily Specific Yield",
        recLabel: "Expected AIoT Generation Recovery",
        priceCfg: "⚙️ Customize Unit Pricing (Internal)",
        kpi1: "System Payback Period",
        kpi1Sub: "100% CapEx Break-Even",
        kpi2: "Annual Revenue Saved",
        kpi3: "Hardware Investment",
        kpi3Sub: "One-time Turnkey CapEx",
        kpi4: "5-Year Net Profit",
        kpi4Sub: "After Hardware & SaaS Fees",
        sec2: "2. Recommended Hardware BOM",
        rowGw: "Required HERON-P2 IoT Gateways",
        rowInv: "Estimated Inverters Polled",
        rowNodes: "Total Modbus RTU Slave Nodes",
        rowCable: "Estimated RS485 Daisy-Chain Cable",
        awsLabel: "Recommended Weather Station Tier:",
        sec3: "3. Cost & ROI Breakdown",
        fGw: "HERON-P2 Gateways Cost",
        fAws: "Weather Station Package Cost",
        fSaas: "Annual EmbedSolar Cloud SaaS",
        fNet: "Net Annual Cash Flow (After SaaS)",
        sec4: "4. 5-Year Cumulative Net Savings Progression (₹)",
        months: "Months",
        yr0: "Year 0 (CapEx)",
        yr: "Year "
      },
      te: {
        title: "సోలార్ ROI & హార్డ్‌వేర్ కాన్ఫిగరేటర్ (EmbedSolar)",
        subtitle: "Embed Square Solutions Pvt. Ltd. | AIoT సోలార్ మానిటరింగ్ & SCADA",
        langBtn: "Switch to English",
        printBtn: "PDF కొటేషన్ సేవ్ చేయండి",
        sec1: "1. క్లయింట్ ప్లాంట్ వివరాలు (Inputs)",
        capLabel: "ప్లాంట్ సామర్థ్యం (Plant Capacity)",
        tariffLabel: "విద్యుత్ టారిఫ్ / యూనిట్ ధర",
        yieldLabel: "రోజువారీ సగటు ఉత్పత్తి (Specific Yield)",
        recLabel: "AIoT మానిటరింగ్ ద్వారా ఉత్పత్తి రికవరీ",
        priceCfg: "⚙️ హార్డ్‌వేర్ ధరలను మార్చండి (Internal)",
        kpi1: "పెట్టుబడి తిరిగి వచ్చే సమయం",
        kpi1Sub: "100% పెట్టుబడి రికవరీ",
        kpi2: "ఏటా ఆదా అయ్యే ఆదాయం",
        kpi3: "మొత్తం హార్డ్‌వేర్ ఖర్చు",
        kpi3Sub: "మొదటిసారి పెట్టే పెట్టుబడి",
        kpi4: "5 ఏళ్ల నికర లాభం (Net Profit)",
        kpi4Sub: "హార్డ్‌వేర్ & సాఫ్ట్‌వేర్ ఖర్చులు పోను",
        sec2: "2. అవసరమైన హార్డ్‌వేర్ వివరాలు (BOM)",
        rowGw: "అవసరమైన HERON-P2 IoT గేట్‌వేలు",
        rowInv: "అంచనా వేసిన ఇన్వర్టర్ల సంఖ్య",
        rowNodes: "మొత్తం Modbus RTU స్లేవ్ నోడ్‌లు",
        rowCable: "అంచనా వేసిన RS485 కేబుల్ పొడవు",
        awsLabel: "సిఫార్సు చేయబడిన వెదర్ స్టేషన్ ప్యాకేజీ:",
        sec3: "3. పెట్టుబడి & లాభాల వివరణ",
        fGw: "HERON-P2 గేట్‌వేల ఖర్చు",
        fAws: "వెదర్ స్టేషన్ ప్యాకేజీ ఖర్చు",
        fSaas: "వార్షిక EmbedSolar క్లౌడ్ సాఫ్ట్‌వేర్ ఫీజు",
        fNet: "నికర వార్షిక ఆదాయం (SaaS ఫీజు పోను)",
        sec4: "4. 5-సంవత్సరాల సంచిత నికర ఆదా చార్ట్ (₹)",
        months: "నెలలు",
        yr0: "0వ ఏడాది",
        yr: "ఏడాది "
      }
    };

    function formatINR(num) {
      const abs = Math.abs(Math.round(num));
      const sign = num < 0 ? "-" : "";
      return sign + "₹" + abs.toLocaleString("en-IN");
    }

    function formatLakhs(num) {
      const abs = Math.abs(num);
      const sign = num < 0 ? "-" : "";
      if (abs >= 10000000) {
        return sign + "₹" + (abs / 10000000).toFixed(2) + " Cr";
      } else if (abs >= 100000) {
        return sign + "₹" + (abs / 100000).toFixed(2) + " L";
      }
      return formatINR(num);
    }

    function setPreset(cap, tariff, yld, rec, btnEl) {
      document.getElementById("in-cap").value = cap;
      document.getElementById("in-tariff").value = tariff;
      document.getElementById("in-yield").value = yld;
      document.getElementById("in-rec").value = rec;
      document.querySelectorAll(".preset-btn").forEach(b => b.classList.remove("active"));
      if (btnEl) btnEl.classList.add("active");
      recalc();
    }

    function toggleLang() {
      currentLang = currentLang === "en" ? "te" : "en";
      const t = i18n[currentLang];
      document.getElementById("t-title").textContent = t.title;
      document.getElementById("t-subtitle").textContent = t.subtitle;
      document.getElementById("lang-btn").textContent = t.langBtn;
      document.getElementById("t-print").textContent = t.printBtn;
      document.getElementById("t-sec1").textContent = t.sec1;
      document.getElementById("t-cap-label").textContent = t.capLabel;
      document.getElementById("t-tariff-label").textContent = t.tariffLabel;
      document.getElementById("t-yield-label").textContent = t.yieldLabel;
      document.getElementById("t-rec-label").textContent = t.recLabel;
      document.getElementById("t-price-cfg").textContent = t.priceCfg;
      document.getElementById("t-kpi1").textContent = t.kpi1;
      document.getElementById("t-kpi1-sub").textContent = t.kpi1Sub;
      document.getElementById("t-kpi2").textContent = t.kpi2;
      document.getElementById("t-kpi3").textContent = t.kpi3;
      document.getElementById("t-kpi3-sub").textContent = t.kpi3Sub;
      document.getElementById("t-kpi4").textContent = t.kpi4;
      document.getElementById("t-kpi4-sub").textContent = t.kpi4Sub;
      document.getElementById("t-sec2").textContent = t.sec2;
      document.getElementById("t-row-gw").textContent = t.rowGw;
      document.getElementById("t-row-inv").textContent = t.rowInv;
      document.getElementById("t-row-nodes").textContent = t.rowNodes;
      document.getElementById("t-row-cable").textContent = t.rowCable;
      document.getElementById("t-aws-label").textContent = t.awsLabel;
      document.getElementById("t-sec3").textContent = t.sec3;
      document.getElementById("t-f-gw").textContent = t.fGw;
      document.getElementById("t-f-aws").textContent = t.fAws;
      document.getElementById("t-f-saas").textContent = t.fSaas;
      document.getElementById("t-f-net").textContent = t.fNet;
      document.getElementById("t-sec4").textContent = t.sec4;
      recalc();
    }

    function recalc() {
      const cap = parseFloat(document.getElementById("in-cap").value);
      const tariff = parseFloat(document.getElementById("in-tariff").value);
      const yld = parseFloat(document.getElementById("in-yield").value);
      const rec = parseFloat(document.getElementById("in-rec").value);

      const pGw = parseFloat(document.getElementById("p-gw").value) || 28000;
      const pAws1 = parseFloat(document.getElementById("p-aws1").value) || 45000;
      const pAws2 = parseFloat(document.getElementById("p-aws2").value) || 140000;
      const pAws3 = parseFloat(document.getElementById("p-aws3").value) || 280000;
      const pSaas = parseFloat(document.getElementById("p-saas").value) || 120;

      // Update input badges
      const mwText = cap >= 1000 ? ` (${(cap / 1000).toFixed(1)} MW)` : "";
      document.getElementById("val-cap").textContent = `${cap.toLocaleString("en-IN")} kWp${mwText}`;
      document.getElementById("val-tariff").textContent = `₹${tariff.toFixed(2)} / kWh`;
      document.getElementById("val-yield").textContent = `${yld.toFixed(2)} kWh/kWp`;
      document.getElementById("val-rec").textContent = `${rec.toFixed(1)}%`;

      // Hardware Sizing Logic
      const inverters = Math.ceil(cap / 100);
      const modbusNodes = inverters + 3;
      const gateways = Math.ceil(modbusNodes / 20);
      const cableMeters = modbusNodes * 35;

      let awsTier = "";
      let awsCost = 0;
      if (cap < 1000) {
        awsTier = currentLang === "en"
          ? "Basic Sensor Kit (Irradiance + Mod Temp)"
          : "బేసిక్ సెన్సార్ కిట్ (Irradiance + Mod Temp)";
        awsCost = pAws1;
      } else if (cap < 5000) {
        awsTier = currentLang === "en"
          ? "Standard AWS (Pyranometer + Wind + Temp)"
          : "స్టాండర్డ్ AWS (Pyranometer + Wind + Temp)";
        awsCost = pAws2;
      } else {
        awsTier = currentLang === "en"
          ? "IEC 61724-1 Class A Full AWS Package"
          : "IEC 61724-1 Class A పూర్తి AWS ప్యాకేజీ";
        awsCost = pAws3;
      }

      // Financial Logic
      const gwCost = gateways * pGw;
      const totalCapex = gwCost + awsCost;
      const annualSaas = cap * pSaas;

      const baselineKwh = cap * yld * 365;
      const savedKwh = baselineKwh * (rec / 100);
      const grossRev = savedKwh * tariff;
      const netAnnual = grossRev - annualSaas;

      const paybackMonths = netAnnual > 0 ? ((totalCapex / netAnnual) * 12).toFixed(1) : "N/A";
      const profit5Yr = (netAnnual * 5) - totalCapex;

      // Populate DOM
      const t = i18n[currentLang];
      document.getElementById("out-payback").textContent =
        netAnnual > 0 ? `${paybackMonths} ${t.months}` : "N/A";
      document.getElementById("out-rev").textContent = formatLakhs(grossRev);
      document.getElementById("out-kwh-saved").textContent =
        `${Math.round(savedKwh).toLocaleString("en-IN")} kWh / yr`;
      document.getElementById("out-capex").textContent = formatLakhs(totalCapex);
      document.getElementById("out-profit5").textContent = formatLakhs(profit5Yr);

      document.getElementById("out-gw").textContent = `${gateways} HERON-P2`;
      document.getElementById("out-inv").textContent = `${inverters}`;
      document.getElementById("out-nodes").textContent = `${modbusNodes}`;
      document.getElementById("out-cable").textContent = `${cableMeters.toLocaleString("en-IN")} m`;
      document.getElementById("out-aws-tier").textContent = awsTier;

      document.getElementById("out-cost-gw").textContent = formatINR(gwCost);
      document.getElementById("out-cost-aws").textContent = formatINR(awsCost);
      document.getElementById("out-cost-saas").textContent = `${formatINR(annualSaas)} / yr`;
      document.getElementById("out-net-annual").textContent = `+${formatINR(netAnnual)} / yr`;

      // Render 5-Year Chart
      const cashflows = [-totalCapex];
      for (let y = 1; y <= 5; y++) {
        cashflows.push(cashflows[y - 1] + netAnnual);
      }

      const maxAbs = Math.max(...cashflows.map(v => Math.abs(v)), 1);
      const chartContainer = document.getElementById("chart-bars");
      chartContainer.innerHTML = "";

      cashflows.forEach((val, idx) => {
        const heightPct = Math.max(Math.round((Math.abs(val) / maxAbs) * 145), 10);
        const col = document.createElement("div");
        col.className = "bar-col";

        const valLabel = document.createElement("div");
        valLabel.className = "bar-val";
        valLabel.style.color = val < 0 ? "var(--red)" : "var(--navy)";
        valLabel.textContent = formatLakhs(val);

        const bar = document.createElement("div");
        bar.className = "bar-fill " + (val < 0 ? "negative" : "positive");
        bar.style.height = `${heightPct}px`;

        const yrLabel = document.createElement("div");
        yrLabel.className = "bar-year";
        yrLabel.textContent = idx === 0 ? t.yr0 : `${t.yr}${idx}`;

        col.appendChild(valLabel);
        col.appendChild(bar);
        col.appendChild(yrLabel);
        chartContainer.appendChild(col);
      });
    }

    // Initialize on load
    recalc();
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>EmbedSolar | ROI & Hardware Sizing Configurator</title>
  <style>
    :root {
      --navy: #0a2540;
      --navy-light: #13385c;
      --gold: #ffc107;
      --gold-dark: #e0a800;
      --green: #10b981;
      --red: #ef4444;
      --bg: #f4f7fa;
      --card: #ffffff;
      --text: #1e293b;
      --muted: #64748b;
      --border: #e2e8f0;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Telugu", sans-serif;
    }

    body {
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.5;
      padding-bottom: 40px;
    }

    /* Header */
    header {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
      color: #fff;
      padding: 20px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      border-bottom: 4px solid var(--gold);
      box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15);
    }

    .brand-box {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .brand-logo {
      width: 44px;
      height: 44px;
      background: var(--gold);
      color: var(--navy);
      font-weight: 900;
      font-size: 20px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: -1px;
    }

    .brand-title h1 {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    .brand-title p {
      font-size: 13px;
      color: #cbd5e1;
    }

    .header-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .btn {
      padding: 9px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all 0.2s ease;
    }

    .btn-lang {
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }

    .btn-lang:hover {
      background: rgba(255, 255, 255, 0.22);
    }

    .btn-print {
      background: var(--gold);
      color: var(--navy);
    }

    .btn-print:hover {
      background: var(--gold-dark);
    }

    /* Main Container */
    .container {
      max-width: 1240px;
      margin: 28px auto;
      padding: 0 20px;
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 24px;
    }

    @media (max-width: 960px) {
      .container {
        grid-template-columns: 1fr;
      }
    }

    .card {
      background: var(--card);
      border-radius: 12px;
      border: 1px solid var(--border);
      padding: 24px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .section-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 18px;
      padding-bottom: 10px;
      border-bottom: 2px solid #f1f5f9;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Preset Buttons */
    .preset-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
    }

    .preset-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 12px;
      font-weight: 600;
      background: #f1f5f9;
      color: var(--navy);
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      cursor: pointer;
      transition: 0.15s;
    }

    .preset-btn:hover, .preset-btn.active {
      background: var(--navy);
      color: var(--gold);
      border-color: var(--navy);
    }

    /* Input Controls */
    .control-group {
      margin-bottom: 20px;
    }

    .control-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
    }

    .control-label {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text);
    }

    .control-val {
      font-size: 15px;
      font-weight: 800;
      color: var(--navy);
      background: #fef9c3;
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid #fde047;
    }

    input[type="range"] {
      width: 100%;
      accent-color: var(--navy);
      cursor: pointer;
      height: 6px;
    }

    .range-limits {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }

    /* Pricing Accordion */
    details {
      margin-top: 16px;
      background: #f8fafc;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
    }

    summary {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--navy);
      cursor: pointer;
    }

    .price-grid {
      display: grid;
      grid-template-columns: 1fr 110px;
      gap: 8px;
      margin-top: 12px;
      align-items: center;
      font-size: 12px;
    }

    .price-grid input {
      padding: 5px 8px;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      font-weight: 600;
      text-align: right;
    }

    /* Right Column Dashboard */
    .right-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* Top KPI Row */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    @media (max-width: 768px) {
      .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .kpi-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

    .kpi-card.highlight {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }

    .kpi-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .kpi-card.highlight .kpi-label {
      color: #cbd5e1;
    }

    .kpi-value {
      font-size: 24px;
      font-weight: 800;
      color: var(--navy);
    }

    .kpi-card.highlight .kpi-value {
      color: var(--gold);
    }

    .kpi-sub {
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 4px;
    }

    .kpi-card.highlight .kpi-sub {
      color: #e2e8f0;
    }

    /* Architecture & Financial Split */
    .mid-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    @media (max-width: 768px) {
      .mid-grid {
        grid-template-columns: 1fr;
      }
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
    }

    .data-table tr {
      border-bottom: 1px solid #f1f5f9;
    }

    .data-table tr:last-child {
      border-bottom: none;
    }

    .data-table td {
      padding: 10px 4px;
      font-size: 13.5px;
    }

    .data-table td:last-child {
      text-align: right;
      font-weight: 700;
      color: var(--navy);
    }

    .badge-aws {
      display: inline-block;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      margin-top: 4px;
    }

    /* Chart Section */
    .chart-wrapper {
      margin-top: 10px;
    }

    .chart-bars {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 14px;
      align-items: end;
      height: 230px;
      padding: 24px 12px 12px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid var(--border);
      position: relative;
    }

    .bar-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
    }

    .bar-val {
      font-size: 11.5px;
      font-weight: 700;
      margin-bottom: 6px;
      text-align: center;
    }

    .bar-fill {
      width: 100%;
      max-width: 56px;
      border-radius: 6px 6px 0 0;
      transition: height 0.35s ease;
      min-height: 8px;
    }

    .bar-fill.negative {
      background: var(--red);
      border-radius: 0 0 6px 6px;
    }

    .bar-fill.positive {
      background: linear-gradient(180deg, var(--navy-light), var(--navy));
      border-top: 3px solid var(--gold);
    }

    .bar-year {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      margin-top: 8px;
    }

    @media print {
      .header-actions, details, .preset-bar {
        display: none !important;
      }
      body {
        background: #fff;
      }
      .container {
        grid-template-columns: 340px 1fr;
        margin: 10px auto;
      }
    }
  </style>
</head>
<body>

  <header>
    <div class="brand-box">
      <div class="brand-logo">ES</div>
      <div class="brand-title">
        <h1 id="t-title">EmbedSolar ROI & Hardware Configurator</h1>
        <p id="t-subtitle">Embed Square Solutions Pvt. Ltd. | AIoT Solar Monitoring & SCADA</p>
      </div>
    </div>
    <div class="header-actions">
      <button class="btn btn-lang" onclick="toggleLang()" id="lang-btn">తెలుగులో చూడండి (Telugu)</button>
      <button class="btn btn-print" onclick="window.print()" id="t-print">Print / Save PDF Quote</button>
    </div>
  </header>

  <div class="container">
    <!-- LEFT PANEL: INPUTS -->
    <div class="card">
      <div class="section-title">
        <span id="t-sec1">1. Client Plant Parameters</span>
      </div>

      <div class="preset-bar">
        <button class="preset-btn" onclick="setPreset(500, 6.5, 4.5, 3.5, this)">500 kW Rooftop</button>
        <button class="preset-btn active" onclick="setPreset(1000, 6.5, 4.5, 3.5, this)">1 MW Commercial</button>
        <button class="preset-btn" onclick="setPreset(5000, 4.5, 4.5, 3.5, this)">5 MW Solar Park</button>
      </div>

      <!-- Slider 1: Capacity -->
      <div class="control-group">
        <div class="control-header">
          <span class="control-label" id="t-cap-label">Plant Capacity (kWp)</span>
          <span class="control-val" id="val-cap">1,000 kWp (1.0 MW)</span>
        </div>
        <input type="range" id="in-cap" min="100" max="10000" step="100" value="1000" oninput="recalc()" />
        <div class="range-limits">
          <span>100 kW</span>
          <span>5 MW</span>
          <span>10 MW</span>
        </div>
      </div>

      <!-- Slider 2: Tariff -->
      <div class="control-group">
        <div class="control-header">
          <span class="control-label" id="t-tariff-label">Electricity Tariff / PPA Rate</span>
          <span class="control-val" id="val-tariff">₹6.50 / kWh</span>
        </div>
        <input type="range" id="in-tariff" min="3.0" max="10.0" step="0.25" value="6.50" oninput="recalc()" />
        <div class="range-limits">
          <span>₹3.0/kWh</span>
          <span>₹6.5/kWh</span>
          <span>₹10.0/kWh</span>
        </div>
      </div>

      <!-- Slider 3: Daily Specific Yield -->
      <div class="control-group">
        <div class="control-header">
          <span class="control-label" id="t-yield-label">Daily Specific Yield</span>
          <span class="control-val" id="val-yield">4.50 kWh/kWp</span>
        </div>
        <input type="range" id="in-yield" min="3.5" max="5.5" step="0.1" value="4.5" oninput="recalc()" />
        <div class="range-limits">
          <span>3.5 kWh</span>
          <span>4.5 kWh (Avg)</span>
          <span>5.5 kWh</span>
        </div>
      </div>

      <!-- Slider 4: Recovery % -->
      <div class="control-group">
        <div class="control-header">
          <span class="control-label" id="t-rec-label">Expected AIoT Generation Recovery</span>
          <span class="control-val" id="val-rec">3.5%</span>
        </div>
        <input type="range" id="in-rec" min="1.5" max="7.0" step="0.5" value="3.5" oninput="recalc()" />
        <div class="range-limits">
          <span>1.5% (Conservative)</span>
          <span>3.5% (Typical)</span>
          <span>7.0% (High Loss)</span>
        </div>
      </div>

      <!-- Editable Base Prices for Sales Rep -->
      <details>
        <summary id="t-price-cfg">⚙️ Customize Unit Pricing (Internal)</summary>
        <div class="price-grid">
          <span>HERON-P2 Gateway (₹):</span>
          <input type="number" id="p-gw" value="28000" oninput="recalc()" />
          <span>Basic Sensor Kit (₹):</span>
          <input type="number" id="p-aws1" value="45000" oninput="recalc()" />
          <span>Standard AWS (₹):</span>
          <input type="number" id="p-aws2" value="140000" oninput="recalc()" />
          <span>Class A Full AWS (₹):</span>
          <input type="number" id="p-aws3" value="280000" oninput="recalc()" />
          <span>SaaS Fee (₹/kW/Yr):</span>
          <input type="number" id="p-saas" value="120" oninput="recalc()" />
        </div>
      </details>
    </div>

    <!-- RIGHT PANEL: OUTPUTS & CHART -->
    <div class="right-col">
      <!-- 4 Headline KPI Cards -->
      <div class="kpi-grid">
        <div class="kpi-card highlight">
          <div class="kpi-label" id="t-kpi1">System Payback Period</div>
          <div class="kpi-value" id="out-payback">6.5 Months</div>
          <div class="kpi-sub" id="t-kpi1-sub">100% CapEx Break-Even</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label" id="t-kpi2">Annual Revenue Saved</div>
          <div class="kpi-value" id="out-rev">₹3.74 Lakhs</div>
          <div class="kpi-sub" id="out-kwh-saved">57,488 kWh/yr recovered</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label" id="t-kpi3">Hardware Investment</div>
          <div class="kpi-value" id="out-capex">₹1.68 Lakhs</div>
          <div class="kpi-sub" id="t-kpi3-sub">One-time Turnkey CapEx</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label" id="t-kpi4">5-Year Net Profit</div>
          <div class="kpi-value" id="out-profit5" style="color: var(--green);">₹11.01 Lakhs</div>
          <div class="kpi-sub" id="t-kpi4-sub">After Hardware & SaaS Fees</div>
        </div>
      </div>

      <!-- Hardware Sizing & Financial Breakdown -->
      <div class="mid-grid">
        <!-- BOM Card -->
        <div class="card">
          <div class="section-title">
            <span id="t-sec2">2. Recommended Hardware BOM</span>
          </div>
          <table class="data-table">
            <tr>
              <td id="t-row-gw">Required HERON-P2 IoT Gateways</td>
              <td id="out-gw">1 Unit</td>
            </tr>
            <tr>
              <td id="t-row-inv">Estimated Inverters Polled</td>
              <td id="out-inv">10 Inverters</td>
            </tr>
            <tr>
              <td id="t-row-nodes">Total Modbus RTU Slave Nodes</td>
              <td id="out-nodes">13 Nodes</td>
            </tr>
            <tr>
              <td id="t-row-cable">Estimated RS485 Daisy-Chain Cable</td>
              <td id="out-cable">455 Meters</td>
            </tr>
          </table>
          <div style="margin-top: 14px;">
            <div style="font-size: 12px; color: var(--muted); font-weight: 600;" id="t-aws-label">Recommended Weather Station Tier:</div>
            <div class="badge-aws" id="out-aws-tier">Standard AWS (Pyranometer + Wind + Temp)</div>
          </div>
        </div>

        <!-- Financial Breakdown Card -->
        <div class="card">
          <div class="section-title">
            <span id="t-sec3">3. Cost & ROI Breakdown</span>
          </div>
          <table class="data-table">
            <tr>
              <td id="t-f-gw">HERON-P2 Gateways Cost</td>
              <td id="out-cost-gw">₹28,000</td>
            </tr>
            <tr>
              <td id="t-f-aws">Weather Station Package Cost</td>
              <td id="out-cost-aws">₹1,40,000</td>
            </tr>
            <tr>
              <td id="t-f-saas">Annual EmbedSolar Cloud SaaS</td>
              <td id="out-cost-saas">₹1,20,000 / yr</td>
            </tr>
            <tr>
              <td id="t-f-net">Net Annual Cash Flow (Client Benefit)</td>
              <td id="out-net-annual" style="color: var(--green);">+₹2,53,669 / yr</td>
            </tr>
          </table>
        </div>
      </div>

      <!-- 5-Year Cumulative Cash Flow Chart -->
      <div class="card">
        <div class="section-title">
          <span id="t-sec4">4. 5-Year Cumulative Net Savings Progression (₹)</span>
        </div>
        <div class="chart-wrapper">
          <div class="chart-bars" id="chart-bars"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    let currentLang = "en";

    const i18n = {
      en: {
        title: "EmbedSolar ROI & Hardware Configurator",
        subtitle: "Embed Square Solutions Pvt. Ltd. | AIoT Solar Monitoring & SCADA",
        langBtn: "తెలుగులో చూడండి (Telugu)",
        printBtn: "Print / Save PDF Quote",
        sec1: "1. Client Plant Parameters",
        capLabel: "Plant Capacity (kWp)",
        tariffLabel: "Electricity Tariff / PPA Rate",
        yieldLabel: "Daily Specific Yield",
        recLabel: "Expected AIoT Generation Recovery",
        priceCfg: "⚙️ Customize Unit Pricing (Internal)",
        kpi1: "System Payback Period",
        kpi1Sub: "100% CapEx Break-Even",
        kpi2: "Annual Revenue Saved",
        kpi3: "Hardware Investment",
        kpi3Sub: "One-time Turnkey CapEx",
        kpi4: "5-Year Net Profit",
        kpi4Sub: "After Hardware & SaaS Fees",
        sec2: "2. Recommended Hardware BOM",
        rowGw: "Required HERON-P2 IoT Gateways",
        rowInv: "Estimated Inverters Polled",
        rowNodes: "Total Modbus RTU Slave Nodes",
        rowCable: "Estimated RS485 Daisy-Chain Cable",
        awsLabel: "Recommended Weather Station Tier:",
        sec3: "3. Cost & ROI Breakdown",
        fGw: "HERON-P2 Gateways Cost",
        fAws: "Weather Station Package Cost",
        fSaas: "Annual EmbedSolar Cloud SaaS",
        fNet: "Net Annual Cash Flow (After SaaS)",
        sec4: "4. 5-Year Cumulative Net Savings Progression (₹)",
        months: "Months",
        yr0: "Year 0 (CapEx)",
        yr: "Year "
      },
      te: {
        title: "సోలార్ ROI & హార్డ్‌వేర్ కాన్ఫిగరేటర్ (EmbedSolar)",
        subtitle: "Embed Square Solutions Pvt. Ltd. | AIoT సోలార్ మానిటరింగ్ & SCADA",
        langBtn: "Switch to English",
        printBtn: "PDF కొటేషన్ సేవ్ చేయండి",
        sec1: "1. క్లయింట్ ప్లాంట్ వివరాలు (Inputs)",
        capLabel: "ప్లాంట్ సామర్థ్యం (Plant Capacity)",
        tariffLabel: "విద్యుత్ టారిఫ్ / యూనిట్ ధర",
        yieldLabel: "రోజువారీ సగటు ఉత్పత్తి (Specific Yield)",
        recLabel: "AIoT మానిటరింగ్ ద్వారా ఉత్పత్తి రికవరీ",
        priceCfg: "⚙️ హార్డ్‌వేర్ ధరలను మార్చండి (Internal)",
        kpi1: "పెట్టుబడి తిరిగి వచ్చే సమయం",
        kpi1Sub: "100% పెట్టుబడి రికవరీ",
        kpi2: "ఏటా ఆదా అయ్యే ఆదాయం",
        kpi3: "మొత్తం హార్డ్‌వేర్ ఖర్చు",
        kpi3Sub: "మొదటిసారి పెట్టే పెట్టుబడి",
        kpi4: "5 ఏళ్ల నికర లాభం (Net Profit)",
        kpi4Sub: "హార్డ్‌వేర్ & సాఫ్ట్‌వేర్ ఖర్చులు పోను",
        sec2: "2. అవసరమైన హార్డ్‌వేర్ వివరాలు (BOM)",
        rowGw: "అవసరమైన HERON-P2 IoT గేట్‌వేలు",
        rowInv: "అంచనా వేసిన ఇన్వర్టర్ల సంఖ్య",
        rowNodes: "మొత్తం Modbus RTU స్లేవ్ నోడ్‌లు",
        rowCable: "అంచనా వేసిన RS485 కేబుల్ పొడవు",
        awsLabel: "సిఫార్సు చేయబడిన వెదర్ స్టేషన్ ప్యాకేజీ:",
        sec3: "3. పెట్టుబడి & లాభాల వివరణ",
        fGw: "HERON-P2 గేట్‌వేల ఖర్చు",
        fAws: "వెదర్ స్టేషన్ ప్యాకేజీ ఖర్చు",
        fSaas: "వార్షిక EmbedSolar క్లౌడ్ సాఫ్ట్‌వేర్ ఫీజు",
        fNet: "నికర వార్షిక ఆదాయం (SaaS ఫీజు పోను)",
        sec4: "4. 5-సంవత్సరాల సంచిత నికర ఆదా చార్ట్ (₹)",
        months: "నెలలు",
        yr0: "0వ ఏడాది",
        yr: "ఏడాది "
      }
    };

    function formatINR(num) {
      const abs = Math.abs(Math.round(num));
      const sign = num < 0 ? "-" : "";
      return sign + "₹" + abs.toLocaleString("en-IN");
    }

    function formatLakhs(num) {
      const abs = Math.abs(num);
      const sign = num < 0 ? "-" : "";
      if (abs >= 10000000) {
        return sign + "₹" + (abs / 10000000).toFixed(2) + " Cr";
      } else if (abs >= 100000) {
        return sign + "₹" + (abs / 100000).toFixed(2) + " L";
      }
      return formatINR(num);
    }

    function setPreset(cap, tariff, yld, rec, btnEl) {
      document.getElementById("in-cap").value = cap;
      document.getElementById("in-tariff").value = tariff;
      document.getElementById("in-yield").value = yld;
      document.getElementById("in-rec").value = rec;
      document.querySelectorAll(".preset-btn").forEach(b => b.classList.remove("active"));
      if (btnEl) btnEl.classList.add("active");
      recalc();
    }

    function toggleLang() {
      currentLang = currentLang === "en" ? "te" : "en";
      const t = i18n[currentLang];
      document.getElementById("t-title").textContent = t.title;
      document.getElementById("t-subtitle").textContent = t.subtitle;
      document.getElementById("lang-btn").textContent = t.langBtn;
      document.getElementById("t-print").textContent = t.printBtn;
      document.getElementById("t-sec1").textContent = t.sec1;
      document.getElementById("t-cap-label").textContent = t.capLabel;
      document.getElementById("t-tariff-label").textContent = t.tariffLabel;
      document.getElementById("t-yield-label").textContent = t.yieldLabel;
      document.getElementById("t-rec-label").textContent = t.recLabel;
      document.getElementById("t-price-cfg").textContent = t.priceCfg;
      document.getElementById("t-kpi1").textContent = t.kpi1;
      document.getElementById("t-kpi1-sub").textContent = t.kpi1Sub;
      document.getElementById("t-kpi2").textContent = t.kpi2;
      document.getElementById("t-kpi3").textContent = t.kpi3;
      document.getElementById("t-kpi3-sub").textContent = t.kpi3Sub;
      document.getElementById("t-kpi4").textContent = t.kpi4;
      document.getElementById("t-kpi4-sub").textContent = t.kpi4Sub;
      document.getElementById("t-sec2").textContent = t.sec2;
      document.getElementById("t-row-gw").textContent = t.rowGw;
      document.getElementById("t-row-inv").textContent = t.rowInv;
      document.getElementById("t-row-nodes").textContent = t.rowNodes;
      document.getElementById("t-row-cable").textContent = t.rowCable;
      document.getElementById("t-aws-label").textContent = t.awsLabel;
      document.getElementById("t-sec3").textContent = t.sec3;
      document.getElementById("t-f-gw").textContent = t.fGw;
      document.getElementById("t-f-aws").textContent = t.fAws;
      document.getElementById("t-f-saas").textContent = t.fSaas;
      document.getElementById("t-f-net").textContent = t.fNet;
      document.getElementById("t-sec4").textContent = t.sec4;
      recalc();
    }

    function recalc() {
      const cap = parseFloat(document.getElementById("in-cap").value);
      const tariff = parseFloat(document.getElementById("in-tariff").value);
      const yld = parseFloat(document.getElementById("in-yield").value);
      const rec = parseFloat(document.getElementById("in-rec").value);

      const pGw = parseFloat(document.getElementById("p-gw").value) || 28000;
      const pAws1 = parseFloat(document.getElementById("p-aws1").value) || 45000;
      const pAws2 = parseFloat(document.getElementById("p-aws2").value) || 140000;
      const pAws3 = parseFloat(document.getElementById("p-aws3").value) || 280000;
      const pSaas = parseFloat(document.getElementById("p-saas").value) || 120;

      // Update input badges
      const mwText = cap >= 1000 ? ` (${(cap / 1000).toFixed(1)} MW)` : "";
      document.getElementById("val-cap").textContent = `${cap.toLocaleString("en-IN")} kWp${mwText}`;
      document.getElementById("val-tariff").textContent = `₹${tariff.toFixed(2)} / kWh`;
      document.getElementById("val-yield").textContent = `${yld.toFixed(2)} kWh/kWp`;
      document.getElementById("val-rec").textContent = `${rec.toFixed(1)}%`;

      // Hardware Sizing Logic
      const inverters = Math.ceil(cap / 100);
      const modbusNodes = inverters + 3;
      const gateways = Math.ceil(modbusNodes / 20);
      const cableMeters = modbusNodes * 35;

      let awsTier = "";
      let awsCost = 0;
      if (cap < 1000) {
        awsTier = currentLang === "en"
          ? "Basic Sensor Kit (Irradiance + Mod Temp)"
          : "బేసిక్ సెన్సార్ కిట్ (Irradiance + Mod Temp)";
        awsCost = pAws1;
      } else if (cap < 5000) {
        awsTier = currentLang === "en"
          ? "Standard AWS (Pyranometer + Wind + Temp)"
          : "స్టాండర్డ్ AWS (Pyranometer + Wind + Temp)";
        awsCost = pAws2;
      } else {
        awsTier = currentLang === "en"
          ? "IEC 61724-1 Class A Full AWS Package"
          : "IEC 61724-1 Class A పూర్తి AWS ప్యాకేజీ";
        awsCost = pAws3;
      }

      // Financial Logic
      const gwCost = gateways * pGw;
      const totalCapex = gwCost + awsCost;
      const annualSaas = cap * pSaas;

      const baselineKwh = cap * yld * 365;
      const savedKwh = baselineKwh * (rec / 100);
      const grossRev = savedKwh * tariff;
      const netAnnual = grossRev - annualSaas;

      const paybackMonths = netAnnual > 0 ? ((totalCapex / netAnnual) * 12).toFixed(1) : "N/A";
      const profit5Yr = (netAnnual * 5) - totalCapex;

      // Populate DOM
      const t = i18n[currentLang];
      document.getElementById("out-payback").textContent =
        netAnnual > 0 ? `${paybackMonths} ${t.months}` : "N/A";
      document.getElementById("out-rev").textContent = formatLakhs(grossRev);
      document.getElementById("out-kwh-saved").textContent =
        `${Math.round(savedKwh).toLocaleString("en-IN")} kWh / yr`;
      document.getElementById("out-capex").textContent = formatLakhs(totalCapex);
      document.getElementById("out-profit5").textContent = formatLakhs(profit5Yr);

      document.getElementById("out-gw").textContent = `${gateways} HERON-P2`;
      document.getElementById("out-inv").textContent = `${inverters}`;
      document.getElementById("out-nodes").textContent = `${modbusNodes}`;
      document.getElementById("out-cable").textContent = `${cableMeters.toLocaleString("en-IN")} m`;
      document.getElementById("out-aws-tier").textContent = awsTier;

      document.getElementById("out-cost-gw").textContent = formatINR(gwCost);
      document.getElementById("out-cost-aws").textContent = formatINR(awsCost);
      document.getElementById("out-cost-saas").textContent = `${formatINR(annualSaas)} / yr`;
      document.getElementById("out-net-annual").textContent = `+${formatINR(netAnnual)} / yr`;

      // Render 5-Year Chart
      const cashflows = [-totalCapex];
      for (let y = 1; y <= 5; y++) {
        cashflows.push(cashflows[y - 1] + netAnnual);
      }

      const maxAbs = Math.max(...cashflows.map(v => Math.abs(v)), 1);
      const chartContainer = document.getElementById("chart-bars");
      chartContainer.innerHTML = "";

      cashflows.forEach((val, idx) => {
        const heightPct = Math.max(Math.round((Math.abs(val) / maxAbs) * 145), 10);
        const col = document.createElement("div");
        col.className = "bar-col";

        const valLabel = document.createElement("div");
        valLabel.className = "bar-val";
        valLabel.style.color = val < 0 ? "var(--red)" : "var(--navy)";
        valLabel.textContent = formatLakhs(val);

        const bar = document.createElement("div");
        bar.className = "bar-fill " + (val < 0 ? "negative" : "positive");
        bar.style.height = `${heightPct}px`;

        const yrLabel = document.createElement("div");
        yrLabel.className = "bar-year";
        yrLabel.textContent = idx === 0 ? t.yr0 : `${t.yr}${idx}`;

        col.appendChild(valLabel);
        col.appendChild(bar);
        col.appendChild(yrLabel);
        chartContainer.appendChild(col);
      });
    }

    // Initialize on load
    recalc();
  </script>
</body>
</html>
