import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import '../components/ui-card';
import '../components/ui-button';
import '../components/ui-link';

@customElement('home-page')
export class HomePage extends LitElement {
  static styles = css`
    :host {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .hero {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 5rem 1.5rem 4rem;
      background:
        radial-gradient(
          ellipse at 40% 0%,
          color-mix(in srgb, var(--color-accent) 18%, transparent) 0%,
          transparent 55%
        ),
        radial-gradient(
          ellipse at 80% 60%,
          color-mix(in srgb, var(--color-accent) 8%, transparent) 0%,
          transparent 50%
        ),
        var(--color-bg);
      overflow: hidden;
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--color-border);
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.35rem 0.85rem;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--color-accent);
      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
      border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
      border-radius: 2rem;
      margin-bottom: 1.5rem;
    }

    .hero-badge svg {
      width: 0.85rem;
      height: 0.85rem;
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(2.2rem, 5vw, 3.5rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: var(--color-text);
      max-width: 700px;
    }

    .hero h1 span {
      background: linear-gradient(
        135deg,
        var(--color-accent),
        color-mix(in srgb, var(--color-accent) 60%, transparent)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-sub {
      margin: 1.25rem 0 2rem;
      font-size: 1.05rem;
      line-height: 1.65;
      color: color-mix(in srgb, var(--color-text) 60%, transparent);
      max-width: 520px;
    }

    .hero-actions {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.65rem 1.25rem;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--color-text);
      background: transparent;
      border: 1px solid var(--color-border);
      border-radius: 0.5rem;
      cursor: pointer;
      transition:
        border-color 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
    }

    .btn-secondary:hover {
      border-color: var(--color-accent);
      color: var(--color-accent);
      background: color-mix(in srgb, var(--color-accent) 6%, transparent);
    }

    section {
      padding: 4rem 1.5rem;
      max-width: 1100px;
      margin: 0 auto;
      width: 100%;
    }

    section + section {
      border-top: 1px solid var(--color-border);
    }

    .section-label {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin: 0 0 0.5rem;
    }

    .section-title {
      margin: 0 0 0.5rem;
      font-size: 1.75rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--color-text);
    }

    .section-desc {
      margin: 0 0 2.5rem;
      font-size: 0.95rem;
      color: color-mix(in srgb, var(--color-text) 55%, transparent);
      max-width: 520px;
      line-height: 1.6;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1rem;
    }

    .stat-card {
      background: var(--color-bg-nav);
      border: 1px solid var(--color-border);
      border-radius: 0.75rem;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      transition: border-color 0.25s ease;
    }

    .stat-card:hover {
      border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    }

    .stat-value {
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--color-accent);
    }

    .stat-label {
      font-size: 0.85rem;
      color: color-mix(in srgb, var(--color-text) 55%, transparent);
      font-weight: 500;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.25rem;
    }

    .feature-card {
      background: var(--color-bg-nav);
      border: 1px solid var(--color-border);
      border-radius: 0.75rem;
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      transition: border-color 0.25s ease;
    }

    .feature-card:hover {
      border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    }

    .feature-icon {
      width: 2.25rem;
      height: 2.25rem;
      display: grid;
      place-items: center;
      border-radius: 0.5rem;
      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
      color: var(--color-accent);
    }

    .feature-icon svg {
      width: 1.15rem;
      height: 1.15rem;
    }

    .feature-card h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: 650;
      color: var(--color-text);
    }

    .feature-card p {
      margin: 0;
      font-size: 0.875rem;
      line-height: 1.6;
      color: color-mix(in srgb, var(--color-text) 55%, transparent);
    }

    .competitions-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .comp-row {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      background: var(--color-bg-nav);
      border: 1px solid var(--color-border);
      border-radius: 0.75rem;
      padding: 1.25rem 1.5rem;
      transition: border-color 0.25s ease;
      cursor: pointer;
    }

    .comp-row:hover {
      border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    }

    .comp-date {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 3.5rem;
      padding: 0.5rem 0.65rem;
      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
      border-radius: 0.5rem;
      flex-shrink: 0;
    }

    .comp-date-day {
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--color-accent);
      line-height: 1;
    }

    .comp-date-month {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-accent);
      margin-top: 0.15rem;
    }

    .comp-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .comp-name {
      font-size: 1rem;
      font-weight: 650;
      color: var(--color-text);
    }

    .comp-location {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.82rem;
      color: color-mix(in srgb, var(--color-text) 50%, transparent);
    }

    .comp-location svg {
      width: 0.8rem;
      height: 0.8rem;
      flex-shrink: 0;
    }

    .comp-badge {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      padding: 0.3rem 0.7rem;
      border-radius: 2rem;
      flex-shrink: 0;
    }

    .comp-badge.upcoming {
      color: var(--color-accent);
      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
      border: 1px solid
        color-mix(in srgb, var(--color-accent) 25%, transparent);
    }

    .comp-badge.live {
      color: #30a46c;
      background: color-mix(in srgb, #30a46c 10%, transparent);
      border: 1px solid color-mix(in srgb, #30a46c 25%, transparent);
    }

    .comp-badge.ended {
      color: color-mix(in srgb, var(--color-text) 45%, transparent);
      background: color-mix(in srgb, var(--color-text) 6%, transparent);
      border: 1px solid var(--color-border);
    }

    @media (max-width: 600px) {
      .hero {
        padding: 3.5rem 1.25rem 3rem;
      }

      section {
        padding: 3rem 1.25rem;
      }

      .comp-row {
        flex-wrap: wrap;
        gap: 0.75rem;
      }

      .comp-badge {
        margin-left: auto;
      }
    }
  `;

  private navigate(path: string) {
    this.dispatchEvent(
      new CustomEvent('nav', {
        detail: { path },
        bubbles: true,
        composed: true,
      })
    );
  }

  render() {
    return html`
      <div class="hero">
        <div class="hero-badge">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 2L2 7l10 5 10-5-10-5z" />
            <path d="M2 17l10 5 10-5" />
            <path d="M2 12l10 5 10-5" />
          </svg>
          Live Scoring Platform
        </div>
        <h1>Precision scoring for <span>balloon competitions</span></h1>
        <p class="hero-sub">
          Track tasks, manage participants, and deliver real-time results
          for hot air balloon competitions worldwide.
        </p>
        <div class="hero-actions">
          <ui-button @click=${() => this.navigate('/competitions')}>
            Browse competitions
          </ui-button>
          <button
            class="btn-secondary"
            @click=${() => this.navigate('/register')}
          >
            Create account
          </button>
        </div>
      </div>

      <section>
        <p class="section-label">At a glance</p>
        <h2 class="section-title">Platform in numbers</h2>
        <p class="section-desc">
          FlightScore powers balloon competitions across the globe.
        </p>
        <div class="stats-grid">
          <div class="stat-card">
            <span class="stat-value">42</span>
            <span class="stat-label">Competitions scored</span>
          </div>
          <div class="stat-card">
            <span class="stat-value">318</span>
            <span class="stat-label">Registered pilots</span>
          </div>
          <div class="stat-card">
            <span class="stat-value">1,240</span>
            <span class="stat-label">Tasks completed</span>
          </div>
          <div class="stat-card">
            <span class="stat-value">12</span>
            <span class="stat-label">Countries</span>
          </div>
        </div>
      </section>

      <section>
        <p class="section-label">Features</p>
        <h2 class="section-title">Built for balloon events</h2>
        <p class="section-desc">
          Everything organizers, judges, and pilots need in one place.
        </p>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
              </svg>
            </div>
            <h3>Real-Time Scoring</h3>
            <p>
              Scores update live as judges submit results. Pilots and
              spectators always see the latest standings.
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
                <polyline points="14 2 14 8 20 8" />
                <line x1="16" y1="13" x2="8" y2="13" />
                <line x1="16" y1="17" x2="8" y2="17" />
                <polyline points="10 9 9 9 8 9" />
              </svg>
            </div>
            <h3>Task Management</h3>
            <p>
              Define and manage competition tasks with support for all
              standard ballooning task types.
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
                <circle cx="9" cy="7" r="4" />
                <path d="M23 21v-2a4 4 0 00-3-3.87" />
                <path d="M16 3.13a4 4 0 010 7.75" />
              </svg>
            </div>
            <h3>Pilot Profiles</h3>
            <p>
              Every pilot gets a profile with competition history,
              rankings, and performance statistics.
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="1" y="3" width="15" height="13" rx="2" ry="2" />
                <path d="M16 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2" />
                <line x1="8" y1="21" x2="8" y2="16" />
                <line x1="4" y1="21" x2="12" y2="21" />
              </svg>
            </div>
            <h3>Live Leaderboard</h3>
            <p>
              Public leaderboards let spectators follow the action
              from anywhere in the world.
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
                <circle cx="12" cy="10" r="3" />
              </svg>
            </div>
            <h3>GPS Integration</h3>
            <p>
              Import GPS tracks and calculate distances to targets
              automatically for precise scoring.
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                <line x1="3" y1="9" x2="21" y2="9" />
                <line x1="9" y1="21" x2="9" y2="9" />
              </svg>
            </div>
            <h3>Result Export</h3>
            <p>
              Export final standings and detailed score sheets as PDF
              or CSV for official records.
            </p>
          </div>
        </div>
      </section>

      <section>
        <p class="section-label">Competitions</p>
        <h2 class="section-title">Upcoming and recent events</h2>
        <p class="section-desc">
          Discover balloon competitions scored with FlightScore.
        </p>
        <div class="competitions-list">
          <div
            class="comp-row"
            @click=${() => this.navigate('/competitions/1')}
          >
            <div class="comp-date">
              <span class="comp-date-day">18</span>
              <span class="comp-date-month">Mar</span>
            </div>
            <div class="comp-info">
              <span class="comp-name"
                >European Balloon Challenge 2026</span
              >
              <span class="comp-location">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
                Salzburg, Austria
              </span>
            </div>
            <span class="comp-badge upcoming">Upcoming</span>
          </div>

          <div
            class="comp-row"
            @click=${() => this.navigate('/competitions/2')}
          >
            <div class="comp-date">
              <span class="comp-date-day">14</span>
              <span class="comp-date-month">Feb</span>
            </div>
            <div class="comp-info">
              <span class="comp-name">Cappadocia Open 2026</span>
              <span class="comp-location">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
                Goreme, Turkey
              </span>
            </div>
            <span class="comp-badge live">Live</span>
          </div>

          <div
            class="comp-row"
            @click=${() => this.navigate('/competitions/3')}
          >
            <div class="comp-date">
              <span class="comp-date-day">02</span>
              <span class="comp-date-month">Feb</span>
            </div>
            <div class="comp-info">
              <span class="comp-name"
                >Albuquerque Winter Fiesta</span
              >
              <span class="comp-location">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
                New Mexico, USA
              </span>
            </div>
            <span class="comp-badge ended">Ended</span>
          </div>

          <div
            class="comp-row"
            @click=${() => this.navigate('/competitions/4')}
          >
            <div class="comp-date">
              <span class="comp-date-day">11</span>
              <span class="comp-date-month">Jan</span>
            </div>
            <div class="comp-info">
              <span class="comp-name"
                >Swiss Alpine Balloon Trophy</span
              >
              <span class="comp-location">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
                Chateau-d'Oex, Switzerland
              </span>
            </div>
            <span class="comp-badge ended">Ended</span>
          </div>
        </div>
      </section>
    `;
  }
}