import React from 'react';

const Book: React.FC = () => {
  return (
    <div className="pt-24">
      <section className="relative pb-24 overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="order-2 lg:order-1 space-y-8">
            <div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold tracking-widest uppercase">
                Neuerscheinung
            </div>
            <h1 className="text-5xl lg:text-7xl leading-tight font-display font-bold text-slate-900 dark:text-white">
                Die Revolution des <span className="italic text-primary">Bewusstseins</span>
            </h1>
            <p className="text-lg lg:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-xl">
                Entdecken Sie den Weg von der reinen Symptombekämpfung hin zu einer tiefgreifenden, ganzheitlichen Heilung. Roberto de Marco teilt seine bahnbrechenden Erkenntnisse über die Verbindung von Körper, Geist und Natur.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 pt-4">
                <button className="inline-flex items-center justify-center px-8 py-4 bg-primary text-white shape-squircle font-bold drop-shadow-lg shadow-primary/20 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                    <span className="material-icons-outlined mr-2">shopping_cart</span>
                    Jetzt bei Amazon bestellen
                </button>
                <button className="inline-flex items-center justify-center px-8 py-4 border-2 border-primary/20 dark:border-primary/40 text-primary dark:text-primary hover:bg-primary/5 shape-squircle font-bold transition-all duration-300">
                    Kostenlose Leseprobe
                </button>
            </div>
            <div className="flex items-center gap-4 text-sm text-slate-500">
                <span className="flex -space-x-2">
                    <span className="w-8 h-8 rounded-full bg-slate-300 border-2 border-white dark:border-background-dark"></span>
                    <span className="w-8 h-8 rounded-full bg-slate-400 border-2 border-white dark:border-background-dark"></span>
                    <span className="w-8 h-8 rounded-full bg-slate-500 border-2 border-white dark:border-background-dark"></span>
                </span>
                <span>Über 5.000+ Leser weltweit</span>
            </div>
          </div>
          <div className="order-1 lg:order-2 flex justify-center relative">
            <div className="absolute inset-0 bg-primary/5 rounded-full blur-3xl scale-125 -z-10"></div>
            <div className="relative group">
                <div className="w-64 h-96 lg:w-80 lg:h-[480px] bg-secondary shadow-2xl rounded-r-lg border-l-8 border-primary/20 transform rotate-[-5deg] transition-transform duration-500 group-hover:rotate-0 overflow-hidden flex flex-col items-center justify-center p-8 text-center relative">
                    <img alt="Angel Symbol" className="w-32 mb-8 opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCN-uaVZvfhOs3AG6HYbv7YZxhCM4WSIdv2Ma-arX3DwYMIkHJmbxSY_WyJ6Y1FAtskBztGj6N1TTwLEGAp2ydIjAsA2RTmrWDBUY2mYMWpkLYAXkamft-wy4unRzp9feQm82UXnBBuDLAy5X8N8R0-fouCnyBoPXJdYMs78KX-Xp-lNrfdNJm98i-DEmwaBzFVG-HxKCgtqVFKEh7DhtOi-XsZZof_yYGllNVL0gNQhjT5C60uydnaiHOpGn6BD0B_wxPkmvAGpmE" />
                    <div className="space-y-4">
                        <h2 className="text-primary font-display text-2xl font-bold uppercase tracking-widest">Die Revolution</h2>
                        <p className="text-xs uppercase tracking-[0.3em] font-sans opacity-60 text-slate-800">des Bewusstseins</p>
                        <div className="w-12 h-0.5 bg-primary mx-auto"></div>
                        <p className="text-sm font-display italic text-slate-800">Roberto de Marco</p>
                    </div>
                </div>
                <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 w-4/5 h-8 bg-black/10 blur-xl rounded-full"></div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-24 bg-white dark:bg-slate-900/50">
        <div className="max-w-7xl mx-auto px-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-32">
                <div className="space-y-12">
                    <div>
                        <h2 className="text-3xl font-display font-bold mb-6 flex items-center gap-3 text-primary">
                            <span className="text-5xl opacity-20">01.</span>
                            Teil 1: Der Crash
                        </h2>
                        <div className="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-400">
                            <p>Jede Veränderung beginnt oft an einem Tiefpunkt. In diesem ersten Teil beleuchtet Roberto de Marco die psychologischen und physischen Mechanismen des Zusammenbruchs. Es geht nicht nur um Erschöpfung, sondern um das notwendige Ende alter Strukturen, um Platz für Wahres zu schaffen.</p>
                            <ul className="list-none space-y-4 pl-0 mt-4">
                                <li className="flex items-start gap-3">
                                    <span className="material-icons-outlined text-primary mt-1">check_circle</span>
                                    <span>Die Illusion der Kontrolle verstehen</span>
                                </li>
                                <li className="flex items-start gap-3">
                                    <span className="material-icons-outlined text-primary mt-1">check_circle</span>
                                    <span>Warum Symptome eigentlich Wegweiser sind</span>
                                </li>
                                <li className="flex items-start gap-3">
                                    <span className="material-icons-outlined text-primary mt-1">check_circle</span>
                                    <span>Den Mut zur radikalen Ehrlichkeit finden</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="space-y-12">
                    <div>
                        <h2 className="text-3xl font-display font-bold mb-6 flex items-center gap-3 text-accent1">
                            <span className="text-5xl opacity-20">02.</span>
                            Teil 2: Neues Bewusstsein
                        </h2>
                        <div className="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-400">
                            <p>Der Aufstieg in eine neue Form der Wahrnehmung. Nachdem die alten Hüllen gefallen sind, offenbart sich ein ganzheitlicher Blick auf die Gesundheit. Hier erfahren Sie die Grundlagen des Riboneo-Konzepts und wie Sie Ihre innere Heilkraft aktivieren.</p>
                            <ul className="list-none space-y-4 pl-0 mt-4">
                                <li className="flex items-start gap-3">
                                    <span className="material-icons-outlined text-accent1 mt-1">auto_awesome</span>
                                    <span>Integration von Natur und moderner Mentallogik</span>
                                </li>
                                <li className="flex items-start gap-3">
                                    <span className="material-icons-outlined text-accent1 mt-1">auto_awesome</span>
                                    <span>Die Entfaltung des wahren Selbst</span>
                                </li>
                                <li className="flex items-start gap-3">
                                    <span className="material-icons-outlined text-accent1 mt-1">auto_awesome</span>
                                    <span>Ganzheitliche Routinen für den Alltag</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </section>

      <section className="relative h-[600px] flex items-center justify-center overflow-hidden">
        <img alt="Tranquil Nature Background" className="absolute inset-0 w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDausYLRGza6WUBiuUNsu282KeuuS3oV3uqE5QWqO3IvaUSCRh5LHPLKe2o4q2zhw4DeGjQLP9_QbZ8fIm9lHF0cwwbRm_LXQfR9AzHdEliwqLSXK9obSauSESTMObq7yNyTEBpjMQhEACogPsoPfnOy47vRlXWHvUkiWdUsFThzu_pF_LGvYnkkKqGeVVBOA4mZ9Akj2rY4v8wWfzh9wttI6PytrYBCDLO_79gONLmesI0D1GSipSGvd55Tcc-DoDgw8lX0lEK69I" />
        <div className="absolute inset-0 bg-black/40"></div>
        <div className="relative z-10 max-w-4xl mx-auto px-6 text-center text-white">
            <span className="material-icons-outlined text-6xl mb-8 opacity-50">format_quote</span>
            <blockquote className="text-4xl md:text-6xl font-display leading-tight italic">
                „Kurieren beendet Symptome, <br className="hidden md:block" />Heilen stiftet <span className="text-accent2">Ganzheit</span>.“
            </blockquote>
            <div className="mt-12 w-24 h-1 bg-white/30 mx-auto"></div>
            <p className="mt-8 text-xl tracking-[0.2em] font-sans opacity-80">ROBERTO DE MARCO</p>
        </div>
      </section>

      <section className="py-24 bg-secondary/30 dark:bg-slate-900" id="leseprobe">
        <div className="max-w-4xl mx-auto px-6">
            <div className="text-center mb-16">
                <h2 className="text-4xl font-display font-bold mb-4">Ein Blick ins Innere</h2>
                <p className="text-slate-600 dark:text-slate-400">Lesen Sie ein Fragment aus dem Vorwort</p>
            </div>
            <div className="bg-white dark:bg-slate-800 p-12 md:p-20 shadow-2xl shape-squircle relative">
                <div className="absolute top-0 right-0 p-8">
                    <img alt="Logo" className="w-12 opacity-5 dark:invert" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmNJWO7UYMW5F0Cm0VwO-ci5cnQSKqeJBomEvPDegTKjfkRZY_yZx-SI1JD4OT1r5zsVUXKHW4HxKtJK5ZpaKrAnar0iZnVTWAyhdtHFXRU5zkZvSjQwzT_jmPIw8iBK0bm1CFtetF5FZPm5MX2XHofKbrhpvHhs-mfinFSs9GsUyFcNfKR9184hGSzo_z_rFrcrz6kXnE4hXiYKnnuxfAbwdEch4WdewAH9WVNU_4KMqDVUoU7lZT0fXQ7L42IvEomNm32vYaXE4" />
                </div>
                <div className="prose prose-lg dark:prose-invert max-w-none font-serif leading-relaxed italic text-slate-700 dark:text-slate-300">
                    <p className="first-letter:text-6xl first-letter:font-bold first-letter:text-primary first-letter:mr-3 first-letter:float-left">
                        Wir leben in einer Welt der Fragmente. Wir haben gelernt, unseren Körper als Maschine zu betrachten, unsere Psyche als Datensatz und unsere Seele als Relikt vergangener Zeiten. Doch die wahre Revolution findet nicht im Außen statt. Sie ist das Erwachen zu einer vergessenen Einheit...
                    </p>
                    <p>
                        Stellen Sie sich vor, Ihre Krankheit wäre kein Feind, den es zu besiegen gilt, sondern ein Bote, der eine Nachricht von unschätzbarem Wert überbringt. Was wäre, wenn der 'Crash', den Sie vielleicht gerade erleben, der Durchbruch in Ihre wahre Freiheit ist?
                    </p>
                </div>
                <div className="mt-12 pt-12 border-t border-slate-100 dark:border-slate-700 flex justify-center">
                    <button className="text-primary font-bold hover:underline flex items-center gap-2">
                        Komplette Leseprobe als PDF herunterladen
                        <span className="material-icons-outlined">download</span>
                    </button>
                </div>
            </div>
        </div>
      </section>

      <section className="py-24">
        <div className="max-w-5xl mx-auto px-6">
            <div className="bg-primary shape-squircle p-12 lg:p-20 text-white flex flex-col lg:flex-row items-center gap-12 relative overflow-hidden">
                <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl"></div>
                <div className="flex-1 space-y-6 relative z-10">
                    <h2 className="text-4xl font-display font-bold">Bereit für Ihre Revolution?</h2>
                    <p className="text-xl text-white/80 leading-relaxed">
                        Beginnen Sie heute Ihre Reise zu echter Gesundheit und tieferem Bewusstsein.
                    </p>
                    <div className="flex flex-wrap gap-4 pt-4">
                        <button className="bg-white text-primary px-8 py-4 shape-squircle font-bold hover:bg-secondary transition-colors">
                            Auf Amazon bestellen
                        </button>
                        <div className="flex items-center gap-2 text-white/60 text-sm">
                            <span className="material-icons-outlined">local_shipping</span>
                            Kostenlose Lieferung für Prime Mitglieder
                        </div>
                    </div>
                </div>
                <div className="w-48 lg:w-64 rotate-12 shadow-2xl relative z-10 hidden md:block">
                    <div className="w-full aspect-[2/3] bg-secondary rounded-r-md border-l-4 border-black/10 flex flex-col items-center justify-center p-4">
                        <img alt="Icon" className="w-16 mb-4 opacity-50 grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC6pboh2ZeRgQdXLznu0Kwe0YP7kdQLarQt2cN605dcVansBxJDumATwH1kp97ZyyREPc22tWuNFB4-0TUpEyrgALUoRUPM_2NJr5ZqylfExAFpT4yj0fQZMiNAIdlplaXXM1n33RAXpb8QaPv6IA9ZgzCDIF7iDH-mHYiLtCNKbUORWkMYYArlK6v9anhfRvV2jamhvqkvI7k-iYh_vfhacbwL2XEgKIg7a8DluQ7-NNMvJLeb9Kxa3Sxhh2uPn9KoEJw0EYslSRk" />
                        <p className="text-[10px] uppercase font-bold text-primary">RIBONEO</p>
                    </div>
                </div>
            </div>
        </div>
      </section>
    </div>
  );
};

export default Book;