---
interface Props {
  lang?: 'de' | 'en';
}

const { lang = 'de' } = Astro.props;
const isDe = lang === 'de';
---

<section class="relative pt-8 pb-16 lg:pt-12 lg:pb-24 overflow-hidden bg-[#1A1816]">
  <!-- Subtle Background Gradients -->
  <div class="absolute top-0 left-0 w-1/2 h-full bg-[#2D5A43]/10 blur-3xl pointer-events-none"></div>
  <div class="absolute top-0 right-0 w-1/2 h-full bg-[#C85A32]/10 blur-3xl pointer-events-none"></div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 space-y-12">
    <!-- Top Subtitle / Heritage Tag -->
    <div class="text-center space-y-3">
      <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#24211D] border border-[#D4A373]/30 text-[#D4A373] text-xs font-semibold tracking-wider uppercase">
        <span>🇮🇹 Sizilien trifft Goslar</span>
        <span>•</span>
        <span>Seit 1980 • Bäckerstraße 18</span>
      </div>
      <h1 class="font-serif text-3xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-[#E6D5C3]">
        Zwei Welten. Ein unvergleichliches Haus.
      </h1>
      <p class="text-sm sm:text-base text-[#A3978B] max-w-2xl mx-auto leading-relaxed">
        {isDe
          ? "Obere Etagen: 7 neu sanierte Boutique-Apartments im UNESCO-Fachwerk. Erdgeschoss: Die traditionsreiche Familien-Trattoria. Erlebe echte italienische Gastfreundschaft im Herzen von Goslar."
          : "Upper floors: 7 newly renovated boutique apartments in UNESCO timber-frame heritage. Ground floor: The legendary family Trattoria. Experience authentic Italian hospitality in Goslar."}
      </p>
    </div>

    <!-- 50 / 50 Dual Hero Cards Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch">
      <!-- Left Side: Apartments (Green #2D5A43) -->
      <div class="relative rounded-3xl bg-[#24211D] border border-[#2D5A43]/40 p-8 sm:p-10 flex flex-col justify-between shadow-2xl hover:border-emerald-500/60 transition-all group overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-[#2D5A43]/20 rounded-full blur-2xl group-hover:bg-[#2D5A43]/30 transition-all"></div>
        
        <div class="space-y-6 relative z-10">
          <div class="flex items-center justify-between">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#2D5A43]/20 border border-emerald-500/30 text-emerald-400 text-xs font-bold uppercase tracking-wider">
              <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
              <span>{isDe ? "Boutique Apartments" : "Boutique Apartments"}</span>
            </span>
            <span class="text-xs font-serif text-[#D4A373]">7 Suiten • 100% Saniert</span>
          </div>

          <div class="space-y-3">
            <h2 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3] group-hover:text-emerald-300 transition-colors">
              {isDe ? "Schlafen & Entspannen im Denkmal" : "Stay in UNESCO Heritage"}
            </h2>
            <p class="text-xs sm:text-sm text-[#A3978B] leading-relaxed">
              {isDe
                ? "4 Premium-Komfort-Suites mit Balkon/Terrasse & Workstation sowie 3 gemütliche Klassik-Suites. Kontaktloser Nuki Smart-Lock Access ab 15:00 Uhr, Highspeed WLAN & Bestpreis-Garantie bei Direktbuchung."
                : "4 Premium Suites with balcony/terrace & workspace plus 3 cozy Classic Suites. Contactless Nuki Smart Lock access from 3:00 PM, Highspeed Wi-Fi & Best Rate Guarantee."}
            </p>
          </div>

          <!-- Feature Bullets -->
          <div class="grid grid-cols-2 gap-3 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/15">
            <div class="flex items-center gap-2">
              <span class="text-emerald-400 font-bold">✓</span>
              <span>100% 2025er Sanierung</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-emerald-400 font-bold">✓</span>
              <span>Nuki Keyless PIN Access</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-emerald-400 font-bold">✓</span>
              <span>15% Direktbucher-Rabatt</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-emerald-400 font-bold">✓</span>
              <span>Balkon, Terrasse & Workation</span>
            </div>
          </div>
        </div>

        <!-- Action Area -->
        <div class="pt-8 space-y-4 relative z-10">
          <div class="flex flex-col sm:flex-row gap-3">
            <a
              href="#apartments"
              class="flex-1 py-3.5 px-6 rounded-2xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-center font-bold text-xs sm:text-sm transition-all shadow-lg hover:shadow-emerald-900/30"
            >
              {isDe ? "Suiten entdecken & buchen" : "Explore Suites & Book"}
            </a>
            <a
              href="https://wa.me/4915207483196"
              target="_blank"
              class="py-3.5 px-4 rounded-2xl bg-[#1A1816] hover:bg-[#2E2A25] text-emerald-400 border border-emerald-500/40 text-center font-semibold text-xs transition-all flex items-center justify-center gap-2"
            >
              <span>💬 WhatsApp Alja</span>
            </a>
          </div>
          <p class="text-[11px] text-[#A3978B] text-center sm:text-left">
            Apartment Concierge Alja: <a href="https://wa.me/4915207483196" target="_blank" class="text-emerald-400 underline font-medium">+49 1520 7483196</a>
          </p>
        </div>
      </div>

      <!-- Right Side: Trattoria (Red #C85A32) -->
      <div class="relative rounded-3xl bg-[#24211D] border border-[#C85A32]/40 p-8 sm:p-10 flex flex-col justify-between shadow-2xl hover:border-[#C85A32] transition-all group overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-[#C85A32]/20 rounded-full blur-2xl group-hover:bg-[#C85A32]/30 transition-all"></div>

        <div class="space-y-6 relative z-10">
          <div class="flex items-center justify-between">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/30 text-[#C85A32] text-xs font-bold uppercase tracking-wider">
              <span class="w-2 h-2 rounded-full bg-[#C85A32] animate-pulse"></span>
              <span>Trattoria da Enzo</span>
            </span>
            <span class="text-xs font-serif text-[#D4A373]">Familientradition seit 1980</span>
          </div>

          <div class="space-y-3">
            <h2 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3] group-hover:text-[#e2724a] transition-colors">
              {isDe ? "Kulinarik & Italienische Lebensfreude" : "Authentic Sicilian Dining"}
            </h2>
            <p class="text-xs sm:text-sm text-[#A3978B] leading-relaxed">
              {isDe
                ? "In Alessandras Trattoria genießen Hotelgäste und Feinschmecker ehrliche sizilianische Spezialitäten, frisch gedrehte Pasta und erlesene Weine. Bevorzugte Tischreservierung für Apartment-Gäste."
                : "Enjoy authentic Sicilian specialties, handmade pasta, and fine wines at Alessandra's Trattoria. Priority table reservations for apartment guests."}
            </p>
          </div>

          <!-- Feature Bullets -->
          <div class="grid grid-cols-2 gap-3 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/15">
            <div class="flex items-center gap-2">
              <span class="text-[#C85A32] font-bold">✓</span>
              <span>Hausgemachte Pasta & Kräuter</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-[#C85A32] font-bold">✓</span>
              <span>Di–So 17:00 – 22:30 Uhr</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-[#C85A32] font-bold">✓</span>
              <span>Priorisierte Gästereservierung</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-[#C85A32] font-bold">✓</span>
              <span>Echte Sizilianische Rezepte</span>
            </div>
          </div>
        </div>

        <!-- Action Area -->
        <div class="pt-8 space-y-4 relative z-10">
          <div class="flex flex-col sm:flex-row gap-3">
            <a
              href="tel:+49532123456"
              class="flex-1 py-3.5 px-6 rounded-2xl bg-[#C85A32] hover:bg-[#b04d2a] text-white text-center font-bold text-xs sm:text-sm transition-all shadow-lg hover:shadow-red-900/30"
            >
              {isDe ? "Tisch anrufen & reservieren" : "Call & Reserve Table"}
            </a>
            <a
              href="#trattoria"
              class="py-3.5 px-4 rounded-2xl bg-[#1A1816] hover:bg-[#2E2A25] text-[#C85A32] border border-[#C85A32]/40 text-center font-semibold text-xs transition-all flex items-center justify-center gap-2"
            >
              <span>🍷 Speisekarte & Info</span>
            </a>
          </div>
          <p class="text-[11px] text-[#A3978B] text-center sm:text-left">
            Trattoria Festnetz: <a href="tel:+49532123456" class="text-[#C85A32] underline font-medium">+49 5321 23456</a>
          </p>
        </div>
      </div>
    </div>

    <!-- Trust Bar: Airbnb Superhost, 9.8 Booking.com, 100% 2025er Sanierung -->
    <div class="bg-[#24211D] border border-[#D4A373]/20 rounded-2xl p-6 grid grid-cols-2 lg:grid-cols-4 gap-6 text-center shadow-xl">
      <div class="space-y-1">
        <div class="text-2xl">⭐</div>
        <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">Airbnb Superhost</div>
        <div class="text-[11px] text-[#A3978B]">Höchste Gastzufriedenheit</div>
      </div>

      <div class="space-y-1 border-l border-[#D4A373]/10">
        <div class="text-2xl">🏆</div>
        <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">9.8 Booking.com</div>
        <div class="text-[11px] text-[#A3978B]">Spitzenbewertung 2025</div>
      </div>

      <div class="space-y-1 border-l border-[#D4A373]/10">
        <div class="text-2xl">🛠️</div>
        <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">100% 2025er Sanierung</div>
        <div class="text-[11px] text-[#A3978B]">Denkmal trifft Moderne</div>
      </div>

      <div class="space-y-1 border-l border-[#D4A373]/10">
        <div class="text-2xl">🔑</div>
        <div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">24/7 Nuki Smart Access</div>
        <div class="text-[11px] text-[#A3978B]">Digitaler kontaktloser Check-in</div>
      </div>
    </div>
  </div>
</section>