mintel.me/apps/web/src/components/ContactForm/steps/TimelineStep.tsx

"use client";

import * as React from "react";
import { FormState } from "../types";
import { AlertCircle } from "lucide-react";

interface TimelineStepProps {
  state: FormState;
  updateState: (_updates: Partial<FormState>) => void;
}

export function TimelineStep({ state, updateState }: TimelineStepProps) {
  const isMissingAssets =
    !state.assets.includes("logo") || !state.assets.includes("content_concept");
  const isMissingPages =
    state.selectedPages.length === 0 &&
    state.otherPages.length === 0 &&
    state.otherPagesCount === 0;

  const toggleDontKnow = (id: string) => {
    const current = state.dontKnows || [];
    if (current.includes(id)) {
      updateState({ dontKnows: current.filter((i) => i !== id) });
    } else {
      updateState({ dontKnows: [...current, id] });
    }
  };

  return (
    <div className="space-y-12">
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <h4 className="text-lg font-bold text-slate-900">Zeitplan</h4>
          <button
            type="button"
            onClick={() => toggleDontKnow("timeline")}
            className={`px-4 py-2 rounded-full text-sm font-bold transition-all whitespace-nowrap shrink-0 ${
              state.dontKnows?.includes("timeline")
                ? "bg-slate-900 text-white"
                : "bg-slate-100 text-slate-500 hover:bg-slate-200"
            }`}
          >
            Ich weiß es nicht
          </button>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {[
            {
              id: "asap",
              label: "So schnell wie möglich",
              desc: "Priorisierter Start gewünscht.",
            },
            {
              id: "2-3-months",
              label: "In 2-3 Monaten",
              desc: "Normaler Projektvorlauf.",
            },
            {
              id: "3-6-months",
              label: "In 3-6 Monaten",
              desc: "Langfristige Planung.",
            },
            {
              id: "flexible",
              label: "Flexibel",
              desc: "Kein fester Termindruck.",
            },
          ].map((opt) => (
            <button
              key={opt.id}
              type="button"
              onClick={() => updateState({ deadline: opt.id })}
              className={`p-10 rounded-[2.5rem] border-2 text-left transition-all focus:outline-none overflow-hidden relative ${
                state.deadline === opt.id
                  ? "border-slate-900 bg-slate-900 text-white"
                  : "border-slate-100 bg-white hover:border-slate-200"
              }`}
            >
              <h4
                className={`text-2xl font-bold mb-2 ${state.deadline === opt.id ? "text-white" : "text-slate-900"}`}
              >
                {opt.label}
              </h4>
              <p
                className={`text-lg ${state.deadline === opt.id ? "text-slate-200" : "text-slate-500"}`}
              >
                {opt.desc}
              </p>
            </button>
          ))}
        </div>
      </div>
      {state.deadline === "asap" && (
        <div className="p-8 bg-slate-50 rounded-xl border border-slate-100 flex gap-6 items-start">
          <AlertCircle className="text-slate-900 shrink-0 mt-1" size={28} />
          <p className="text-base text-slate-600 leading-relaxed">
            <strong>Hinweis:</strong> Bei sehr kurzfristigen Deadlines kann ein
            Express-Zuschlag anfallen, um die Kapazitäten entsprechend zu
            priorisieren.
          </p>
        </div>
      )}

      {(isMissingAssets || isMissingPages) && (
        <div className="p-8 bg-amber-50 rounded-xl border border-amber-100 flex gap-6 items-start">
          <div className="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-amber-600 shrink-0">
            <AlertCircle size={16} />
          </div>
          <div className="space-y-2">
            <p className="text-amber-900 text-xl font-bold">
              Mögliche Verzögerungen
            </p>
            <p className="text-amber-800 text-base leading-relaxed">
              Für einen reibungslosen Projektstart benötigen wir noch einige
              Details (z.B. {isMissingAssets ? "Logo/Inhaltskonzept" : ""}{" "}
              {isMissingAssets && isMissingPages ? "und" : ""}{" "}
              {isMissingPages ? "Seitenstruktur" : ""}). Ohne diese kann sich
              der Beginn verzögern.
            </p>
          </div>
        </div>
      )}
    </div>
  );
}