mintel.me/apps/web/src/components/ContactForm/ContactGateway.tsx

"use client";

import { cn } from "../../utils/cn";
import { Reveal } from "../Reveal";
import { MessageSquareText, Settings2, ArrowRight } from "lucide-react";
import { ProjectType } from "./types";

interface ContactGatewayProps {
  name: string;
  setName: (val: string) => void;
  company: string;
  setCompany: (val: string) => void;
  projectType: ProjectType;
  setProjectType: (val: ProjectType) => void;
  onChooseConfigurator: () => void;
  onChooseDirectMessage: () => void;
}

const AutoInput = ({
  value,
  onChange,
  placeholder,
  autoFocus,
}: {
  value: string;
  onChange: (val: string) => void;
  placeholder: string;
  autoFocus?: boolean;
}) => {
  return (
    <div className="inline-grid items-center relative group mx-1">
      <span className="col-start-1 row-start-1 opacity-0 pointer-events-none whitespace-pre border-b-2 border-transparent px-2 py-1 text-2xl md:text-5xl font-bold tracking-tight min-w-[140px]">
        {value || placeholder}
      </span>
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        autoFocus={autoFocus}
        className={cn(
          "col-start-1 row-start-1 w-full h-full bg-transparent focus:outline-none px-2 py-1",
          "text-2xl md:text-5xl font-bold tracking-tight transition-all duration-300",
          "border-b-2",
          value
            ? "text-slate-900 border-slate-900"
            : "text-slate-300 border-slate-100 placeholder:text-slate-200 focus:border-green-500 focus:placeholder:text-slate-300",
        )}
      />
    </div>
  );
};

export const ContactGateway = ({
  name,
  setName,
  company,
  setCompany,
  onChooseConfigurator,
  onChooseDirectMessage,
}: ContactGatewayProps) => {
  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] text-left w-full px-4 max-w-5xl mx-auto space-y-24">
      {/* Identity Section */}
      <Reveal width="100%" delay={0.1}>
        <div className="space-y-4">
          <span className="text-[10px] font-mono text-green-600 uppercase tracking-[0.3em] font-bold">
            IDENTIFIKATION // SCHRITT_00
          </span>
          <div className="flex flex-wrap items-baseline gap-y-6 text-slate-900">
            <span className="text-2xl md:text-5xl font-medium text-slate-400">
              Hi, ich bin
            </span>
            <AutoInput value={name} onChange={setName} placeholder="Ihr Name" />
            <span className="text-2xl md:text-5xl font-medium text-slate-400">
              von
            </span>
            <AutoInput
              value={company}
              onChange={setCompany}
              placeholder="Firma / Projekt"
            />
          </div>
        </div>
      </Reveal>

      {/* Path Selection */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
        {/* Configurator Path */}
        <Reveal width="100%" delay={0.3} direction="up">
          <div className="relative group p-[1px] rounded-3xl overflow-hidden transition-all duration-500">
            {/* Disabled Overlay Background */}
            <div className="absolute inset-0 bg-gradient-to-br from-slate-200 to-slate-100 dark:from-slate-800 dark:to-slate-900 opacity-50" />

            <button
              disabled
              className={cn(
                "w-full h-full relative flex flex-col items-start p-8 rounded-[23px] border text-left bg-slate-50 border-slate-100 text-slate-400 cursor-not-allowed",
              )}
            >
              <div className="absolute top-0 right-0 p-8 opacity-5">
                <Settings2 size={120} />
              </div>

              <div className="flex items-center gap-3 mb-6">
                <Settings2 size={24} className="text-slate-300" />
                <span className="px-2 py-0.5 rounded-full bg-slate-200 text-[8px] font-bold uppercase tracking-wider text-slate-500">
                  Wartungsmodus
                </span>
              </div>

              <h3 className="text-2xl font-bold mb-2 tracking-tight opacity-50">
                System-Konfigurator
              </h3>
              <p className="text-sm text-slate-400 font-medium mb-8 max-w-[280px] opacity-70">
                Dieser Modus wird aktuell optimiert und steht in Kürze wieder
                zur Verfügung.
              </p>

              <div className="mt-auto flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest font-bold opacity-30">
                <span>Konfigurator offline</span>
              </div>
            </button>
          </div>
        </Reveal>

        {/* Direct Mail Path */}
        <Reveal width="100%" delay={0.4} direction="up">
          <button
            onClick={onChooseDirectMessage}
            disabled={!name}
            className={cn(
              "group relative flex flex-col items-start p-8 rounded-3xl border text-left transition-all duration-500 overflow-hidden",
              name
                ? "bg-white border-slate-200 text-slate-900 hover:-translate-y-2 hover:border-slate-400 hover:shadow-xl"
                : "bg-slate-50 border-slate-100 text-slate-400 cursor-not-allowed opacity-60",
            )}
          >
            <MessageSquareText
              size={24}
              className={cn(
                "mb-6 transition-colors",
                name ? "text-slate-900" : "text-slate-300",
              )}
            />
            <h3 className="text-2xl font-bold mb-2 tracking-tight">
              Direktnachricht
            </h3>
            <p
              className={cn(
                "text-sm font-medium mb-8 max-w-[280px]",
                name ? "text-slate-500" : "text-slate-400",
              )}
            >
              Kurze Frage oder spezifisches Anliegen? Senden Sie mir direkt
              Informationen.
            </p>

            <div
              className={cn(
                "mt-auto flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest font-bold transition-colors",
                name
                  ? "text-slate-400 group-hover:text-slate-900"
                  : "text-slate-300",
              )}
            >
              <span>Formular öffnen</span>
              <ArrowRight
                size={14}
                className="group-hover:translate-x-1 transition-transform"
              />
            </div>

            {!name && (
              <div className="absolute inset-0 bg-slate-50/60 backdrop-blur-[6px] z-20" />
            )}
          </button>
        </Reveal>
      </div>
    </div>
  );
};