---
import Layout from '../layouts/Layout.astro';

if (Astro.locals.user) {
  return Astro.redirect('/dashboard');
}
---

<Layout title="Chronus - Time Tracking">
  <div class="hero min-h-screen bg-linear-to-br from-base-100 via-base-200 to-base-300">
    <div class="hero-content text-center">
      <div class="max-w-4xl">
        <img src="/src/assets/logo.webp" alt="Chronus Logo" class="h-24 w-24 mx-auto mb-6" />
        <h1 class="text-6xl md:text-7xl font-bold mb-6 text-primary">
          Chronus
        </h1>
        <p class="text-xl md:text-2xl py-6 text-base-content/80 font-light max-w-2xl mx-auto">
          Modern time tracking designed for teams that value simplicity and precision.
        </p>
        <div class="flex gap-4 justify-center mt-8 flex-wrap">
          <a href="/signup" class="btn btn-primary btn-lg">
            Get Started
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="/login" class="btn btn-outline btn-lg">Login</a>
        </div>

        <!-- Feature highlights -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
          <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
            <div class="card-body items-start">
              <div class="text-4xl mb-3">⚡</div>
              <h3 class="card-title text-lg">Lightning Fast</h3>
              <p class="text-sm text-base-content/70">Track tasks with a single click.</p>
            </div>
          </div>
          <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
            <div class="card-body items-start">
              <div class="text-4xl mb-3">📊</div>
              <h3 class="card-title text-lg">Detailed Reports</h3>
              <p class="text-sm text-base-content/70">Get actionable insights into your team's tasks.</p>
            </div>
          </div>
          <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
            <div class="card-body items-start">
              <div class="text-4xl mb-3">👥</div>
              <h3 class="card-title text-lg">Team Collaboration</h3>
              <p class="text-sm text-base-content/70">Built for multiple team members.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</Layout>