"use client"

import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import PageReveal from "@/components/page-reveal"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ArrowLeft, Phone, Mail, Clock } from "lucide-react"
import Link from "next/link"
import { useLanguage } from "@/lib/language-context"
import { cn } from "@/lib/utils"
import ContactForm from "@/components/contact-form"

export default function ContactPage() {
    const { t } = useLanguage()

    const contactMethods = [
        {
            icon: Clock,
            label: t.contactPage.info.infoLine,
            values: t.contactPage.info.infoLineValues as string[],
            type: "tel",
            color: "bg-blue-500"
        },
        {
            icon: Phone,
            label: t.contactPage.info.dutyLine,
            values: [t.contactPage.info.dutyLineValue as string],
            type: "tel",
            color: "bg-primary"
        },
        {
            icon: Mail,
            label: t.contactPage.info.email,
            values: [t.contactPage.info.emailValue as string],
            type: "mailto",
            color: "bg-purple-500"
        }
    ]

    return (
        <PageReveal className="relative min-h-screen bg-slate-50">
            <Navbar darkMode={true} />

            {/* Background Decorations */}
            <div className="absolute md:fixed inset-0 pointer-events-none -z-10 overflow-hidden">
                <div className="absolute top-1/4 -right-20 w-96 h-96 bg-primary/5 rounded-full blur-3xl opacity-30 animate-blob" />
                <div className="absolute top-1/2 -left-20 w-80 h-80 bg-secondary/5 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000" />
            </div>

            {/* Header Section */}
            <section className="relative pt-40 pb-32 overflow-hidden bg-[#D9A321]">
                <div
                    className="absolute inset-0 bg-diagonal opacity-100 -z-10"
                    style={{ background: 'linear-gradient(135deg, #D9A321 0%, #1A1A1A 100%)' }}
                />
                <div className="absolute bottom-0 left-0 w-full h-[100px] bg-slate-50 transform -skew-y-3 origin-bottom-left -z-10" />

                <div className="max-w-7xl mx-auto px-6 relative z-10">
                    <Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-10 transition-colors group">
                        <div className="bg-white/10 p-2 rounded-full mr-3 group-hover:bg-white/20 transition-colors">
                            <ArrowLeft className="w-4 h-4" />
                        </div>
                        <span className="text-xs font-bold tracking-[0.2em] uppercase">{t.contactPage.back}</span>
                    </Link>

                    <div className="space-y-4">
                        <h1 className="text-5xl md:text-8xl font-black text-white tracking-tighter leading-none uppercase">
                            {t.contactPage.title} <br />
                            <span className="text-slate-900 italic">{t.contactPage.titleAccent}</span>
                        </h1>
                        <p className="text-xl text-white/70 max-w-2xl leading-relaxed font-medium">
                            {t.contactPage.description}
                        </p>
                    </div>
                </div>
            </section>

            <section className="py-24">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        {contactMethods.map((method, idx) => (
                            <Card key={idx} className="p-10 rounded-[2.5rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
                                <div className={cn("w-14 h-14 rounded-2xl flex items-center justify-center mb-8 shadow-lg", method.color)}>
                                    <method.icon className="w-6 h-6 text-white" />
                                </div>
                                <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">
                                    {method.label}
                                </p>
                                <div className="space-y-2">
                                    {method.values.map((value, valueIdx) => {
                                        const href = method.type === "mailto"
                                            ? `mailto:${value}`
                                            : `tel:${value.replace(/\s/g, "")}`
                                        return (
                                            <a
                                                key={`${value}-${valueIdx}`}
                                                href={href}
                                                className="text-2xl font-black text-slate-900 hover:text-primary transition-colors block"
                                            >
                                                {value}
                                            </a>
                                        )
                                    })}
                                </div>
                            </Card>
                        ))}
                    </div>

                    <div className="mt-24">
                        <div className="max-w-4xl mx-auto">
                            <div className="text-center mb-16 space-y-4">
                                <h2 className="text-4xl md:text-6xl font-black text-slate-900 uppercase tracking-tighter">
                                    {t.contactPage.cta.title}
                                </h2>
                                <p className="text-slate-500 font-medium max-w-xl mx-auto">
                                    {t.contactPage.cta.description}
                                </p>
                            </div>
                            <ContactForm />
                        </div>
                    </div>

                    {/* Business & Legal Info Section */}
                    <div className="mt-32 grid grid-cols-1 md:grid-cols-2 gap-12 pt-24 border-t border-slate-200">
                        <div className="space-y-8">
                            <div className="bg-slate-900 text-white px-6 py-2 rounded-full inline-block text-[10px] font-black uppercase tracking-[0.3em]">
                                {t.contactPage.business.title}
                            </div>
                            <div className="space-y-4">
                                <p className="text-xl font-black text-slate-900">{t.contactPage.business.operator}</p>
                                <div className="space-y-2">
                                    <p className="text-slate-500 font-medium">{t.contactPage.business.address}</p>
                                    <p className="text-slate-500 font-medium">{t.contactPage.business.taxNumber}</p>
                                    <p className="text-slate-500 font-medium">{t.contactPage.business.bankAccount}</p>
                                </div>
                                <div className="space-y-2 pt-4">
                                    <p className="text-primary font-black">{t.contactPage.business.phone}</p>
                                    <p className="text-primary font-black">{t.contactPage.business.infoLine}</p>
                                    <p className="text-slate-900 font-bold">{t.contactPage.business.email}</p>
                                </div>
                            </div>
                        </div>

                        <div className="space-y-8">
                            <div className="bg-primary text-white px-6 py-2 rounded-full inline-block text-[10px] font-black uppercase tracking-[0.3em]">
                                {t.contactPage.legal.title}
                            </div>
                            <div className="space-y-4">
                                <p className="text-xl font-black text-slate-900">{t.contactPage.legal.name}</p>
                                <div className="space-y-2">
                                    <p className="text-slate-500 font-medium">{t.contactPage.legal.office}</p>
                                    <p className="text-slate-500 font-medium">{t.contactPage.legal.address}</p>
                                </div>
                                <div className="space-y-2 pt-4">
                                    <Link href="https://www.12gyoriugyvediiroda.hu" target="_blank" className="text-primary font-black block hover:underline">
                                        {t.contactPage.legal.web}
                                    </Link>
                                    <p className="text-slate-900 font-bold">{t.contactPage.legal.phone}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
          <Footer />
        </PageReveal>
    )
}