import React from 'react';

const Retreat: React.FC = () => {
  return (
    <div className="pt-24">
      <section className="relative h-[80vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img alt="Kalabrien Villa" className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAfjP5xGejLEjOg4L7tSychYlliJjV73kRboD07AMUvf78tFJepwGMxdmIPEucXAXz7_6_ygrgnflVn9Wp3OrtC9_qc_7jd_8VVoNrDeCU2IAdjSWmDbNvaElyzoBoGRhqTJsBMutCZmF0W6Y-_f9jAvBhmdKB4EQu3WO_GKOoM7Y40Arguafm9JXER1e5xUrBcZQMcSSrCHsNYiRrrvdN3cQg6mV0XV6QwHPalhQ1bD7gEtgqqikuqO3TghB-p8NtMxafXHyJLF1Y" />
          <div className="absolute inset-0 bg-black/30 dark:bg-black/50"></div>
        </div>
        <div className="relative z-10 text-center text-white px-4 max-w-4xl">
          <h1 className="font-display text-5xl md:text-7xl mb-6 leading-tight drop-shadow-lg">2 Wochen Regeneration in Kalabrien</h1>
          <p className="text-xl md:text-2xl font-light mb-10 text-gray-100 italic drop-shadow-md">Die Revolution des Bewusstseins im Herzen Süditaliens erleben.</p>
          <a href="#warteliste" className="inline-block bg-primary hover:bg-opacity-90 text-white px-10 py-4 shape-squircle transition-all transform hover:scale-105 uppercase tracking-widest text-sm font-semibold shadow-xl">
            Jetzt Platz anfragen
          </a>
        </div>
        <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce">
          <span className="material-icons-outlined text-white text-4xl">expand_more</span>
        </div>
      </section>

      <section className="py-24 px-6 max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="relative">
            <img alt="Gartenszene Kalabrien" className="shape-squircle shadow-2xl relative z-10 w-full h-[600px] object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBpjYP_Vnoll9q_YSvXbgYnI4H8rUjDALk9qatOk7qM0ZtCswyXwfWn6JOsDevVf2XQ4oo6l0LAkXW7ixpZWftl6mAeqFPB6Yrm7D-osJmi16dGhQ465NTqLC6ZqP8BrRKVHohXkSsSQeZSfI-C1Ua1kUiJa1MCCMb8drX8g6nrrwlbwuwl6dvq9Ch8LzwboqhWpyYHpSl3JcWFWJhUKqHp1zOiiRf0bZJluzazpWh6_3xVF13tHalm3pdCWVZC73o5jGTmt43POVA" />
            <div className="absolute -top-6 -left-6 w-full h-full border-2 border-primary/20 shape-squircle -z-0"></div>
          </div>
          <div>
            <span className="text-primary font-bold uppercase tracking-widest text-sm mb-4 block">Holistisches Health Konzept</span>
            <h2 className="font-display text-4xl md:text-5xl mb-8 dark:text-white">Praktische Anwendung der 4 Säulen</h2>
            <div className="space-y-6 text-lg text-gray-600 dark:text-gray-300">
              <p>In der idyllischen Abgeschiedenheit Kalabriens finden wir den Raum, um die Theorie der <i>Revolution des Bewusstseins</i> in gelebte Realität zu transformieren.</p>
              <p>Dieses Retreat ist nicht einfach ein Urlaub. Es ist eine tiefgreifende Re-Kalibrierung Ihres Nervensystems, Ihres Körpers und Ihres Geistes, basierend auf dem Riboneo-Konzept von Roberto de Marco.</p>
              <ul className="space-y-4 mt-8">
                <li className="flex items-start gap-4">
                  <span className="material-icons-outlined text-accent1">energy_savings_leaf</span>
                  <span><strong>Ernährung:</strong> Regionale, bio-dynamische Kost direkt aus dem Garten der Villa.</span>
                </li>
                <li className="flex items-start gap-4">
                  <span className="material-icons-outlined text-accent1">self_improvement</span>
                  <span><strong>Bewusstsein:</strong> Tägliche Meditation und Mentoring-Sessions am Meer.</span>
                </li>
                <li className="flex items-start gap-4">
                  <span className="material-icons-outlined text-accent1">fitness_center</span>
                  <span><strong>Bewegung:</strong> Funktionelle Regeneration in der Natur.</span>
                </li>
                <li className="flex items-start gap-4">
                  <span className="material-icons-outlined text-accent1">nights_stay</span>
                  <span><strong>Erholung:</strong> Optimierter Biorhythmus in mediterraner Stille.</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="py-24 bg-secondary/30 dark:bg-zinc-900 transition-colors">
        <div className="max-w-7xl mx-auto px-6">
          <div className="relative">
            <div className="grid grid-cols-12 gap-0 md:gap-4 items-center">
              <div className="col-span-12 md:col-span-8 overflow-hidden shape-squircle shadow-xl">
                <img alt="Sauna und Spa" className="w-full h-[500px] object-cover hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC7RRkwIZ2G72C5korM2gPnwZaF8-ABfeaPxzutNu9d78k-dpXOJFSkLD-6eLRpuyXLgVhvOIJvigzeu1g-d_vp_9Tn6Z1l0EAj0Wspspobn-95bIfEs2mgfcwHvY82tJQ1leQJWcnGMYCCkHq7Lx8lc8mpUh7vqc9ODf3pCma9bllMuqMNed99MaBFk96N54temdPO-2bPVHj9Sk7bOkyl52gDxQF5RWXVyLVmarShHcd1vAlduPxJdw0mwsrFhCe_p2Lrlgyws-s" />
              </div>
              <div className="col-span-12 md:col-span-5 md:absolute md:right-0 bg-white dark:bg-background-dark p-8 md:p-12 shadow-2xl shape-squircle mt-[-50px] md:mt-0 z-20">
                <h3 className="font-display text-3xl mb-6 dark:text-white">Ein Ort der Stille</h3>
                <p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
                  Unsere exklusive Stein-Villa thront über dem azurblauen Meer Kalabriens. Umgeben von Olivenhainen und blühenden Gärten bietet sie den perfekten Rahmen für Ihre persönliche Transformation.
                </p>
                <p className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed italic">
                  "Nur wer die Stille im Außen findet, kann den Lärm im Inneren bändigen." — Roberto de Marco
                </p>
                <div className="flex gap-4">
                  <div className="flex flex-col items-center p-3 border border-gray-100 dark:border-gray-800 rounded">
                    <span className="text-2xl font-display text-primary">12</span>
                    <span className="text-[10px] uppercase tracking-tighter opacity-70">Plätze</span>
                  </div>
                  <div className="flex flex-col items-center p-3 border border-gray-100 dark:border-gray-800 rounded">
                    <span className="text-2xl font-display text-primary">14</span>
                    <span className="text-[10px] uppercase tracking-tighter opacity-70">Tage</span>
                  </div>
                  <div className="flex flex-col items-center p-3 border border-gray-100 dark:border-gray-800 rounded">
                    <span className="text-2xl font-display text-primary">1</span>
                    <span className="text-[10px] uppercase tracking-tighter opacity-70">Ziel</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-32 px-6 flex justify-center" id="warteliste">
        <div className="max-w-2xl w-full text-center">
          <div className="mb-12">
            <img alt="Riboneo Symbol" className="h-20 mx-auto mb-8 opacity-40 dark:invert" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-MM7-3n8RaA1Iu1Nz7I9ABAglIoZOhP8ctlKDh62t1C2QE0-kItxVYdU0xsyA5TZ0WJsL4sX247P8tLLszWlBhFtT5AensaqnrZtS78k77A3G0_s2mFz1QAnkzc6BT5B6LBytOE7R7H_Vvd5zCDuouTTHXcDVbWxJURwoHSA2YjSbclkByg3ruEh0nMb7tUdh6cnj7Abbi4zOpRJpwZo9k9SaJSdLoP02PjfqQHw_AxS3TbtUdB2UW-9yClAuCT0SkgYiMCJLj_Q" />
            <h2 className="font-display text-4xl mb-4 dark:text-white">Interesse wecken?</h2>
            <p className="text-gray-600 dark:text-gray-400">Tragen Sie sich in die exklusive Warteliste ein. Die Plätze für das kommende Jahr sind streng limitiert und werden nach dem First-Come-Prinzip vergeben.</p>
          </div>
          <form className="space-y-6">
            <div className="relative group">
              <input type="email" placeholder="Ihre E-Mail Adresse" className="w-full bg-transparent border-b-2 border-gray-300 dark:border-gray-700 focus:border-primary py-4 px-2 outline-none transition-all duration-300 text-lg" />
              <div className="absolute bottom-0 left-0 w-0 h-[2px] bg-primary group-hover:w-full transition-all duration-500"></div>
            </div>
            <div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400 text-left px-2">
              <input type="checkbox" id="privacy" className="rounded border-gray-300 text-primary focus:ring-primary" />
              <label htmlFor="privacy">Ich stimme zu, Informationen zum Retreat und den Riboneo-Inhalten zu erhalten.</label>
            </div>
            <button type="submit" className="w-full bg-primary hover:bg-opacity-90 text-white font-semibold py-5 shape-squircle uppercase tracking-[0.2em] text-sm transition-all shadow-lg hover:shadow-xl">
              In Warteliste eintragen
            </button>
          </form>
          <p className="mt-8 text-xs text-gray-400 dark:text-zinc-600 italic">Keine Sorge, wir schätzen Ihre Privatsphäre so sehr wie die kalabrische Ruhe. Kein Spam.</p>
        </div>
      </section>
    </div>
  );
};

export default Retreat;