'use client';

import { useEffect, useRef } from 'react';
import Navigation from '../../components/Navigation';
import FloatingLanguageSwitcher from '../../components/FloatingLanguageSwitcher';
import BlogShowcase from '../../components/BlogShowcase';
import Footer from '../../components/Footer';
import { Locale } from '../../lib/i18n';
import { getTranslations } from '../../lib/translations';
import { updateDocumentMeta } from '../../lib/seo-utils';

// Particle Background Component
function ParticleBackground() {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        if (!ctx) return;

        // Set canvas size
        const resizeCanvas = () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        };
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // Particle system
        const particles: Array<{
            x: number;
            y: number;
            vx: number;
            vy: number;
            size: number;
            opacity: number;
        }> = [];

        // Create particles
        for (let i = 0; i < 100; i++) {
            particles.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                vx: (Math.random() - 0.5) * 0.5,
                vy: (Math.random() - 0.5) * 0.5,
                size: Math.random() * 3 + 1,
                opacity: Math.random() * 0.5 + 0.2,
            });
        }

        // Animation loop
        const animate = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            particles.forEach((particle) => {
                // Update position
                particle.x += particle.vx;
                particle.y += particle.vy;

                // Wrap around edges
                if (particle.x < 0) particle.x = canvas.width;
                if (particle.x > canvas.width) particle.x = 0;
                if (particle.y < 0) particle.y = canvas.height;
                if (particle.y > canvas.height) particle.y = 0;

                // Draw particle
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(255, 255, 255, ${particle.opacity})`;
                ctx.fill();
            });

            // Draw connections
            particles.forEach((particle, i) => {
                particles.slice(i + 1).forEach((otherParticle) => {
                    const dx = particle.x - otherParticle.x;
                    const dy = particle.y - otherParticle.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);

                    if (distance < 100) {
                        ctx.beginPath();
                        ctx.moveTo(particle.x, particle.y);
                        ctx.lineTo(otherParticle.x, otherParticle.y);
                        ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 * (1 - distance / 100)})`;
                        ctx.stroke();
                    }
                });
            });

            requestAnimationFrame(animate);
        };

        animate();

        return () => {
            window.removeEventListener('resize', resizeCanvas);
        };
    }, []);

    return (
        <canvas
            ref={canvasRef}
            className="absolute inset-0 w-full h-full"
            style={{ pointerEvents: 'none' }}
            data-oid="iiiegs:"
        />
    );
}

export default function Page({ params }: { params: { locale: Locale } }) {
    const t = getTranslations(params.locale);

    // Update meta tags when locale changes
    useEffect(() => {
        updateDocumentMeta(params.locale);
    }, [params.locale]);

    return (
        <div className="min-h-screen relative overflow-hidden" data-oid="krtdxh9">
            {/* Background Image with Overlay */}
            <div
                className="absolute inset-0 bg-cover bg-center bg-no-repeat"
                style={{
                    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23d4a574;stop-opacity:1" /><stop offset="50%" style="stop-color:%23b8956a;stop-opacity:1" /><stop offset="100%" style="stop-color:%23a08660;stop-opacity:1" /></linearGradient></defs><rect width="1200" height="800" fill="url(%23grad1)"/><path d="M0,400 Q300,200 600,350 T1200,300 L1200,800 L0,800 Z" fill="%23967d56"/><path d="M0,500 Q400,300 800,450 T1200,400 L1200,800 L0,800 Z" fill="%238a7350"/><circle cx="200" cy="150" r="80" fill="%23f4e4c1" opacity="0.3"/><circle cx="1000" cy="200" r="60" fill="%23f4e4c1" opacity="0.2"/></svg>')`,
                }}
                data-oid="t35j3uz"
            />

            {/* Particle Background */}
            <ParticleBackground data-oid="1eq47iz" />

            {/* Navigation */}
            <Navigation locale={params.locale} data-oid=".-cxh3." />

            {/* Floating Language Switcher */}
            <FloatingLanguageSwitcher locale={params.locale} data-oid="usi6f7v" />

            {/* Hero Section */}
            <section
                id="hero"
                className="relative z-10 flex items-center justify-center min-h-screen text-center px-4"
                data-oid="2n7qgj-"
            >
                <div className="max-w-4xl mx-auto" data-oid="qdxxu5.">
                    <h1
                        className="text-5xl md:text-7xl font-bold text-white mb-8 leading-tight"
                        data-oid="pf:lgs4"
                    >
                        {t.hero.title}
                    </h1>
                    <p
                        className="text-xl md:text-2xl text-white/90 mb-12 max-w-3xl mx-auto leading-relaxed"
                        data-oid="vm1tz7h"
                    >
                        {t.hero.subtitle}
                    </p>
                    <div
                        className="flex flex-col sm:flex-row gap-6 justify-center"
                        data-oid="mbx0eri"
                    >
                        <button
                            className="bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-full font-semibold text-lg transform hover:scale-105 transition-all duration-200 shadow-lg"
                            data-oid="e2cv0mq"
                        >
                            {t.hero.startJourney}
                        </button>
                        <button
                            className="border-2 border-white text-white hover:bg-white hover:text-gray-900 px-8 py-4 rounded-full font-semibold text-lg transform hover:scale-105 transition-all duration-200"
                            data-oid="sv:-vjb"
                        >
                            {t.hero.learnMore}
                        </button>
                    </div>
                </div>
            </section>

            {/* Blog Showcase Section */}
            <BlogShowcase locale={params.locale} data-oid=":qdpiz:" />

            {/* Floating Action Elements */}
            <div className="fixed bottom-8 left-8 z-50" data-oid="f2x6cuz">
                <button
                    className="bg-green-500 hover:bg-green-600 text-white p-4 rounded-full shadow-lg transform hover:scale-110 transition-all duration-200"
                    data-oid="jye6ey7"
                >
                    <svg
                        className="w-6 h-6"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        data-oid="ggzwwl-"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M5 10l7-7m0 0l7 7m-7-7v18"
                            data-oid="cngsmmd"
                        />
                    </svg>
                </button>
            </div>

            {/* Footer */}
            <Footer locale={params.locale} data-oid="_rnutw_" />
        </div>
    );
}