<script setup lang="ts">
/**
 * HeroSection - Main hero/landing section of the homepage
 *
 * AI CODING TOOL INSTRUCTIONS:
 * Content is loaded from /src/content/site-data.js
 *
 * When user says:
 * - "change the title" -> edit hero.title.value in site-data.js
 * - "change the subtitle" or "tagline" -> edit hero.tagline.value in site-data.js
 * - "change the description" -> edit hero.description.value in site-data.js
 * - "change hero colors" -> modify the styles below or variables.css
 */
import { hero } from "@/content/site-data";
import logo from "@/assets/logo.jpg";
</script>

<template>
  <section class="hero-section">
    <div class="hero-container">
      <img :src="logo" alt="Logo" class="hero-logo" />
      <h1 class="hero-title">{{ hero.title.value }}</h1>
      <p class="hero-tagline">{{ hero.tagline.value }}</p>
      <p class="hero-description">{{ hero.description.value }}</p>
    </div>
  </section>
</template>

<style scoped>
.hero-section {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  background-color: var(--color-background);
}

.hero-container {
  max-width: var(--content-width);
  margin: 0 auto;
}

.hero-logo {
  display: block;
  max-width: 150px;
  height: auto;
  margin: 0 auto var(--space-md);
}

.hero-title {
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.hero-tagline {
  font-size: var(--font-size-xl);
  color: var(--color-secondary-dark);
  font-weight: 500;
  margin-bottom: var(--space-lg);
}

.hero-description {
  font-size: var(--font-size-lg);
  color: var(--color-secondary-dark);
  max-width: 600px;
  margin: 0 auto;
}
</style>
