// ── Kontakt + Footer ──────────────────────────────────────────────────────

const inputStyle = {
  width:        '100%',
  background:   'rgba(255,255,255,0.07)',
  border:       '1px solid rgba(255,255,255,0.18)',
  borderRadius: '6px',
  color:        '#ffffff',
  padding:      '13px 15px',
  fontSize:     '16px',
  outline:      'none',
};

const selectArrow = 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'14\' height=\'14\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%23ffffff\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'m6 9 6 6 6-6\'/%3E%3C/svg%3E")';

function Field({ label, htmlFor, children }) {
  return (
    <label htmlFor={htmlFor} className="block">
      <span
        className="font-mono uppercase text-white/55 block"
        style={{ fontSize: '11px', letterSpacing: '0.16em', marginBottom: '8px' }}
      >
        {label}
      </span>
      {children}
    </label>
  );
}

function Kontakt() {
  const t = useT();
  const f = t.kontakt.fields;

  const [form, setForm] = React.useState({ name: '', tel: '', anliegenIdx: 0, nachricht: '' });
  const [sent, setSent] = React.useState(false);

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

  return (
    <section id="kontakt" style={{ background: '#1E4D8C', paddingTop: '90px', paddingBottom: '94px' }}>
      <div className="mx-auto max-w-[1240px] px-6 md:px-10">
        <Reveal>
          <h2
            className="font-display font-bold text-white"
            style={{ fontSize: 'clamp(34px, 4.6vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.025em' }}
          >
            {t.kontakt.heading}
          </h2>
        </Reveal>

        <div className="grid grid-cols-1 lg:grid-cols-[1fr_400px]" style={{ gap: '56px', marginTop: '46px' }}>
          <Reveal>
            {sent ? (
              <div
                className="flex flex-col items-start justify-center rounded-md"
                style={{ background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.18)', padding: '40px', minHeight: '300px' }}
              >
                <span
                  className="inline-flex items-center justify-center rounded-full"
                  style={{ width: '56px', height: '56px', background: '#0D9488', color: '#fff' }}
                >
                  <CheckGlyph size={26} />
                </span>
                <h3 className="font-display font-bold text-white" style={{ fontSize: '28px', marginTop: '20px' }}>
                  {t.kontakt.success.greeting}, {form.name || t.kontakt.success.fallback}!
                </h3>
                <p className="font-sans text-white/75" style={{ fontSize: '16px', lineHeight: 1.6, marginTop: '8px' }}>
                  {t.kontakt.success.body}
                </p>
              </div>
            ) : (
              <form
                onSubmit={(e) => { e.preventDefault(); setSent(true); }}
                className="grid grid-cols-1 sm:grid-cols-2"
                style={{ gap: '18px' }}
              >
                <Field label={f.name} htmlFor="f-name">
                  <input id="f-name" type="text" required value={form.name} onChange={set('name')} style={inputStyle} placeholder={f.namePlaceholder} />
                </Field>
                <Field label={f.tel} htmlFor="f-tel">
                  <input id="f-tel" type="tel" required value={form.tel} onChange={set('tel')} style={inputStyle} placeholder={f.telPlaceholder} />
                </Field>
                <div className="sm:col-span-2">
                  <Field label={f.anliegen} htmlFor="f-anliegen">
                    <select
                      id="f-anliegen"
                      value={form.anliegenIdx}
                      onChange={(e) => setForm((prev) => ({ ...prev, anliegenIdx: Number(e.target.value) }))}
                      style={{ ...inputStyle, appearance: 'none', backgroundImage: selectArrow, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 15px center' }}
                    >
                      {f.options.map((opt, i) => <option key={i} value={i}>{opt}</option>)}
                    </select>
                  </Field>
                </div>
                <div className="sm:col-span-2">
                  <Field label={f.nachricht} htmlFor="f-msg">
                    <textarea id="f-msg" rows={4} value={form.nachricht} onChange={set('nachricht')} style={{ ...inputStyle, resize: 'vertical' }} placeholder={f.msgPlaceholder} />
                  </Field>
                </div>
                <div className="sm:col-span-2">
                  <button
                    type="submit"
                    className="font-sans font-bold text-white rounded-md transition-transform duration-200 hover:scale-[1.02]"
                    style={{ background: '#0D9488', padding: '15px 34px', fontSize: '16px', boxShadow: '0 10px 26px rgba(13,148,136,0.4)' }}
                  >
                    {f.submit}
                  </button>
                </div>
              </form>
            )}
          </Reveal>

          {/* contact details */}
          <Reveal delay={120}>
            <div className="flex flex-col" style={{ gap: '30px' }}>
              <a href={PHONE_HREF} className="block group">
                <span className="font-mono uppercase text-white/55 block" style={{ fontSize: '11px', letterSpacing: '0.16em', marginBottom: '6px' }}>
                  {t.kontakt.details.callLabel}
                </span>
                <span
                  className="font-display font-bold text-white block transition-colors group-hover:text-[#5EEAD4]"
                  style={{ fontSize: 'clamp(34px, 4vw, 46px)', letterSpacing: '-0.02em', lineHeight: 1 }}
                >
                  {PHONE_DISPLAY}
                </span>
              </a>

              <div className="flex items-start gap-[12px]">
                <span className="text-white/70 mt-[1px]"><PinGlyph size={20} /></span>
                <p className="font-sans text-white/85" style={{ fontSize: '16px', lineHeight: 1.6 }}>
                  Ihmeplatz 7<br />30449 Hannover
                </p>
              </div>

              <div className="flex items-start gap-[12px]">
                <span className="text-white/70 mt-[1px]"><ClockGlyph size={20} /></span>
                <p className="font-sans text-white/85" style={{ fontSize: '16px', lineHeight: 1.6 }}>
                  {t.kontakt.details.hours}<br />
                  <span className="text-[#5EEAD4] font-semibold">{t.kontakt.details.emergency}</span>
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const t = useT();

  return (
    <footer style={{ background: '#0F2952', paddingTop: '52px', paddingBottom: '40px' }}>
      <div className="mx-auto max-w-[1240px] px-6 md:px-10">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between" style={{ gap: '28px' }}>
          <div>
            <Logo light />
            <p className="font-sans text-white/60" style={{ fontSize: '15px', marginTop: '18px' }}>
              {t.footer.tagline}
            </p>
            <p className="font-sans text-white/45" style={{ fontSize: '14px', marginTop: '10px', lineHeight: 1.6 }}>
              {t.footer.address} · {PHONE_DISPLAY}
            </p>
          </div>

          <div className="flex flex-wrap items-center gap-x-[26px] gap-y-[10px]">
            {t.footer.legal.map((x) => (
              <a key={x} href="#" className="font-sans text-white/65 hover:text-white transition-colors" style={{ fontSize: '14px' }}>
                {x}
              </a>
            ))}
          </div>
        </div>

        <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)', marginTop: '34px', paddingTop: '20px' }}>
          <p className="font-mono uppercase text-white/40" style={{ fontSize: '11px', letterSpacing: '0.14em' }}>
            {t.footer.copy}
          </p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Kontakt, Footer });