"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { mockData } from "@/lib/mock-data";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { Loader2 } from "lucide-react";

export function ContactContent() {
  const t = useTranslations("contact");
  const [isLoading, setIsLoading] = React.useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);

    // Simulate network request
    await new Promise((resolve) => setTimeout(resolve, 1500));
    
    setIsLoading(false);
    toast.success("Talebiniz başarıyla alındı!", {
      description: "En kısa sürede size dönüş yapacağız.",
    });
  };

  return (
    <div className="container mx-auto px-4 py-24 relative overflow-hidden">
      {/* Decorative background blob */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-slate-200/50 dark:bg-slate-800/30 rounded-full blur-[100px] -z-10 opacity-50" />

      <motion.h1 
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        className="text-5xl font-black text-slate-900 dark:text-white mb-16 text-center tracking-tight"
      >
        {t("title")}
      </motion.h1>
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
        {/* Contact Info */}
        <motion.div 
          initial={{ opacity: 0, x: -30 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
          className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-3xl p-10 rounded-[2rem] border border-white dark:border-slate-800 shadow-[0_8px_30px_rgb(0,0,0,0.04)]"
        >
          <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-10">{t("title")}</h2>
          
          <div className="space-y-8">
            <div className="group">
              <p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("email")}</p>
              <p className="text-xl font-medium text-slate-800 dark:text-slate-200">{mockData.contact.email}</p>
            </div>
            <div className="group">
              <p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("phone")}</p>
              <p className="text-xl font-medium text-slate-800 dark:text-slate-200">{mockData.contact.phone}</p>
            </div>
            <div className="group">
              <p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("address")}</p>
              <p className="text-xl font-medium text-slate-800 dark:text-slate-200 leading-relaxed max-w-xs">{mockData.contact.address}</p>
            </div>
          </div>
        </motion.div>

        {/* Contact Form */}
        <motion.div 
          initial={{ opacity: 0, x: 30 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6, delay: 0.4 }}
          className="bg-white dark:bg-slate-900 p-10 rounded-[2rem] shadow-[0_20px_50px_rgb(0,0,0,0.08)] border border-slate-100 dark:border-slate-800"
        >
          <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-10">{t("reservationReq")}</h2>
          
          <form className="space-y-6" onSubmit={handleSubmit}>
            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">{t("email")}</label>
              <input 
                type="email" 
                required
                className="w-full border-none bg-slate-50 dark:bg-slate-950 rounded-xl px-5 py-4 focus:ring-2 focus:ring-slate-900 dark:focus:ring-slate-100 outline-none transition-all hover:bg-slate-100 dark:hover:bg-slate-800 placeholder:text-slate-400 dark:placeholder:text-slate-600 text-slate-900 dark:text-white" 
                placeholder="ornek@email.com" 
              />
            </div>
            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">{t("reservationNo")} <span className="text-slate-400 dark:text-slate-500 font-normal">(Opsiyonel)</span></label>
              <input 
                type="text" 
                className="w-full border-none bg-slate-50 dark:bg-slate-950 rounded-xl px-5 py-4 focus:ring-2 focus:ring-slate-900 dark:focus:ring-slate-100 outline-none transition-all hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-900 dark:text-white" 
              />
            </div>
            <div className="pt-4">
              <button 
                type="submit" 
                disabled={isLoading}
                className="w-full flex justify-center items-center gap-2 bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-slate-100 px-8 py-5 rounded-xl font-bold text-lg tracking-wide transition-all hover:shadow-xl hover:-translate-y-1 active:translate-y-0 disabled:opacity-70 disabled:hover:translate-y-0 disabled:hover:shadow-none"
              >
                {isLoading ? <Loader2 className="w-6 h-6 animate-spin" /> : t("send")}
              </button>
            </div>
          </form>
        </motion.div>
      </div>
    </div>
  );
}