const { Tag, Icon, Button, Field, ConsentCheckbox, ChipGroup, FormAlert } = window.CoolZoneSolutionDesignSystem_12e696;

function Contact({ t }) {
  const S = window.CZ_SETTINGS;
  const [v, setV] = React.useState({ name: '', email: '', phone: '', msg: '', consent: false });
  const [when, setWhen] = React.useState('any');
  const [sent, setSent] = React.useState(false);
  const [tried, setTried] = React.useState(false);
  const bad = {
    name: !v.name.trim(),
    email: !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v.email),
    phone: v.phone.trim().length < 6,
    msg: v.msg.trim().length < 5,
    consent: !v.consent
  };
  const set = (k) => (e) => setV({ ...v, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
  const submit = (e) => {
    e.preventDefault();
    setTried(true);
    if (Object.values(bad).some(Boolean)) return;
    setSent(true);
    fetch('/api/leads-api.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: v.name,
        email: v.email,
        phone: v.phone,
        notes: v.msg + (when !== 'any' ? ` (preferred contact time: ${when})` : ''),
        problems: []
      })
    }).catch(() => {});
  };
  const hoursLine = window.CZ_FORMAT_HOURS(S.hoursRaw, t) || t.cHoursVal;
  const info = [
    ['phone', t.cPhone, S.phoneDisplay, 'tel:' + S.phoneHref],
    ['mail', t.cEmail, S.email, 'mailto:' + S.email],
    ['pin', t.cArea, t.cAreaVal, null],
    ...(S.addressLine ? [['pin', t.cAddress, S.addressLine, null]] : []),
    ['clock', t.cHours, hoursLine, null]
  ];
  return (
    <section className="contact-section" id="kontakt">
      <div className="contact-bg" aria-hidden="true"><div className="glow glow-3"></div><div className="glow glow-4"></div></div>
      <div className="container contact-grid">
        <div className="contact-copy">
          <Tag light>{t.contactTag}</Tag>
          <h2><EditableText fieldKey="contactH2">{t.contactH2}</EditableText></h2>
          <p className="lead"><EditableText fieldKey="contactLead" multiline>{t.contactLead}</EditableText></p>
          <ul className="contact-list">
            {info.map(([ic, label, value, href]) => (
              <li key={label}>
                <span className="ci"><Icon name={ic} /></span>
                <span><em>{label}</em>{href ? <a href={href}>{value}</a> : <b>{value}</b>}</span>
              </li>
            ))}
          </ul>
          <div className="contact-actions">
            <Button variant="orange" href={'tel:' + S.phoneHref} iconBefore="phone">{t.cCall}</Button>
          </div>
        </div>
        <form className="form-card" onSubmit={submit} noValidate>
          <h3>{t.formH3}</h3>
          <p className="form-sub">{t.formSub}</p>
          <Field id="k-name" label={t.fName} placeholder={t.fNamePh} value={v.name} onChange={set('name')} invalid={tried && bad.name} error={t.fNameErr} />
          <div className="field-row">
            <Field id="k-email" type="email" label={t.fEmail} placeholder={t.fEmailPh} value={v.email} onChange={set('email')} invalid={tried && bad.email} error={t.fEmailErr} />
            <Field id="k-phone" type="tel" label={t.fPhone} placeholder={t.fPhonePh} value={v.phone} onChange={set('phone')} invalid={tried && bad.phone} error={t.fPhoneErr} />
          </div>
          <Field as="select" id="k-topic" label={t.fTopic} options={t.svc.map((s) => s[0])} />
          <ChipGroup label={t.cHours} value={when} onChange={setWhen}
            options={[{ value: 'any', label: hoursLine }, { value: 'am', label: '7:00–12:00' }, { value: 'pm', label: '12:00–19:00' }]} />
          <Field as="textarea" id="k-msg" label={t.fMsg} placeholder={t.fMsgPh} rows={3} value={v.msg} onChange={set('msg')} invalid={tried && bad.msg} error={t.fMsgErr} />
          <ConsentCheckbox checked={v.consent} onChange={set('consent')} invalid={tried && bad.consent} error={tried && bad.consent ? t.fConsentErr : null}>{t.fConsent}</ConsentCheckbox>
          <Button variant="primary" block icon="arrow" type="submit">{t.fSubmit}</Button>
          <p className="form-note">{t.fNote}</p>
          {sent ? <FormAlert title={t.okT} description={t.okD} /> : null}
        </form>
      </div>
    </section>
  );
}
Object.assign(window, { Contact });