// Блок «Контакты» — финальная секция главной. Форма заявки по центру.
// Стиль главной: бежевый фон, чёрный гротеск, терракотовый акцент.

const labelCss = {
  display: 'block', marginBottom: 8,
  fontFamily: 'JetBrains Mono,monospace', fontSize: 10.5, fontWeight: 700,
  letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(26,26,30,0.5)',
};

function Field({ label, placeholder, multiline, type = 'text', name, autoComplete, value, onChange, disabled }) {
  const base = {
    width: '100%', boxSizing: 'border-box',
    padding: multiline ? '14px 16px' : '0 16px',
    height: multiline ? 112 : 48,
    border: '1.5px solid rgba(26,26,30,0.25)', borderRadius: 8,
    background: '#fff', color: 'var(--ink)',
    fontFamily: 'Inter Tight,sans-serif', fontSize: 16,
    outline: 'none', transition: 'border-color .2s',
    resize: 'none', lineHeight: multiline ? 1.5 : undefined,
    opacity: disabled ? 0.6 : 1,
  };
  const onFocus = (e) => { e.target.style.borderColor = 'var(--accent)'; };
  const onBlur = (e) => { e.target.style.borderColor = 'rgba(26,26,30,0.25)'; };
  const handle = (e) => { if (onChange) onChange(e.target.value); };
  return (
    <div>
      <span style={labelCss}>{label}</span>
      {multiline
        ? <textarea name={name} placeholder={placeholder} value={value || ''} onChange={handle}
            disabled={disabled} style={base} onFocus={onFocus} onBlur={onBlur} />
        : <input type={type} name={name} autoComplete={autoComplete} placeholder={placeholder}
            value={value || ''} onChange={handle} disabled={disabled}
            style={base} onFocus={onFocus} onBlur={onBlur} />}
    </div>
  );
}

// Нормализация ошибок: pydantic-валидация шлёт массив, http-ошибки — строку
// (как formatError в auth.jsx). Возвращает читабельный текст.
function formatError(detail) {
  if (!detail) return '';
  if (typeof detail === 'string') return detail;
  if (Array.isArray(detail)) {
    return detail.map((e) => (e && e.msg) ? e.msg : String(e)).join('; ');
  }
  return 'Что-то пошло не так.';
}

// ── Форма заявки: state/handler/состояния, визуал прежний ────────────
function LeadForm() {
  const [name, setName] = React.useState('');
  const [contact, setContact] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [done, setDone] = React.useState(false);

  const disabled = !name.trim() || !contact.trim() || loading;

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (disabled) return;
    setError('');
    setLoading(true);
    try {
      // /api/leads — публичный, без токена; обычный fetch (не apiFetch).
      const res = await fetch('/api/leads', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: name.trim(),
          contact: contact.trim(),
          message: message.trim() || null,
          source: 'home_contacts',
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(formatError(data && data.detail) || 'Не удалось отправить заявку.');
        setLoading(false);
        return;
      }
      setDone(true);
    } catch (err) {
      setError('Сетевая ошибка. Попробуйте ещё раз.');
      setLoading(false);
    }
  };

  if (done) {
    return (
      <div style={{
        padding: '32px 28px',
        border: '2px solid var(--ink)', background: 'transparent',
        display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono,monospace', fontSize: 10.5, fontWeight: 700,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'var(--accent)',
        }}>● заявка отправлена</div>
        <div style={{ fontSize: 18, fontWeight: 500, lineHeight: 1.4, color: 'var(--ink)' }}>
          Свяжемся с вами в течение дня.
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <Field label="Ваше имя" placeholder="Как к вам обращаться"
        name="name" autoComplete="name"
        value={name} onChange={setName} disabled={loading} />
      <Field label="Telegram или телефон" placeholder="@username или +7..."
        name="contact" autoComplete="tel"
        value={contact} onChange={setContact} disabled={loading} />
      <Field label="Сообщение" placeholder="Коротко о вашем бизнесе и задачах" multiline
        name="message" value={message} onChange={setMessage} disabled={loading} />

      {error && (
        <div style={{
          padding: '12px 14px',
          background: 'rgba(201,104,72,0.10)',
          border: '1.5px solid var(--accent)',
          color: 'var(--ink)',
          fontFamily: 'Inter Tight,sans-serif', fontSize: 14, lineHeight: 1.4,
        }}>{error}</div>
      )}

      <button type="submit" disabled={disabled}
        style={{
          marginTop: 2, height: 54, width: '100%',
          cursor: disabled ? 'not-allowed' : 'pointer',
          background: 'var(--ink)', color: 'var(--bg)', border: '2px solid var(--ink)',
          fontFamily: 'JetBrains Mono,monospace', fontWeight: 700, fontSize: 12,
          letterSpacing: '0.2em', textTransform: 'uppercase',
          opacity: disabled ? 0.55 : 1,
          transition: 'background .2s, color .2s, opacity .2s',
        }}
        onMouseOver={(e) => { if (!disabled) { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.borderColor = 'var(--accent)'; } }}
        onMouseOut={(e) => { if (!disabled) { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--ink)'; } }}
      >{loading ? 'отправляем…' : 'отправить заявку →'}</button>
    </form>
  );
}

function Contacts({ minH }) {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  return (
    <section id="contacts" style={{
      minHeight: isMobile ? 'auto' : minH, padding: isMobile ? '56px 18px 48px' : '96px 32px 56px',
      borderTop: '2px solid var(--ink)',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
    }}>
      <h2 style={{
        margin: 0, fontWeight: 900, fontSize: 'clamp(40px,5.5vw,56px)',
        lineHeight: 1, letterSpacing: '-0.03em', textTransform: 'uppercase',
        textAlign: 'center', whiteSpace: isMobile ? 'normal' : 'nowrap',
      }}>Обсудить проект</h2>
      <p style={{
        margin: '18px 0 0', textAlign: 'center', maxWidth: 560,
        fontFamily: 'JetBrains Mono,monospace', fontSize: 12, fontWeight: 700,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: 'rgba(26,26,30,0.5)', lineHeight: 1.6,
      }}>расскажите о бизнесе — подберём тариф и ответим на вопросы</p>

      <div style={{
        width: '100%', maxWidth: 560, marginTop: isMobile ? 32 : 48,
      }}>
        <h3 style={{ margin: '0 0 24px', fontSize: 21, fontWeight: 700 }}>Оставьте заявку</h3>
        <LeadForm />
      </div>

      {/* Футер */}
      <div style={{
        marginTop: 'auto', paddingTop: 64,
        fontFamily: 'JetBrains Mono,monospace', fontSize: 11, fontWeight: 700,
        letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(26,26,30,0.4)',
      }}>© 2026 S"MM</div>
    </section>
  );
}

window.Contacts = Contacts;