"use client";

import Header from "./components/Header";
import Hero from "./components/Hero";
import About from "./components/About";
import Projects from "./components/Projects";
import Contact from "./components/Contact";
import Footer from "./components/Footer";
import Script from "next/script";
import dynamic from "next/dynamic";
import ErrorBoundary from "@/components/ErrorBoundary";
import { motion } from "framer-motion";

// Wrap ActivityFeed in error boundary to prevent crashes
const ActivityFeed = dynamic(() => import("./components/ActivityFeed").catch(() => ({ default: () => null })), {
  ssr: false,
  loading: () => null,
});

export default function Home() {
  return (
    <div className="min-h-screen">
      <Script
        id={"structured-data"}
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Person",
            name: "Dennis Konkol",
            url: "https://dk0.dev",
            jobTitle: "Software Engineer",
            address: {
              "@type": "PostalAddress",
              addressLocality: "Osnabrück",
              addressCountry: "Germany",
            },
            sameAs: [
              "https://github.com/Denshooter",
              "https://linkedin.com/in/dkonkol",
            ],
          }),
        }}
      />
      <ErrorBoundary>
        <ActivityFeed />
      </ErrorBoundary>
      <Header />
      {/* Spacer to prevent navbar overlap */}
      <div className="h-24 md:h-32" aria-hidden="true"></div>
      <main className="relative">
        <Hero />

        {/* Wavy Separator 1 - Hero to About */}
        <div className="relative h-24 overflow-hidden">
          <svg
            className="absolute inset-0 w-full h-full"
            viewBox="0 0 1440 120"
            preserveAspectRatio="none"
          >
            <motion.path
              d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
              fill="url(#gradient1)"
              initial={{ opacity: 0 }}
              animate={{
                opacity: 1,
                d: [
                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
                ],
              }}
              transition={{
                opacity: { duration: 0.8, delay: 0.3 },
                d: {
                  duration: 12,
                  repeat: Infinity,
                  ease: "easeInOut",
                },
              }}
            />
            <defs>
              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#BAE6FD" stopOpacity="0.4" />
                <stop offset="50%" stopColor="#DDD6FE" stopOpacity="0.4" />
                <stop offset="100%" stopColor="#FBCFE8" stopOpacity="0.4" />
              </linearGradient>
            </defs>
          </svg>
        </div>

        <About />

        {/* Wavy Separator 2 - About to Projects */}
        <div className="relative h-24 overflow-hidden">
          <svg
            className="absolute inset-0 w-full h-full"
            viewBox="0 0 1440 120"
            preserveAspectRatio="none"
          >
            <motion.path
              d="M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z"
              fill="url(#gradient2)"
              initial={{ opacity: 0 }}
              animate={{
                opacity: 1,
                d: [
                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
                ],
              }}
              transition={{
                opacity: { duration: 0.8, delay: 0.3 },
                d: {
                  duration: 14,
                  repeat: Infinity,
                  ease: "easeInOut",
                },
              }}
            />
            <defs>
              <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#FED7AA" stopOpacity="0.4" />
                <stop offset="50%" stopColor="#FDE68A" stopOpacity="0.4" />
                <stop offset="100%" stopColor="#FCA5A5" stopOpacity="0.4" />
              </linearGradient>
            </defs>
          </svg>
        </div>

        <Projects />

        {/* Wavy Separator 3 - Projects to Contact */}
        <div className="relative h-24 overflow-hidden">
          <svg
            className="absolute inset-0 w-full h-full"
            viewBox="0 0 1440 120"
            preserveAspectRatio="none"
          >
            <motion.path
              d="M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z"
              fill="url(#gradient3)"
              initial={{ opacity: 0 }}
              animate={{
                opacity: 1,
                d: [
                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
                ],
              }}
              transition={{
                opacity: { duration: 0.8, delay: 0.3 },
                d: {
                  duration: 16,
                  repeat: Infinity,
                  ease: "easeInOut",
                },
              }}
            />
            <defs>
              <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#99F6E4" stopOpacity="0.4" />
                <stop offset="50%" stopColor="#A7F3D0" stopOpacity="0.4" />
                <stop offset="100%" stopColor="#D9F99D" stopOpacity="0.4" />
              </linearGradient>
            </defs>
          </svg>
        </div>

        <Contact />
      </main>
      <Footer />
    </div>
  );
}