import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";

export default function Home() {
  return (
    <main>
      <h1>Startseite</h1>
      <h2>Startseite</h2>
      <h3>Startseite</h3>
      <h4>Startseite</h4>
      <p>Startseite</p>
      <br />
      <button className="btn btn--filled">Filled</button>
      <br />
      <br />
      <button className="btn btn--outline">Outline</button>
      <br />
      <br />
      <button className="btn btn--ghost">Ghost</button>
      <br />
      <br />
      <button className="btn btn--tertiary">Tertiary</button>
      <br />
      <br />
      <button className="btn btn--filled" disabled>
        Disabled
      </button>
      <br />
      <br />
      <button className="btn btn--filled">
        <ArrowRightIcon className="btn-icon animate" size={18} />
        Jetzt starten
      </button>
      <br />
      <br />
      <button className="btn btn--outline">
        <ArrowRightIcon className="btn-icon animate" size={18} />
        Outline
      </button>
      <br />
      <br />
      <button className="btn btn--ghost">
        <ArrowRightIcon className="btn-icon animate" size={18} />
        Ghost
      </button>
      <br />
      <br />
      <button className="btn btn--tertiary">
        <ArrowRightIcon className="btn-icon animate" size={18} />
        Tertiary
      </button>
      <br />
      <br />
      <button className="btn btn--filled" disabled>
        <ArrowRightIcon className="btn-icon animate" size={18} />
        Disabled
      </button>
      <br />
      <br />
      <p>
        <a href="#">Webdesign</a> und Webentwicklung bilden das Fundament jeder
        erfolgreichen digitalen Präsenz. Während Webdesign die visuelle
        Gestaltung, Benutzerführung und das Nutzererlebnis in den Vordergrund
        stellt, sorgt die Webentwicklung für die technische Umsetzung im
        Hintergrund. Beide Disziplinen greifen eng ineinander – ein
        ansprechendes Design entfaltet seine volle Wirkung nur durch sauberen,
        performanten Code.
      </p>
      <p>
        Moderne Websites müssen auf allen Geräten funktionieren, schnell laden
        und barrierefrei zugänglich sein. Suchmaschinenoptimierung, Ladezeiten
        und intuitive Navigation sind dabei keine optionalen Extras, sondern
        entscheidende Faktoren für den Erfolg. Wer heute im Netz wahrgenommen
        werden möchte, braucht mehr als nur eine schöne Oberfläche – er braucht
        eine durchdachte digitale Strategie, die Design und Technik vereint.
      </p>
      <br />
      <h2>Kontakt</h2>
      <form>
        {/* Name */}
        <div className="form-group">
          <label className="form-label form-label--required" htmlFor="name">
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            placeholder="Max Mustermann"
          />
        </div>

        {/* E-Mail */}
        <div className="form-group">
          <label className="form-label form-label--required" htmlFor="email">
            E-Mail
          </label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="max@beispiel.de"
          />
        </div>

        {/* Telefon */}
        <div className="form-group">
          <label className="form-label" htmlFor="telefon">
            Telefon
          </label>
          <input
            type="tel"
            id="telefon"
            name="telefon"
            placeholder="+49 511 123456"
          />
        </div>

        {/* Betreff */}
        <div className="form-group">
          <label className="form-label" htmlFor="betreff">
            Betreff
          </label>
          <select id="betreff" name="betreff">
            <option value="">Bitte auswählen</option>
            <option value="anfrage">Allgemeine Anfrage</option>
            <option value="angebot">Angebotsanfrage</option>
            <option value="support">Support</option>
          </select>
        </div>

        {/* Nachricht */}
        <div className="form-group">
          <label
            className="form-label form-label--required"
            htmlFor="nachricht"
          >
            Nachricht
          </label>
          <textarea
            id="nachricht"
            name="nachricht"
            placeholder="Ihre Nachricht..."
          />
        </div>

        {/* Datenschutz Checkbox */}
        <div className="form-group">
          <label className="form-check">
            <input type="checkbox" />
            <span className="form-check-label">
              Ich habe die Datenschutzerklärung gelesen und stimme zu.
            </span>
          </label>
        </div>

        {/* Error-Beispiel zum Testen */}
        <div className="form-group">
          <label className="form-label" htmlFor="fehler">
            Fehler-Beispiel
          </label>
          <input
            type="text"
            id="fehler"
            className="is-error"
            defaultValue="Falscher Wert"
          />
          <span className="form-error-msg">
            Bitte gib einen gültigen Wert ein.
          </span>
        </div>

        {/* Disabled-Beispiel */}
        <div className="form-group">
          <label className="form-label" htmlFor="deaktiviert">
            Deaktiviert
          </label>
          <input
            type="text"
            id="deaktiviert"
            disabled
            defaultValue="Nicht bearbeitbar"
          />
        </div>

        {/* Submit */}
        <button type="submit" className="btn btn--filled">
          Nachricht senden
        </button>
      </form>
    </main>
  );
}