import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

import { API_BASE_URL } from '../services/api-config.token';

@Component({
  standalone: true,
  imports: [RouterLink, MatButtonModule, MatCardModule],
  template: `
    <section class="hero">
      <div class="hero-copy">
        <p class="eyebrow">AzioneLab Theatre Company</p>
        <h1>Public website and booking UI foundations.</h1>
        <p class="supporting">
          This Angular shell is wired for the existing Django APIs and ready for the next booking-focused iterations.
        </p>
        <div class="hero-actions">
          <a mat-flat-button color="primary" routerLink="/shows">Browse shows</a>
          <a mat-stroked-button routerLink="/check-in">Check-in area</a>
        </div>
      </div>

      <div class="hero-panel">
        <mat-card>
          <mat-card-title>Frontend wiring</mat-card-title>
          <mat-card-content>
            <p><strong>API base URL</strong></p>
            <code>{{ apiBaseUrl }}</code>
            <p class="panel-note">Placeholders are in place for public content, booking, and staff check-in flows.</p>
          </mat-card-content>
        </mat-card>
      </div>
    </section>
  `,
  styles: [`
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
      gap: 28px;
      align-items: stretch;
      max-width: 1180px;
      margin: 0 auto;
    }

    .hero-copy {
      padding: 36px 0;
    }

    .eyebrow {
      margin: 0 0 12px;
      color: var(--azionelab-accent);
      text-transform: uppercase;
      font-size: 0.78rem;
      font-weight: 700;
    }

    h1 {
      margin: 0;
      max-width: 10ch;
      font-size: clamp(2.5rem, 5vw, 4.75rem);
      line-height: 0.95;
    }

    .supporting {
      max-width: 52ch;
      color: var(--azionelab-muted);
      font-size: 1.08rem;
      line-height: 1.65;
      margin: 20px 0 0;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .hero-panel mat-card {
      height: 100%;
      border-radius: 8px;
      border: 1px solid var(--azionelab-border);
      background: var(--azionelab-surface);
      box-shadow: var(--azionelab-shadow);
    }

    code {
      display: inline-block;
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 8px;
      background: rgba(30, 27, 24, 0.06);
    }

    .panel-note {
      margin-top: 20px;
      color: var(--azionelab-muted);
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      .hero {
        grid-template-columns: 1fr;
      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomePageComponent {
  protected readonly apiBaseUrl = inject(API_BASE_URL);
}