// Membership page — official association form, submitted to Supabase
const { useState: useStateM } = React;

function PageMembership({ lang }) {
  const t = window.CONTENT[lang].membership;
  const empty = {
    full_name: '', cnp: '', birth_date: '', address: '', phone: '', email: '',
    is_minor: false,
    guardian_name: '', guardian_cnp: '', guardian_address: '', guardian_phone: '', guardian_email: '',
    declaration_consent: false, gdpr_consent: false,
  };
  const [form, setForm] = useStateM(empty);
  const [status, setStatus] = useStateM('idle'); // idle | sending | ok | error

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async e => {
    e.preventDefault();
    setStatus('sending');
    const payload = { ...form, minor_name: form.is_minor ? form.full_name : null, birth_date: form.birth_date || null };
    if (!form.is_minor) {
      payload.guardian_name = null; payload.guardian_cnp = null; payload.guardian_address = null;
      payload.guardian_phone = null; payload.guardian_email = null;
    }
    const res = await db.submitMembership(payload);
    if (res.ok) { setStatus('ok'); setForm(empty); }
    else setStatus('error');
  };

  const inputStyle = {
    width: '100%', padding: '14px 16px', background: 'var(--bg)',
    color: 'var(--fg)', border: '1px solid var(--border)',
    fontFamily: 'JetBrains Mono, monospace', fontSize: 14, outline: 'none',
    transition: 'border-color 160ms',
  };
  const label = txt => (
    <label className="mono" style={{ display: 'block', fontSize: 10, color: 'var(--fg-dim)', letterSpacing: '0.18em', marginBottom: 8 }}>{txt.toUpperCase()}</label>
  );
  const sectionTitle = txt => (
    <div style={{ background: 'var(--accent)', color: '#fff', display: 'inline-block', padding: '6px 16px', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', marginBottom: 24 }}>
      • {txt}
    </div>
  );

  return (
    <div>
      <section style={{ padding: '80px 0 60px', borderBottom: '1px solid var(--border)' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}>{t.eyebrow}</div>
          <h1 className="display display-xxl" style={{ marginBottom: 40 }}>
            <div>{t.title_1}</div>
            <div style={{ color: 'var(--accent)' }}>{t.title_2}</div>
          </h1>
          <p style={{ fontSize: 20, maxWidth: 680, color: 'var(--fg-dim)', lineHeight: 1.55 }}>{t.sub}</p>
        </div>
      </section>

      <SuccessModal open={status === 'ok'} onClose={() => setStatus('idle')}
        title={t.success_title} body={t.success_body} cta={t.success_cta} />

      <section className="section">
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>/ procesul</div>
          <h2 className="display display-lg" style={{ marginBottom: 60 }}>{t.step_title}</h2>
          <div className="cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--border)' }}>
            {t.steps.map((s, i) => (
              <div key={i} style={{ background: 'var(--bg-2)', padding: '36px 28px', position: 'relative' }}>
                <div className="display" style={{ fontSize: 72, color: 'var(--accent)', lineHeight: 1, marginBottom: 16, opacity: 0.9 }}>{s.n}</div>
                <h3 style={{ fontFamily: 'Barlow Condensed', fontStyle: 'italic', fontWeight: 900, fontSize: 22, textTransform: 'uppercase', marginBottom: 12 }}>{s.t}</h3>
                <p style={{ color: 'var(--fg-dim)', fontSize: 15, lineHeight: 1.6 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="form-wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 60, alignItems: 'flex-start' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>/ formular oficial</div>
              <h2 className="display display-lg">{t.form_title}</h2>
              <p style={{ color: 'var(--fg-dim)', fontSize: 15, marginTop: 24, lineHeight: 1.6, maxWidth: 400 }}>
                {lang === 'ro'
                  ? 'Același formular oficial al asociației — îl poți descărca și completa pe hârtie, sau îl trimiți direct de aici.'
                  : "The association's official form — download and fill it on paper, or submit it right here."}
              </p>
              <a href="/assets/formular-inscriere.pdf" download className="btn btn-ghost" style={{ marginTop: 28, fontSize: 15 }}>
                ⬇ {t.download_blank}
              </a>
            </div>

            <form onSubmit={submit} style={{ background: 'var(--bg)', padding: '40px 40px 44px', border: '1px solid var(--border)' }}>
              {sectionTitle(t.member_section)}
              <div className="form-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
                <div>{label(t.fields.name)}<input required value={form.full_name} onChange={e => set('full_name', e.target.value)} style={inputStyle} /></div>
                <div>{label(t.fields.cnp)}<input required pattern="[0-9]{13}" title="13 cifre" value={form.cnp} onChange={e => set('cnp', e.target.value)} style={inputStyle} /></div>
              </div>
              <div className="form-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
                <div>{label(t.fields.birth_date)}<input type="date" required value={form.birth_date} onChange={e => set('birth_date', e.target.value)} style={{ ...inputStyle, colorScheme: 'dark' }} /></div>
                <div>{label(t.fields.phone)}<input required value={form.phone} onChange={e => set('phone', e.target.value)} style={inputStyle} /></div>
              </div>
              <div style={{ marginBottom: 20 }}>{label(t.fields.address)}<input required value={form.address} onChange={e => set('address', e.target.value)} style={inputStyle} /></div>
              <div style={{ marginBottom: 26 }}>{label(t.fields.email)}<input type="email" required value={form.email} onChange={e => set('email', e.target.value)} style={inputStyle} /></div>

              <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer', marginBottom: 26 }}>
                <input type="checkbox" checked={form.is_minor} onChange={e => set('is_minor', e.target.checked)} style={{ marginTop: 4, accentColor: 'var(--accent)', width: 16, height: 16 }} />
                <span style={{ fontSize: 15, color: 'var(--fg-dim)' }}>{t.is_minor_label}</span>
              </label>

              {form.is_minor && (
                <div style={{ borderTop: '1px solid var(--border)', paddingTop: 26, marginBottom: 6 }}>
                  {sectionTitle(t.minor_section)}
                  <div className="form-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
                    <div>{label(t.fields.guardian_name)}<input required value={form.guardian_name} onChange={e => set('guardian_name', e.target.value)} style={inputStyle} /></div>
                    <div>{label(t.fields.guardian_cnp)}<input required pattern="[0-9]{13}" title="13 cifre" value={form.guardian_cnp} onChange={e => set('guardian_cnp', e.target.value)} style={inputStyle} /></div>
                  </div>
                  <div style={{ marginBottom: 20 }}>{label(t.fields.guardian_address)}<input required value={form.guardian_address} onChange={e => set('guardian_address', e.target.value)} style={inputStyle} /></div>
                  <div className="form-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 26 }}>
                    <div>{label(t.fields.guardian_phone)}<input required value={form.guardian_phone} onChange={e => set('guardian_phone', e.target.value)} style={inputStyle} /></div>
                    <div>{label(t.fields.guardian_email)}<input type="email" value={form.guardian_email} onChange={e => set('guardian_email', e.target.value)} style={inputStyle} /></div>
                  </div>
                </div>
              )}

              <div style={{ borderTop: '1px solid var(--border)', paddingTop: 26 }}>
                <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer', marginBottom: 18 }}>
                  <input type="checkbox" required checked={form.declaration_consent} onChange={e => set('declaration_consent', e.target.checked)} style={{ marginTop: 4, accentColor: 'var(--accent)', width: 16, height: 16, flexShrink: 0 }} />
                  <span style={{ fontSize: 13.5, color: 'var(--fg-dim)', lineHeight: 1.55 }}>{t.consent_declaration}</span>
                </label>
                <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer', marginBottom: 28 }}>
                  <input type="checkbox" required checked={form.gdpr_consent} onChange={e => set('gdpr_consent', e.target.checked)} style={{ marginTop: 4, accentColor: 'var(--accent)', width: 16, height: 16, flexShrink: 0 }} />
                  <span style={{ fontSize: 13.5, color: 'var(--fg-dim)', lineHeight: 1.55 }}>{t.consent_gdpr}</span>
                </label>
              </div>

              <button type="submit" disabled={status === 'sending'} className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', opacity: status === 'sending' ? 0.7 : 1 }}>
                {status === 'sending' ? '...' : t.fields.submit} <span className="arrow">→</span>
              </button>
              {status === 'error' && <p style={{ color: 'var(--accent-bright)', marginTop: 14, fontSize: 14 }}>{t.error}</p>}
            </form>
          </div>
        </div>
      </section>
    </div>
  );
}
window.PageMembership = PageMembership;