"use client";

import { motion } from "framer-motion";
import { useState } from "react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import type { Locale } from "@/i18n-config";

const easeOutExpo = [0.16, 1, 0.3, 1] as [number, number, number, number];

const fadeUp = {
  hidden: { opacity: 0, y: 30 },
  show: { opacity: 1, y: 0, transition: { duration: 0.8, ease: easeOutExpo } },
};

const stagger = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1 } },
};

export default function ContactClient({ lang, dict }: { lang: Locale; dict: any }) {
  const [formState, setFormState] = useState({
    name: "",
    email: "",
    company: "",
    service: "AI Solutions",
    message: "",
  });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div className="bg-[#F4F0E8] text-[#0A0A0A] font-body min-h-screen">
      <Header lang={lang} dict={dict.nav} />
      
      <main className="pt-32 pb-24 px-6 min-h-screen max-w-4xl mx-auto">
        
        <div className="border-b border-[#C8C2B8] pb-12 mb-16">
          <div className="flex items-center gap-3 mb-6">
            <div className="w-3 h-3 bg-[#FFE600]" />
            <span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">{dict.contact.badge}</span>
          </div>
          <h1 className="font-display font-black text-5xl sm:text-6xl lg:text-8xl uppercase leading-[0.85] tracking-tight">
            {dict.contact.title}
          </h1>
        </div>

        {/* Contact Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          
          {/* Info Side */}
          <div className="lg:col-span-5 space-y-0">
            <div className="border-b border-[#C8C2B8] pb-8 mb-8">
              <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">{dict.contact.infoBase}</div>
              <div className="font-display font-black text-base text-[#0A0A0A]">{dict.contact.infoBaseText}</div>
              <div className="font-mono text-[11px] text-[#A0998E] mt-1">{dict.contact.infoBaseSub}</div>
            </div>
            <div className="border-b border-[#C8C2B8] pb-8 mb-8">
              <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">{dict.contact.infoDirect}</div>
              <a href="mailto:hello@ayristech.com" className="font-display font-black text-base text-[#0A0A0A] hover:text-[#FF4500] transition-colors block">hello@ayristech.com</a>
              <a href="tel:+905320000000" className="font-mono text-[12px] text-[#A0998E] hover:text-[#0A0A0A] transition-colors mt-1 block">+90 (532) 000 00 00</a>
            </div>
            <div className="pb-8">
              <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">{dict.contact.infoBlueprint}</div>
              <p className="text-[#7A7470] text-[13px] leading-relaxed">{dict.contact.infoBlueprintText}</p>
            </div>
            <div className="bg-[#FFE600] border-2 border-[#0A0A0A] p-6">
              <p className="font-display font-black text-sm uppercase text-[#0A0A0A]">
                {lang === "tr" ? "12 saat içinde yanıt alırsınız." : "Response within 12 operational hours."}
              </p>
            </div>
          </div>

          {/* Form Side */}
          <div className="lg:col-span-7">
            {submitted ? (
              <motion.div
                className="border-2 border-[#0A0A0A] bg-[#FFE600] p-8 sm:p-12 text-center h-full flex flex-col justify-center items-center"
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6 }}
              >
                <div className="w-12 h-12 border-2 border-[#0A0A0A] bg-[#0A0A0A] flex items-center justify-center mb-6">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFE600" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
                </div>
                <h3 className="font-display font-black text-2xl uppercase tracking-tight mb-2">{dict.contact.submittedTitle}</h3>
                <p className="text-[#3A3A3A] text-[13px] max-w-sm">{dict.contact.submittedText}</p>
              </motion.div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <label className="block font-mono text-[9px] font-bold uppercase tracking-[0.3em] text-[#A0998E] mb-2">{dict.contact.formName}</label>
                  <input type="text" required value={formState.name} onChange={e => setFormState({ ...formState, name: e.target.value })} placeholder={dict.contact.formNamePlaceholder}
                    className="w-full bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] outline-none py-3 text-sm text-[#0A0A0A] placeholder-[#C8C2B8] transition-colors" />
                </div>
                <div>
                  <label className="block font-mono text-[9px] font-bold uppercase tracking-[0.3em] text-[#A0998E] mb-2">{dict.contact.formEmail}</label>
                  <input type="email" required value={formState.email} onChange={e => setFormState({ ...formState, email: e.target.value })} placeholder={dict.contact.formEmailPlaceholder}
                    className="w-full bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] outline-none py-3 text-sm text-[#0A0A0A] placeholder-[#C8C2B8] transition-colors" />
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block font-mono text-[9px] font-bold uppercase tracking-[0.3em] text-[#A0998E] mb-2">{dict.contact.formCompany}</label>
                    <input type="text" value={formState.company} onChange={e => setFormState({ ...formState, company: e.target.value })} placeholder={dict.contact.formCompanyPlaceholder}
                      className="w-full bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] outline-none py-3 text-sm text-[#0A0A0A] placeholder-[#C8C2B8] transition-colors" />
                  </div>
                  <div>
                    <label htmlFor="form-service" className="block font-mono text-[9px] font-bold uppercase tracking-[0.3em] text-[#A0998E] mb-2">{dict.contact.formTrack}</label>
                    <select id="form-service" value={formState.service} onChange={e => setFormState({ ...formState, service: e.target.value })}
                      className="w-full bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] outline-none py-3 text-sm text-[#0A0A0A] transition-colors cursor-pointer">
                      <option value="AI Solutions" className="bg-[#F4F0E8]">{dict.services.items.ai.title}</option>
                      <option value="Blockchain Dev" className="bg-[#F4F0E8]">{dict.services.items.blockchain.title}</option>
                      <option value="Mobile Apps" className="bg-[#F4F0E8]">{dict.services.items.mobile.title}</option>
                      <option value="Web Platforms" className="bg-[#F4F0E8]">{dict.services.items.web.title}</option>
                    </select>
                  </div>
                </div>
                <div>
                  <label className="block font-mono text-[9px] font-bold uppercase tracking-[0.3em] text-[#A0998E] mb-2">{dict.contact.formScope}</label>
                  <textarea rows={4} required value={formState.message} onChange={e => setFormState({ ...formState, message: e.target.value })} placeholder={dict.contact.formScopePlaceholder}
                    className="w-full bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] outline-none py-3 text-sm text-[#0A0A0A] placeholder-[#C8C2B8] transition-colors resize-none" />
                </div>
                <motion.button type="submit" className="btn-brutal btn-brutal-yellow w-full py-5 font-display font-black text-[13px] tracking-widest uppercase cursor-pointer" whileTap={{ scale: 0.98 }}>
                  {dict.contact.formSubmit}
                </motion.button>
              </form>
            )}
          </div>

        </div>

      </main>

      <Footer lang={lang} dict={dict} />
    </div>
  );
}