"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import {
  Mail,
  Linkedin,
  MapPin,
  Globe,
  Send,
  ArrowRight,
} from "lucide-react";
import { GlassCard } from "@/components/GlassCard";
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
import { ParticleBackground } from "@/components/ParticleBackground";

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    company: "",
    role: "",
    message: "",
  });
  const [submitted, setSubmitted] = useState(false);

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

  return (
    <>
      {/* Hero */}
      <section className="relative min-h-[50vh] flex items-center overflow-hidden">
        <ParticleBackground />

        {/* Cinematic spotlights */}
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-0 right-0 w-[60%] h-[70%] bg-gradient-to-bl from-accent/[0.06] via-accent-blue/[0.03] to-transparent" />
          <div className="absolute bottom-0 left-0 w-[40%] h-[50%] bg-gradient-to-tr from-accent-violet/[0.04] via-transparent to-transparent" />
          <div className="absolute top-1/3 left-1/2 w-[500px] h-[500px] rounded-full bg-accent/[0.03] blur-[100px]" />
        </div>

        {/* Bottom fade */}
        <div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-navy to-transparent z-[5]" />

        <div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20 text-center">
          <motion.div
            initial={{ opacity: 0, y: 40, filter: "blur(4px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
          >
            <p className="text-xs tracking-[0.25em] uppercase text-accent mb-6 font-medium">
              Get in Touch
            </p>
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold font-display leading-[1.05] tracking-[-0.02em]">
              Let&apos;s Build
              <br />
              <span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
                Digital Trust Together
              </span>
            </h1>
            <p className="mt-6 text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
              Ready to see how KOBIL can transform your organization&apos;s
              digital trust infrastructure? Get in touch.
            </p>
          </motion.div>
        </div>
      </section>

      {/* Contact Form + Info */}
      <SectionWrapper>
        <div className="grid lg:grid-cols-5 gap-12">
          {/* Form */}
          <motion.div variants={itemVariants} className="lg:col-span-3">
            <GlassCard className="p-8 md:p-10">
              {submitted ? (
                <div className="text-center py-12">
                  <div className="w-16 h-16 rounded-lg bg-accent/[0.06] border border-accent/[0.12] backdrop-blur-sm flex items-center justify-center mx-auto mb-6">
                    <Send className="h-8 w-8 text-accent" />
                  </div>
                  <h3 className="text-2xl font-bold font-display mb-3">
                    Message Sent!
                  </h3>
                  <p className="text-slate-300 max-w-md mx-auto leading-relaxed">
                    Thank you for reaching out. Our team will get back to you
                    within 24 hours.
                  </p>
                </div>
              ) : (
                <>
                  <h2 className="text-2xl font-bold font-display mb-2 tracking-tight">
                    Book a Demo
                  </h2>
                  <p className="text-slate-400 mb-8 leading-relaxed">
                    Fill out the form and our team will reach out to schedule a
                    personalized demo.
                  </p>
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid md:grid-cols-2 gap-6">
                      <div>
                        <label className="block text-sm font-medium mb-2 text-slate-300">
                          Full Name *
                        </label>
                        <input
                          type="text"
                          required
                          value={formData.name}
                          onChange={(e) =>
                            setFormData({ ...formData, name: e.target.value })
                          }
                          className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/[0.06] text-white placeholder:text-slate-500 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/50 transition-colors"
                          placeholder="John Doe"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium mb-2 text-slate-300">
                          Work Email *
                        </label>
                        <input
                          type="email"
                          required
                          value={formData.email}
                          onChange={(e) =>
                            setFormData({ ...formData, email: e.target.value })
                          }
                          className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/[0.06] text-white placeholder:text-slate-500 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/50 transition-colors"
                          placeholder="john@company.com"
                        />
                      </div>
                    </div>
                    <div className="grid md:grid-cols-2 gap-6">
                      <div>
                        <label className="block text-sm font-medium mb-2 text-slate-300">
                          Company *
                        </label>
                        <input
                          type="text"
                          required
                          value={formData.company}
                          onChange={(e) =>
                            setFormData({
                              ...formData,
                              company: e.target.value,
                            })
                          }
                          className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/[0.06] text-white placeholder:text-slate-500 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/50 transition-colors"
                          placeholder="Acme Corp"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium mb-2 text-slate-300">
                          Role
                        </label>
                        <input
                          type="text"
                          value={formData.role}
                          onChange={(e) =>
                            setFormData({ ...formData, role: e.target.value })
                          }
                          className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/[0.06] text-white placeholder:text-slate-500 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/50 transition-colors"
                          placeholder="CISO, CTO, Product Manager..."
                        />
                      </div>
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2 text-slate-300">
                        Message
                      </label>
                      <textarea
                        rows={4}
                        value={formData.message}
                        onChange={(e) =>
                          setFormData({ ...formData, message: e.target.value })
                        }
                        className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/[0.06] text-white placeholder:text-slate-500 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/50 transition-colors resize-none"
                        placeholder="Tell us about your use case or what you'd like to see in the demo..."
                      />
                    </div>
                    <button
                      type="submit"
                      className="w-full md:w-auto inline-flex items-center justify-center px-8 py-3 text-sm font-semibold rounded-lg bg-accent text-navy hover:bg-accent/90 transition-colors"
                    >
                      Send Message <ArrowRight className="ml-2 h-4 w-4" />
                    </button>
                  </form>
                </>
              )}
            </GlassCard>
          </motion.div>

          {/* Contact Info */}
          <motion.div
            variants={itemVariants}
            className="lg:col-span-2 space-y-6"
          >
            <GlassCard className="p-6" hover={false}>
              <h3 className="text-lg font-semibold mb-4 tracking-tight">Get in Touch</h3>
              <div className="space-y-4">
                <a
                  href="mailto:info@kobil.com"
                  className="flex items-center gap-3 text-slate-300 hover:text-accent transition-colors"
                >
                  <Mail className="h-5 w-5" />
                  <span>info@kobil.com</span>
                </a>
                <a
                  href="https://linkedin.com/company/kobil"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 text-slate-300 hover:text-accent transition-colors"
                >
                  <Linkedin className="h-5 w-5" />
                  <span>KOBIL on LinkedIn</span>
                </a>
              </div>
            </GlassCard>

            <GlassCard className="p-6" hover={false}>
              <h3 className="text-lg font-semibold mb-4 tracking-tight">Headquarters</h3>
              <div className="space-y-4">
                <div className="flex items-start gap-3 text-slate-300">
                  <MapPin className="h-5 w-5 flex-shrink-0 mt-0.5" />
                  <div>
                    <p>KOBIL GmbH</p>
                    <p>Worms, Germany</p>
                  </div>
                </div>
                <div className="flex items-center gap-3 text-slate-300">
                  <Globe className="h-5 w-5" />
                  <span>Serving 50+ countries worldwide</span>
                </div>
              </div>
            </GlassCard>

            <GlassCard className="p-6" hover={false}>
              <h3 className="text-lg font-semibold mb-3 tracking-tight">Quick Facts</h3>
              <ul className="space-y-3 text-sm text-slate-400">
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-accent" />
                  Founded in Germany, trusted globally
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-accent" />
                  25+ years of cybersecurity innovation
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-accent" />
                  100M+ identities secured worldwide
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-accent" />
                  ISO 27001, eIDAS, PSD2 compliant
                </li>
              </ul>
            </GlassCard>
          </motion.div>
        </div>
      </SectionWrapper>
    </>
  );
}
