import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SectionComponent } from '../../shared/ui/section/section.component';

@Component({
  selector: 'app-about-me-section',
  standalone: true,
  imports: [CommonModule, SectionComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <app-section
      [id]="sectionId"
      eyebrow="About me"
      title="Engineer, collaborator, perpetual learner"
      lead="I like to keep teams moving: establish a clear plan, align stakeholders, and turn good ideas into shipped, measurable outcomes."
    >
      <div class="grid gap-8 lg:grid-cols-2">
        <div class="space-y-4 text-zinc-600 dark:text-zinc-200">
          <p>
            I care about pairing good taste with solid engineering practices.
            Whether building a new product or refining an existing one, I work
            to keep the codebase tidy, the UI cohesive, and the delivery
            predictable.
          </p>
          <p>
            I thrive in cross-functional teams, translating between design,
            product, and engineering to keep efforts aligned and transparent.
          </p>
        </div>
        <div class="grid gap-3">
          <div
            class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
          >
            <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
              Working principles
            </p>
            <ul class="mt-2 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">
              <li>• Design for clarity, then refine for speed.</li>
              <li>• Prefer simple interfaces over clever abstractions.</li>
              <li>• Optimize for maintainability and team velocity.</li>
            </ul>
          </div>
          <div
            class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
          >
            <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">Ways I help</p>
            <ul class="mt-2 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">
              <li>• Structuring design systems and component libraries.</li>
              <li>• Improving developer experience and tooling.</li>
              <li>• Coaching teams on pragmatic testing and reviews.</li>
            </ul>
          </div>
        </div>
      </div>
    </app-section>
  `
})
export class AboutMeSectionComponent {
  readonly sectionId = 'about-me';
}