volleyball-dev-frontend/src/pages/MitgliedWerden.tsx

import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";

const MitgliedWerdenPage = () => {
  return (
    <div className="flex justify-center mt-10 px-4">
      <Card className="w-full max-w-3xl">
        <CardContent className="p-6">
          <h1 className="text-2xl font-bold mb-6 text-center text-frog-600">Mitglied werden</h1>

          <form className="space-y-6">
            {/* Persönliche Daten */}
            <div className="grid gap-4">
              <h2 className="text-lg font-semibold text-gray-800">Persönliche Daten</h2>
              <div className="grid md:grid-cols-2 gap-4">
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Anrede*" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="0">Keine Auswahl</SelectItem>
                    <SelectItem value="Herr">Herr</SelectItem>
                    <SelectItem value="Frau">Frau</SelectItem>
                  </SelectContent>
                </Select>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Titel (optional)" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="0">Keine Auswahl</SelectItem>
                    <SelectItem value="Dipl.-Ing.">Dipl.-Ing.</SelectItem>
                    <SelectItem value="Dr.">Dr.</SelectItem>
                    <SelectItem value="Prof.">Prof.</SelectItem>
                    <SelectItem value="Prof. Dr.">Prof. Dr.</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <Input placeholder="Vorname*" required />
                <Input placeholder="Nachname*" required />
              </div>
              <Input type="date" placeholder="Geburtsdatum*" required />
              <div className="grid md:grid-cols-2 gap-4">
                <Input placeholder="Straße*" required />
                <Input placeholder="Hausnummer*" required />
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <Input placeholder="PLZ*" required />
                <Input placeholder="Ort*" required />
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <Input placeholder="Telefon" />
                <Input type="email" placeholder="E-Mail-Adresse*" required />
              </div>
              <div className="flex items-center space-x-2">
                <input type="checkbox" id="newsletter" />
                <label htmlFor="newsletter" className="text-sm">Newsletter (per E-Mail + WhatsApp)</label>
              </div>
              <Input type="date" placeholder="Eintrittsdatum*" required />
              <Select>
                <SelectTrigger>
                  <SelectValue placeholder="Beitrag/Tarif auswählen*" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="0">Keine Auswahl</SelectItem>
                  <SelectItem value="1">64,00€ - Kinder / Jugendliche / Studenten / Rentner</SelectItem>
                  <SelectItem value="2">99,00€ - Rentnerehepaar / 2 Geschwister unter 18 J.</SelectItem>
                  <SelectItem value="3">112,00€ - Erwachsener / 3+ Geschwister</SelectItem>
                  <SelectItem value="4">162,00€ - Elternteil + Kinder</SelectItem>
                  <SelectItem value="5">168,00€ - Ehepaar mit Kindern</SelectItem>
                </SelectContent>
              </Select>
              <div className="flex items-center space-x-2">
                <input type="checkbox" id="no-membership" />
                <label htmlFor="no-membership" className="text-sm">Ich beantrage selbst keine Mitgliedschaft</label>
              </div>
            </div>

            {/* Abteilungen */}
            <div className="grid gap-4">
              <h2 className="text-lg font-semibold text-gray-800">Gewünschte Abteilungen</h2>
              <div className="grid md:grid-cols-2 gap-2 text-sm">
                {[
                  "Boule", "Fitness und Gesundheitssport", "Handball Damen", "Handball Herren",
                  "Handball Jugend (m.)", "Handball Jugend (w.)", "Leichtathletik", "Tanz & Bodyworkout",
                  "Tischtennis", "Turnen / Gymnastik (Erw.)", "Turnen / Gymnastik (Kinder + Jugend)",
                  "Volleyball", "Wandern"
                ].map((abteilung, idx) => (
                  <label key={idx} className="flex items-center space-x-2">
                    <input type="checkbox" />
                    <span>{abteilung}</span>
                  </label>
                ))}
              </div>
            </div>

            {/* Bankverbindung */}
            <div className="grid gap-4">
              <h2 className="text-lg font-semibold text-gray-800">Bankverbindung</h2>
              <Input placeholder="Kontoinhaber (Name, Vorname)*" required />
              <Input placeholder="Straße (falls abweichend)" />
              <Input placeholder="PLZ und Ort (falls abweichend)" />
              <Input placeholder="IBAN*" required />
              <Input placeholder="Name der Bank*" required />
              <Input placeholder="BIC" />
            </div>

            {/* Zustimmung */}
            <div className="grid gap-2 text-sm">
              <label className="flex items-center space-x-2">
                <input type="checkbox" required />
                <span>Ich habe die <a target="_blank" href="/beitraege" className="underline text-frog-600">Beitragsordnung</a> gelesen und akzeptiere sie.</span>
              </label>
              <label className="flex items-center space-x-2">
                <input type="checkbox" required />
                <span>Ich habe die <a target="_blank" href="/satzung" className="underline text-frog-600">Satzung</a> der TG Laudenbach gelesen und akzeptiere sie.</span>
              </label>
            </div>

            {/* Absenden */}
            <Button type="submit" className="w-full bg-frog-500 hover:bg-frog-600 text-white mt-4">
              Anmeldung absenden
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
};

export default MitgliedWerdenPage;