import React from 'react';
import { Page, BlogPost as BlogPostType } from '../types';

interface BlogPostProps {
    setPage: (page: Page) => void;
    post: BlogPostType | null;
}

const BlogPost: React.FC<BlogPostProps> = ({ setPage, post }) => {
  // If no post is selected, we might want to redirect or show a placeholder.
  // For the purpose of the visual demo, I will hardcode the content from the "Single Blog Post" screenshot 
  // to ensure it looks exactly like the requested design, regardless of which card was clicked.

  return (
    <div className="pt-24 min-h-screen">
      <div className="fixed top-24 left-0 w-full z-40">
        <div className="h-1 w-full bg-slate-200 dark:bg-slate-800">
            <div className="h-full bg-primary w-[45%]"></div>
        </div>
      </div>

      <header className="relative pt-24 pb-16 md:pt-32 md:pb-24 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img alt="Background" className="w-full h-full object-cover opacity-30 dark:opacity-20 grayscale-[0.2]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDBVkT6X5mLCebkeNRSOzxQnESE-y380hA8ZyB0KshNhGrLNxR7n-GuAvTRMKKI_y_z-N1X1ggdtIJCxPNjRJKnt9AOfzAILVZYt5KNMu1n_FxqMz4RkW2050lFgE-nZ21Y7-IzMJEViB2traoPEERMnyE9K4HJ49wADXwXJVbUd_fMSyludA28aExixj-pUCdZ82OOqN3MHQ5dE2KguQzva2pqSrGmJkv3BcMBIT-WadNz15JBmLUO084NuXdI1qqQmXCvYy861LI" />
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background-light to-background-light dark:via-background-dark dark:to-background-dark"></div>
        </div>
        <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
            <span className="inline-block bg-primary/20 text-slate-800 dark:text-primary px-4 py-1 rounded-lg text-sm font-semibold tracking-wider mb-6">
                HEILUNG
            </span>
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-display font-bold text-slate-900 dark:text-white leading-tight mb-8">
                Wie Bewusstsein die Zellregeneration beeinflusst
            </h1>
            <div className="flex items-center justify-center space-x-6 text-slate-500 dark:text-slate-400 font-medium italic">
                <span>12. Mai 2026</span>
                <span className="w-1.5 h-1.5 rounded-full bg-primary/40"></span>
                <span>6 Min. Lesezeit</span>
            </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-12 gap-12">
        <aside className="hidden lg:block lg:col-span-2 pt-4">
            <div className="sticky top-40 space-y-8">
                <div className="flex flex-col space-y-4">
                    <span className="text-xs uppercase tracking-widest text-slate-400 font-bold">Teilen</span>
                    <button className="w-10 h-10 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                        <span className="material-symbols-outlined text-sm">share</span>
                    </button>
                    <button className="w-10 h-10 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                        <span className="material-symbols-outlined text-sm">bookmark</span>
                    </button>
                </div>
                <button onClick={() => setPage(Page.BLOG)} className="flex items-center gap-2 text-sm text-slate-500 hover:text-primary transition-colors">
                    <span className="material-symbols-outlined">arrow_back</span> Zurück
                </button>
            </div>
        </aside>

        <article className="lg:col-span-8">
            <p className="text-2xl text-slate-600 dark:text-slate-300 font-light italic leading-relaxed mb-12 font-display">
                In der modernen Medizin betrachten wir den Körper oft als eine komplexe Maschine. Doch was passiert, wenn wir die Perspektive wechseln und die Zelle als Resonanzkörper unseres Bewusstseins begreifen? Die Revolution des Bewusstseins beginnt auf molekularer Ebene.
            </p>
            <h2 className="text-3xl font-bold mt-16 mb-8 text-slate-900 dark:text-white font-display">Die Epigenetik des Geistes</h2>
            <p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300 mb-8">
                Lange Zeit galt das Dogma, dass unsere Gene unser Schicksal bestimmen. Wir glaubten, die Blaupause unseres Körpers sei in Stein gemeißelt. Heute wissen wir: Die Epigenetik lehrt uns das Gegenteil. Unsere Gedanken, Emotionen und vor allem unser Bewusstseinszustand fungieren wie Schalter, die bestimmte Gensequenzen aktivieren oder deaktivieren können.
            </p>
            <p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300 mb-8">
                Wenn wir uns in einem Zustand tiefer Kohärenz befinden – ein Kernaspekt des <strong>Riboneo-Konzepts</strong> – senden wir Signale der Sicherheit an unser Nervensystem. Diese Signale sind die Grundvoraussetzung für Zellregeneration. Stress hingegen signalisiert Gefahr und stoppt alle Reparaturvorgänge zugunsten der Fluchtreaktion.
            </p>

            <div className="my-16 relative py-12 px-8 md:px-16 bg-primary/10 rounded-xl overflow-hidden">
                <div className="absolute top-0 left-0 w-1.5 h-full bg-primary"></div>
                <blockquote className="text-3xl md:text-4xl italic font-medium text-slate-800 dark:text-slate-100 leading-snug font-display">
                    "Heilen ist kein Ziel, sondern ein Zustand des Seins, der sich durch die Ausrichtung des Bewusstseins entfaltet."
                </blockquote>
                <cite className="block mt-6 text-primary font-bold tracking-widest uppercase text-sm">— Roberto de Marco</cite>
            </div>

            <h3 className="text-2xl font-bold mt-12 mb-6 text-slate-900 dark:text-white font-display">Riboneo: Der holistische Ansatz</h3>
            <p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300 mb-8">
                Das Riboneo-Konzept basiert auf der Erkenntnis, dass wahre Vitalität nur entstehen kann, wenn wir die Ebenen von Körper, Geist und Seele nicht mehr getrennt voneinander betrachten. Durch gezielte Bewusstseinsschulung und energetische Arbeit schaffen wir ein Milieu, in dem Regeneration nicht mehr erzwungen werden muss, sondern ganz natürlich geschieht.
            </p>

            <div className="my-12 rounded-2xl overflow-hidden shadow-2xl">
                <img alt="Meditation" className="w-full h-auto aspect-video object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAoQPjsZsDaCra1xPAiSk_GkkCv9Omg0Rj9xoQi6sL2NZPdmaFRPfLSj79eVGIoi_7XdoWGb4vzo1FTPsB8STKHOXnpYzKoLpoymXW9dcdQv_hlbaqHZ19Oj_EguVN8LM5tZh464gptq9bzZp_iHd8Wl5HOyVHZcAZlOPDUCG13hfrxhI01IojuwFv4k_PPrbfd123SZdb9agdd2ZWNE7mT_Q_V_i_RDFoKleIER1r8ghtP_bV8LoV_dIhK5ZrYtuNkdW7mK24Gwkw" />
            </div>

            <p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300 mb-8">
                Es geht darum, die Frequenz der Heilung zu halten. In meinen Mentorings und in meinem Buch <em>"Die Revolution des Bewusstseins"</em> beschreibe ich die praktischen Schritte, wie man diese Frequenz im Alltag etabliert. Es ist ein Prozess des Entlernens – das Loslassen alter Konditionierungen, die unseren Körper in einem Zustand chronischer Anspannung halten.
            </p>

            <footer className="mt-20 pt-10 border-t border-slate-200 dark:border-slate-800">
                <div className="flex flex-wrap items-center justify-between gap-6 mb-12">
                    <div className="flex space-x-2">
                        <span className="bg-slate-200 dark:bg-slate-800 px-3 py-1 rounded text-xs font-medium">Bewusstsein</span>
                        <span className="bg-slate-200 dark:bg-slate-800 px-3 py-1 rounded text-xs font-medium">Riboneo</span>
                        <span className="bg-slate-200 dark:bg-slate-800 px-3 py-1 rounded text-xs font-medium">Regeneration</span>
                    </div>
                </div>
                
                <div className="bg-slate-100 dark:bg-slate-900/50 p-8 rounded-2xl flex flex-col md:flex-row items-center gap-8">
                    <img alt="Roberto de Marco" className="w-24 h-24 rounded-full object-cover" src="./roberto.jpg" />
                    <div className="text-center md:text-left">
                        <h4 className="text-xl font-bold text-slate-900 dark:text-white mb-2 font-display">Roberto de Marco</h4>
                        <p className="text-slate-600 dark:text-slate-400 text-base leading-relaxed">
                            Autor, Mentor und Visionär im Bereich holistische Gesundheit. Entwickler des Riboneo-Konzepts und Wegbegleiter für Menschen in tiefgreifenden Transformationsprozessen.
                        </p>
                    </div>
                </div>
            </footer>
        </article>

        <aside className="hidden lg:block lg:col-span-2">
           {/* Right spacer */}
        </aside>
      </main>

      <section className="bg-white dark:bg-slate-900 py-24 border-y border-slate-100 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-6">
            <h2 className="text-3xl font-bold mb-12 text-slate-900 dark:text-white font-display">Ähnliche Artikel</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <a href="#" className="group">
                    <div className="aspect-video overflow-hidden rounded-xl mb-6">
                        <img alt="Related 1" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqsB4AmuyrWJt8vUCK7HL6qwuyeWHyD27NspksT9vRdxj10TGjyMliZASUCH9XXQQm9pyb9JG9KnUj2QuEQx5RUUxhUTKm9FOF9vjNjAWW8LFHf4bOuu73cyJskT3Ji-c8d801GQ2Pz7fYRLfVzsJBvhxBWMA5AScusz2lZaqE5We6oIZTdJWXRxpdrHO42PnBuwe8z3x-8ZYNN9JUU1hI-3aO8B0x6CJDHENmIXs_DAjvxBI5CVVYGWsIAEMW4Icr_5kah8gdJT4" />
                    </div>
                    <span className="text-xs font-bold text-primary uppercase tracking-widest mb-2 block">Mindset</span>
                    <h3 className="text-xl font-bold text-slate-900 dark:text-white group-hover:text-primary transition-colors font-display">Die Kraft der Stille im digitalen Zeitalter</h3>
                </a>
                <a href="#" className="group">
                    <div className="aspect-video overflow-hidden rounded-xl mb-6">
                        <img alt="Related 2" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCbB2UnXPjNEdQNSL2oPkiMe2xDjwJQ4zCe2hJllRYV6QZUOxfdvGBf_JQmv2ursziQI0SCknKvtEJPAaLbPNkmxYSiq1-UnyspJB2nzF5RwIF4bTYBMqannS3eZdQkNSHBdrxCN0z_2woti4aJy_r9qeHHWhkdtYHKVYWEWUD8ANNB_Emt_ZR2hdMFf08eeNJ0YG1eUKG-xtGto5m3_kA_MvZLNgfUtrEyMuPfcyU9IVqvICEGDlyACfbMwy-e1aTEI0JBqlG58q8" />
                    </div>
                    <span className="text-xs font-bold text-primary uppercase tracking-widest mb-2 block">Riboneo</span>
                    <h3 className="text-xl font-bold text-slate-900 dark:text-white group-hover:text-primary transition-colors font-display">Zellnahrung: Jenseits der Kalorien</h3>
                </a>
                <a href="#" className="group">
                    <div className="aspect-video overflow-hidden rounded-xl mb-6">
                        <img alt="Related 3" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_7pi9-0KDBhabrtFNbc7sFsJCHFXBfUtCsGZvdaUJRgLwTZanR5GH04ut3-eX5BZnJ1Y4Z5G68-uhCJcsuUMVpfEP4QV37KOX5ZtY01Zlyo_agEy6royvLbcCx8i3rV3KxDtMapVFbSSgrw0w2I1tt5F8M04OgWT-5eXcxW0fa3g07pSw87prQfRh3GSOlZ9TdHr-qRd03rWLHLoBCVXks18yAIux78lqofdTblZTJrTiALP94QWR3zjZmp4mJc_1T_d_U4Dp9QE" />
                    </div>
                    <span className="text-xs font-bold text-primary uppercase tracking-widest mb-2 block">Heilung</span>
                    <h3 className="text-xl font-bold text-slate-900 dark:text-white group-hover:text-primary transition-colors font-display">Energiearbeit als Fundament der Vitalität</h3>
                </a>
            </div>
        </div>
      </section>

      <section className="py-24 bg-background-light dark:bg-background-dark">
        <div className="max-w-4xl mx-auto px-6 text-center">
            <h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4 font-display">Deep Dive News</h2>
            <p className="text-lg text-slate-600 dark:text-slate-400 mb-10 max-w-xl mx-auto">
                Erhalte wöchentliche Impulse zur Revolution deines Bewusstseins und exklusive Einblicke in das Riboneo-System.
            </p>
            <form className="flex flex-col md:flex-row gap-4 max-w-lg mx-auto">
                <input type="email" placeholder="Deine E-Mail Adresse" className="flex-1 bg-white dark:bg-slate-800 border-transparent focus:border-primary focus:ring-primary rounded-full px-6 py-4 text-slate-900 dark:text-white shadow-sm" />
                <button type="submit" className="bg-primary text-white font-bold px-8 py-4 rounded-full hover:shadow-xl hover:shadow-primary/30 transition-all">
                    Abonnieren
                </button>
            </form>
            <p className="mt-4 text-xs text-slate-400">Kein Spam. Abmeldung jederzeit möglich.</p>
        </div>
      </section>
    </div>
  );
};

export default BlogPost;