/* global React, Topo, Button, Icon, Section, Container, Eyebrow */
const { useState: useStateK } = React;

function PageContact() {
  const [submitted, setSubmitted] = useStateK(false);
  const [form, setForm] = useStateK({
    name: '', email: '', phone: '', company: '',
    topic: 'Erstgespräch', message: '',
  });
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <div data-screen-label="Kontakt">
      <Section pad="120px 28px 56px" bg="var(--kmu-paper)" label="Kontakt Hero">
        <Topo opacity={0.55}/>
        <Container>
          <Eyebrow dot>KONTAKT</Eyebrow>
          <h1 className="kmu-display" style={{ margin: '18px 0 0', fontSize: 'clamp(48px, 6.4vw, 88px)' }}>
            Lass uns reden.
          </h1>
          <p className="kmu-lead" style={{ marginTop: 26, maxWidth: 660 }}>
            Wir antworten innert eines Werktags. Persönlich, ohne Auto‑Responder. Versprochen.
          </p>
        </Container>
      </Section>

      <Section bg="#fff" pad="64px 28px 96px" label="Kontakt Inhalt">
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'flex-start' }}>
            {/* Form */}
            <div style={{
              background: '#fff', border: '1px solid var(--kmu-line)',
              borderRadius: 22, padding: 40, boxShadow: 'var(--shadow-sm)',
            }}>
              {submitted ? (
                <div style={{ padding: '24px 0', textAlign: 'center' }}>
                  <div style={{
                    width: 64, height: 64, borderRadius: 999, background: 'var(--kmu-blue-100)',
                    color: 'var(--kmu-blue-700)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    margin: '0 auto 22px',
                  }}><Icon name="check" size={32} strokeWidth={2.4}/></div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, margin: 0 }}>
                    Danke, {form.name || 'wir hören dich'}!
                  </h3>
                  <p className="kmu-body" style={{ marginTop: 12, maxWidth: 420, marginInline: 'auto' }}>
                    Wir melden uns innert eines Werktags bei <strong>{form.email || 'dir'}</strong>.
                  </p>
                  <div style={{ marginTop: 22 }}>
                    <Button variant="ghost" onClick={() => { setSubmitted(false); setForm({ name:'',email:'',phone:'',company:'',topic:'Erstgespräch',message:'' }); }}>Noch eine Anfrage</Button>
                  </div>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} style={{ display: 'grid', gap: 18 }}>
                  <div>
                    <h2 className="kmu-h2" style={{ fontSize: 32, margin: 0 }}>Schreib uns.</h2>
                    <p className="kmu-small" style={{ margin: '10px 0 0', maxWidth: 480 }}>
                      Wir lesen jede Nachricht persönlich. Pflichtfelder mit *.
                    </p>
                  </div>
                  <div>
                    <Label>Worum geht's?</Label>
                    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 6 }}>
                      {['Erstgespräch', 'Angebot anfragen', 'Support', 'Bewerbung', 'Anderes'].map((t) => (
                        <Pill key={t} active={form.topic === t} onClick={() => setForm({ ...form, topic: t })}>{t}</Pill>
                      ))}
                    </div>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                    <Field label="Name *"><input required value={form.name} onChange={upd('name')}/></Field>
                    <Field label="Firma"><input value={form.company} onChange={upd('company')}/></Field>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                    <Field label="E‑Mail *"><input type="email" required value={form.email} onChange={upd('email')}/></Field>
                    <Field label="Telefon"><input type="tel" value={form.phone} onChange={upd('phone')}/></Field>
                  </div>
                  <Field label="Nachricht">
                    <textarea rows={5} value={form.message} onChange={upd('message')} placeholder="Erzähl uns kurz, was los ist."/>
                  </Field>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6, flexWrap: 'wrap', gap: 12 }}>
                    <span className="kmu-meta">Antwort innert eines Werktags · keine Werbung</span>
                    <Button type="submit" variant="primary" size="lg" icon="send">Senden</Button>
                  </div>
                </form>
              )}
            </div>

            {/* Sidebar */}
            <aside style={{ display: 'grid', gap: 22, position: 'sticky', top: 96 }}>
              <ContactCard icon="phone" title="Anrufen">
                <a href="tel:+41625629600" style={{ color: 'var(--fg-1)', textDecoration: 'none', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22 }}>
                  +41 62 562 96 00
                </a>
                <p className="kmu-small" style={{ margin: '8px 0 0' }}>Mo – Fr · 08:00 – 17:30</p>
              </ContactCard>
              <ContactCard icon="mail" title="E‑Mail">
                <a href="mailto:hallo@kmucare.ch" style={{ color: 'var(--fg-1)', textDecoration: 'none', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22 }}>
                  hallo@kmucare.ch
                </a>
                <p className="kmu-small" style={{ margin: '8px 0 0' }}>Antwort innert eines Werktags</p>
              </ContactCard>
              <ContactCard icon="map-pin" title="Vorbeikommen">
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--fg-1)' }}>
                  Aarauerstrasse 27<br/>5102 Rupperswil
                </div>
                <p className="kmu-small" style={{ margin: '8px 0 0' }}>5 Min Fussweg vom Bahnhof</p>
              </ContactCard>
              <ContactCard icon="lock" title="Notfall‑Hotline">
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--fg-1)' }}>
                  +41 62 562 96 99
                </div>
                <p className="kmu-small" style={{ margin: '8px 0 0' }}>24 / 7 für POS‑ und Domain‑Kunden</p>
              </ContactCard>
            </aside>
          </div>
        </Container>
      </Section>

      {/* Map placeholder */}
      <Section bg="var(--kmu-paper)" pad="0" label="Karte">
        <div style={{
          height: 320, position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(135deg, #d6dce0 0%, #cfd9e0 100%)',
        }}>
          <Topo opacity={0.7} color="#a4b1bb"/>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{
              background: '#fff', border: '1px solid var(--kmu-line)', borderRadius: 16,
              padding: 20, boxShadow: 'var(--shadow-md)',
              display: 'flex', alignItems: 'center', gap: 16, minWidth: 320,
            }}>
              <div style={{
                width: 48, height: 48, borderRadius: 12, background: 'var(--kmu-blue)',
                color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><Icon name="map-pin" size={22}/></div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 16, color: 'var(--fg-1)' }}>KMUcare GmbH</div>
                <div className="kmu-small" style={{ marginTop: 4 }}>Aarauerstrasse 27 · 5102 Rupperswil</div>
              </div>
            </div>
          </div>
        </div>
      </Section>
    </div>
  );
}

function ContactCard({ icon, title, children }) {
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--kmu-line)',
      borderRadius: 18, padding: 24,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10, background: 'var(--kmu-blue-100)',
          color: 'var(--kmu-blue-700)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><Icon name={icon} size={18}/></div>
        <div className="kmu-eyebrow">{title}</div>
      </div>
      {children}
    </div>
  );
}

function Pill({ children, active, onClick }) {
  return (
    <button type="button" onClick={onClick} style={{
      fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
      padding: '7px 14px', borderRadius: 999,
      background: active ? 'var(--kmu-blue)' : '#fff',
      color: active ? '#fff' : 'var(--fg-2)',
      border: `1px solid ${active ? 'var(--kmu-blue)' : 'var(--kmu-line-strong)'}`,
      cursor: 'pointer', transition: 'all 150ms',
    }}>{children}</button>
  );
}

function Label({ children }) {
  return <span style={{ display: 'block', fontSize: 13, fontWeight: 600, color: 'var(--fg-2)' }}>{children}</span>;
}

function Field({ label, children }) {
  return (
    <label style={{ display: 'block' }}>
      <Label>{label}</Label>
      {React.cloneElement(children, {
        style: {
          width: '100%', boxSizing: 'border-box',
          fontFamily: 'var(--font-sans)', fontSize: 15,
          padding: '12px 14px', border: '1px solid var(--kmu-line-strong)',
          borderRadius: 12, background: '#fff', color: 'var(--fg-1)', outline: 'none',
          transition: 'border 150ms, box-shadow 150ms', resize: 'vertical',
          marginTop: 6,
        },
        onFocus: (e) => { e.target.style.borderColor = 'var(--kmu-blue)'; e.target.style.boxShadow = '0 0 0 3px rgba(46,155,218,0.18)'; },
        onBlur:  (e) => { e.target.style.borderColor = 'var(--kmu-line-strong)'; e.target.style.boxShadow = 'none'; },
      })}
    </label>
  );
}

window.PageContact = PageContact;