<template>
  <div>
    <section class="mb-12">
      <p class="text-sm text-accent font-semibold mb-2">Seit 2003 &middot; Über 20 Jahre Veranstaltungstechnik</p>
      <h1 class="text-4xl lg:text-5xl font-extrabold mb-4">Professionelle Technik für Ihre Veranstaltung</h1>
      <p class="text-text-muted text-lg mb-6 max-w-2xl">
        Von der Firmenevent-Beschallung bis zur Open-Air-Großproduktion: HMS Licht &amp; Ton liefert
        Tontechnik, Lichttechnik, Rigging und Komplettlösungen aus Leipheim und Ellzee.
      </p>
      <div class="flex flex-wrap gap-4">
        <NuxtLink to="/mietkatalog" class="btn-primary">Mietkatalog öffnen</NuxtLink>
        <NuxtLink to="/kontakt" class="btn-secondary">Beratung anfragen</NuxtLink>
      </div>
    </section>

    <section class="mb-12">
      <h2 class="text-2xl font-bold mb-6">Leistungen</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div
          v-for="service in services"
          :key="service.title"
          class="bg-panel border border-border-default rounded-lg p-5 hover:border-accent-border transition-colors duration-fast"
        >
          <h3 class="text-accent text-sm font-bold mb-2">{{ service.title }}</h3>
          <p class="text-text-muted text-sm">{{ service.description }}</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
useHead({
  title: "HMS Licht & Ton – Veranstaltungstechnik Leipheim/Ellzee",
  meta: [
    { name: "robots", content: "noindex, nofollow, noarchive, nosnippet" },
    { property: "og:type", content: "website" },
    { property: "og:title", content: "HMS Licht & Ton – Veranstaltungstechnik" },
    { property: "og:description", content: "Professionelle Veranstaltungstechnik aus Leipheim/Ellzee. Vermietung, Verkauf, Personal, Transport." },
    { property: "og:locale", content: "de_DE" },
    { property: "og:site_name", content: "HMS Licht & Ton" },
    { property: "og:url", content: "https://hms.media-on.de" },
  ],
});

const services = [
  { title: "Vermietung", description: "Lautsprecher, Mischpulte, Lichtanlagen, Rigging und Komplett-Setups aus unserem 1.000+ Geräte umfassenden Mietlager." },
  { title: "Verkauf", description: "Neu- und Gebrauchtgeräte führender Hersteller mit Beratung, Inbetriebnahme und Service." },
  { title: "Personal", description: "Qualifizierte Tontechniker, Lichttechniker und Rigger für Aufbau, Betrieb und Abbau." },
  { title: "Transport", description: "Eigene Transportfahrzeuge für sichere An- und Ablieferung inklusive Verladekonzept." },
];
</script>
