'use client'; import { useEffect, useRef, useState } from 'react'; import Navigation from '../../../components/Navigation'; import FloatingLanguageSwitcher from '../../../components/FloatingLanguageSwitcher'; import Footer from '../../../components/Footer'; import { Locale } from '../../../lib/i18n'; import { getTranslations } from '../../../lib/translations'; import { updateDocumentMeta } from '../../../lib/seo-utils'; // Arctic Particle Background Component function ArcticParticleBackground() { const canvasRef = useRef(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 for arctic theme const particles: Array<{ x: number; y: number; vx: number; vy: number; size: number; opacity: number; type: 'snow' | 'ice' | 'aurora'; }> = []; // Create particles for (let i = 0; i < 150; i++) { const type = Math.random() < 0.7 ? 'snow' : Math.random() < 0.9 ? 'ice' : 'aurora'; particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * (type === 'snow' ? 0.3 : 0.1), vy: type === 'snow' ? Math.random() * 0.5 + 0.2 : (Math.random() - 0.5) * 0.1, size: type === 'snow' ? Math.random() * 3 + 1 : type === 'ice' ? Math.random() * 2 + 0.5 : Math.random() * 4 + 2, opacity: type === 'aurora' ? Math.random() * 0.3 + 0.1 : Math.random() * 0.6 + 0.2, type, }); } // 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 < -10) particle.x = canvas.width + 10; if (particle.x > canvas.width + 10) particle.x = -10; if (particle.y < -10) particle.y = canvas.height + 10; if (particle.y > canvas.height + 10) particle.y = -10; // Draw particle based on type ctx.beginPath(); if (particle.type === 'snow') { ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); ctx.fillStyle = `rgba(255, 255, 255, ${particle.opacity})`; ctx.fill(); } else if (particle.type === 'ice') { ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); ctx.fillStyle = `rgba(173, 216, 230, ${particle.opacity})`; ctx.fill(); } else if (particle.type === 'aurora') { const gradient = ctx.createRadialGradient( particle.x, particle.y, 0, particle.x, particle.y, particle.size * 3, ); gradient.addColorStop(0, `rgba(0, 255, 150, ${particle.opacity})`); gradient.addColorStop(0.5, `rgba(0, 150, 255, ${particle.opacity * 0.5})`); gradient.addColorStop(1, `rgba(150, 0, 255, 0)`); ctx.arc(particle.x, particle.y, particle.size * 3, 0, Math.PI * 2); ctx.fillStyle = gradient; ctx.fill(); } }); // Draw connections between ice particles particles .filter((p) => p.type === 'ice') .forEach((particle, i, iceParticles) => { iceParticles.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 < 80) { ctx.beginPath(); ctx.moveTo(particle.x, particle.y); ctx.lineTo(otherParticle.x, otherParticle.y); ctx.strokeStyle = `rgba(173, 216, 230, ${0.1 * (1 - distance / 80)})`; ctx.lineWidth = 1; ctx.stroke(); } }); }); requestAnimationFrame(animate); }; animate(); return () => { window.removeEventListener('resize', resizeCanvas); }; }, []); return ( ); } export default function ContactPage({ params }: { params: { locale: Locale } }) { const t = getTranslations(params.locale); const [formData, setFormData] = useState({ firstName: '', lastName: '', email: '', phone: '', message: '', }); const [isSubmitting, setIsSubmitting] = useState(false); const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle'); // Update meta tags when locale changes useEffect(() => { updateDocumentMeta(params.locale); }, [params.locale]); const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value, })); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsSubmitting(true); // Simulate form submission try { await new Promise((resolve) => setTimeout(resolve, 2000)); setSubmitStatus('success'); setFormData({ firstName: '', lastName: '', email: '', phone: '', message: '', }); } catch (error) { setSubmitStatus('error'); } finally { setIsSubmitting(false); setTimeout(() => setSubmitStatus('idle'), 5000); } }; return (
{/* Arctic Background with Overlay */}
')`, }} data-oid="g8y9fqe" /> {/* Arctic Particle Background */} {/* Navigation */} {/* Floating Language Switcher */} {/* Contact Section */}
{/* Header */}

{t.contact.title}

{t.contact.subtitle}

{/* Contact Form */}
{/* Name Fields */}
{/* Email and Phone */}
{/* Message */}