<script>
  import { onMount } from 'svelte';
</script>

<div class="space-y-6">
  <!-- Hero Section -->
  <section class="text-center py-8 px-4 bg-gray-800/70 rounded-xl border border-amber-900/30 backdrop-blur-sm">
    <h1 class="text-4xl font-bold mb-4 font-serif text-amber-100">Üdvözöljük Mucsaröcsögén!</h1>
    <p class="text-lg text-amber-100/80 max-w-3xl mx-auto leading-relaxed">
      Mucsaröcsöge egy bájos, festői falu, amely a természet ölelésében fekszik. Itt minden a hagyományok, a közösség és a nyugalom jegyében telik. Fedezze fel falunk történelmét, kultúráját és a helyi közösség életét, miközben élvezi a festői tájat és a nyugodt, vidéki hangulatot!
    </p>
  </section>

  <!-- Main Attractions -->
  <section class="bg-gray-800/70 p-6 rounded-xl shadow-lg border border-amber-900/30 backdrop-blur-sm">
    <h2 class="text-2xl font-semibold mb-4 font-serif text-amber-100">Főbb látnivalók:</h2>
    <div class="grid md:grid-cols-3 gap-4">
      <div class="bg-gray-700/50 p-4 rounded-lg border border-amber-800/30">
        <h3 class="text-lg font-semibold mb-2 text-amber-200">Mucsi Templom</h3>
        <p class="text-amber-100/80 text-sm">Egyedülálló építészeti remekmű, amely a középkorban épült.</p>
      </div>
      <div class="bg-gray-700/50 p-4 rounded-lg border border-amber-800/30">
        <h3 class="text-lg font-semibold mb-2 text-amber-200">Kocsis Házak</h3>
        <p class="text-amber-100/80 text-sm">A falu hagyományos építészeti stílusának megismerése.</p>
      </div>
      <div class="bg-gray-700/50 p-4 rounded-lg border border-amber-800/30">
        <h3 class="text-lg font-semibold mb-2 text-amber-200">Röcsögei Zöldövezet</h3>
        <p class="text-amber-100/80 text-sm">A természetkedvelők paradicsoma, a falu határában található csodálatos túraútvonalak.</p>
      </div>
    </div>
  </section>

  <!-- News and Events -->
  <section class="bg-gray-800/70 p-6 rounded-xl shadow-lg border border-amber-900/30 backdrop-blur-sm">
    <h2 class="text-2xl font-semibold mb-4 font-serif text-amber-100">Hírek és események</h2>
    <p class="text-amber-100/80 text-sm">
      Ne hagyja ki a legújabb híreinket és eseményeinket! Részletes információkat talál a falu rendezvényeiről, fesztiváljairól és egyéb programjairól.
    </p>
  </section>

  <!-- Services -->
  <section class="bg-gray-800/70 p-6 rounded-xl shadow-lg border border-amber-900/30 backdrop-blur-sm">
    <h2 class="text-2xl font-semibold mb-4 font-serif text-amber-100">Szolgáltatások</h2>
    <p class="text-amber-100/80 text-sm">
      Mucsaröcsögén minden a kényelmét szolgálja: helyi boltok, vendéglők, közösségi terek és modern infrastruktúra várja a látogatókat és a helyi lakosokat.
    </p>
  </section>

  <!-- Contact -->
  <section class="bg-gray-800/70 p-6 rounded-xl shadow-lg border border-amber-900/30 backdrop-blur-sm">
    <h2 class="text-2xl font-semibold mb-4 font-serif text-amber-100">Kapcsolat</h2>
    <p class="text-amber-100/80 text-sm mb-4">
      Kérdései vannak, vagy többet szeretne megtudni? Ne habozzon felvenni a kapcsolatot velünk!
    </p>
    
    <div class="flex flex-col md:flex-row items-center gap-6">
      <div class="w-full md:w-1/2">
        <h3 class="text-xl font-semibold mb-2 font-serif text-amber-200">Polgármester</h3>
        <p class="text-amber-100/80 text-sm">
          Mucsaröcsöge szeretett polgármestere, aki már 69 éve hivatalban van, igaz kicsit félénk
        </p>
      </div>
      <div class="w-full md:w-1/2">
        <div class="relative">
          <img src="/polgarmester.png" alt="Polgármester" class="rounded-xl shadow-xl w-full max-w-md mx-auto border-4 border-amber-900/30" />
          <div class="absolute inset-0 shadow-inner rounded-xl"></div>
        </div>
      </div>
    </div>
  </section>
</div>
