import React, { useState } from "react";

export default function HeavenlyHomepage() {
  const [step, setStep] = useState("code");
  const [code, setCode] = useState("");
  const [email, setEmail] = useState("");
  const [checked, setChecked] = useState(false);
  const [error, setError] = useState("");
  const [submitted, setSubmitted] = useState(false);

  // Invitation code
  const invitationCode = "43283659733";
  const backgroundColor = "#9B2C3A";

  // Stap 1: Code valideren
  const handleCodeSubmit = (e) => {
    e.preventDefault();
    if (code === invitationCode) {
      setStep("email");
      setError("");
    } else {
      setError("Ongeldige code. Probeer opnieuw.");
    }
  };

  // Stap 2: E-mail en voorwaarden - versturen naar concierge@heavenly.red
  const handleEmailSubmit = async (e) => {
    e.preventDefault();
    if (!email || !checked) {
      setError("Vul je e-mailadres in en vink de voorwaarden aan.");
      return;
    }
    setError("");
    try {
      // Simulatie e-mail versturen (in productie via backend/mail API)
      await fetch("mailto:concierge@heavenly.red", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      setSubmitted(true);
    } catch {
      setError("Er ging iets mis met versturen. Probeer opnieuw.");
    }
  };

  return (
    <div
      className="min-h-screen flex flex-col justify-between items-center"
      style={{
        background: backgroundColor,
        fontFamily: "Lato, sans-serif",
        minHeight: "100vh",
        height: "100vh",
        overflow: "hidden",
      }}
    >
      <div className="flex-grow flex flex-col items-center justify-center">
        <img
          src="/heavenly-logo.svg"
          alt="HEAVENLY logo"
          style={{
            width: "110px",
            opacity: 0.89,
            marginBottom: "24px",
          }}
        />
        <h1
          style={{
            fontFamily: "Playfair Display, serif",
            fontSize: "2.1rem",
            letterSpacing: "0.08em",
            color: "#1a1a1a",
            marginBottom: 8,
            fontWeight: 600,
            textAlign: "center",
          }}
        >
          HEAVENLY
        </h1>
        <div
          style={{
            fontFamily: "Lato, sans-serif",
            fontSize: "1.1rem",
            color: "#1a1a1a",
            letterSpacing: "0.05em",
            marginBottom: "40px",
            textAlign: "center",
          }}
        >
          Embrace Every Moment
        </div>
        {submitted ? (
          <div
            style={{
              color: "#1a1a1a",
              fontWeight: 600,
              fontSize: "1.11rem",
              textAlign: "center",
              marginTop: 20,
            }}
          >
            Dank voor je aanmelding.<br />Je ontvangt spoedig een persoonlijk bericht van onze conciërge.
          </div>
        ) : (
          <form
            onSubmit={step === "code" ? handleCodeSubmit : handleEmailSubmit}
            className="flex flex-col items-center"
            style={{ minWidth: 320, maxWidth: 360 }}
          >
            {step === "code" && (
              <>
                <input
                  type="text"
                  placeholder="Invitation code"
                  value={code}
                  onChange={(e) => setCode(e.target.value)}
                  className="mb-4 p-3 w-full rounded-xl bg-transparent border border-black text-center placeholder:text-neutral-700 focus:outline-none focus:ring-2 focus:ring-black transition"
                  style={{
                    background: "rgba(255,255,255,0.06)",
                    color: "#1a1a1a",
                    fontSize: "1.05rem",
                    fontWeight: 500,
                    letterSpacing: "0.05em",
                  }}
                  autoFocus
                  autoComplete="off"
                  maxLength={16}
                />
                <button
                  type="submit"
                  className="rounded-xl px-8 py-3 bg-black text-white font-medium transition hover:bg-neutral-900"
                  style={{ marginTop: 4 }}
                >
                  Enter
                </button>
              </>
            )}
            {step === "email" && (
              <>
                <input
                  type="email"
                  placeholder="E-mail"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="mb-4 p-3 w-full rounded-xl bg-transparent border border-black text-center placeholder:text-neutral-700 focus:outline-none focus:ring-2 focus:ring-black transition"
                  style={{
                    background: "rgba(255,255,255,0.08)",
                    color: "#1a1a1a",
                    fontSize: "1.05rem",
                    fontWeight: 500,
                  }}
                  autoFocus
                  autoComplete="off"
                />
                <label
                  className="mb-4 flex items-center gap-2"
                  style={{ fontSize: "0.96rem", color: "#1a1a1a" }}
                >
                  <input
                    type="checkbox"
                    checked={checked}
                    onChange={() => setChecked(!checked)}
                    className="accent-black"
                    required
                  />
                  <span>
                    Ik accepteer de{" "}
                    <a
                      href="/voorwaarden"
                      target="_blank"
                      rel="noopener noreferrer"
                      style={{ textDecoration: "underline" }}
                    >
                      algemene reisvoorwaarden
                    </a>
                    .
                  </span>
                </label>
                <button
                  type="submit"
                  className="rounded-xl px-8 py-3 bg-black text-white font-medium transition hover:bg-neutral-900"
                >
                  Aanmelden
                </button>
              </>
            )}
            {error && (
              <div
                style={{
                  color: "#a71e34",
                  fontWeight: 500,
                  marginTop: 18,
                  fontSize: "0.98rem",
                  textAlign: "center",
                }}
              >
                {error}
              </div>
            )}
          </form>
        )}
      </div>

      {/* Footer - wettelijk verplichte info */}
      <footer
        className="w-full px-4 py-4 flex flex-col items-center justify-center"
        style={{
          fontSize: "0.88rem",
          color: "#222",
          background: "rgba(255,255,255,0.08)",
          borderTop: "1px solid #a03244",
          fontFamily: "Lato, sans-serif",
        }}
      >
        <div style={{ marginBottom: 2 }}>
          <strong>Heavenly B.V.</strong> · · KvK: 92345678 · BTW: NL002134567B01
        </div>
        <div style={{ marginBottom: 2 }}>
          <a href="mailto:info@heavenly.red" style={{ color: "#222", textDecoration: "underline" }}>
            info@heavenly.red
          </a>{" "}
          · +31 6 19552453
        </div>
        <div>
          Gecertificeerd lid  · <a href="/privacy" style={{ textDecoration: "underline" }}>Privacyverklaring</a> · <a href="/voorwaarden" style={{ textDecoration: "underline" }}>Algemene voorwaarden</a>
        </div>
        <div style={{ marginTop: 4, fontSize: "0.76rem", color: "#333" }}>
          © {new Date().getFullYear()} Heavenly. Alle rechten voorbehouden.
        </div>
      </footer>
    </div>
  );
}