/* LeadPixel — Contact page. Editorial two-column layout, no floating containers. */
const CDS = window.LeadPixelDesignSystem_6ae30d;
const { Button } = CDS;
const { SiteChrome, useContact } = window;

function ContactPage() {
  const openContact = useContact();
  const [form, setForm] = React.useState({ naam: '', email: '', bericht: '' });
  const [touched, setTouched] = React.useState(false);
  const [status, setStatus] = React.useState('idle'); // idle | sending | error

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email);
  const valid = form.naam.trim() && emailOk;

  const submit = async (e) => {
    e.preventDefault();
    setTouched(true);
    if (!valid || status === 'sending') return;
    setStatus('sending');
    try {
      await fetch(window.LP_SCRIPT_URL, {
        method: 'POST',
        mode: 'no-cors',
        body: new URLSearchParams({ ...form, bron: 'contact' }),
      });
      const firstName = form.naam.trim().split(' ')[0];
      window.location.href = 'bedankt?naam=' + encodeURIComponent(firstName);
    } catch (_) {
      setStatus('error');
    }
  };

  return (
    <React.Fragment>
      {/* —— Head —— */}
      <section className="lp-section lp-section--tight lp-contact-head">
        <div className="lp-container">
          <div className="lp-contact-head__inner reveal">
            <div className="lp-eyebrow-row" style={{ justifyContent: 'center' }}>
              <span className="lp-dot"></span><span className="lp-eyebrow">Contact</span>
            </div>
            <h1>Kom met ons <span className="metal">in contact.</span></h1>
            <p>Vul het formulier in, of plan direct een intakegesprek wanneer het jou het beste uitkomt.</p>
          </div>
        </div>
      </section>

      {/* —— Body: form + aside —— */}
      <section className="lp-section lp-contact" style={{ paddingTop: 0 }}>
        <div className="lp-container">
          <div className="lp-contact__grid">

            {/* Form */}
            <form className="lp-cform reveal" onSubmit={submit} noValidate>
              <div className="lp-field">
                <label className="lp-field__label" htmlFor="c-naam">Naam</label>
                <input id="c-naam" className="lp-field__input" type="text" placeholder="Voor- en achternaam"
                value={form.naam} onChange={set('naam')} />
                {touched && !form.naam.trim() ? <span className="lp-field__err">Vul je naam in.</span> : null}
              </div>

              <div className="lp-field">
                <label className="lp-field__label" htmlFor="c-email">E-mailadres</label>
                <input id="c-email" className="lp-field__input" type="email" inputMode="email" placeholder="jouw@email.nl"
                value={form.email} onChange={set('email')} />
                {touched && !emailOk ? <span className="lp-field__err">Vul een geldig e-mailadres in.</span> : null}
              </div>

              <div className="lp-field">
                <label className="lp-field__label" htmlFor="c-bericht">Bericht</label>
                <textarea id="c-bericht" className="lp-field__input" placeholder="Waar kunnen we je mee helpen?"
                value={form.bericht} onChange={set('bericht')}></textarea>
              </div>

              <Button variant="primary" size="lg" type="submit" block dot
                disabled={(touched && !valid) || status === 'sending'}
                className="lp-cform__submit">
                {status === 'sending' ? 'Bezig met verzenden…' : 'Verstuur je aanvraag'}
              </Button>
              {status === 'error' && (
                <div className="lp-field__err" style={{ marginTop: 10, textAlign: 'center' }}>
                  Verzenden mislukt. Probeer het opnieuw of mail naar{' '}
                  <a href="mailto:info@leadpixel.nl" style={{ color: 'inherit', textDecoration: 'underline' }}>info@leadpixel.nl</a>.
                </div>
              )}
              <div className="lp-cform__fine"><IconCheck style={{ width: 14, height: 14 }} />We reageren meestal binnen één werkdag.</div>
            </form>

            {/* Aside */}
            <aside className="lp-contact__aside reveal">
              <div className="lp-eyebrow-row"><span className="lp-dot"></span><span className="lp-eyebrow">Liever direct sparren?</span></div>
              <h2 className="lp-contact__asideTitle">Plan een <span className="metal">intakegesprek.</span></h2>
              <p className="lp-contact__asideLead">Plan een vrijblijvend intakegesprek van 30 minuten. We laten je zien waar jouw grootste groeikansen liggen.</p>
              <Button variant="glass" size="md" dot onClick={openContact} iconRight={<IconArrow />}>Plan een intake</Button>

              <div className="lp-contact__methods">
                <a className="lp-method" href="mailto:info@leadpixel.nl">
                  <span className="lp-method__ico"><IconMail /></span>
                  <span><span className="lp-method__k">Mail</span>info@leadpixel.nl</span>
                </a>
              </div>
            </aside>

          </div>
        </div>
      </section>
    </React.Fragment>);

}

const _root = document.getElementById('root');
ReactDOM.createRoot(_root).render(
  <SiteChrome>
    <ContactPage />
  </SiteChrome>
);