// Booking, Contact, Footer
const { useState: useStateBk, useMemo } = React;

const CONCERNS = [
  { id: 'kid-speech', title: 'Kind · Aussprache', sub: 'Lispeln, Lautbildung, Phonologie' },
  { id: 'kid-lang', title: 'Kind · Sprache', sub: 'Wortschatz, Grammatik, Late Talker' },
  { id: 'lrs', title: 'LRS · Lese-Rechtschreibung', sub: 'Diagnostik & Therapie' },
  { id: 'stutter', title: 'Stottern / Poltern', sub: 'Kinder, Jugend, Erwachsene' },
  { id: 'voice', title: 'Stimme', sub: 'Heiserkeit, Sprechberuf, Coaching' },
  { id: 'neuro', title: 'Neurologie', sub: 'Aphasie, Dysarthrie, Parkinson' },
  { id: 'dysphagia', title: 'Schlucken', sub: 'Dysphagie, FEES, Trachealkanüle' },
  { id: 'other', title: 'Etwas anderes', sub: 'Wir beraten Sie persönlich' },
];

const TYPES = [
  { id: 'first', title: 'Erstgespräch', sub: '60 Min. · kostenfrei mit Rezept' },
  { id: 'consult', title: 'Telefonische Beratung', sub: '15 Min. · unverbindlich' },
  { id: 'home', title: 'Hausbesuch', sub: 'Im Umkreis 15 km' },
  { id: 'video', title: 'Online-Termin', sub: 'Per Videosprechstunde' },
];

function buildDates() {
  const out = [];
  const today = new Date(2026, 4, 4); // Mon May 4, 2026
  const dows = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
  for (let i = 0; i < 14; i++) {
    const d = new Date(today);
    d.setDate(today.getDate() + i);
    const dow = d.getDay();
    out.push({
      iso: d.toISOString().slice(0, 10),
      dow: dows[dow],
      day: d.getDate(),
      disabled: dow === 0 || (dow === 6 && i % 2 === 1),
    });
  }
  return out;
}

const TIMES = ['08:30', '09:15', '10:00', '11:30', '13:00', '14:45', '15:30', '16:15', '17:00', '18:00'];

function Booking() {
  const [step, setStep] = useStateBk(0);
  const [concern, setConcern] = useStateBk(null);
  const [type, setType] = useStateBk(null);
  const [date, setDate] = useStateBk(null);
  const [time, setTime] = useStateBk(null);
  const [contact, setContact] = useStateBk({ name: '', email: '', phone: '', notes: '' });
  const [errors, setErrors] = useStateBk({});
  const [done, setDone] = useStateBk(false);
  const dates = useMemo(buildDates, []);

  const STEPS = ['Anliegen', 'Termin­art', 'Datum & Zeit', 'Kontakt', 'Bestätigung'];

  const canProceed = (() => {
    if (step === 0) return concern;
    if (step === 1) return type;
    if (step === 2) return date && time;
    if (step === 3) return Object.keys(validate(contact)).length === 0;
    return true;
  })();

  function validate(c) {
    const e = {};
    if (!c.name || c.name.trim().length < 2) e.name = 'Bitte geben Sie Ihren Namen an.';
    if (!c.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email)) e.email = 'Bitte gültige E-Mail-Adresse.';
    if (!c.phone || c.phone.replace(/\D/g, '').length < 6) e.phone = 'Bitte gültige Telefonnummer.';
    return e;
  }

  function next() {
    if (step === 3) {
      const e = validate(contact);
      setErrors(e);
      if (Object.keys(e).length) return;
      setDone(true);
      setStep(4);
      return;
    }
    setStep(step + 1);
  }

  function reset() {
    setStep(0); setConcern(null); setType(null); setDate(null); setTime(null);
    setContact({ name: '', email: '', phone: '', notes: '' }); setErrors({}); setDone(false);
  }

  const concernLabel = CONCERNS.find((c) => c.id === concern)?.title;
  const typeLabel = TYPES.find((t) => t.id === type)?.title;
  const dateLabel = date ? new Date(date).toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' }) : '';

  return (
    <section className="booking" id="booking">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Termin buchen</span>
            <h2>In vier Schritten zum Erstgespräch.</h2>
          </div>
          <p className="lead">
            Reservieren Sie hier verbindlich einen Termin. Wir bestätigen innerhalb
            eines Werktages per E-Mail. Bei Fragen rufen Sie gerne an: 0761 / 38 41 920.
          </p>
        </div>
        <div className="booking-shell">
          <div className="booking-progress">
            {STEPS.slice(0, 4).map((_, i) => (
              <div key={i} className={`bp-step ${step > i ? 'done' : step === i ? 'active' : ''}`}></div>
            ))}
          </div>

          {step === 0 && (
            <div>
              <div className="booking-step-label">Schritt 1 von 4</div>
              <div className="booking-step-title">Worum geht es?</div>
              <div className="booking-step-desc">Wählen Sie das Anliegen, das am ehesten passt — Sie können das später noch ändern.</div>
              <div className="choice-grid">
                {CONCERNS.map((c) => (
                  <button key={c.id} className={`choice ${concern === c.id ? 'selected' : ''}`} onClick={() => setConcern(c.id)}>
                    <div className="choice-title">{c.title}</div>
                    <div className="choice-sub">{c.sub}</div>
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <div className="booking-step-label">Schritt 2 von 4</div>
              <div className="booking-step-title">Welche Termin­art?</div>
              <div className="booking-step-desc">Erstgespräche dauern in der Regel 60 Minuten und sind mit Rezept kostenfrei.</div>
              <div className="choice-grid">
                {TYPES.map((t) => (
                  <button key={t.id} className={`choice ${type === t.id ? 'selected' : ''}`} onClick={() => setType(t.id)}>
                    <div className="choice-title">{t.title}</div>
                    <div className="choice-sub">{t.sub}</div>
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === 2 && (
            <div>
              <div className="booking-step-label">Schritt 3 von 4</div>
              <div className="booking-step-title">Datum & Uhrzeit</div>
              <div className="booking-step-desc">Verfügbarkeit der nächsten 14 Tage. Verfügbare Zeiten erscheinen, sobald Sie ein Datum wählen.</div>
              <div className="date-grid">
                {dates.map((d) => (
                  <button
                    key={d.iso}
                    className={`date-cell ${d.disabled ? 'disabled' : ''} ${date === d.iso ? 'selected' : ''}`}
                    disabled={d.disabled}
                    onClick={() => { setDate(d.iso); setTime(null); }}
                  >
                    <span className="dow">{d.dow}</span>
                    <span className="day">{d.day}</span>
                  </button>
                ))}
              </div>
              {date && (
                <div className="time-grid">
                  {TIMES.map((t) => (
                    <button key={t} className={`time-cell ${time === t ? 'selected' : ''}`} onClick={() => setTime(t)}>
                      {t}
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}

          {step === 3 && (
            <div>
              <div className="booking-step-label">Schritt 4 von 4</div>
              <div className="booking-step-title">Ihre Kontaktdaten</div>
              <div className="booking-step-desc">Wir nutzen diese Angaben ausschließlich, um Ihren Termin zu bestätigen.</div>

              <div className="booking-summary">
                <div className="summary-row"><span className="k">Anliegen</span><span className="v">{concernLabel}</span></div>
                <div className="summary-row"><span className="k">Termin­art</span><span className="v">{typeLabel}</span></div>
                <div className="summary-row"><span className="k">Datum</span><span className="v">{dateLabel}</span></div>
                <div className="summary-row"><span className="k">Uhrzeit</span><span className="v">{time} Uhr</span></div>
              </div>

              <div className="field-row">
                <div className={`field ${errors.name ? 'invalid' : ''}`}>
                  <label className="field-label">Name</label>
                  <input className="field-input" value={contact.name}
                    onChange={(e) => setContact({ ...contact, name: e.target.value })}
                    onBlur={() => setErrors(validate(contact))} />
                  {errors.name && <div className="field-error">{errors.name}</div>}
                </div>
                <div className={`field ${errors.phone ? 'invalid' : ''}`}>
                  <label className="field-label">Telefon</label>
                  <input className="field-input" value={contact.phone}
                    onChange={(e) => setContact({ ...contact, phone: e.target.value })}
                    onBlur={() => setErrors(validate(contact))} />
                  {errors.phone && <div className="field-error">{errors.phone}</div>}
                </div>
              </div>
              <div className={`field ${errors.email ? 'invalid' : ''}`}>
                <label className="field-label">E-Mail</label>
                <input className="field-input" type="email" value={contact.email}
                  onChange={(e) => setContact({ ...contact, email: e.target.value })}
                  onBlur={() => setErrors(validate(contact))} />
                {errors.email && <div className="field-error">{errors.email}</div>}
              </div>
              <div className="field">
                <label className="field-label">Anmerkung (optional)</label>
                <textarea className="field-textarea" value={contact.notes}
                  onChange={(e) => setContact({ ...contact, notes: e.target.value })}
                  placeholder="Besonderheiten, Verordnung liegt vor, Wunschtherapeut·in..." />
              </div>
            </div>
          )}

          {step === 4 && (
            <div className="booking-success">
              <div className="success-icon">✓</div>
              <h3 style={{ fontSize: 32 }}>Vielen Dank, {contact.name.split(' ')[0]}!</h3>
              <p style={{ marginTop: 12, fontSize: 17 }}>
                Wir haben Ihre Anfrage für <strong>{dateLabel}, {time} Uhr</strong> erhalten.<br />
                Eine Bestätigung erhalten Sie innerhalb eines Werktages an <strong>{contact.email}</strong>.
              </p>
              <button onClick={reset} className="btn btn-ghost" style={{ marginTop: 32 }}>
                Weiteren Termin buchen
              </button>
            </div>
          )}

          {step < 4 && (
            <div className="booking-actions">
              {step > 0 ? (
                <button className="btn btn-ghost" onClick={() => setStep(step - 1)}>← Zurück</button>
              ) : <span />}
              <button className="btn btn-primary" disabled={!canProceed} onClick={next}
                style={{ opacity: canProceed ? 1 : 0.4, pointerEvents: canProceed ? 'auto' : 'none' }}>
                {step === 3 ? 'Termin verbindlich anfragen' : 'Weiter'} →
              </button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [form, setForm] = useStateBk({ name: '', email: '', subject: 'Allgemeine Frage', message: '' });
  const [errors, setErrors] = useStateBk({});
  const [sent, setSent] = useStateBk(false);

  function validate(f) {
    const e = {};
    if (!f.name || f.name.trim().length < 2) e.name = 'Name fehlt.';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) e.email = 'Ungültige E-Mail.';
    if (!f.message || f.message.trim().length < 10) e.message = 'Bitte schreiben Sie mindestens einen Satz.';
    return e;
  }

  function submit(e) {
    e.preventDefault();
    const er = validate(form);
    setErrors(er);
    if (Object.keys(er).length === 0) {
      setSent(true);
    }
  }

  return (
    <section id="contact" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="contact-grid">
          <div className="contact-side">
            <span className="eyebrow">Schreiben Sie uns</span>
            <h2 style={{ marginTop: 16 }}>Kein Anliegen ist zu klein.</h2>
            <p style={{ marginTop: 20, fontSize: 17 }}>
              Sie sind unsicher, ob Logopädie das Richtige ist? Schreiben Sie uns —
              ein erstes Gespräch verpflichtet zu nichts.
            </p>
            <div className="contact-list">
              <div className="contact-row">
                <div className="icon">📞</div>
                <div>
                  <div className="lbl">Telefon</div>
                  <div className="val">0761 / 38 41 920</div>
                </div>
              </div>
              <div className="contact-row">
                <div className="icon">✉</div>
                <div>
                  <div className="lbl">E-Mail</div>
                  <div className="val">praxis@andorfer-logo.de</div>
                </div>
              </div>
              <div className="contact-row">
                <div className="icon">📍</div>
                <div>
                  <div className="lbl">Adresse</div>
                  <div className="val">Günterstalstr. 47<br/>79102 Freiburg</div>
                </div>
              </div>
            </div>
          </div>
          <div>
            {sent ? (
              <div className="card" style={{ textAlign: 'center', padding: 56 }}>
                <div className="success-icon" style={{ width: 64, height: 64, fontSize: 24 }}>✓</div>
                <h3 style={{ marginTop: 16 }}>Nachricht gesendet</h3>
                <p style={{ marginTop: 12 }}>Vielen Dank, {form.name.split(' ')[0]}. Wir melden uns innerhalb eines Werktages.</p>
              </div>
            ) : (
              <form className="card" onSubmit={submit} noValidate>
                <div className="field-row">
                  <div className={`field ${errors.name ? 'invalid' : ''}`}>
                    <label className="field-label">Name</label>
                    <input className="field-input" value={form.name}
                      onChange={(e) => setForm({ ...form, name: e.target.value })} />
                    {errors.name && <div className="field-error">{errors.name}</div>}
                  </div>
                  <div className={`field ${errors.email ? 'invalid' : ''}`}>
                    <label className="field-label">E-Mail</label>
                    <input className="field-input" type="email" value={form.email}
                      onChange={(e) => setForm({ ...form, email: e.target.value })} />
                    {errors.email && <div className="field-error">{errors.email}</div>}
                  </div>
                </div>
                <div className="field">
                  <label className="field-label">Betreff</label>
                  <select className="field-input" value={form.subject}
                    onChange={(e) => setForm({ ...form, subject: e.target.value })}>
                    <option>Allgemeine Frage</option>
                    <option>Termin­anfrage</option>
                    <option>Rückruf erbeten</option>
                    <option>Selbstzahler-Anliegen</option>
                    <option>Hausbesuch</option>
                  </select>
                </div>
                <div className={`field ${errors.message ? 'invalid' : ''}`}>
                  <label className="field-label">Nachricht</label>
                  <textarea className="field-textarea" value={form.message}
                    onChange={(e) => setForm({ ...form, message: e.target.value })}
                    placeholder="Worum geht es? Schildern Sie kurz Ihre Situation..." />
                  {errors.message && <div className="field-error">{errors.message}</div>}
                </div>
                <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>
                  Nachricht senden →
                </button>
                <div style={{ fontSize: 12, color: 'var(--ink-muted)', marginTop: 12, textAlign: 'center' }}>
                  Mit dem Absenden stimmen Sie unserer Datenschutz­erklärung zu.
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="nav-logo" style={{ color: 'var(--bg)' }}>
              <span className="mark"></span>
              <span>Andorfer · Logopädie</span>
            </div>
            <p>
              Praxis für Logopädie in Freiburg-Wiehre. Therapie für Kinder, Jugendliche
              und Erwachsene — herzlich, evidenzbasiert, kassenfinanziert.
            </p>
          </div>
          <div>
            <h4>Praxis</h4>
            <ul className="footer-links">
              <li><a href="#about">Über uns</a></li>
              <li><a href="#team">Team</a></li>
              <li><a href="#services">Therapieangebot</a></li>
              <li><a href="#location">Standort</a></li>
            </ul>
          </div>
          <div>
            <h4>Service</h4>
            <ul className="footer-links">
              <li><a href="#booking">Termin buchen</a></li>
              <li><a href="#pricing">Kosten & Kassen</a></li>
              <li><a href="#faq">Häufige Fragen</a></li>
              <li><a href="#contact">Kontakt</a></li>
            </ul>
          </div>
          <div>
            <h4>Rechtliches</h4>
            <ul className="footer-links">
              <li><a href="#">Impressum</a></li>
              <li><a href="#">Datenschutz</a></li>
              <li><a href="#">AGB</a></li>
              <li><a href="#">Barrierefreiheit</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Praxis Andorfer · Freiburg</span>
          <span>Mit Sorgfalt gestaltet · Made in der Wiehre</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Booking, Contact, Footer });