/* Multi-step Funnel + Footer */

function StepDot({ active, done }) {
  return (
    <div className="w-2 h-2 rounded-full transition-all" style={{ background: done ? "var(--accent-blue)" : (active ? "white" : "rgba(255,255,255,0.18)") }} />
  );
}

function ChoiceCard({ icon: Icon, label, selected, onClick, emoji }) {
  return (
    <button
      onClick={onClick}
      className="text-left rounded-2xl p-5 transition-all duration-200"
      style={{
        background: selected ? "rgba(21,185,250,0.10)" : "rgba(255,255,255,0.025)",
        border: selected ? "1px solid var(--accent-blue)" : "1px solid rgba(255,255,255,0.10)",
        boxShadow: selected ? "0 0 0 4px rgba(21,185,250,0.10)" : "none",
      }}
    >
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 rounded-xl flex items-center justify-center text-[20px]" style={{ background: selected ? "rgba(21,185,250,0.18)" : "rgba(255,255,255,0.04)", color: "var(--accent-blue)" }}>
          {emoji || (Icon && <Icon size={18} />)}
        </div>
        <div className="font-semibold text-[15px]">{label}</div>
      </div>
    </button>
  );
}

function Field({ label, value, onChange, type = "text", error, placeholder }) {
  return (
    <label className="block">
      <div className="text-[12.5px] font-semibold text-white/65 mb-1.5">{label}</div>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="w-full px-4 py-3 rounded-xl bg-white/[0.04] border outline-none text-[14.5px] focus:bg-white/[0.06] transition-colors"
        style={{ borderColor: error ? "rgba(239,68,68,0.6)" : "rgba(255,255,255,0.10)" }}
      />
      {error && <div className="text-[11.5px] mt-1" style={{ color: "#fca5a5" }}>{error}</div>}
    </label>
  );
}

/* Calendar logic helpers */
function isSameDay(a, b) {
  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
}
function startOfDay(d) { const x = new Date(d); x.setHours(0,0,0,0); return x; }
function addDays(d, n) { const x = new Date(d); x.setDate(x.getDate() + n); return x; }
function getEarliestSelectable(today) {
  let candidate = addDays(startOfDay(today), 2);
  // Must be Mon–Fri
  while (candidate.getDay() === 0 || candidate.getDay() === 6) {
    candidate = addDays(candidate, 1);
  }
  return candidate;
}
function isDateDisabled(d, today, earliest) {
  const day = d.getDay();
  if (day === 0 || day === 6) return true;
  if (startOfDay(d) < earliest) return true;
  return false;
}

function CustomCalendar({ value, onChange, today }) {
  const [view, setView] = useState(() => {
    const t = startOfDay(today);
    return new Date(t.getFullYear(), t.getMonth(), 1);
  });
  const earliest = useMemo(() => getEarliestSelectable(today), [today]);

  const monthName = view.toLocaleDateString("de-DE", { month: "long", year: "numeric" });

  // Build grid: Monday-first
  const firstDay = new Date(view.getFullYear(), view.getMonth(), 1);
  const lastDay = new Date(view.getFullYear(), view.getMonth() + 1, 0);
  const startWeekday = (firstDay.getDay() + 6) % 7; // Mon=0
  const daysInMonth = lastDay.getDate();
  const cells = [];
  for (let i = 0; i < startWeekday; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(view.getFullYear(), view.getMonth(), d));
  while (cells.length % 7 !== 0) cells.push(null);

  const canPrev = !(view.getFullYear() === today.getFullYear() && view.getMonth() === today.getMonth());

  return (
    <div className="rounded-2xl p-4" style={{ background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.10)" }}>
      <div className="flex items-center justify-between mb-4">
        <button
          onClick={() => canPrev && setView(new Date(view.getFullYear(), view.getMonth() - 1, 1))}
          className="w-9 h-9 rounded-full flex items-center justify-center transition-colors"
          style={{ background: "rgba(255,255,255,0.04)", opacity: canPrev ? 1 : 0.3, cursor: canPrev ? "pointer" : "not-allowed" }}
          disabled={!canPrev}
        ><ChevronLeft size={16} /></button>
        <div className="font-bold text-[15px] capitalize">{monthName}</div>
        <button
          onClick={() => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1))}
          className="w-9 h-9 rounded-full flex items-center justify-center"
          style={{ background: "rgba(255,255,255,0.04)" }}
        ><ChevronRight size={16} /></button>
      </div>
      <div className="grid grid-cols-7 gap-1.5 text-center text-[11px] text-white/40 font-semibold mb-2">
        {["Mo","Di","Mi","Do","Fr","Sa","So"].map(d => <div key={d}>{d}</div>)}
      </div>
      <div className="grid grid-cols-7 gap-1.5">
        {cells.map((d, i) => {
          if (!d) return <div key={i} />;
          const disabled = isDateDisabled(d, today, earliest);
          const selected = value && isSameDay(d, value);
          const isToday = isSameDay(d, today);
          return (
            <button
              key={i}
              disabled={disabled}
              onClick={() => onChange(d)}
              className="aspect-square rounded-lg text-[13px] font-semibold transition-all relative"
              style={{
                background: selected ? "var(--accent-blue)" : (disabled ? "transparent" : "rgba(255,255,255,0.03)"),
                color: selected ? "#000" : (disabled ? "rgba(255,255,255,0.20)" : "rgba(255,255,255,0.90)"),
                border: isToday && !selected ? "1px solid rgba(21,185,250,0.5)" : "1px solid transparent",
                cursor: disabled ? "not-allowed" : "pointer",
              }}
            >
              {d.getDate()}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function TimeSlots({ value, onChange }) {
  const slots = useMemo(() => {
    const out = [];
    for (let h = 9; h <= 18; h++) {
      out.push(`${String(h).padStart(2,"0")}:00`);
      out.push(`${String(h).padStart(2,"0")}:30`);
    }
    return out;
  }, []);
  return (
    <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
      {slots.map((s) => {
        const selected = value === s;
        return (
          <button
            key={s}
            onClick={() => onChange(s)}
            className="px-3 py-2.5 rounded-full text-[13px] font-semibold transition-all"
            style={{
              background: selected ? "var(--accent-blue)" : "rgba(255,255,255,0.04)",
              color: selected ? "#000" : "white",
              border: selected ? "1px solid var(--accent-blue)" : "1px solid rgba(255,255,255,0.10)",
            }}
          >{s}</button>
        );
      })}
    </div>
  );
}

/* TODO: Cal.com / Calendly Embed an dieser Stelle einsetzen — Custom-Kalender bis dahin als UI-Platzhalter */
function Funnel() {
  const today = useMemo(() => new Date(), []);
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    type: "",
    size: "",
    budget: "",
    name: "",
    company: "",
    email: "",
    phone: "",
    date: null,
    time: "",
  });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

  const totalSteps = 6;

  const upd = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const canNext = () => {
    if (step === 1) return !!data.type;
    if (step === 2) return !!data.size;
    if (step === 3) return !!data.budget;
    if (step === 4) {
      const e = {};
      if (!data.name.trim()) e.name = "Bitte angeben";
      if (!data.company.trim()) e.company = "Bitte angeben";
      if (!data.email.trim() || !/^\S+@\S+\.\S+$/.test(data.email)) e.email = "Gültige E-Mail bitte";
      if (!data.phone.trim() || data.phone.replace(/\D/g, "").length < 6) e.phone = "Gültige Nummer bitte";
      return Object.keys(e).length === 0;
    }
    if (step === 5) return !!data.date && !!data.time;
    return true;
  };

  const next = () => {
    if (step === 4 && !canNext()) {
      const e = {};
      if (!data.name.trim()) e.name = "Bitte angeben";
      if (!data.company.trim()) e.company = "Bitte angeben";
      if (!data.email.trim() || !/^\S+@\S+\.\S+$/.test(data.email)) e.email = "Gültige E-Mail bitte";
      if (!data.phone.trim() || data.phone.replace(/\D/g, "").length < 6) e.phone = "Gültige Nummer bitte";
      setErrors(e);
      return;
    }
    setErrors({});
    setStep((s) => Math.min(totalSteps, s + 1));
  };
  const prev = () => setStep((s) => Math.max(1, s - 1));

  const submit = () => setSubmitted(true);

  const ref = useReveal();
  const progress = ((step - 1) / (totalSteps - 1)) * 100;

  return (
    <section id="kontakt" ref={ref} className="reveal relative py-24 sm:py-32">
      <div className="absolute left-1/2 top-1/3 -translate-x-1/2 w-[600px] h-[600px] rounded-full pointer-events-none" style={{ background: "radial-gradient(closest-side, rgba(21,185,250,0.12), rgba(21,185,250,0))", filter: "blur(40px)" }} />
      <div className="relative max-w-[1100px] mx-auto px-5">
        <div className="text-center mb-10">
          <div className="text-[12.5px] uppercase tracking-[0.18em] text-white/40 font-semibold">Erstgespräch</div>
          <h2 className="mt-3 h-tight text-[40px] sm:text-[56px]">In 6 Schritten zum Termin.</h2>
          <p className="mt-4 text-white/65 text-[16.5px] max-w-xl mx-auto">Kein Sales-Pitch. Wir hören zu, bauen einen klaren Fahrplan und Sie entscheiden.</p>
        </div>

        <div className="glass-strong rounded-3xl p-6 sm:p-10 max-w-[720px] mx-auto" style={{ boxShadow: "0 30px 80px -20px rgba(0,0,0,0.7)" }}>
          {!submitted ? (
            <>
              {/* Progress */}
              <div className="flex items-center justify-between mb-2">
                <div className="text-[12.5px] font-semibold text-white/60">Schritt {step} von {totalSteps}</div>
                <div className="flex gap-1.5">
                  {Array.from({ length: totalSteps }).map((_, i) => (
                    <StepDot key={i} active={i + 1 === step} done={i + 1 < step} />
                  ))}
                </div>
              </div>
              <div className="h-1 rounded-full overflow-hidden mb-8" style={{ background: "rgba(255,255,255,0.06)" }}>
                <div className="h-full transition-all duration-500 rounded-full" style={{ width: `${progress}%`, background: "var(--accent-blue)" }} />
              </div>

              {/* Steps */}
              {step === 1 && (
                <div>
                  <h3 className="text-[24px] font-extrabold tracking-tight">Was möchten Sie umsetzen?</h3>
                  <p className="mt-2 text-white/60 text-[14.5px]">Wählen Sie das Hauptprojekt — Mehrfaches geht später.</p>
                  <div className="mt-6 grid sm:grid-cols-3 gap-3">
                    <ChoiceCard emoji="🌐" label="Webseite" selected={data.type === "Webseite"} onClick={() => upd("type", "Webseite")} />
                    <ChoiceCard emoji="⚙️" label="Individuelle Software" selected={data.type === "Software"} onClick={() => upd("type", "Software")} />
                    <ChoiceCard emoji="🎯" label="Funnel-System" selected={data.type === "Funnel-System"} onClick={() => upd("type", "Funnel-System")} />
                  </div>
                </div>
              )}

              {step === 2 && (
                <div>
                  <h3 className="text-[24px] font-extrabold tracking-tight">Wie groß ist Ihr Unternehmen?</h3>
                  <p className="mt-2 text-white/60 text-[14.5px]">So können wir den Umfang einschätzen.</p>
                  <div className="mt-6 grid sm:grid-cols-2 gap-3">
                    {["Solo / Einzelunternehmer", "2–10 Mitarbeiter", "11–50 Mitarbeiter", "50+ Mitarbeiter"].map((opt) => (
                      <ChoiceCard key={opt} emoji="" label={opt} selected={data.size === opt} onClick={() => upd("size", opt)} />
                    ))}
                  </div>
                </div>
              )}

              {step === 3 && (
                <div>
                  <h3 className="text-[24px] font-extrabold tracking-tight">Ihr Budget?</h3>
                  <p className="mt-2 text-white/60 text-[14.5px]">Für eine erste Orientierung — kein Festpreis.</p>
                  <div className="mt-6 grid gap-3">
                    {[
                      ["149–299 € / Monat", "Starter / Standard"],
                      ["299–599 € / Monat", "Standard / Growth"],
                      ["599 € + / Monat", "Growth oder individuelle Lösung"],
                    ].map(([opt, sub]) => {
                      const selected = data.budget === opt;
                      return (
                        <button key={opt} onClick={() => upd("budget", opt)} className="text-left rounded-2xl p-5 transition-all"
                          style={{ background: selected ? "rgba(21,185,250,0.10)" : "rgba(255,255,255,0.025)", border: selected ? "1px solid var(--accent-blue)" : "1px solid rgba(255,255,255,0.10)", boxShadow: selected ? "0 0 0 4px rgba(21,185,250,0.10)" : "none" }}>
                          <div className="font-bold text-[16px]">{opt}</div>
                          <div className="text-[13px] text-white/55 mt-0.5">{sub}</div>
                        </button>
                      );
                    })}
                  </div>
                </div>
              )}

              {step === 4 && (
                <div>
                  <h3 className="text-[24px] font-extrabold tracking-tight">Kontaktdaten</h3>
                  <p className="mt-2 text-white/60 text-[14.5px]">Damit wir den Termin bestätigen können.</p>
                  <div className="mt-6 grid sm:grid-cols-2 gap-4">
                    <Field label="Name *" value={data.name} onChange={(v) => upd("name", v)} placeholder="Max Mustermann" error={errors.name} />
                    <Field label="Firma *" value={data.company} onChange={(v) => upd("company", v)} placeholder="Mustermann GmbH" error={errors.company} />
                    <Field label="E-Mail *" type="email" value={data.email} onChange={(v) => upd("email", v)} placeholder="max@firma.de" error={errors.email} />
                    <Field label="Telefonnummer *" type="tel" value={data.phone} onChange={(v) => upd("phone", v)} placeholder="+49 1512 9683401" error={errors.phone} />
                  </div>
                </div>
              )}

              {step === 5 && (
                <div>
                  <h3 className="text-[24px] font-extrabold tracking-tight">Termin auswählen</h3>
                  <p className="mt-2 text-white/60 text-[14.5px]">Mo–Fr, 9:00–18:30 Uhr. Frühestens in 2 Werktagen.</p>
                  <div className="mt-6 grid lg:grid-cols-2 gap-5">
                    <CustomCalendar value={data.date} onChange={(d) => upd("date", d)} today={today} />
                    <div>
                      {data.date ? (
                        <>
                          <div className="text-[13px] font-semibold text-white/70 mb-3">
                            Verfügbare Zeiten am {data.date.toLocaleDateString("de-DE", { weekday: "long", day: "2-digit", month: "long" })}
                          </div>
                          <TimeSlots value={data.time} onChange={(t) => upd("time", t)} />
                        </>
                      ) : (
                        <div className="rounded-2xl p-6 text-center text-white/50 text-[13.5px] h-full flex flex-col items-center justify-center" style={{ background: "rgba(255,255,255,0.02)", border: "1px dashed rgba(255,255,255,0.10)" }}>
                          <Clock size={20} className="mb-2 opacity-60" />
                          Wählen Sie zuerst ein Datum, um die verfügbaren Zeiten zu sehen.
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {step === 6 && (
                <div>
                  <h3 className="text-[24px] font-extrabold tracking-tight">Alles passt?</h3>
                  <p className="mt-2 text-white/60 text-[14.5px]">Hier die Übersicht Ihrer Anfrage.</p>
                  <div className="mt-6 rounded-2xl p-5 space-y-3 text-[14px]" style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)" }}>
                    {[
                      ["Projekt", data.type],
                      ["Unternehmensgröße", data.size],
                      ["Budget", data.budget],
                      ["Name", data.name],
                      ["Firma", data.company],
                      ["E-Mail", data.email],
                      ["Telefon", data.phone],
                      ["Termin", data.date ? `${data.date.toLocaleDateString("de-DE", { weekday: "long", day: "2-digit", month: "long", year: "numeric" })} um ${data.time}` : ""],
                    ].map(([k, v], i) => (
                      <div key={i} className="flex justify-between gap-4 pb-2.5 border-b border-white/[0.06] last:border-0 last:pb-0">
                        <div className="text-white/50">{k}</div>
                        <div className="font-semibold text-right">{v}</div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Nav */}
              <div className="mt-8 flex items-center justify-between">
                <button onClick={prev} disabled={step === 1} className="text-[14px] font-semibold text-white/55 hover:text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1.5">
                  <ArrowLeft size={14} /> Zurück
                </button>
                {step < totalSteps ? (
                  <button
                    onClick={next}
                    disabled={!canNext()}
                    className="btn-shine inline-flex items-center justify-center gap-2 px-6 py-3 rounded-full font-semibold text-[14.5px] text-black transition-all disabled:opacity-40 disabled:cursor-not-allowed"
                    style={{ background: "var(--accent-blue)", boxShadow: canNext() ? "0 10px 30px -10px rgba(21,185,250,0.55)" : "none" }}
                  >
                    Weiter <ArrowRight size={14} />
                  </button>
                ) : (
                  <button
                    onClick={submit}
                    className="btn-shine inline-flex items-center justify-center gap-2 px-6 py-3 rounded-full font-semibold text-[14.5px] text-black"
                    style={{ background: "var(--accent-blue)", boxShadow: "0 10px 30px -10px rgba(21,185,250,0.55)" }}
                  >
                    Termin verbindlich anfragen <ArrowRight size={14} />
                  </button>
                )}
              </div>
            </>
          ) : (
            <div className="text-center py-12">
              <div className="w-16 h-16 mx-auto rounded-full flex items-center justify-center" style={{ background: "rgba(21,185,250,0.15)", color: "var(--accent-blue)", border: "1px solid rgba(21,185,250,0.40)" }}>
                <CheckCircle2 size={32} />
              </div>
              <h3 className="mt-6 h-tight text-[32px]">Vielen Dank!</h3>
              <p className="mt-3 text-white/65 max-w-md mx-auto">Wir melden uns innerhalb von 24h bei Ihnen mit der Terminbestätigung.</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */

function Footer() {
  return (
    <footer className="relative pt-20 pb-10 border-t" style={{ borderColor: "var(--border-subtle)" }}>
      <div className="max-w-[1200px] mx-auto px-5">
        <div className="grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-4">
            <img src="logo-transparent.png" alt="Scality Solutions" className="h-8 w-auto"  />
            <p className="mt-4 text-white/60 text-[14.5px] max-w-xs leading-relaxed">Digitalisierung, die einfach passt.</p>
            <div className="mt-5 text-[13.5px] text-white/55 leading-relaxed">
              Gutenbergstr. 26<br/>41564 Kaarst
            </div>
            <div className="mt-5 flex items-center gap-2">
              {[
                [Linkedin, "LinkedIn"],
                [Instagram, "Instagram"],
                [Facebook, "Facebook"],
              ].map(([Icon, label], i) => (
                <a key={i} href="#" aria-label={label} className="w-9 h-9 rounded-full flex items-center justify-center transition-colors" style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}>
                  <Icon size={15} className="text-white/75" />
                </a>
              ))}
            </div>
          </div>
          <div className="lg:col-span-2">
            <div className="text-[12px] uppercase tracking-[0.18em] text-white/40 font-semibold mb-4">Seiten</div>
            <ul className="space-y-2.5 text-[14px]">
              {["Home","Über uns","Leistungen","Projekte","Intraware","Preise"].map((l) => (
                <li key={l}><a href="#" className="text-white/70 hover:text-white transition-colors">{l}</a></li>
              ))}
            </ul>
          </div>
          <div className="lg:col-span-2">
            <div className="text-[12px] uppercase tracking-[0.18em] text-white/40 font-semibold mb-4">Rechtliches</div>
            <ul className="space-y-2.5 text-[14px]">
              {["Impressum","Datenschutz","AGB"].map((l) => (
                <li key={l}><a href="#" className="text-white/70 hover:text-white transition-colors">{l}</a></li>
              ))}
            </ul>
          </div>
          <div className="lg:col-span-4">
            <div className="text-[12px] uppercase tracking-[0.18em] text-white/40 font-semibold mb-4">Kontakt</div>
            <ul className="space-y-3 text-[14px]">
              <li><a href="mailto:info@scality-solutions.de" className="flex items-center gap-2.5 text-white/80 hover:text-white transition-colors"><Mail size={14} style={{ color: "var(--accent-blue)" }} /> info@scality-solutions.de</a></li>
              <li><a href="tel:+4915129683401" className="flex items-center gap-2.5 text-white/80 hover:text-white transition-colors"><Phone size={14} style={{ color: "var(--accent-blue)" }} /> +49 1512 9683401</a></li>
              <li>
                <a href="/Scality_UG_Preise_Pakete.pdf" className="inline-flex items-center gap-2.5 px-4 py-2.5 mt-2 rounded-full text-[13.5px] font-semibold transition-colors" style={{ background: "rgba(21,185,250,0.10)", border: "1px solid rgba(21,185,250,0.30)", color: "var(--accent-blue)" }}>
                  <FileText size={14} /> Preisliste als PDF herunterladen
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="mt-14 pt-6 border-t flex flex-col sm:flex-row items-center justify-between gap-3 text-[12.5px] text-white/40" style={{ borderColor: "var(--border-subtle)" }}>
          <div>© 2026 Scality Solutions. Alle Rechte vorbehalten.</div>
          <div>Made in Kaarst, NRW.</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Funnel, Footer });