import { getSiteContents } from "@/lib/data"
import { ContactForm } from "@/components/contact/contact-form"
import { Mail, MapPin, Phone, Instagram, Youtube } from "lucide-react"
import { FaTiktok } from "react-icons/fa"
import Link from "next/link"

export default async function ContactPage() {
    const siteSettings = await getSiteContents()

    return (
        <div className="container py-12 md:py-24">
            <div className="text-center mb-12">
                <h1 className="text-4xl font-bold tracking-tight mb-4 font-outfit">İletişime Geçin</h1>
                <p className="text-muted-foreground max-w-xl mx-auto">
                    Sorularınız, teklif talepleriniz veya teknik destek için bize ulaşın.
                </p>
            </div>

            <div className="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto">
                <div className="space-y-8">
                    <div className="space-y-6">
                        <h2 className="text-2xl font-semibold">İletişim Bilgileri</h2>
                        <div className="flex items-start space-x-4">
                            <MapPin className="w-6 h-6 text-primary mt-1" />
                            <div>
                                <p className="font-medium">Merkez Ofis & Showroom</p>
                                <p className="text-slate-600 dark:text-slate-400 whitespace-pre-wrap">
                                    {siteSettings.contact_address || "Organize Sanayi Bölgesi, 12. Cadde No: 45\nBaşakşehir, İstanbul"}
                                </p>
                            </div>
                        </div>
                        <div className="flex items-center space-x-4">
                            <Phone className="w-6 h-6 text-primary" />
                            <div>
                                <p className="font-medium">Telefon</p>
                                <p className="text-slate-600 dark:text-slate-400">
                                    {siteSettings.contact_phone || "+90 (212) 555 00 00"}
                                </p>
                            </div>
                        </div>
                        <div className="flex items-center space-x-4">
                            <Mail className="w-6 h-6 text-primary" />
                            <div>
                                <p className="font-medium">E-posta</p>
                                <p className="text-slate-600 dark:text-slate-400">
                                    {siteSettings.contact_email || "info@parakasa.com"}
                                </p>
                            </div>
                        </div>

                        <div className="pt-4 border-t">
                            <h3 className="text-lg font-semibold mb-3">Sosyal Medya</h3>
                            <div className="flex gap-4">
                                {siteSettings.social_instagram && (
                                    <Link href={siteSettings.social_instagram} target="_blank" className="p-2 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300">
                                        <Instagram className="h-5 w-5" />
                                    </Link>
                                )}
                                {siteSettings.social_youtube && (
                                    <Link href={siteSettings.social_youtube} target="_blank" className="p-2 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300">
                                        <Youtube className="h-5 w-5" />
                                    </Link>
                                )}
                                {siteSettings.social_tiktok && (
                                    <Link href={siteSettings.social_tiktok} target="_blank" className="p-2 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300">
                                        <FaTiktok className="h-5 w-5" />
                                    </Link>
                                )}
                            </div>
                        </div>
                    </div>
                    {siteSettings.contact_map_embed ? (
                        <div
                            className="aspect-video bg-slate-100 rounded-lg overflow-hidden relative"
                            dangerouslySetInnerHTML={{ __html: siteSettings.contact_map_embed }}
                        />
                    ) : (
                        <div className="aspect-video bg-slate-100 rounded-lg overflow-hidden relative flex items-center justify-center text-muted-foreground">
                            Harita henüz eklenmemiş.
                        </div>
                    )}
                </div>

                <ContactForm />
            </div>
        </div>
    )
}