"use client";

import { motion } from "framer-motion";
import { Mail, Calendar, MessageSquare, Rocket } from "lucide-react";
import { cn } from "../../../utils/cn";
import { Reveal } from "../../Reveal";

interface LaunchpadProps {
  email: string;
  setEmail: (val: string) => void;
  timeline: string;
  setTimeline: (val: string) => void;
  message: string;
  setMessage: (val: string) => void;
  onSubmit: () => void;
  isValid: boolean;
}

export const Launchpad = ({
  email,
  setEmail,
  timeline,
  setTimeline,
  message,
  setMessage,
  onSubmit,
  isValid,
}: LaunchpadProps) => {
  return (
    <div className="w-full max-w-3xl mx-auto space-y-12 pb-12">
      <Reveal width="100%" delay={0.1}>
        <div className="text-center space-y-4">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 text-[10px] font-bold uppercase tracking-widest text-slate-500 mb-2">
            <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
            System bereit
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tight">
            Launch-Sequenz initialisieren
          </h2>
          <p className="text-slate-500 text-lg max-w-xl mx-auto leading-relaxed">
            Bitte bestätigen Sie die finalen Parameter, um den Prozess zu
            starten.
          </p>
        </div>
      </Reveal>

      <Reveal width="100%" delay={0.2}>
        <div className="space-y-8 bg-white p-8 md:p-10 rounded-3xl border border-slate-100 shadow-xl shadow-slate-200/50">
          {/* Email Input */}
          <div className="space-y-3">
            <label className="text-xs font-bold font-mono text-slate-900 uppercase tracking-wider flex items-center gap-2">
              <Mail size={14} className="text-slate-400" /> Kommunikations-Kanal
            </label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="name@firma.de"
              className="w-full bg-slate-50 border border-slate-200 rounded-xl p-5 text-slate-900 text-lg font-medium focus:border-green-500 focus:ring-4 focus:ring-green-500/10 focus:outline-none transition-all placeholder:text-slate-400"
            />
          </div>

          {/* Timeline Selection */}
          <div className="space-y-3">
            <label className="text-xs font-bold font-mono text-slate-900 uppercase tracking-wider flex items-center gap-2">
              <Calendar size={14} className="text-slate-400" /> Zeitfenster
            </label>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              {[
                { id: "asap", label: "ASAP", sub: "Sofort" },
                { id: "1month", label: "< 1 Monat", sub: "Priorität" },
                { id: "3months", label: "1-3 Monate", sub: "Standard" },
                { id: "flexible", label: "Flexibel", sub: "Kein Stress" },
              ].map((t) => (
                <button
                  key={t.id}
                  onClick={() => setTimeline(t.id)}
                  className={cn(
                    "flex flex-col items-center justify-center p-4 rounded-xl border text-sm transition-all duration-200",
                    timeline === t.id
                      ? "bg-slate-900 text-white border-slate-900 shadow-lg scale-[1.02]"
                      : "bg-white border-slate-200 text-slate-500 hover:border-slate-300 hover:bg-slate-50",
                  )}
                >
                  <span className="font-bold">{t.label}</span>
                  <span
                    className={cn(
                      "text-[10px] uppercase tracking-wide mt-1",
                      timeline === t.id ? "text-slate-400" : "text-slate-400",
                    )}
                  >
                    {t.sub}
                  </span>
                </button>
              ))}
            </div>
          </div>

          {/* Message Input */}
          <div className="space-y-3">
            <label className="text-xs font-bold font-mono text-slate-900 uppercase tracking-wider flex items-center gap-2">
              <MessageSquare size={14} className="text-slate-400" />{" "}
              Transmission Payload (Optional)
            </label>
            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Spezielle Anforderungen, Briefing-Links oder Fragen..."
              className="w-full bg-slate-50 border border-slate-200 rounded-xl p-5 text-slate-900 font-medium min-h-[140px] focus:border-slate-400 focus:outline-none transition-all placeholder:text-slate-400 resize-none"
            />
          </div>
        </div>
      </Reveal>

      <Reveal width="100%" delay={0.3}>
        <div className="flex flex-col items-center gap-6">
          <motion.button
            whileHover={{
              scale: 1.02,
              boxShadow: "0 20px 40px -10px rgba(0,0,0,0.2)",
            }}
            whileTap={{ scale: 0.98 }}
            onClick={onSubmit}
            disabled={!isValid}
            className="relative group w-full md:w-auto min-w-[300px] px-8 py-5 bg-slate-900 text-white text-lg font-bold font-mono tracking-widest rounded-xl overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed shadow-xl transition-all"
          >
            <span className="relative z-10 flex items-center justify-center gap-3">
              ANFRAGE SENDEN{" "}
              <Rocket
                size={20}
                className="group-hover:translate-x-1 transition-transform"
              />
            </span>
            <div className="absolute inset-0 bg-gradient-to-r from-green-600 to-green-500 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 z-0" />
          </motion.button>

          <p className="text-xs text-slate-400 font-medium flex items-center gap-1.5">
            <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
            Sichere 256-Bit verschlüsselte Übertragung
          </p>
        </div>
      </Reveal>
    </div>
  );
};
