const { useState } = React;

function App() {
  const [mode, setMode] = useState("mieter");
  const [result, setResult] = useState(null);
  const [leadSaved, setLeadSaved] = useState(false);

  const [form, setForm] = useState({
    plz: "",
    plzListe: "",
    heizkosten: "",
    gebaeudetyp: "altbau",
    quadratmeter: "",
    wohnungen: "",
    ablesung: "vor_ort",
    rueckfragen: "manchmal",
    verwaltung: "hausverwaltung",
    vermieterName: "",
    vermieterEmail: "",
    kontaktName: "",
    kontaktEmail: "",
    kontaktTelefon: "",
    firma: "",
  });

  function update(field, value) {
    setForm({ ...form, [field]: value });
  }

  function calculate() {
    setLeadSaved(false);

    if (mode === "mieter") {
      const sparFaktor = form.gebaeudetyp === "altbau" ? 0.18 : 0.1;
      const jahreskosten = Number(form.heizkosten) * 12;
      const ersparnis = jahreskosten * sparFaktor * 0.75;

      setResult({
        type: "mieter",
        title: "Geschätzte Ersparnis",
        main: `${Math.round(ersparnis)} EUR / Jahr`,
        sub: `${Math.round(ersparnis / 12)} EUR / Monat`,
      });
      return;
    }

    const wohnungen = Number(form.wohnungen);
    let score = 0;

    if (wohnungen >= 10) score += 25;
    if (wohnungen >= 30) score += 20;
    if (form.ablesung === "vor_ort") score += 30;
    if (form.ablesung === "papier") score += 25;
    if (form.rueckfragen === "oft") score += 25;
    if (form.rueckfragen === "manchmal") score += 10;

    const stunden = Math.max(8, Math.round(wohnungen * 1.4));

    setResult({
      type: "vermieter",
      title: "Digitalisierungspotenzial",
      main: `${Math.min(score, 100)} / 100 Punkte`,
      sub: `Geschätzt bis zu ${stunden} Stunden weniger Verwaltungsaufwand pro Jahr.`,
    });
  }

  async function saveLead() {
    const lead = {
      type: mode,
      form,
      result,
    };

    const response = await fetch("http://localhost:3001/api/leads", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(lead),
    });

    const data = await response.json();

    if (data.success) {
      setLeadSaved(true);
    }
  }

  return (
    <main className="min-h-screen bg-white text-[#222]">
      <header className="mx-auto max-w-7xl px-8 py-5">
        <div className="flex items-center justify-between border-b border-slate-200 pb-5">
          <div className="text-3xl font-black tracking-tight">
            te<span className="text-red-600">chem</span>
            <div className="mt-[-3px] h-1 w-24 rounded-full bg-red-600" />
          </div>

          <input
            className="hidden w-[420px] rounded-lg border border-slate-200 px-5 py-3 outline-none md:block"
            placeholder="Suche"
          />

          <div className="text-sm text-slate-500">Energy Portal</div>
        </div>

        <nav className="hidden gap-10 pt-6 text-[17px] font-medium md:flex">
          <a>Heizkostencheck</a>
          <a>Geräte</a>
          <a>Immobilienservices</a>
          <a>Info und Service</a>
          <a>Online beauftragen</a>
        </nav>
      </header>

      <section className="relative overflow-hidden bg-red-600">
        <div className="absolute right-0 top-0 h-full w-[55%] bg-gradient-to-br from-red-500 via-orange-300 to-emerald-300 opacity-80 blur-sm" />

        <div className="relative mx-auto max-w-7xl px-8 py-24 md:py-32">
          <div className="max-w-3xl">
            <h1 className="text-5xl font-light leading-tight text-white md:text-6xl">
              Heizkostenabrechnung - digitaler, einfacher, transparenter
            </h1>

            <p className="mt-8 max-w-2xl text-lg leading-8 text-white">
              Prüfen Sie, ob Ihr Gebäude von moderner Verbrauchserfassung,
              digitalen Prozessen und weniger Abrechnungsaufwand profitieren kann.
            </p>

            <div className="mt-10 flex flex-wrap gap-6">
              <a
                href="#check"
                className="rounded-lg bg-white px-8 py-4 font-semibold text-red-600 shadow-md"
              >
                Kostenlosen Check starten
              </a>

              <a
                href="#check"
                className="rounded-lg border-2 border-white px-8 py-4 font-semibold text-white"
              >
                Direkt zum Angebot
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="relative mx-auto mt-[-48px] grid max-w-3xl gap-6 px-8 md:grid-cols-2">
        <div className="rounded-xl bg-white p-8 text-center shadow-xl">
          <p className="text-lg">Digitale Verbrauchserfassung</p>
          <p className="mt-3 text-2xl text-red-600">-&gt;</p>
        </div>

        <div className="rounded-xl bg-white p-8 text-center shadow-xl">
          <p className="text-lg">Abrechnungsprozess optimieren</p>
          <p className="mt-3 text-2xl text-red-600">-&gt;</p>
        </div>
      </section>

      <section id="check" className="mx-auto max-w-5xl px-8 py-24">
        <h2 className="text-center text-4xl font-light md:text-5xl">
          Wie können wir Ihnen weiterhelfen?
        </h2>

        <div className="mt-12 rounded-2xl border border-slate-200 bg-white p-8 shadow-xl">
          <div className="mb-8 flex w-fit rounded-lg border border-slate-200 bg-white p-1">
            <button
              onClick={() => {
                setMode("mieter");
                setResult(null);
              }}
              className={`rounded-md px-8 py-3 font-semibold ${
                mode === "mieter" ? "bg-red-600 text-white" : "text-slate-500"
              }`}
            >
              Mieter
            </button>

            <button
              onClick={() => {
                setMode("vermieter");
                setResult(null);
              }}
              className={`rounded-md px-8 py-3 font-semibold ${
                mode === "vermieter" ? "bg-red-600 text-white" : "text-slate-500"
              }`}
            >
              Vermieter
            </button>
          </div>

          <div className="grid gap-5 md:grid-cols-2">
            <input
              className="rounded-lg border border-slate-300 p-4"
              placeholder="PLZ"
              value={form.plz}
              onChange={(e) => update("plz", e.target.value)}
            />

            {mode === "mieter" && (
              <>
                <input
                  className="rounded-lg border border-slate-300 p-4"
                  placeholder="Heizkosten pro Monat in EUR"
                  type="number"
                  value={form.heizkosten}
                  onChange={(e) => update("heizkosten", e.target.value)}
                />

                <select
                  className="rounded-lg border border-slate-300 p-4"
                  value={form.gebaeudetyp}
                  onChange={(e) => update("gebaeudetyp", e.target.value)}
                >
                  <option value="altbau">Altbau</option>
                  <option value="neubau">Neubau</option>
                </select>

                <input
                  className="rounded-lg border border-slate-300 p-4"
                  placeholder="Quadratmeter der Wohnung"
                  type="number"
                  value={form.quadratmeter}
                  onChange={(e) => update("quadratmeter", e.target.value)}
                />
              </>
            )}

            {mode === "vermieter" && (
              <>
                <input
                  className="rounded-lg border border-slate-300 p-4"
                  placeholder="Anzahl Wohnungen"
                  type="number"
                  value={form.wohnungen}
                  onChange={(e) => update("wohnungen", e.target.value)}
                />

                <textarea
                  className="rounded-lg border border-slate-300 p-4 md:col-span-2"
                  placeholder="PLZ der Objekte bei mehreren Wohnungen"
                  value={form.plzListe}
                  onChange={(e) => update("plzListe", e.target.value)}
                  rows="3"
                />

                <select
                  className="rounded-lg border border-slate-300 p-4"
                  value={form.ablesung}
                  onChange={(e) => update("ablesung", e.target.value)}
                >
                  <option value="vor_ort">Vor-Ort-Ablesung</option>
                  <option value="papier">Papier / manuelle Prozesse</option>
                  <option value="teil_digital">Teil-digital</option>
                  <option value="funk">Funk / digitale Messgeräte</option>
                </select>

                <select
                  className="rounded-lg border border-slate-300 p-4"
                  value={form.rueckfragen}
                  onChange={(e) => update("rueckfragen", e.target.value)}
                >
                  <option value="selten">Selten Rückfragen</option>
                  <option value="manchmal">Manchmal Rückfragen</option>
                  <option value="oft">Oft Rückfragen/Beschwerden</option>
                </select>

                <select
                  className="rounded-lg border border-slate-300 p-4"
                  value={form.verwaltung}
                  onChange={(e) => update("verwaltung", e.target.value)}
                >
                  <option value="hausverwaltung">Hausverwaltung</option>
                  <option value="eigenverwaltung">Eigenverwaltung</option>
                  <option value="portfolio">Größeres Portfolio</option>
                </select>
              </>
            )}
          </div>

          <button
            onClick={calculate}
            className="mt-8 rounded-lg bg-red-600 px-8 py-4 font-semibold text-white shadow-md"
          >
            {mode === "mieter"
              ? "Ersparnis berechnen"
              : "Digitalisierungspotenzial prüfen"}
          </button>

          {result && (
            <div className="mt-8 rounded-xl bg-slate-50 p-6">
              <p className="font-semibold text-red-600">{result.title}</p>
              <h3 className="mt-2 text-4xl font-light">{result.main}</h3>
              <p className="mt-2 text-slate-600">{result.sub}</p>

              {mode === "mieter" && (
                <div className="mt-8 border-t border-slate-200 pt-6">
                  <h4 className="text-xl font-semibold">
                    Lassen Sie uns helfen, dieses Ersparnis für Sie zu realisieren
                  </h4>

                  <p className="mt-2 text-slate-600">
                    Hinterlassen Sie die Kontaktdaten Ihres Vermieters. Wir
                    speichern die Anfrage, damit die Hausverwaltung über moderne
                    Mess- und Abrechnungslösungen informiert werden kann.
                  </p>

                  <div className="mt-5 grid gap-4 md:grid-cols-2">
                    <div>
                      <p className="mb-2 text-sm font-semibold text-slate-700">
                        Vermieter / Hausverwaltung
                      </p>
                      <input
                        className="w-full rounded-lg border border-slate-300 p-4"
                        placeholder="Name der Vermietungsfirma"
                        value={form.vermieterName}
                        onChange={(e) => update("vermieterName", e.target.value)}
                      />
                    </div>

                    <div>
                      <p className="mb-2 text-sm font-semibold text-slate-700">
                        E-Mail
                      </p>
                      <input
                        className="w-full rounded-lg border border-slate-300 p-4"
                        placeholder="E-Mail des Vermieters"
                        type="email"
                        value={form.vermieterEmail}
                        onChange={(e) => update("vermieterEmail", e.target.value)}
                      />
                    </div>
                  </div>

                  <button
                    onClick={saveLead}
                    className="mt-5 rounded-lg bg-red-600 px-6 py-3 font-semibold text-white"
                  >
                    Absenden
                  </button>
                </div>
              )}

              {mode === "vermieter" && (
                <div className="mt-6">
                  <ul className="grid gap-2 text-slate-600">
                    <li>✓ weniger Vor-Ort-Termine durch Funkablesung</li>
                    <li>✓ digitale Verbrauchsdaten statt manueller Prozesse</li>
                    <li>✓ weniger Rückfragen durch mehr Transparenz</li>
                    <li>✓ bessere Grundlage für Modernisierung</li>
                    <li>✓ vorbereitet auf gesetzliche Anforderungen</li>
                  </ul>

                  <div className="mt-8 border-t border-slate-200 pt-6">
                    <h4 className="text-xl font-semibold">
                      Lassen Sie uns gemeinsam die passenden nächsten Schritte für Ihr Objekt planen
                    </h4>

                    <p className="mt-2 text-slate-600">
                      Hinterlassen Sie Ihre Kontaktdaten. Wir melden uns mit den
                      passenden nächsten Schritten für Ihr Objekt.
                    </p>

                    <div className="mt-5 grid gap-4 md:grid-cols-2">
                      <div>
                        <p className="mb-2 text-sm font-semibold text-slate-700">
                          Ansprechpartner
                        </p>
                        <input
                          className="w-full rounded-lg border border-slate-300 p-4"
                          placeholder="Vor- und Nachname"
                          value={form.kontaktName}
                          onChange={(e) => update("kontaktName", e.target.value)}
                        />
                      </div>

                      <div>
                        <p className="mb-2 text-sm font-semibold text-slate-700">
                          Firma / Hausverwaltung
                        </p>
                        <input
                          className="w-full rounded-lg border border-slate-300 p-4"
                          placeholder="Unternehmen"
                          value={form.firma}
                          onChange={(e) => update("firma", e.target.value)}
                        />
                      </div>

                      <div>
                        <p className="mb-2 text-sm font-semibold text-slate-700">
                          E-Mail
                        </p>
                        <input
                          className="w-full rounded-lg border border-slate-300 p-4"
                          placeholder="name@beispiel.de"
                          type="email"
                          value={form.kontaktEmail}
                          onChange={(e) => update("kontaktEmail", e.target.value)}
                        />
                      </div>

                      <div>
                        <p className="mb-2 text-sm font-semibold text-slate-700">
                          Telefonnummer
                        </p>
                        <input
                          className="w-full rounded-lg border border-slate-300 p-4"
                          placeholder="+49 ..."
                          type="tel"
                          value={form.kontaktTelefon}
                          onChange={(e) => update("kontaktTelefon", e.target.value)}
                        />
                      </div>
                    </div>

                    <button
                      onClick={saveLead}
                      className="mt-6 rounded-lg bg-red-600 px-6 py-3 font-semibold text-white"
                    >
                      Absenden
                    </button>
                  </div>
                </div>
              )}

              {leadSaved && (
                <p className="mt-5 font-semibold text-green-600">
                  Lead wurde gespeichert.
                </p>
              )}
            </div>
          )}
        </div>
      </section>

      <footer className="border-t border-slate-200 px-8 py-8 text-center text-slate-500">
        © 2026 Techem
      </footer>
    </main>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);