const NS = () => window.ZelgerOsteopathieDesignSystem_4d713d;
const Ic = ({ n, s = 20 }) => <i data-lucide={n} style={{ width: s, height: s }}></i>;

function Kontakt() {
  const { Button, Input, Card } = NS();
  const [sent, setSent] = React.useState(false);
  return (
    <section style={{ padding: 'clamp(56px, 9vw, 96px) clamp(20px, 5vw, 40px)', background: 'var(--surface-inverse)' }}>
      <div style={{ maxWidth: 'var(--container-narrow)', margin: '0 auto', textAlign: 'center' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-sm)', fontWeight: 500, letterSpacing: 'var(--tracking-wordmark)', textTransform: 'uppercase', color: 'var(--brand-orange-soft)' }}>Kontakt</span>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(1.7rem, 5.2vw, 2.25rem)', letterSpacing: 'var(--tracking-tight)', color: 'var(--warm-50)', margin: '14px 0 0', lineHeight: 1.15 }}>Lust auf einen Termin?</h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-md)', lineHeight: 1.7, color: 'var(--warm-400)', margin: '18px auto 0', maxWidth: '480px' }}>
          Wenn du Fragen oder Interesse an einem Behandlungstermin hast, schreib mir gern. Ich freue mich auf dich.
        </p>
      </div>
      <Card elevation="lg" style={{ maxWidth: 'var(--container-narrow)', margin: '40px auto 0' }}>
        {sent ? (
          <div style={{ textAlign: 'center', padding: '24px 0' }}>
            <span style={{ color: 'var(--success)', display: 'inline-flex' }}><Ic n="check-circle" s={44} /></span>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-lg)', color: 'var(--text-strong)', margin: '14px 0 6px' }}>Danke, deine Nachricht ist da.</h3>
            <p style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)', margin: 0 }}>Ich melde mich so bald wie möglich bei dir.</p>
          </div>
        ) : (
          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'grid', gap: '20px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }}>
              <Input label="Name" placeholder="Vor- und Nachname" icon={<Ic n="user" />} required />
              <Input label="E-Mail" type="email" placeholder="du@beispiel.de" icon={<Ic n="mail" />} required />
            </div>
            <Input label="Dein Anliegen" as="textarea" placeholder="Welche Beschwerden möchtest du angehen?" />
            <Button variant="primary" size="lg" type="submit" iconRight={<Ic n="arrow-right" />}>Nachricht senden</Button>
          </form>
        )}
      </Card>
    </section>
  );
}