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

interface BlogProps {
    setPage: (page: Page) => void;
    setSelectedPost: (post: BlogPost | null) => void;
}

const Blog: React.FC<BlogProps> = ({ setPage, setSelectedPost }) => {
  const posts = [
    {
      id: '1',
      title: 'Der Weg zurück zum Selbst: Die Riboneo-Methode bei ME/CFS',
      category: 'Heilung',
      date: '12. Mai 2026',
      readTime: '8 Min',
      image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuByrBTEQ68GG2U1w9wpM1paKgX7T7MGWcy-10i-1OZDOFfZi1Se0gJdS_abuYlQJjp4ejImEOzRPNlIXxIgTX1bO9GxVkESdT-cfzVHNnTVf2eQn7IfxrN76mDIdHXbu9DmWjPPNYo8-AuXsseMc8fmXm5OaVruAKHvhjRYPimKmwOTnWSZzetyL3DrnmH7bmk8WDi3pBsLD7dLR5mgKOKW9oR0NmEHcRrIRyTQTeK36KQvjUSIvjqr9yNFYQGPQhIm7r0jJ4wcqAc',
      excerpt: 'Warum herkömmliche Ansätze bei chronischer Erschöpfung oft versagen und wie die Integration von Geist und Körper den Wendepunkt für Ihre Genesung markieren kann.',
      highlight: true
    },
    {
        id: '2',
        title: 'Neuroplastizität und die Kraft der Gedanken',
        category: 'Bewusstsein',
        date: '10. Mai 2026',
        readTime: '5 Min',
        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuCPnHCW2idhCXh5b2ycwNnkutCSlOS8rPQLCfzF2vxNynjVjdR5tjWxdUTPsktdOHU1BzjbxlhH1RVz-g_Ay_MM-YxZD0OF3BntMhIPktTRbXN1QwijP9-gH6KaBblSS2xhg0ZILrycYqhRdZrgzjTH6f5fdl00TFBB0NSzjX0wnUPM4B7V02nGZpeOrcaS9gubDn4eljMnqNuiXPb8g42zfllXaY2T4vJjLGZzJY1icq1SnCYP1BSOCX-c7cysVtNANcxf5lG45Qc',
        excerpt: 'Wie wir durch gezielte Bewusstseinsarbeit die physische Struktur unseres Gehirns beeinflussen können.',
        highlight: false
    },
    {
        id: '3',
        title: 'Die Zelluläre Intelligenz verstehen',
        category: 'Ganzheitlichkeit',
        date: '08. Mai 2026',
        readTime: '12 Min',
        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAzd6VEnpTWl-J0lNzblN4G4e3K1IOR595k-q-mwkEGJ1ldHuvsellE8YSFl0BK1VIbWDSnX9T--n2yRmlw9AycDIM8Is4gUBPoWdx5b6Ke-l8MrGfxQH_nQiW_gGvHhb4OdE3TzMka3_9HnmuWSrL7OUXZb9W6QXHYzC3aB_te1CL36KAYouwDgklZ_ITmseq-ib47wpZ2FmEjHiu38cdOviQCXNrMihzyw2oI6guevoitrdhxAnu89L0cWdjn60MUi76sebwqeUo',
        excerpt: 'Ein tiefer Einblick in die biologischen Prozesse, die ablaufen, wenn unser Körper vom Überlebensmodus in den Regenerationsmodus wechselt.',
        highlight: false
    },
    {
        id: '4',
        title: 'Atem als Brücke zur Vitalität',
        category: 'Heilung',
        date: '05. Mai 2026',
        readTime: '6 Min',
        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBtodqKwkfgRm8yxdzspDZiZhNDEcemsecCM0O2j57w8KKJW2Tn1JLhgV2uj4Wy8a3E8xiFItoKEMSQ-MTnTKeTDEvBTnUzOv45odlhu_L8HPgdtLxwym9pzPvw-9xNjAYS66VuFlfWJnCQTPBDKC5MD5BlCa5hJD2js0HH7BANBXjr_EIkvrazJVQc-2D-lGXHqhARQ_gLhmthG8CDjKZJ-SANRJ7tJF8dHdauJCmipVC_en20pdvBKbvf5Td9gxHYPixVMfKI5Hw',
        excerpt: 'Einfache Atemtechniken aus dem Riboneo-Konzept, die sofortige Entlastung für das zentrale Nervensystem bringen.',
        highlight: false
    },
    {
        id: '5',
        title: 'Die Revolution beginnt im Stillen',
        category: 'Bewusstsein',
        date: '01. Mai 2026',
        readTime: '4 Min',
        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBHxdpXnZoeXH_k8wLVRbvhEyhFCW_ISbi7n2t4nczdf7j3lhG5hcsqBSjU1u5945vrvOlaEjx8gefWR3P7sXjF7OamCY0g89rtlU8sBzIHQmqj8ovWPqKKlitWt6lYNBndAxjU6npdpHV3r6nzV8rUuiuEtSyvNqxuldwtst1QB04x-8iYl_AHffF9vD0RqLJrncbB6Dq2u8hIh8MSho8CFimEDSTx1PfOsfgqgIBf7WbF-df5KhjSLRyeUH1ninESqnMLPxidz8Q',
        excerpt: 'Warum wir die Stille nicht fürchten sollten, sondern als den produktivsten Zustand für wahre Heilung anerkennen müssen.',
        highlight: false
    }
  ];

  const handlePostClick = (post: any) => {
    setSelectedPost(post);
    setPage(Page.BLOG_POST);
  }

  return (
    <div className="pt-24 min-h-screen">
      <main className="max-w-7xl mx-auto px-6 py-16">
        <header className="mb-12 text-center max-w-3xl mx-auto">
          <span className="text-primary font-semibold tracking-widest uppercase text-xs mb-4 block">Wissen & Heilung</span>
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-display font-bold text-slate-900 dark:text-white mb-6">Einblicke in die Revolution des Bewusstseins</h1>
          <p className="text-lg text-slate-600 dark:text-slate-400 font-light leading-relaxed">
            Entdecken Sie tiefgreifende Artikel über ganzheitliche Gesundheit, ME/CFS-Heilung und die transformative Kraft des menschlichen Bewusstseins.
          </p>
        </header>

        <div className="flex flex-wrap items-center justify-center gap-3 mb-16">
          <button className="px-6 py-2 shape-squircle bg-primary text-white text-sm font-medium transition-all">Alle Beiträge</button>
          <button className="px-6 py-2 shape-squircle bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-primary text-slate-600 dark:text-slate-300 text-sm font-medium transition-all">Heilung</button>
          <button className="px-6 py-2 shape-squircle bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-primary text-slate-600 dark:text-slate-300 text-sm font-medium transition-all">Bewusstsein</button>
          <button className="px-6 py-2 shape-squircle bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-primary text-slate-600 dark:text-slate-300 text-sm font-medium transition-all">ME/CFS</button>
          <button className="px-6 py-2 shape-squircle bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-primary text-slate-600 dark:text-slate-300 text-sm font-medium transition-all">Ganzheitliche Gesundheit</button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
          {posts.map((post) => (
            <article 
                key={post.id} 
                className={`group cursor-pointer ${post.highlight ? 'md:col-span-2' : ''}`}
                onClick={() => handlePostClick(post)}
            >
              <div className={`relative overflow-hidden shape-squircle ${post.highlight ? 'aspect-[16/9]' : 'aspect-[4/3]'} mb-6`}>
                <img alt={post.title} className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-105" src={post.image} />
                {post.highlight && (
                    <div className="absolute top-4 left-4">
                        <span className="bg-primary text-white text-[10px] font-bold uppercase tracking-wider px-3 py-1 shape-squircle">Highlight</span>
                    </div>
                )}
              </div>
              <div className="flex items-center gap-4 mb-3">
                <span className="text-primary font-bold text-xs uppercase tracking-tighter">{post.category}</span>
                <span className="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
                <span className="text-slate-500 text-xs font-medium">{post.date}</span>
                <span className="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
                <span className="text-slate-500 text-xs font-medium flex items-center gap-1">
                   <span className="material-icons-outlined text-xs">schedule</span> {post.readTime}
                </span>
              </div>
              <h2 className={`${post.highlight ? 'text-3xl' : 'text-xl'} font-display font-bold mb-4 group-hover:text-primary transition-colors leading-tight`}>{post.title}</h2>
              <p className="text-slate-600 dark:text-slate-400 line-clamp-2 leading-relaxed mb-4 text-sm">
                {post.excerpt}
              </p>
              {post.highlight && (
                <button className="inline-flex items-center text-sm font-bold text-primary group-hover:gap-2 transition-all">
                    Weiterlesen <span className="material-icons-outlined text-sm ml-1">arrow_forward</span>
                </button>
              )}
            </article>
          ))}
        </div>

        <section className="mt-24 border-t border-slate-200 dark:border-slate-800 pt-20 pb-10">
          <div className="bg-primary/5 dark:bg-primary/10 shape-squircle p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-10">
            <div className="max-w-md">
              <h2 className="text-2xl md:text-3xl font-display font-bold mb-3">Bleiben Sie informiert</h2>
              <p className="text-slate-600 dark:text-slate-400">Erhalten Sie monatliche Einblicke, neue Studienergebnisse und exklusive Tipps von Roberto de Marco direkt in Ihr Postfach.</p>
            </div>
            <div className="w-full max-w-sm">
              <form className="flex flex-col gap-3">
                <div className="flex p-1.5 bg-white dark:bg-slate-900 shape-squircle border border-slate-200 dark:border-slate-700 shadow-sm focus-within:border-primary transition-all">
                  <input type="email" required placeholder="E-Mail Adresse" className="flex-1 bg-transparent border-none focus:ring-0 px-4 text-sm text-slate-800 dark:text-slate-200" />
                  <button type="submit" className="bg-primary text-white px-6 py-2.5 shape-squircle text-sm font-semibold hover:bg-opacity-90 transition-colors">
                    Anmelden
                  </button>
                </div>
                <label className="flex items-start gap-2 px-4 cursor-pointer">
                  <input type="checkbox" required className="mt-1 rounded text-primary focus:ring-primary border-slate-300 dark:border-slate-700 dark:bg-slate-800" />
                  <span className="text-[10px] text-slate-500 leading-tight">Ich stimme der Datenschutzerklärung zu und möchte den Riboneo Newsletter abonnieren. Eine Abmeldung ist jederzeit möglich.</span>
                </label>
              </form>
            </div>
          </div>
        </section>

        <div className="flex items-center justify-center gap-4 mt-16">
          <button className="p-2 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 cursor-not-allowed">
            <span className="material-icons-outlined">chevron_left</span>
          </button>
          <span className="text-sm font-medium">Seite 1 von 12</span>
          <button className="p-2 rounded-full border border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-200 hover:border-primary hover:text-primary transition-all">
            <span className="material-icons-outlined">chevron_right</span>
          </button>
        </div>
      </main>
    </div>
  );
};

export default Blog;