// components/environmental.el - Environmental impact section.
//
// The honest case for why local-first AI has a lower footprint than cloud AI.
// Not greenwashing - a structural argument. The benefit follows from the
// architecture; it wasn't engineered as a feature, but it's real.

fn environmental() -> String {
    return "
<section id=\"environmental\" aria-label=\"Environmental impact\" style=\"padding:8rem 2.5rem;background:var(--bg)\">
  <div class=\"container-lg\">

    <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start\" class=\"env-grid\">

      <div>
        <div style=\"display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem\">
          <div class=\"navy-line-left\" style=\"width:3rem;flex-shrink:0\"></div>
          <span class=\"label reveal\" style=\"color:var(--navy-85)\">Environmental impact</span>
        </div>

        <h2 class=\"display-lg reveal\" style=\"transition-delay:80ms;margin-bottom:1.5rem\">
          Fewer tokens.<br><span class=\"gold\">Same work done.</span>
        </h2>

        <p class=\"reveal\" style=\"transition-delay:160ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:1.25rem\">
          Persistent context means shorter, more targeted prompts on every call. Less computation. Lower cost. A smaller footprint. This isn&#39;t a setting you toggle - it&#39;s what the architecture does by default.
        </p>

        <p class=\"reveal\" style=\"transition-delay:220ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:1.25rem\">
          Every time you open ChatGPT and explain who you are again, that&#39;s computation that didn&#39;t need to happen. With Neuron, that context tax doesn&#39;t accumulate. Over months of use, the savings compound into a meaningful reduction in total compute - and a meaningful reduction in what you pay.
        </p>

        <p class=\"reveal\" style=\"transition-delay:280ms;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--t2);line-height:1.8;margin-bottom:2.5rem\">
          This isn&#39;t a green marketing claim. It&#39;s a consequence of the design. The same architecture that makes Neuron better for you also makes it lighter on the planet.
        </p>

        <div class=\"reveal\" style=\"transition-delay:340ms;background:var(--card);border:1px solid rgba(0,82,160,.18);padding:2rem\">
          <p style=\"font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--navy);margin-bottom:1.25rem\">Savings calculator</p>
          <p style=\"font-family:var(--body);font-size:0.875rem;color:var(--t2);margin-bottom:1rem\">If you spend <strong id=\"calc-spend\" style=\"color:var(--t1)\">$50</strong>/month on AI&hellip;</p>
          <input type=\"range\" id=\"calc-slider\" min=\"10\" max=\"500\" step=\"10\" value=\"50\" style=\"width:100%;accent-color:var(--navy);margin-bottom:1.5rem\">
          <div style=\"display:flex;align-items:baseline;gap:0.75rem;margin-bottom:0.375rem\">
            <span id=\"calc-savings\" style=\"font-family:var(--head);font-size:2.5rem;font-weight:600;color:var(--navy)\">$240</span>
            <span style=\"font-family:var(--body);font-size:0.7rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--t3)\">saved per year</span>
          </div>
          <p style=\"font-family:var(--body);font-size:0.75rem;color:var(--t3)\">Based on estimated token reduction applied to your monthly spend.</p>
        </div>

        <script>
        (function() {
          var slider = document.getElementById('calc-slider');
          var spendEl = document.getElementById('calc-spend');
          var savingsEl = document.getElementById('calc-savings');
          if (!slider) return;
          function update() {
            var monthly = parseInt(slider.value, 10);
            var annual = Math.round(monthly * 0.35 * 12);
            spendEl.textContent = '$' + monthly;
            savingsEl.textContent = '$' + annual;
          }
          slider.addEventListener('input', update);
          update();
        })();
        </script>
      </div>

      <div style=\"display:flex;flex-direction:column;gap:1.5rem;padding-top:1rem\">

        <div class=\"reveal card-dark\" style=\"transition-delay:100ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)\">
          <p style=\"font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem\">Local inference - coming</p>
          <p style=\"font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem\">Your GPU, already powered on</p>
          <p style=\"font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7\">
            The design: when you run inference locally via Ollama, your device&#39;s GPU handles it - hardware that&#39;s already consuming power. No data center spins up a cluster for your query. No round-trip. No idle servers waiting at scale. This is where we&#39;re headed.
          </p>
        </div>

        <div class=\"reveal card-dark\" style=\"transition-delay:200ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)\">
          <p style=\"font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem\">No database server for your data</p>
          <p style=\"font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem\">On-device storage</p>
          <p style=\"font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7\">
            Your context lives on your device in a purpose-built local storage layer. No cloud database servers running 24&#x2F;7 to store and serve your conversations. No replication across availability zones. Just your device.
          </p>
        </div>

        <div class=\"reveal card-dark\" style=\"transition-delay:300ms;padding:1.75rem 2rem;border-left:3px solid rgba(0,120,84,.40)\">
          <p style=\"font-family:var(--body);font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,120,84,.70);margin-bottom:0.75rem\">Persistent context = less recomputation</p>
          <p style=\"font-family:var(--body);font-weight:400;font-size:0.9375rem;color:var(--t1);margin-bottom:0.5rem\">No re-explaining. No wasted tokens.</p>
          <p style=\"font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.7\">
            Neuron surfaces exactly what&#39;s relevant for each conversation - no re-deriving who you are from long histories. Shorter, more targeted prompts. More with less.
          </p>
        </div>

        <div class=\"reveal\" style=\"transition-delay:400ms;padding:1.25rem 1.75rem;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07);border-radius:2px\">
          <p style=\"font-family:var(--body);font-size:0.8125rem;font-weight:300;color:var(--t3);line-height:1.7\">
            <strong style=\"font-weight:500;color:var(--t2)\">The honest picture:</strong> When you use Neuron with BYOK providers (OpenAI, Anthropic, Grok) or Neuron Inference, those queries travel to inference servers - that footprint exists. The savings come from the architecture: persistent memory and local-first design reduce the total computation required to get the same work done.
          </p>
        </div>

      </div>
    </div>

  </div>
</section>
<style>
@media (max-width: 768px) {
  .env-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}
</style>
"
}
