// GetContent — contactpagina. Simpel & professioneel: titel, korte intro en een
// contactformulier (naam, e-mail, onderwerp, bericht). Sluit aan op de site.
function ContactPage({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Input, Button } = NS;
  const [done, setDone] = React.useState(false);

  const labelStyle = { display: 'block', fontSize: 13, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 8 };

  if (done) {
    return (
      <main>
        <PageHero
          eyebrow="Contact"
          title="Bericht verstuurd"
          lead="Bedankt voor je bericht. We nemen zo snel mogelijk contact met je op."
          primary={{ label: 'Terug naar home', to: 'home' }}
          onNav={onNav}
        />
      </main>
    );
  }

  return (
    <main>
      <PageHero
        compact
        eyebrow="Contact"
        title="Neem contact op"
        lead="Een vraag, idee of samenwerking? Stuur ons een bericht en we reageren snel."
        onNav={onNav}
      >
        <form
          onSubmit={(e) => { e.preventDefault(); setDone(true); }}
          className="gc-form-card"
        >
          <Input label="Naam" placeholder="Je naam" icon={<i data-lucide="user"></i>} />
          <Input label="E-mailadres" type="email" placeholder="jij@email.nl" icon={<i data-lucide="mail"></i>} />
          <Input label="Onderwerp" placeholder="Waar gaat het over?" icon={<i data-lucide="tag"></i>} />
          <label style={{ display: 'block' }}>
            <span style={labelStyle}>Bericht</span>
            <textarea rows="5" placeholder="Je bericht…" style={{
              width: '100%', resize: 'vertical', minHeight: 120,
              border: '1.5px solid var(--border-strong)', borderRadius: 'var(--radius-sm)',
              background: 'var(--surface-inset)', padding: '14px 16px',
              fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 'var(--fw-medium)', color: 'var(--text-strong)',
              outline: 'none',
            }}
            onFocus={(e) => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.boxShadow = '0 0 0 4px var(--gc-coral-100)'; }}
            onBlur={(e) => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.boxShadow = 'none'; }} />
          </label>
          <Button type="submit" variant="primary" size="lg" fullWidth iconRight={<i data-lucide="arrow-right"></i>} style={{ marginTop: 4 }}>Verstuur bericht</Button>
        </form>
      </PageHero>
    </main>
  );
}
window.ContactPage = ContactPage;