---
import Layout from '../components/Layout.astro';
import Footer from '../components/Footer.astro';
import Waitlist from '../components/Waitlist.astro';
import CTA from '../components/CTA.astro';
---

<Layout title="dd0c/route — LLM Cost Router & Dashboard" description="Route AI API calls to the cheapest provider. Drop-in OpenAI proxy with cost-based routing, real-time dashboards, and budget alerts. LiteLLM alternative with sub-ms Rust latency.">
  <section class="pt-32 pb-20 px-6">
    <div class="max-w-4xl mx-auto">
      <div class="mb-8">
        <span class="font-mono text-sm text-dd0c-primary">dd0c/route</span>
        <h1 class="text-4xl sm:text-5xl font-bold mt-2">Stop burning money on LLM APIs</h1>
        <p class="mt-6 text-lg text-dd0c-muted leading-relaxed max-w-2xl">
          Drop-in proxy that sits between your app and OpenAI/Anthropic/Google. Routes each request to the cheapest provider that meets your quality threshold. Real-time cost dashboards. Budget alerts before you blow through $10K.
        </p>
      </div>

      <div class="mt-10 flex gap-4">
        <a href="#waitlist" class="px-6 py-3 rounded-lg bg-dd0c-primary hover:bg-dd0c-primary-light text-white font-medium transition">Start free →</a>
        <a href="https://docs.dd0c.dev/route" class="px-6 py-3 rounded-lg border border-dd0c-border hover:border-dd0c-muted text-dd0c-muted hover:text-dd0c-text transition">Read docs</a>
      </div>

      <div class="mt-16 grid md:grid-cols-3 gap-6">
        <div class="rounded-xl border border-dd0c-border bg-dd0c-surface p-6">
          <div class="text-2xl mb-3">💸</div>
          <h3 class="font-semibold mb-2">Cost-based routing</h3>
          <p class="text-sm text-dd0c-muted">Classify prompt complexity. Route simple queries to cheap models, complex ones to GPT-4. Save 40-60% on average.</p>
        </div>
        <div class="rounded-xl border border-dd0c-border bg-dd0c-surface p-6">
          <div class="text-2xl mb-3">📊</div>
          <h3 class="font-semibold mb-2">Real-time dashboard</h3>
          <p class="text-sm text-dd0c-muted">Cost per model, per team, per endpoint. Token usage breakdowns. Anomaly detection when spend spikes.</p>
        </div>
        <div class="rounded-xl border border-dd0c-border bg-dd0c-surface p-6">
          <div class="text-2xl mb-3">🔑</div>
          <h3 class="font-semibold mb-2">API key management</h3>
          <p class="text-sm text-dd0c-muted">Issue scoped keys per team. Set budget caps. Rotate without downtime. Full audit trail.</p>
        </div>
      </div>

      <div class="mt-16 rounded-xl border border-dd0c-border bg-dd0c-surface p-6">
        <h3 class="font-semibold mb-4">Integration is one line</h3>
        <pre class="font-mono text-sm text-dd0c-muted overflow-x-auto"><code><span class="text-dd0c-muted"># Before</span>
<span class="text-dd0c-accent">OPENAI_BASE_URL</span>=https://api.openai.com/v1

<span class="text-dd0c-muted"># After</span>
<span class="text-dd0c-accent">OPENAI_BASE_URL</span>=https://route.dd0c.dev/v1</code></pre>
      </div>

      <div class="mt-16">
        <h3 class="text-xl font-semibold mb-6">Compared to alternatives</h3>
        <div class="overflow-x-auto">
          <table class="w-full text-sm">
            <thead>
              <tr class="border-b border-dd0c-border text-left text-dd0c-muted">
                <th class="py-3 pr-4">Feature</th>
                <th class="py-3 px-4">dd0c/route</th>
                <th class="py-3 px-4">LiteLLM</th>
                <th class="py-3 px-4">Helicone</th>
              </tr>
            </thead>
            <tbody class="text-dd0c-muted">
              <tr class="border-b border-dd0c-border/50">
                <td class="py-3 pr-4">Cost-based routing</td>
                <td class="py-3 px-4 text-emerald-400">✓</td>
                <td class="py-3 px-4">Partial</td>
                <td class="py-3 px-4 text-red-400">✗</td>
              </tr>
              <tr class="border-b border-dd0c-border/50">
                <td class="py-3 pr-4">Self-hosted option</td>
                <td class="py-3 px-4 text-emerald-400">✓</td>
                <td class="py-3 px-4 text-emerald-400">✓</td>
                <td class="py-3 px-4 text-red-400">✗</td>
              </tr>
              <tr class="border-b border-dd0c-border/50">
                <td class="py-3 pr-4">Sub-ms latency overhead</td>
                <td class="py-3 px-4 text-emerald-400">✓ (Rust)</td>
                <td class="py-3 px-4">~5ms (Python)</td>
                <td class="py-3 px-4">~10ms</td>
              </tr>
              <tr>
                <td class="py-3 pr-4">Starting price</td>
                <td class="py-3 px-4 text-emerald-400">$49/mo</td>
                <td class="py-3 px-4">Free (OSS)</td>
                <td class="py-3 px-4">$20/mo</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
  <CTA />
  <Footer />
  <Waitlist />
</Layout>
