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 page">
      <div class="hero-copy">
        <img class="hero-logo" src="assets/azione-lab.jpg" alt="AzioneLab" />
        <p class="eyebrow">AzioneLab</p>
        <h1>Un luogo dove il teatro prende forma, voce e relazione.</h1>
        <p class="supporting">
          AzioneLab intreccia laboratori teatrali, produzioni audio/visive e momenti scenici costruiti con cura. Qui il pubblico trova una casa aperta: puo' scoprire gli spettacoli, prenotare con semplicita' e arrivare in sala con la leggerezza di chi sa gia' dove andare.
        </p>
        <div class="hero-actions">
          <a mat-flat-button color="primary" routerLink="/shows">Entra nella programmazione</a>
          <a mat-stroked-button routerLink="/check-in">Vai all'accoglienza</a>
        </div>
      </div>

      <div class="hero-stage" aria-hidden="true">
        <div class="curtain"></div>
        <div class="stage-glow"></div>
        <div class="stage-copy">
          <span>Questa sera in scena</span>
          <strong>Ti aspettiamo in sala con il tempo giusto per entrare nell'atmosfera</strong>
        </div>
      </div>
    </section>

    <section class="overview page">
      <div class="section-heading">
        <div>
          <p class="eyebrow">Perche' AzioneLab</p>
          <h2>Non solo prenotazioni: un invito a entrare nel lavoro, nell'ascolto e nella scena</h2>
        </div>
        <p class="supporting">Ogni passaggio e' pensato per restare umano: guardi cosa c'e', scegli la data, ricevi conferma e arrivi in teatro senza attriti.</p>
      </div>

      <div class="feature-grid">
        <mat-card class="feature-card">
          <mat-card-title>Trova la serata che fa per te</mat-card-title>
          <mat-card-content>
            <p>Le schede tengono vicini i dettagli che contano davvero: luogo, orario, disponibilita' e respiro dello spettacolo.</p>
          </mat-card-content>
        </mat-card>
        <mat-card class="feature-card">
          <mat-card-title>Una conferma semplice, senza fretta</mat-card-title>
          <mat-card-content>
            <p>Ricevi un'email, confermi quando vuoi e la tua prenotazione prende forma in modo chiaro e affidabile.</p>
          </mat-card-content>
        </mat-card>
        <mat-card class="feature-card">
          <mat-card-title>Accoglienza attenta all'ingresso</mat-card-title>
          <mat-card-content>
            <p>Lo staff puo' accompagnare l'arrivo del pubblico con uno strumento rapido, discreto e pensato per il lavoro in sala.</p>
          </mat-card-content>
        </mat-card>
      </div>
    </section>

    <section class="journey-grid page">
      <div class="journey-copy">
        <p class="eyebrow">Il percorso del pubblico</p>
        <h2>Dalla curiosita' al posto in sala, con naturalezza</h2>
        <ol>
          <li>Scopri la programmazione e lasciati guidare dalla scheda di ogni spettacolo.</li>
          <li>Richiedi i posti per la replica che preferisci e conferma dall'email ricevuta.</li>
          <li>Conserva il QR code sul telefono oppure stampalo e portalo con te all'ingresso.</li>
        </ol>
      </div>

      <mat-card class="meta-card">
        <mat-card-title>Dietro le quinte</mat-card-title>
        <mat-card-content>
          <p class="meta-label">Collegamento API</p>
          <code>{{ apiBaseUrl }}</code>
          <p class="meta-note">La parte pubblica del sito dialoga con le API Django esistenti senza cambiare il comportamento del backend.</p>
        </mat-card-content>
      </mat-card>
    </section>
  `,
  styles: [`
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
      gap: 28px;
      align-items: stretch;
      padding: 12px 0 24px;
    }

    .hero-copy {
      padding: 34px 0 20px;
    }

    .hero-logo {
      width: min(220px, 52vw);
      height: auto;
      display: block;
      margin-bottom: 18px;
    }

    h1 {
      margin: 0;
      max-width: 11ch;
      font-size: 3.85rem;
    }

    .supporting {
      margin: 20px 0 0;
      font-size: 1.06rem;
    }

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

    .hero-stage {
      position: relative;
      overflow: hidden;
      min-height: 420px;
      border-radius: var(--azionelab-radius-lg);
      border: 1px solid rgba(255, 250, 245, 0.16);
      background:
        linear-gradient(180deg, rgba(31, 18, 18, 0.1), rgba(27, 18, 14, 0.62)),
        linear-gradient(135deg, #b04b40 0%, #7f251f 24%, #43261f 56%, #211b1a 100%);
      box-shadow: var(--azionelab-shadow-strong);
    }

    .curtain {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, 0.08) 100%),
        repeating-linear-gradient(90deg, rgba(75, 18, 14, 0.2) 0 18px, rgba(160, 60, 52, 0.08) 18px 36px);
      opacity: 0.9;
    }

    .stage-glow {
      position: absolute;
      left: 50%;
      bottom: -80px;
      width: 340px;
      height: 340px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245, 214, 150, 0.9) 0, rgba(245, 214, 150, 0.22) 44%, rgba(245, 214, 150, 0) 72%);
    }

    .stage-copy {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 24px;
      display: grid;
      gap: 8px;
      padding: 18px 20px;
      border-radius: 18px;
      background: rgba(24, 17, 15, 0.52);
      backdrop-filter: blur(8px);
      color: rgba(255, 247, 239, 0.94);
      border: 1px solid rgba(255, 247, 239, 0.12);
    }

    .stage-copy span {
      text-transform: uppercase;
      font-size: 0.76rem;
      letter-spacing: 0.08em;
      color: rgba(255, 227, 192, 0.84);
    }

    .stage-copy strong {
      font-family: var(--azionelab-serif);
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.15;
    }

    .overview,
    .journey-grid {
      margin-top: 34px;
    }

    .section-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
      gap: 24px;
      align-items: end;
      margin-bottom: 20px;
    }

    .section-heading h2,
    .journey-copy h2 {
      margin: 0;
      max-width: 18ch;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .feature-card,
    .meta-card {
      border-radius: var(--azionelab-radius-md);
      border: 1px solid var(--azionelab-border);
      background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(251, 245, 236, 0.94));
      box-shadow: var(--azionelab-shadow);
    }

    .feature-card {
      min-height: 210px;
    }

    .feature-card mat-card-title,
    .meta-card mat-card-title {
      margin-bottom: 12px;
      font-family: var(--azionelab-serif);
      font-size: 1.18rem;
      font-weight: 700;
    }

    .feature-card p,
    .meta-card p {
      margin: 0;
      color: var(--azionelab-muted);
      line-height: 1.6;
    }

    .journey-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
      gap: 24px;
      align-items: start;
    }

    .journey-copy {
      padding: 10px 0;
    }

    ol {
      display: grid;
      gap: 12px;
      margin: 20px 0 0;
      padding-left: 22px;
      color: var(--azionelab-ink-soft);
      line-height: 1.65;
    }

    .meta-label {
      margin: 0 0 10px;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--azionelab-muted);
      letter-spacing: 0.08em;
    }

    code {
      display: inline-block;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(34, 28, 24, 0.06);
      color: var(--azionelab-ink-soft);
      word-break: break-word;
    }

    .meta-note {
      margin: 18px 0 0;
    }

    @media (max-width: 900px) {
      .hero,
      .section-heading,
      .journey-grid,
      .feature-grid {
        grid-template-columns: 1fr;
      }

      h1 {
        font-size: 2.9rem;
      }
    }

    @media (max-width: 640px) {
      h1 {
        font-size: 2.25rem;
      }

      .hero-stage {
        min-height: 320px;
      }

      .stage-copy {
        left: 16px;
        right: 16px;
        bottom: 16px;
        padding: 16px;
      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomePageComponent {
  protected readonly apiBaseUrl = inject(API_BASE_URL);
}