// Pricing.jsx — 3 plan cards + Lead form

function Pricing({ t, onCTA }) {
  return (
    <section id="pricing" className="sec-pad" style={{ padding: '100px 24px', background: '#0f111a' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 20 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#3b82f614', border: '1px solid #3b82f630', borderRadius: 20, padding: '5px 14px', marginBottom: 16 }}>
            <span style={{ fontSize: 11, fontWeight: 700, color: '#3b82f6', letterSpacing: 2, textTransform: 'uppercase' }}>PRICING</span>
          </div>
          <h2 style={{ fontSize: 'clamp(28px,4vw,48px)', fontWeight: 900, color: '#e2e8f0', marginBottom: 12, fontFamily: "'Outfit', sans-serif" }}>{t.pricing.title}</h2>
          <p style={{ fontSize: 17, color: '#64748b', maxWidth: 560, margin: '0 auto 40px' }}>{t.pricing.sub}</p>
        </div>

        <div className="pricing-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20, marginBottom: 32 }}>
          {t.pricing.plans.map((plan, i) => (
            <div key={i} style={{
              background: plan.highlight ? 'linear-gradient(135deg, #151d36, #1a1f2e)' : '#151925',
              border: plan.highlight ? '1px solid #3b82f650' : '1px solid #1e293b',
              borderRadius: 20, padding: 28,
              position: 'relative', overflow: 'hidden',
              boxShadow: plan.highlight ? '0 0 0 1px #3b82f620, 0 24px 60px rgba(59,130,246,0.15)' : 'none',
              transition: 'transform 0.2s',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              {plan.highlight && (
                <div style={{ position: 'absolute', top: 0, right: 0, background: '#3b82f6', borderRadius: '0 20px 0 12px', padding: '6px 16px', fontSize: 10, fontWeight: 800, color: '#fff', letterSpacing: 1 }}>{plan.badge}</div>
              )}
              <div style={{ marginBottom: 20 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 10 }}>{plan.name}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
                  <span style={{ fontSize: /^\$/.test(plan.price) ? 48 : 26, fontWeight: 900, color: plan.highlight ? '#3b82f6' : '#e2e8f0', fontFamily: "'Outfit', sans-serif", lineHeight: 1.1 }}>{plan.price}</span>
                  <span style={{ fontSize: 14, color: '#475569' }}>/ {plan.period}</span>
                </div>
                <div style={{ fontSize: 12, color: '#475569', marginTop: 6 }}>{plan.after}</div>
              </div>
              <p style={{ fontSize: 14, color: '#94a3b8', lineHeight: 1.6, marginBottom: 24, minHeight: 56 }}>{plan.desc}</p>
              <div style={{ marginBottom: 28 }}>
                {plan.features.map((f, j) => (
                  <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                    <div style={{ width: 18, height: 18, borderRadius: '50%', background: plan.highlight ? '#3b82f620' : '#10b98120', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke={plan.highlight ? '#3b82f6' : '#10b981'} strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <span style={{ fontSize: 13, color: '#94a3b8' }}>{f}</span>
                  </div>
                ))}
              </div>
              <button onClick={onCTA} style={{
                width: '100%', padding: '13px 0', borderRadius: 10, border: 'none',
                background: plan.highlight ? '#3b82f6' : '#1a1f2e',
                color: plan.highlight ? '#fff' : '#94a3b8',
                border: plan.highlight ? 'none' : '1px solid #1e293b',
                fontSize: 14, fontWeight: 700, cursor: 'pointer',
                transition: 'opacity 0.15s',
                fontFamily: "'DM Sans', sans-serif",
                boxShadow: plan.highlight ? '0 4px 20px rgba(59,130,246,0.3)' : 'none',
              }}>
                {plan.cta}
              </button>
            </div>
          ))}
        </div>

        {/* Note */}
        <div style={{ background: '#151925', border: '1px solid #f59e0b30', borderRadius: 12, padding: '14px 20px', textAlign: 'center' }}>
          <span style={{ fontSize: 13, color: '#94a3b8' }}>{t.pricing.note}</span>
        </div>
      </div>
    </section>
  );
}

// ── LEAD FORM ────────────────────────────────────────
function LeadForm({ t, lang }) {
  const [form, setForm] = React.useState({
    email: '', company: '', name: '', role: '',
    siteName: '', city: '', siteCount: '1', sections: '', managers: '',
    hasStandards: '', comment: '',
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const siteCountNum = parseInt(form.siteCount) || 1;

  const inpStyle = {
    width: '100%', background: '#1a1f2e', border: '1px solid #1e293b',
    borderRadius: 8, padding: '11px 14px', color: '#e2e8f0', fontSize: 14,
    outline: 'none', boxSizing: 'border-box', fontFamily: "'DM Sans', sans-serif",
    transition: 'border-color 0.15s',
  };
  const labelStyle = { display: 'block', fontSize: 12, color: '#94a3b8', fontWeight: 600, marginBottom: 6, letterSpacing: 0.3 };
  const fldStyle = { marginBottom: 18 };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setSubmitError('');
    try {
      await window.bldDB.submitLead({ ...form, lang });
      setSubmitted(true);
    } catch (err) {
      console.error('[BLD lead submit]', err);
      const msg = err?.message || String(err);
      setSubmitError(
        lang === 'uk' ? 'Не вдалося надіслати заявку. Спробуйте ще раз або напишіть нам на email.' :
        lang === 'ru' ? 'Не удалось отправить заявку. Попробуйте ещё раз или напишите нам на email.' :
        'Could not submit your application. Please try again or email us.'
      );
      console.error('Detail:', msg);
    } finally {
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <section id="form" className="form-section-pad" style={{ padding: '100px 24px', background: '#0f111a' }}>
        <div style={{ maxWidth: 680, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: '50%', background: '#10b98120', border: '1px solid #10b98140', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px', fontSize: 28 }}>✓</div>
          <h2 style={{ fontSize: 32, fontWeight: 900, color: '#e2e8f0', marginBottom: 12, fontFamily: "'Outfit', sans-serif" }}>{t.form.success.title}</h2>
          <p style={{ fontSize: 17, color: '#64748b', marginBottom: 40 }}>{t.form.success.sub}</p>
          {/* Next steps mini */}
          <div style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: 16, padding: 28, textAlign: 'left' }}>
            {[
              lang === 'uk' ? 'Переглядаємо вашу заявку' : lang === 'ru' ? 'Проверяем вашу заявку' : 'We review your application',
              lang === 'uk' ? 'Пишемо вам на email протягом 1–2 днів' : lang === 'ru' ? 'Пишем вам на email в течение 1–2 дней' : 'We email you within 1–2 days',
              lang === 'uk' ? 'Запитуємо дані по об\'єкту' : lang === 'ru' ? 'Запрашиваем данные по объекту' : 'We request your project data',
              lang === 'uk' ? 'Вручну налаштовуємо вашу панель' : lang === 'ru' ? 'Вручную настраиваем вашу панель' : 'We set up your panel manually',
              lang === 'uk' ? 'Надсилаємо логін і пароль на ваш email' : lang === 'ru' ? 'Отправляем логин и пароль на ваш email' : 'We send login credentials to your email',
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, marginBottom: i < 4 ? 16 : 0 }}>
                <div style={{ width: 24, height: 24, borderRadius: 6, background: '#3b82f620', border: '1px solid #3b82f640', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 11, fontWeight: 800, color: '#3b82f6' }}>{i + 1}</div>
                <span style={{ fontSize: 14, color: '#94a3b8', lineHeight: 1.5, paddingTop: 3 }}>{s}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="form" className="form-section-pad" style={{ padding: '100px 24px', background: '#0f111a' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#3b82f614', border: '1px solid #3b82f630', borderRadius: 20, padding: '5px 14px', marginBottom: 16 }}>
            <span style={{ fontSize: 11, fontWeight: 700, color: '#3b82f6', letterSpacing: 2, textTransform: 'uppercase' }}>APPLY</span>
          </div>
          <h2 style={{ fontSize: 'clamp(24px,3.5vw,42px)', fontWeight: 900, color: '#e2e8f0', marginBottom: 12, fontFamily: "'Outfit', sans-serif" }}>{t.form.title}</h2>
          <p style={{ fontSize: 16, color: '#64748b', maxWidth: 560, margin: '0 auto' }}>{t.form.sub}</p>
        </div>

        {/* Privacy notice */}
        <div style={{ background: '#10b98110', border: '1px solid #10b98130', borderRadius: 12, padding: '14px 18px', marginBottom: 32, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <div style={{ fontSize: 18, flexShrink: 0 }}>🔒</div>
          <p style={{ fontSize: 13, color: '#10b981', lineHeight: 1.6, margin: 0 }}>{t.form.privacy}</p>
        </div>

        <form onSubmit={handleSubmit} className="form-inner" style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: 20, padding: '36px 40px' }}>
          <div className="form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div style={fldStyle}>
              <label style={labelStyle}>{t.form.fields.email}</label>
              <input type="email" required style={inpStyle} value={form.email} onChange={e => set('email', e.target.value)}
                onFocus={e => e.target.style.borderColor='#3b82f6'} onBlur={e => e.target.style.borderColor='#1e293b'} />
            </div>
            <div style={fldStyle}>
              <label style={labelStyle}>{t.form.fields.company}</label>
              <input required style={inpStyle} value={form.company} onChange={e => set('company', e.target.value)}
                onFocus={e => e.target.style.borderColor='#3b82f6'} onBlur={e => e.target.style.borderColor='#1e293b'} />
            </div>
            <div style={fldStyle}>
              <label style={labelStyle}>{t.form.fields.name}</label>
              <input required style={inpStyle} value={form.name} onChange={e => set('name', e.target.value)}
                onFocus={e => e.target.style.borderColor='#3b82f6'} onBlur={e => e.target.style.borderColor='#1e293b'} />
            </div>
            <div style={fldStyle}>
              <label style={labelStyle}>{t.form.fields.role}</label>
              <select required style={{ ...inpStyle, appearance: 'none' }} value={form.role} onChange={e => set('role', e.target.value)}>
                <option value="">—</option>
                {t.form.fields.roles.map(r => <option key={r} value={r}>{r}</option>)}
              </select>
            </div>
          </div>

          <div style={fldStyle}>
            <label style={labelStyle}>{t.form.fields.siteName}</label>
            <input required style={inpStyle} value={form.siteName} onChange={e => set('siteName', e.target.value)}
              onFocus={e => e.target.style.borderColor='#3b82f6'} onBlur={e => e.target.style.borderColor='#1e293b'} />
          </div>

          <div className="form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div style={fldStyle}>
              <label style={labelStyle}>{t.form.fields.city}</label>
              <input required style={inpStyle} value={form.city} onChange={e => set('city', e.target.value)}
                onFocus={e => e.target.style.borderColor='#3b82f6'} onBlur={e => e.target.style.borderColor='#1e293b'} />
            </div>
            <div style={fldStyle}>
              <label style={labelStyle}>{t.form.fields.siteCount}</label>
              <input type="number" min="1" required style={inpStyle} value={form.siteCount} onChange={e => set('siteCount', e.target.value)}
                onFocus={e => e.target.style.borderColor='#3b82f6'} onBlur={e => e.target.style.borderColor='#1e293b'} />
            </div>
            <div style={fldStyle}>
              <label style={labelStyle}>{t.form.fields.sections}</label>
              <input type="number" min="1" required style={inpStyle} value={form.sections} onChange={e => set('sections', e.target.value)}
                onFocus={e => e.target.style.borderColor='#3b82f6'} onBlur={e => e.target.style.borderColor='#1e293b'} />
            </div>
            <div style={fldStyle}>
              <label style={labelStyle}>{t.form.fields.managers}</label>
              <input type="number" min="1" required style={inpStyle} value={form.managers} onChange={e => set('managers', e.target.value)}
                onFocus={e => e.target.style.borderColor='#3b82f6'} onBlur={e => e.target.style.borderColor='#1e293b'} />
            </div>
          </div>

          <div style={fldStyle}>
            <label style={labelStyle}>{t.form.fields.hasStandards}</label>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {t.form.fields.hasStandardsOpts.map(opt => (
                <button key={opt} type="button" onClick={() => set('hasStandards', opt)} style={{
                  padding: '8px 14px', borderRadius: 8, fontSize: 13, cursor: 'pointer',
                  background: form.hasStandards === opt ? '#3b82f620' : '#1a1f2e',
                  border: form.hasStandards === opt ? '1px solid #3b82f6' : '1px solid #1e293b',
                  color: form.hasStandards === opt ? '#3b82f6' : '#64748b',
                  fontFamily: "'DM Sans', sans-serif", transition: 'all 0.15s',
                }}>{opt}</button>
              ))}
            </div>
          </div>

          {/* Multi-site notice */}
          {siteCountNum > 1 && (
            <div style={{ background: '#f59e0b10', border: '1px solid #f59e0b30', borderRadius: 10, padding: '12px 16px', marginBottom: 18 }}>
              <p style={{ fontSize: 13, color: '#f59e0b', margin: 0 }}>
                {t.form.multiNotice.replace('{n}', siteCountNum).replace('{n}', siteCountNum).replace('{total}', siteCountNum * 150)}
              </p>
            </div>
          )}

          <div style={fldStyle}>
            <label style={labelStyle}>{t.form.fields.comment}</label>
            <textarea rows={4} style={{ ...inpStyle, resize: 'vertical', lineHeight: 1.6 }}
              placeholder={t.form.fields.commentPlaceholder}
              value={form.comment} onChange={e => set('comment', e.target.value)}
              onFocus={e => e.target.style.borderColor='#3b82f6'} onBlur={e => e.target.style.borderColor='#1e293b'} />
          </div>

          {submitError && (
            <div style={{ background: '#e11d4810', border: '1px solid #e11d4840', borderRadius: 10, padding: '12px 16px', marginBottom: 16 }}>
              <p style={{ fontSize: 13, color: '#fca5a5', margin: 0 }}>{submitError}</p>
            </div>
          )}

          <button type="submit" disabled={submitting} style={{
            width: '100%', padding: '16px', borderRadius: 12, border: 'none',
            background: submitting ? '#1e293b' : 'linear-gradient(135deg, #3b82f6, #2563eb)',
            color: '#fff', fontSize: 16, fontWeight: 700, cursor: submitting ? 'default' : 'pointer',
            boxShadow: submitting ? 'none' : '0 8px 32px rgba(59,130,246,0.35)',
            transition: 'all 0.15s',
            fontFamily: "'DM Sans', sans-serif",
          }}>
            {submitting ? '...' : t.form.submit}
          </button>
        </form>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing, LeadForm });