"use client";
import React, { useState } from "react";
import { motion } from "framer-motion";
import { SpotlightCard } from "@/components/SpotlightCard";
import { Terminal, Send, CheckCircle2, Shield } from "lucide-react";

export default function ContactPage() {
  const [formSubmitted, setFormSubmitted] = useState(false);
  const [email, setEmail] = useState("");
  const [nodes, setNodes] = useState("10-50");
  const [message, setMessage] = useState("");

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

  return (
    <div className="relative min-h-screen pt-20 pb-16 overflow-hidden">
      {/* Background grids */}
      <div className="pointer-events-none absolute inset-0 orbit-grid-mesh opacity-80" />
      <div className="pointer-events-none absolute inset-0 orbit-radial-glow" />

      <div className="mx-auto max-w-3xl px-6 relative z-10 space-y-12">
        {/* Cinematic Header */}
        <div className="text-center space-y-4">
          <div className="inline-flex items-center gap-1.5 rounded-full border border-orbit-cyan/20 bg-orbit-cyan/5 px-4 py-1.5 font-mono text-xs font-bold text-orbit-cyan">
            <Terminal className="h-4.5 w-4.5 animate-pulse" />
            Orbit Core Connection
          </div>
          <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl text-slate-900 dark:text-slate-100 font-mono">
            Schedule System Scan
          </h1>
          <p className="max-w-lg mx-auto text-sm md:text-base text-slate-600 dark:text-slate-400 leading-relaxed">
            Connect with our industrial integration architects. Initiate OEE diagnostics, ESG carbon intensity surveys, or secure IIoT networks deployment.
          </p>
        </div>

        {/* Glassmorphic Form Card */}
        <SpotlightCard glowColor="rgba(0, 212, 255, 0.15)">
          {formSubmitted ? (
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              className="text-center py-12 space-y-6"
            >
              <div className="inline-flex h-16 w-16 items-center justify-center rounded-full border border-emerald-500/20 bg-emerald-950/20 text-emerald-400 shadow-[0_0_20px_rgba(16,185,129,0.15)] mx-auto">
                <CheckCircle2 className="h-8 w-8" />
              </div>
              <h2 className="text-2xl font-bold text-slate-900 dark:text-white font-mono">Scan Initialized</h2>
              <p className="max-w-md mx-auto text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-mono">
                SYS_STATUS: Request recorded. Our systems architecture team will coordinate node deployment protocols within 24 hours. Latency ticket ID: #ORB-92842.
              </p>
            </motion.div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block font-mono text-[9px] uppercase tracking-widest text-slate-500 mb-2">Corporate Email</label>
                  <input
                    type="email"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="architect@company.com"
                    className="w-full h-11 rounded-xl border border-orbit-border bg-orbit-bg-deep/50 px-4 font-mono text-xs text-slate-800 dark:text-slate-200 focus:border-orbit-cyan focus:outline-none transition-colors"
                  />
                </div>
                <div>
                  <label className="block font-mono text-[9px] uppercase tracking-widest text-slate-500 mb-2">Asset Nodes Count</label>
                  <select
                    value={nodes}
                    onChange={(e) => setNodes(e.target.value)}
                    className="w-full h-11 rounded-xl border border-orbit-border bg-orbit-bg-deep/50 px-4 font-mono text-xs text-slate-600 dark:text-slate-400 focus:border-orbit-cyan focus:outline-none transition-colors"
                  >
                    <option value="1-10">&lt;10 Connected Gateways</option>
                    <option value="10-50">10 to 50 Industrial Nodes</option>
                    <option value="50-200">50 to 200 Large Facilities</option>
                    <option value="200+">200+ Enterprise Clusters</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block font-mono text-[9px] uppercase tracking-widest text-slate-500 mb-2">System Diagnostics Message</label>
                <textarea
                  required
                  rows={4}
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  placeholder="Outline key operational constraints, energy loss profiles, or machine maintenance schedules..."
                  className="w-full rounded-xl border border-orbit-border bg-orbit-bg-deep/50 p-4 font-mono text-xs text-slate-800 dark:text-slate-200 focus:border-orbit-cyan focus:outline-none transition-colors resize-none"
                />
              </div>

              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 pt-4 border-t border-orbit-border/60">
                <div className="flex items-center gap-2 font-mono text-[10px] text-slate-500">
                  <Shield className="h-4 w-4 text-orbit-purple" />
                  <span>Sub-millisecond data encryption active.</span>
                </div>
                
                <button
                  type="submit"
                  className="flex h-11 items-center justify-center rounded-full bg-gradient-to-r from-orbit-cyan to-orbit-purple px-8 font-mono text-xs font-bold text-white shadow-lg shadow-orbit-cyan/15 active:scale-95 transition-transform shrink-0"
                >
                  <Send className="h-4.5 w-4.5 mr-2" />
                  Request Deployment Protocol
                </button>
              </div>
            </form>
          )}
        </SpotlightCard>
      </div>
    </div>
  );
}