/* book-page.jsx — Appointment booking form. */

const { PageChrome, I18N, Ico } = window;

function FormField({ label, required, hint, children, full, className }) {
  return (
    <div className={"form-field" + (full ? " full" : "") + (className ? " " + className : "")}>
      <label>{label}{required && <span className="req">*</span>}</label>
      {children}
      {hint && <div className="hint">{hint}</div>}
    </div>
  );
}

function App() {
  const t = I18N.en;
  const b = t.bookpage;

  const [form, setForm] = React.useState({
    name: "", phone: "", email: "",
    dept: "", date: "", time: "",
    gesy: true, insurance: "",
    notes: "", consent: false,
  });
  const [submitted, setSubmitted] = React.useState(false);

  const set = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

  const valid =
    form.name.trim() &&
    form.phone.trim() &&
    form.email.trim() &&
    form.dept &&
    form.date &&
    form.time &&
    (form.gesy || form.insurance.trim()) &&
    form.consent;

  const onSubmit = (e) => {
    e.preventDefault();
    if (!valid) return;
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const reset = () => {
    setForm({
      name: "", phone: "", email: "",
      dept: "", date: "", time: "",
      gesy: true, insurance: "",
      notes: "", consent: false,
    });
    setSubmitted(false);
  };

  // Min date = today
  const minDate = new Date().toISOString().split('T')[0];

  return (
    <PageChrome activePage="Book Appointment" t={t}>
      <section className="page-hero">
        <div className="container">
          <div>
            <div className="breadcrumb">
              <a href="index.html">Home</a>
              <span className="sep">/</span>
              <span>Book Appointment</span>
            </div>
            <span className="eyebrow" style={{ marginTop: 20, display: 'inline-flex' }}>{b.hero.eyebrow}</span>
            <h1 className="h1">{b.hero.title}</h1>
          </div>
          <div><p className="lede">{b.hero.lede}</p></div>
        </div>
      </section>

      <section style={{ paddingBlock: 'clamp(48px, 6vw, 80px)' }}>
        <div className="container">

          {submitted ? (
            <div className="book-success">
              <div className="check"><Ico.Check className="icon icon-lg" /></div>
              <h2 className="h1">{b.success.title}</h2>
              <p className="lede">{b.success.lede}</p>
              <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', marginTop: 8 }}>
                <a className="btn btn-primary" href="index.html"><Ico.ArrowLeft className="icon" /> {b.success.cta1}</a>
                <button className="btn btn-secondary" onClick={reset}><Ico.Calendar className="icon" /> {b.success.cta2}</button>
              </div>
              <div style={{ marginTop: 32, padding: 18, background: 'var(--surface)', borderRadius: 'var(--radius-sm)', fontSize: 13.5, color: 'var(--ink-2)' }}>
                <strong style={{ color: 'var(--ink)' }}>What you submitted:</strong>{' '}
                {form.name} · {form.phone} · {form.email} · Dept: {form.dept} · {form.date} ({form.time}) · {form.gesy ? 'GeSY beneficiary' : 'Insurance: ' + form.insurance}
              </div>
            </div>
          ) : (
            <div className="book-grid">
              <form className="book-form" onSubmit={onSubmit}>
                <h2 className="h3" style={{ marginBottom: 20 }}>{b.form.sectionContact}</h2>
                <div className="form-grid">
                  <FormField label={b.form.name} required>
                    <input type="text" value={form.name} onChange={(e) => set('name', e.target.value)} placeholder="Maria Christou" required />
                  </FormField>
                  <FormField label={b.form.phone} required>
                    <input type="tel" value={form.phone} onChange={(e) => set('phone', e.target.value)} placeholder="+357 99 123 456" required />
                  </FormField>
                  <FormField full label={b.form.email} required>
                    <input type="email" value={form.email} onChange={(e) => set('email', e.target.value)} placeholder="maria@example.com" required />
                  </FormField>
                </div>

                <hr style={{ border: 0, borderTop: '1px solid var(--line-soft)', margin: '32px 0 24px' }} />

                <h2 className="h3" style={{ marginBottom: 20 }}>{b.form.sectionVisit}</h2>
                <div className="form-grid">
                  <FormField full label={b.form.dept} required>
                    <select value={form.dept} onChange={(e) => set('dept', e.target.value)} required>
                      {b.form.deptOpt.map((o, i) => (
                        <option key={i} value={i === 0 ? "" : o}>{o}</option>
                      ))}
                    </select>
                  </FormField>
                  <FormField label={b.form.date} required>
                    <input type="date" value={form.date} min={minDate} onChange={(e) => set('date', e.target.value)} required />
                  </FormField>
                  <FormField label={b.form.time} required>
                    <div className="time-pills" role="radiogroup">
                      {b.form.timeOpts.map((opt) => (
                        <button
                          key={opt.v}
                          type="button"
                          role="radio"
                          aria-checked={form.time === opt.v}
                          className={"time-pill" + (form.time === opt.v ? " on" : "")}
                          onClick={() => set('time', opt.v)}
                        >
                          <span className="label">{opt.label}</span>
                          <span className="range">{opt.range}</span>
                        </button>
                      ))}
                    </div>
                  </FormField>
                </div>

                <hr style={{ border: 0, borderTop: '1px solid var(--line-soft)', margin: '32px 0 24px' }} />

                <h2 className="h3" style={{ marginBottom: 20 }}>{b.form.sectionGesy}</h2>
                <div
                  className="toggle-row"
                  role="switch"
                  aria-checked={form.gesy}
                  tabIndex={0}
                  onClick={() => set('gesy', !form.gesy)}
                  onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); set('gesy', !form.gesy); } }}
                  style={{ cursor: 'pointer' }}
                >
                  <div className={"toggle" + (form.gesy ? " on" : "")}></div>
                  <div>
                    <div className="t">{b.form.gesy}</div>
                    <div className="s">{b.form.gesyHint}</div>
                  </div>
                </div>

                {!form.gesy && (
                  <div style={{ marginTop: 18 }}>
                    <FormField full label={b.form.insurance} required hint={b.form.insuranceHint}>
                      <input
                        type="text"
                        value={form.insurance}
                        onChange={(e) => set('insurance', e.target.value)}
                        placeholder="e.g. Allianz, Bupa, Cigna…"
                        required
                      />
                    </FormField>
                  </div>
                )}

                <hr style={{ border: 0, borderTop: '1px solid var(--line-soft)', margin: '32px 0 24px' }} />

                <h2 className="h3" style={{ marginBottom: 20 }}>{b.form.sectionExtra}</h2>
                <FormField full label={b.form.notes} hint={b.form.notesHint}>
                  <textarea
                    value={form.notes}
                    onChange={(e) => set('notes', e.target.value)}
                    placeholder="Any context that helps us prepare for your visit…"
                  />
                </FormField>

                <label style={{ marginTop: 20, display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer' }}>
                  <input
                    type="checkbox"
                    checked={form.consent}
                    onChange={(e) => set('consent', e.target.checked)}
                    required
                    style={{ marginTop: 3, width: 18, height: 18, accentColor: 'var(--brand)' }}
                  />
                  <span style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.45 }}>{b.form.consent}</span>
                </label>

                <div style={{ marginTop: 28, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'space-between' }}>
                  <div style={{ fontSize: 12.5, color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Ico.Shield className="icon" style={{ width: 14, height: 14 }} /> {b.form.backedBy}
                  </div>
                  <button
                    className="btn btn-primary btn-lg"
                    type="submit"
                    disabled={!valid}
                    style={{ opacity: valid ? 1 : 0.5, cursor: valid ? 'pointer' : 'not-allowed' }}
                  >
                    {b.form.submit} <Ico.Arrow className="icon" />
                  </button>
                </div>
              </form>

              <aside className="book-aside">
                <div className="aside-card">
                  <h3>{b.aside.what.title}</h3>
                  <ol style={{ paddingLeft: 18, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {b.aside.what.steps.map((s, i) => <li key={i}>{s}</li>)}
                  </ol>
                </div>

                <div className="aside-card brand">
                  <h3>{b.aside.emerg.title}</h3>
                  <p style={{ marginTop: 4 }}>{b.aside.emerg.body}</p>
                  <a href={`tel:${b.aside.emerg.phone}`} className="num" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 14 }}>
                    <Ico.Phone className="icon icon-lg" /> {b.aside.emerg.phone}
                  </a>
                </div>

                <div className="aside-card">
                  <h3>{b.aside.hours.title}</h3>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {b.aside.hours.rows.map((row, i) => (
                      <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, color: 'var(--ink-2)' }}>
                        <span>{row[0]}</span>
                        <span style={{ color: 'var(--ink)', fontWeight: 500 }}>{row[1]}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </aside>
            </div>
          )}

        </div>
      </section>
    </PageChrome>
  );
}

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