import { Component, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
import { LangService } from '../../core/lang.service';
import { RevealDirective } from '../../core/reveal.directive';

@Component({
  selector: 'app-landing',
  standalone: true,
  imports: [RouterLink, RevealDirective],
  template: `
    <!-- HERO -->
    <section class="hero">
      <div class="hero-bg"></div>
      <div class="hero-veil"></div>
      <div class="container hero-inner fade-up">
        <p class="script light">{{ lang.t('hero_script') }}</p>
        <p class="eyebrow gold">{{ lang.t('hero_eyebrow') }}</p>
        <h1 class="light">{{ lang.t('hero_title') }}</h1>
        <p class="hero-sub">{{ lang.t('hero_sub') }}</p>
        <a routerLink="/wizard" class="btn btn--gold btn--lg">{{ lang.t('begin') }} <span class="arr">→</span></a>
        <p class="hero-loc">{{ lang.t('hero_loc') }}</p>
      </div>
    </section>

    <!-- HOW IT WORKS -->
    <section class="how">
      <div class="container">
        <div class="how-head center" appReveal>
          <p class="ornament"><span class="glyph">&#10086;</span></p>
          <p class="eyebrow">{{ lang.t('how_eyebrow') }}</p>
          <h2>{{ lang.t('how_title') }}</h2>
        </div>
        <div class="steps-grid">
          <article class="step" appReveal [revealDelay]="0">
            <span class="num">I</span>
            <h3>{{ lang.t('how1_t') }}</h3>
            <p class="muted">{{ lang.t('how1_d') }}</p>
          </article>
          <article class="step" appReveal [revealDelay]="120">
            <span class="num">II</span>
            <h3>{{ lang.t('how2_t') }}</h3>
            <p class="muted">{{ lang.t('how2_d') }}</p>
          </article>
          <article class="step" appReveal [revealDelay]="240">
            <span class="num">III</span>
            <h3>{{ lang.t('how3_t') }}</h3>
            <p class="muted">{{ lang.t('how3_d') }}</p>
          </article>
        </div>
      </div>
    </section>

    <!-- CLOSING CTA -->
    <section class="closing">
      <div class="closing-bg"></div>
      <div class="container center closing-inner" appReveal>
        <p class="script light">{{ lang.t('cta_script') }}</p>
        <h2 class="light">{{ lang.t('cta_title') }}</h2>
        <p class="cta-sub">{{ lang.t('cta_sub') }}</p>
        <a routerLink="/wizard" class="btn btn--gold btn--lg">{{ lang.t('cta_btn') }} <span class="arr">→</span></a>
      </div>
    </section>
  `,
  styles: [`
    .light { color: var(--ivory) !important; }
    .gold  { color: var(--gold-soft) !important; }
    .arr { transition: transform .25s ease; display: inline-block; }
    [dir='rtl'] .arr { transform: scaleX(-1); }
    .btn--gold:hover .arr { transform: translateX(4px); }
    [dir='rtl'] .btn--gold:hover .arr { transform: scaleX(-1) translateX(4px); }

    /* ---- Hero ---- */
    .hero {
      position: relative; min-height: calc(100vh - 72px);
      display: flex; align-items: center; overflow: hidden;
      background: var(--onyx-deep);
    }
    .hero-bg {
      position: absolute; inset: 0;
      background-image: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=2000&q=72');
      background-size: cover; background-position: center;
      transform: scale(1.05); animation: heroZoom 18s ease-out forwards;
    }
    @keyframes heroZoom { to { transform: scale(1); } }
    .hero-veil {
      position: absolute; inset: 0;
      background:
        linear-gradient(180deg, rgba(16,12,10,.58) 0%, rgba(16,12,10,.34) 45%, rgba(12,9,7,.80) 100%),
        radial-gradient(900px 560px at 50% 46%, rgba(8,6,4,.38), transparent 76%);
    }
    .hero-inner { position: relative; max-width: 760px; padding: 60px 24px; }
    .hero .script { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 8px; }
    .hero h1 { margin: 6px 0 18px; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
    .hero-sub { font-size: 1.18rem; max-width: 560px; margin: 0 0 32px; color: rgba(255,253,249,.92); }
    .hero-loc {
      margin-top: 26px; font-size: .76rem; letter-spacing: 2.5px; text-transform: uppercase;
      color: rgba(255,253,249,.7);
    }
    [dir='rtl'] .hero-loc { letter-spacing: 1px; }

    /* ---- How it works ---- */
    .how { padding: 92px 0; background:
      linear-gradient(180deg, var(--cream) 0%, var(--blush) 100%); }
    .how-head { max-width: 600px; margin: 0 auto 54px; }
    .how-head .ornament { margin-bottom: 16px; }
    .how-head h2 { margin-top: 6px; }
    .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .step {
      background: var(--ivory); border: 1px solid var(--line);
      border-radius: var(--radius); padding: 40px 28px; text-align: center;
      box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease;
    }
    .step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
    .step .num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%;
      font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
      color: var(--gold-deep); border: 1px solid var(--gold-soft);
      background: radial-gradient(circle at 50% 30%, rgba(231,214,171,.4), transparent 70%);
    }
    .step h3 { margin: 0 0 8px; }
    .step p { margin: 0; font-size: .96rem; }
    @media (max-width: 800px) { .steps-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

    /* ---- Closing CTA ---- */
    .closing { position: relative; padding: 86px 0; overflow: hidden; background: var(--onyx-deep); }
    .closing-bg {
      position: absolute; inset: 0; opacity: .22;
      background-image: url('https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&w=1800&q=70');
      background-size: cover; background-position: center;
    }
    .closing::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(26,20,16,.86), rgba(14,11,9,.94));
    }
    .closing-inner { position: relative; z-index: 1; max-width: 640px; }
    .closing .script { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 6px; }
    .closing h2 { margin: 4px 0 14px; }
    .cta-sub { color: rgba(255,253,249,.85); font-size: 1.08rem; margin: 0 0 30px; }
  `],
})
export class LandingComponent {
  lang = inject(LangService);
}
