{% extends "layout.html" %}

{% block content %}
  <section class="ui-shell shadow-2xl">
    <div class="flex flex-col gap-10 md:flex-row md:items-center md:justify-between">
      <div class="max-w-xl">
        <p class="ui-eyebrow">BigQuery Cost Optimization</p>
        <h1 class="mt-4 text-4xl font-semibold text-slate-900 dark:text-slate-100 md:text-5xl">
          Cut query cost safely. Keep results the same.
        </h1>
        <p class="mt-4 text-[16px] text-slate-600 dark:text-slate-300">
          Governor finds expensive dbt patterns, proposes SQL fixes, and validates output before you open a PR.
        </p>
        <div class="mt-8 flex flex-wrap gap-4">
          <a class="ui-btn-primary px-6" href="{% if user %}/projects{% else %}/login{% endif %}">
            Open app
          </a>
        </div>
      </div>
      <div class="grid gap-4 border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/60 p-6 text-[14px] text-slate-600 dark:text-slate-300">
        <div>
          <p class="text-brand-500 dark:text-brand-200">1) Sync project data</p>
          <p class="mt-1">Connect manifest + BigQuery job history.</p>
        </div>
        <div>
          <p class="text-brand-500 dark:text-brand-200">2) Detect opportunities</p>
          <p class="mt-1">Find shuffle spill, slot contention, join explosion, dead columns, and storage issues.</p>
        </div>
        <div>
          <p class="text-brand-500 dark:text-brand-200">3) Verify before merge</p>
          <p class="mt-1">Review diff, dry-run cost impact, and result-equivalence checks.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="mt-12 grid gap-6 md:grid-cols-3">
    <div class="ui-pane bg-slate-50 dark:bg-slate-900/60">
      <h2 class="ui-section-title">Detection coverage</h2>
      <p class="mt-3 text-[14px] text-slate-600 dark:text-slate-300">Rule-based findings across query, model, and storage behavior.</p>
    </div>
    <div class="ui-pane bg-slate-50 dark:bg-slate-900/60">
      <h2 class="ui-section-title">Safe optimization</h2>
      <p class="mt-3 text-[14px] text-slate-600 dark:text-slate-300">Generated SQL with validation report, trust tier, and fallback handling.</p>
    </div>
    <div class="ui-pane bg-slate-50 dark:bg-slate-900/60">
      <h2 class="ui-section-title">PR-ready workflow</h2>
      <p class="mt-3 text-[14px] text-slate-600 dark:text-slate-300">Review in app, then ship changes through GitHub PRs.</p>
    </div>
  </section>
{% endblock %}