"use client";
import React, { useState } from "react";
import { SpotlightCard } from "@/components/SpotlightCard";
import { Cpu, Send, Calendar } from "lucide-react";

export default function DemoPage() {
  const [form, setForm] = useState({ name: "", email: "", company: "", date: "" });
  const [done, setDone] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setDone(true);
    setTimeout(() => {
      setDone(false);
      setForm({ name: "", email: "", company: "", date: "" });
    }, 2500);
  };

  return (
    <div className="relative min-h-screen pt-24 pb-16 overflow-hidden flex items-center justify-center bg-orbit-bg-deep">
      <div className="pointer-events-none absolute inset-0 orbit-grid-mesh opacity-80" />
      
      <div className="relative w-full max-w-lg px-4 z-10">
        <SpotlightCard className="rounded-3xl p-8">
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="flex flex-col items-center text-center space-y-2 mb-6">
              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-orbit-cyan to-orbit-purple p-[1px]">
                <div className="flex h-full w-full items-center justify-center rounded-2xl bg-orbit-bg-deep">
                  <Calendar className="h-6 w-6 text-orbit-cyan" />
                </div>
              </div>
              <div>
                <h1 className="text-xl font-bold text-slate-900 dark:text-white font-mono tracking-widest">BOOK A LIVE SYSTEM DEMO</h1>
                <p className="text-[10px] text-slate-500 font-mono mt-1">SCHEDULE A DYNAMIC NOC DASHBOARD TELEMETRY TOUR</p>
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="font-mono text-[9px] font-bold text-slate-500 uppercase tracking-wider">Full Name</label>
              <input
                type="text" required
                value={form.name}
                onChange={(e) => setForm({...form, name: e.target.value})}
                placeholder="E.g. Kamel Mezri"
                className="w-full rounded-xl border border-orbit-border bg-orbit-bg-deep px-4 py-2.5 text-xs font-mono text-slate-800 dark:text-slate-200 outline-none focus:border-orbit-cyan"
              />
            </div>

            <div className="space-y-1.5">
              <label className="font-mono text-[9px] font-bold text-slate-500 uppercase tracking-wider">Corporate Email</label>
              <input
                type="email" required
                value={form.email}
                onChange={(e) => setForm({...form, email: e.target.value})}
                placeholder="k.mezri@sfbt.com.tn"
                className="w-full rounded-xl border border-orbit-border bg-orbit-bg-deep px-4 py-2.5 text-xs font-mono text-slate-800 dark:text-slate-200 outline-none focus:border-orbit-cyan"
              />
            </div>

            <div className="space-y-1.5">
              <label className="font-mono text-[9px] font-bold text-slate-500 uppercase tracking-wider">Company Name</label>
              <input
                type="text" required
                value={form.company}
                onChange={(e) => setForm({...form, company: e.target.value})}
                placeholder="SFBT Tunisia"
                className="w-full rounded-xl border border-orbit-border bg-orbit-bg-deep px-4 py-2.5 text-xs font-mono text-slate-800 dark:text-slate-200 outline-none focus:border-orbit-cyan"
              />
            </div>

            <div className="space-y-1.5">
              <label className="font-mono text-[9px] font-bold text-slate-500 uppercase tracking-wider">Preferred Date</label>
              <input
                type="date" required
                value={form.date}
                onChange={(e) => setForm({...form, date: e.target.value})}
                className="w-full rounded-xl border border-orbit-border bg-orbit-bg-deep px-4 py-2.5 text-xs font-mono text-slate-600 dark:text-slate-400 outline-none focus:border-orbit-cyan"
              />
            </div>

            <button
              type="submit"
              className="w-full h-11 rounded-full bg-gradient-to-r from-orbit-cyan to-orbit-purple text-xs font-bold font-mono text-white flex items-center justify-center gap-2 active:scale-95 transition-transform mt-6"
            >
              {done ? "DEMO_BOOKING_EMITTED" : (
                <>
                  <span>CONFIRM APPOINTMENT</span>
                  <Send className="h-3.5 w-3.5" />
                </>
              )}
            </button>
          </form>
        </SpotlightCard>
      </div>
    </div>
  );
}