import React, { useEffect, useState } from 'react';
import TestimonialCarousel from '../components/TestimonialCarousel';
import { Page } from '../types';

interface HomeProps {
    setPage: (page: Page) => void;
}

const Home: React.FC<HomeProps> = ({ setPage }) => {
    const [scrollConfig, setScrollConfig] = useState({ scale: 1, borderRadius: 0, opacity: 1 });

    useEffect(() => {
        const handleScroll = () => {
            const scrollY = window.scrollY;
            const maxScroll = 600; // Increase scroll distance for smoother animation
            const progress = Math.min(scrollY / maxScroll, 1);

            // Scale from 1.0 down to 0.7
            const newScale = 1 - (progress * 0.3);
            // Radius from 0 to 60px
            const newRadius = progress * 60;

            setScrollConfig({
                scale: newScale,
                borderRadius: newRadius,
                opacity: 1
            });
        };

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        <>
            {/* Fixed Hero Container that animates */}
            <div className="fixed top-0 left-0 w-full h-screen z-0 flex items-center justify-center pointer-events-none md:pointer-events-auto">
                <div
                    className="relative w-full h-full overflow-hidden transition-all duration-100 ease-out origin-top shadow-2xl"
                    style={{
                        transform: `scale(${scrollConfig.scale})`,
                        borderRadius: `${scrollConfig.borderRadius}px`,
                        // Applying the special corner shape via class if supported, or fallback to border-radius
                    }}
                >
                    {/* Apply shape-squircle class here so the CSS corner-shape applies to the wrapper */}
                    <div className={`w-full h-full relative ${scrollConfig.borderRadius > 0 ? 'shape-squircle' : ''}`} style={{ borderRadius: `${scrollConfig.borderRadius}px` }}>
                        <img
                            alt="Serene Misty Forest in Calabria"
                            className="absolute inset-0 w-full h-full object-cover"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuDulIizRZOpnJbqQ1JQYqdKsw4OqCv10oWMS15RVojlu2eUUdu2nPcnnwTx2C5EwumsDhntUTwHKhr7gvIilVAj2ecRIkSdM-3u3Ff4H9DckAoYkQ4-sq3jhz_qMO0SOdUhCnoGHtylxScjSyCqfSvmLtX_qILUVeNAyvvTJyiFzFT2GwX2tvrFpxdxTRr6PaUqjT0IO6CfR7Ff2i1uiSjPbEBg7BgfbKtEdxG-sZd4_lJaoifCIvsDYYmacc745sSnhwYmazxnzD8"
                        />
                        <div className="absolute inset-0 hero-gradient"></div>

                        <div className="relative z-10 h-full flex flex-col items-center justify-center px-6 text-center text-white pb-20">
                            <h1 className="font-display text-5xl md:text-7xl lg:text-8xl mb-8 leading-tight drop-shadow-2xl">
                                Die Revolution des Bewusstseins
                            </h1>
                            <p className="text-xl md:text-2xl mb-12 font-light tracking-wide text-slate-100 max-w-2xl mx-auto drop-shadow-lg">
                                Heilen statt nur Kurieren. Dein Weg zurück zur inneren Kraft.
                            </p>
                            <div className="flex flex-col sm:flex-row items-center justify-center gap-6 pointer-events-auto">
                                <button onClick={() => setPage(Page.BOOK)} className="px-12 py-5 bg-primary text-white shape-squircle font-semibold hover:bg-opacity-95 transition-all drop-shadow-2xl hover:drop-shadow-[0_20px_20px_rgba(46,91,67,0.4)] text-lg">
                                    Zum Buch
                                </button>
                                <button onClick={() => setPage(Page.RETREAT)} className="px-12 py-5 bg-white/10 backdrop-blur-md border border-white/40 text-white shape-squircle font-semibold hover:bg-white/20 transition-all text-lg">
                                    Retreat entdecken
                                </button>
                            </div>
                        </div>

                        <div
                            className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce text-white/80 transition-opacity duration-300 z-10"
                            style={{ opacity: Math.max(0, 1 - window.scrollY / 200) }}
                        >
                            <span className="material-symbols-outlined text-4xl">expand_more</span>
                        </div>
                    </div>
                </div>
            </div>

            {/* Spacer to allow scrolling over the fixed hero */}
            <div className="h-[100vh]"></div>

            {/* Main Content that scrolls OVER the hero */}
            <div className="bg-background-light dark:bg-background-dark relative z-10 shadow-[0_-20px_60px_rgba(0,0,0,0.2)] rounded-t-[3rem] mt-[-2rem]">
                <section className="py-24 px-6 max-w-7xl mx-auto" id="buch">
                    <div className="text-center mb-20">
                        <h2 className="font-display text-4xl md:text-5xl mb-4">Die Vier Säulen</h2>
                        <div className="w-20 h-1 bg-primary mx-auto"></div>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        <div className="group p-8 shape-squircle bg-secondary/30 dark:bg-white/5 border border-transparent hover:border-primary/20 transition-all hover:-translate-y-2">
                            <div className="w-16 h-16 shape-squircle bg-slate-200 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <span className="material-symbols-outlined text-accent1 text-3xl">air</span>
                            </div>
                            <h3 className="font-display text-2xl mb-4">Geist & Fokus</h3>
                            <p className="text-slate-600 dark:text-slate-400 leading-relaxed">Mentale Klarheit durch bewusste Atemführung und geführte Stille.</p>
                        </div>
                        <div className="group p-8 shape-squircle bg-secondary/30 dark:bg-white/5 border border-transparent hover:border-primary/20 transition-all hover:-translate-y-2">
                            <div className="w-16 h-16 shape-squircle bg-slate-200 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <span className="material-symbols-outlined text-primary text-3xl">nature_people</span>
                            </div>
                            <h3 className="font-display text-2xl mb-4">Erdung</h3>
                            <p className="text-slate-600 dark:text-slate-400 leading-relaxed">Wurzeln schlagen in der Natur und die Kraft der Ernährung nutzen.</p>
                        </div>
                        <div className="group p-8 shape-squircle bg-secondary/30 dark:bg-white/5 border border-transparent hover:border-primary/20 transition-all hover:-translate-y-2">
                            <div className="w-16 h-16 shape-squircle bg-slate-200 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <span className="material-symbols-outlined text-accent1 text-3xl">water_drop</span>
                            </div>
                            <h3 className="font-display text-2xl mb-4">Fluss</h3>
                            <p className="text-slate-600 dark:text-slate-400 leading-relaxed">Emotionale Heilung und Loslassen blockierter Energien.</p>
                        </div>
                        <div className="group p-8 shape-squircle bg-secondary/30 dark:bg-white/5 border border-transparent hover:border-primary/20 transition-all hover:-translate-y-2">
                            <div className="w-16 h-16 shape-squircle bg-slate-200 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <span className="material-symbols-outlined text-accent2 text-3xl">local_fire_department</span>
                            </div>
                            <h3 className="font-display text-2xl mb-4">Energie</h3>
                            <p className="text-slate-600 dark:text-slate-400 leading-relaxed">Deine innere Leidenschaft und Lebenskraft neu entfachen.</p>
                        </div>
                    </div>
                </section>

                <section className="bg-secondary/20 dark:bg-white/5 py-24">
                    <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                        <div className="relative">
                            <div className="absolute -top-10 -left-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
                            <img alt="Roberto de Marco Portrait" className="relative shape-squircle shadow-2xl z-10 w-full object-cover max-h-[600px]" src="./roberto.jpg" />
                            <div className="absolute -bottom-6 -right-6 p-6 bg-primary text-white shape-squircle shadow-xl z-20">
                                <p className="font-display text-xl">Roberto de Marco</p>
                                <p className="text-sm opacity-80 italic">Mentor & Autor</p>
                            </div>
                        </div>
                        <div className="space-y-8">
                            <h2 className="font-display text-4xl md:text-5xl leading-tight">Von der Erschöpfung zur <span className="text-primary italic">Erleuchtung.</span></h2>
                            <p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300">
                                Als erfolgreicher Unternehmer schien Roberto alles zu haben – bis sein Körper streikte. Die Diagnose ME/CFS veränderte alles. In seiner dunkelsten Stunde entdeckte er den Pfad der ganzheitlichen Heilung.
                            </p>
                            <p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300">
                                Heute teilt Roberto seine Erkenntnisse durch Riboneo, ein Konzept, das moderne Wissenschaft mit spiritueller Tiefe verbindet, um Menschen zurück zu ihrer ureigenen Kraft zu führen.
                            </p>
                            <div className="pt-4">
                                <button className="inline-flex items-center gap-2 font-semibold text-primary dark:text-white hover:gap-4 transition-all">
                                    Erfahre mehr über meine Reise
                                    <span className="material-symbols-outlined">arrow_forward</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="py-24 relative overflow-hidden">
                    <div className="max-w-4xl mx-auto px-6 text-center relative z-10">
                        <span className="material-symbols-outlined text-primary text-6xl mb-8 opacity-40">format_quote</span>
                        <blockquote className="font-display text-3xl md:text-4xl italic text-slate-800 dark:text-white mb-10 leading-snug">
                            "Heilung geschieht nicht im Kopf. Sie beginnt im Moment, in dem du aufhörst zu kämpfen und anfängst zu fühlen."
                        </blockquote>
                        <p className="font-medium tracking-widest uppercase text-sm text-primary">Roberto de Marco</p>
                    </div>
                    <div className="absolute top-0 right-0 w-1/3 h-full bg-slate-100 dark:bg-white/5 -z-10 translate-x-1/2 rounded-full blur-3xl opacity-50"></div>
                </section>

                <section className="py-24 px-4 w-full" id="retreat">
                    <div className="w-full">
                        <div className="grid grid-cols-1 md:grid-cols-2 min-h-[600px] shape-squircle overflow-hidden shadow-2xl">
                            <div className="relative h-96 md:h-auto overflow-hidden">
                                <img alt="Wellness Deck" className="absolute inset-0 w-full h-full object-cover hover:scale-105 transition-transform duration-1000" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCexLBJa_j-RdkjvRmwOV-JjQPinq2-qwRaOaQT3FmeiX7JG7udYYwXAfjhz632L2GbVuDI4uNi5Y94LVrpE_5KXcEZa6xzlYno2HKNzcZ7UKOAMv-e3MedfCLxCCFNNQ-jc_K0VJHY1y2asUt2yHEctiIAskGIMSbLi9ygLbIux9vQbh8GWmx8VRj6ibUcJtk7z5k6DVZlfUUhiQFg2jyFcO0WqXc83q-DfyRpH8hdJDKPjRxkQp9AKcUywnE4wevFlExTZq3K7hQ" />
                            </div>
                            <div className="bg-primary flex items-center justify-center p-12 md:p-24 text-white">
                                <div className="max-w-md">
                                    <h2 className="font-display text-4xl mb-6">Riboneo Retreat 2026</h2>
                                    <p className="text-lg mb-10 opacity-90 leading-relaxed">
                                        Tauche ein in eine Woche der Transformation. Inmitten der unberührten Natur Süditaliens findest du den Raum, um tief zu regenerieren und dein Bewusstsein neu auszurichten.
                                    </p>
                                    <ul className="space-y-4 mb-12">
                                        <li className="flex items-center gap-3">
                                            <span className="material-symbols-outlined text-secondary">check_circle</span>
                                            <span>Exklusive Wellness-Anwendungen</span>
                                        </li>
                                        <li className="flex items-center gap-3">
                                            <span className="material-symbols-outlined text-secondary">check_circle</span>
                                            <span>Tägliche Meditationen & Yoga</span>
                                        </li>
                                        <li className="flex items-center gap-3">
                                            <span className="material-symbols-outlined text-secondary">check_circle</span>
                                            <span>Regenerative Pflanzenküche</span>
                                        </li>
                                    </ul>
                                    <button onClick={() => setPage(Page.RETREAT)} className="inline-block px-10 py-4 bg-secondary text-primary shape-squircle font-bold hover:bg-white transition-all drop-shadow-lg">
                                        Sichere dir einen Platz
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="py-24 bg-white dark:bg-slate-900 overflow-hidden">
                    <div className="max-w-7xl mx-auto px-6">
                        <h2 className="font-display text-center text-4xl mb-16">Stimmen der Leser</h2>
                        <TestimonialCarousel />
                    </div>
                </section>
            </div>
        </>
    );
};

export default Home;