// page-contact.jsx — Contact form + WhatsApp + static card

const ONDERWERPEN = [
  { value: 'mental-coaching', label: 'Intake gesprek — Mental coaching' },
  { value: 'life-coaching', label: 'Intake gesprek — Life coaching' },
  { value: 'executive-coaching', label: 'Intake gesprek — Executive coaching' },
  { value: 'sport-individueel', label: 'Intake gesprek — Sport (individueel)' },
  { value: 'sport-ploeg', label: 'Intake gesprek — Sport (ploeg/club)' },
  { value: 'bedrijven-advies', label: 'Voor bedrijven — Advies / consultancy' },
  { value: 'bedrijven-groepssessies', label: 'Voor bedrijven — Groepssessies' },
  { value: 'andere', label: 'Andere vraag' },
];

function ContactPage() {
  const { params } = useRouter();
  const initialOnderwerp = params.get('onderwerp') || '';
  const [mode, setMode] = React.useState('particulier');
  const [form, setForm] = React.useState({
    naam: '',
    email: '',
    telefoon: '',
    onderwerp: initialOnderwerp,
    bedrijf: '',
    btw: '',
    functie: '',
    bericht: '',
    consent: false,
  });
  const [sent, setSent] = React.useState(false);

  // re-sync if URL param changes (e.g. arriving from another page)
  React.useEffect(() => {
    const o = params.get('onderwerp');
    if (o) setForm(f => ({ ...f, onderwerp: o }));
    // zakelijk modes: bedrijven-* options auto-toggle to Zakelijk
    if (o && o.startsWith('bedrijven-')) setMode('zakelijk');
  }, [params]);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <div className="page">
      <SiteNav />
      <PageRail index={7} slug="Contact" />

      <section className="pillar-hero">
        <div className="container">
          <div>
            <Label red>Contact</Label>
            <h1 style={{ marginTop: 20 }}>
              <span className="green italic">Eerst</span><br/>kennismaken.
            </h1>
          </div>
          <p className="intro">
            Vul het formulier in of stuur een WhatsApp. Werner antwoordt zelf,
            doorgaans binnen twee werkdagen. Geen verplichtingen — gewoon kijken
            of er een klik is.
          </p>
        </div>
      </section>

      <div className="container">
        <div className="contact-grid">
          {/* FORM */}
          <div className="contact-form-wrap">
            {sent ? (
              <SentState onderwerp={form.onderwerp} naam={form.naam} />
            ) : (
              <>
                <Label noMark>Aanvraag — Stap 01</Label>
                <h2 className="display display-3" style={{ margin: '12px 0 28px' }}>
                  Wie bent u, en waar wilt u over praten?
                </h2>

                <div className="toggle">
                  <button
                    className={mode === 'particulier' ? 'active' : ''}
                    onClick={() => setMode('particulier')}
                    type="button"
                  >
                    Particulier
                  </button>
                  <button
                    className={mode === 'zakelijk' ? 'active' : ''}
                    onClick={() => setMode('zakelijk')}
                    type="button"
                  >
                    Zakelijk
                  </button>
                </div>

                <form onSubmit={submit}>
                  <div className="field-row">
                    <div className="field">
                      <label htmlFor="f-naam">Naam *</label>
                      <input id="f-naam" required value={form.naam} onChange={e => set('naam', e.target.value)} />
                    </div>
                    <div className="field">
                      <label htmlFor="f-email">E-mail *</label>
                      <input id="f-email" type="email" required value={form.email} onChange={e => set('email', e.target.value)} />
                    </div>
                  </div>

                  <div className="field">
                    <label htmlFor="f-tel">Telefoon</label>
                    <input id="f-tel" type="tel" value={form.telefoon} onChange={e => set('telefoon', e.target.value)} />
                  </div>

                  <div className="field">
                    <label htmlFor="f-ond">Onderwerp *</label>
                    <select id="f-ond" required value={form.onderwerp} onChange={e => set('onderwerp', e.target.value)}>
                      <option value="">— Kies een onderwerp —</option>
                      {ONDERWERPEN.map(o => (
                        <option key={o.value} value={o.value}>{o.label}</option>
                      ))}
                    </select>
                  </div>

                  {mode === 'zakelijk' && (
                    <div className="business-fields">
                      <div className="field-row">
                        <div className="field">
                          <label htmlFor="f-bedrijf">Bedrijfsnaam</label>
                          <input id="f-bedrijf" value={form.bedrijf} onChange={e => set('bedrijf', e.target.value)} />
                        </div>
                        <div className="field">
                          <label htmlFor="f-functie">Functie</label>
                          <input id="f-functie" value={form.functie} onChange={e => set('functie', e.target.value)} />
                        </div>
                      </div>
                      <div className="field">
                        <label htmlFor="f-btw">BTW-nummer</label>
                        <input id="f-btw" value={form.btw} onChange={e => set('btw', e.target.value)} placeholder="BE0xxx.xxx.xxx" />
                      </div>
                    </div>
                  )}

                  <div className="field">
                    <label htmlFor="f-msg">Bericht *</label>
                    <textarea id="f-msg" required value={form.bericht} onChange={e => set('bericht', e.target.value)} placeholder="Vertel kort wat er speelt, of welke vraag u heeft." />
                  </div>

                  <label className="consent">
                    <input type="checkbox" required checked={form.consent} onChange={e => set('consent', e.target.checked)} />
                    <span>
                      Ik ga akkoord dat Werner mijn gegevens gebruikt om contact op te
                      nemen over deze aanvraag. Geen mailinglijst, geen doorgifte aan derden.
                    </span>
                  </label>

                  <div className="form-actions">
                    <button type="submit" className="btn">
                      Verstuur aanvraag <span className="arrow">→</span>
                    </button>
                    <span className="muted" style={{ fontSize: 13.5 }}>
                      Antwoord binnen 2 werkdagen.
                    </span>
                  </div>
                </form>
              </>
            )}
          </div>

          {/* ASIDE — WhatsApp + contact card */}
          <aside className="contact-aside">
            <div className="whatsapp-card">
              <Label red>Of nog sneller</Label>
              <h3 className="display display-3" style={{ margin: '14px 0 16px' }}>
                Stuur een WhatsApp.
              </h3>
              <p>
                Voor korte vragen of als u liever even rechtstreeks afstemt.
                Werner antwoordt zelf — geen secretariaat.
              </p>
              <a className="btn whatsapp" href="https://wa.me/32478991582?text=Hallo%20Werner%2C" target="_blank" rel="noreferrer">
                Stuur een WhatsApp <span className="arrow">→</span>
              </a>
            </div>

            <div>
              <Label>Praktisch</Label>
              <div className="contact-card" style={{ marginTop: 20 }}>
                <div className="contact-card-row">
                  <span className="k">Naam</span>
                  <span>Melior Bedrijfsadvies</span>
                </div>
                <div className="contact-card-row">
                  <span className="k">Adres</span>
                  <span>Heikanthof 18<br/>2590 Berlaar</span>
                </div>
                <div className="contact-card-row">
                  <span className="k">Telefoon</span>
                  <span><a href="tel:+32478991582" style={{ color: 'inherit' }}>0478 99 15 82</a></span>
                </div>
                <div className="contact-card-row">
                  <span className="k">E-mail</span>
                  <span><a href="mailto:werner.bruyns@telenet.be" style={{ color: 'inherit', wordBreak: 'break-all' }}>werner.bruyns@telenet.be</a></span>
                </div>
                <div className="contact-card-row">
                  <span className="k">BTW</span>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 14 }}>BE0686.794.939</span>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </div>

      <SiteFooter />
    </div>
  );
}

function SentState({ onderwerp, naam }) {
  const { go } = useRouter();
  const label = (ONDERWERPEN.find(o => o.value === onderwerp) || {}).label || '—';
  return (
    <div style={{ padding: '32px 0', display: 'flex', flexDirection: 'column', gap: 24 }}>
      <Label red>Aanvraag ontvangen</Label>
      <h2 className="display display-2" style={{ margin: 0 }}>
        Dankjewel{naam ? `, ${naam.split(' ')[0]}` : ''}.
      </h2>
      <p style={{ fontSize: 17, lineHeight: 1.6, margin: 0, maxWidth: '52ch' }}>
        Werner kreeg uw aanvraag binnen en antwoordt zelf, doorgaans binnen
        twee werkdagen. We kijken eerst of er een klik is — daarna pas een traject.
      </p>
      <div style={{ paddingTop: 12, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--muted)', letterSpacing: '0.06em' }}>
        <div>ONDERWERP &nbsp; {label}</div>
      </div>
      <div className="form-actions" style={{ marginTop: 8 }}>
        <button className="btn ghost" onClick={() => go('/')}>
          Terug naar home <span className="arrow">→</span>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { ContactPage, SentState, ONDERWERPEN });