// Contact page — real club contact details
const { useState: useStateC } = React;

function PageContact({ lang }) {
  const t = window.CONTENT[lang].contact;
  const [form, setForm] = useStateC({ name: '', email: '', msg: '' });

  const submit = e => {
    e.preventDefault();
    const subject = encodeURIComponent(`Mesaj site — ${form.name}`);
    const body = encodeURIComponent(`${form.msg}\n\n— ${form.name} (${form.email})`);
    window.location.href = `mailto:${window.CLUB_EMAIL}?subject=${subject}&body=${body}`;
  };

  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',
  };

  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>{t.title_2}</div>
            <div style={{ color: 'var(--accent)' }}>{t.title_3}</div>
          </h1>
          <p style={{ fontSize: 20, maxWidth: 680, color: 'var(--fg-dim)', lineHeight: 1.55 }}>{t.sub}</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="form-wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 60 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: 'var(--border)' }}>
              <div style={{ background: 'var(--bg-2)', padding: '28px 28px' }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.2em', marginBottom: 10 }}>{t.email_title}</div>
                <a href={`mailto:${window.CLUB_EMAIL}`} style={{ fontFamily: 'JetBrains Mono', fontWeight: 500, fontSize: 16, color: 'var(--fg)', wordBreak: 'break-all' }}>{window.CLUB_EMAIL}</a>
              </div>
              <div style={{ background: 'var(--bg-2)', padding: '28px 28px' }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.2em', marginBottom: 14 }}>{t.social_title}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {window.SOCIALS.map(s => (
                    <a key={s.k} href={s.url} target="_blank" rel="noopener" style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: '1px solid var(--border)', gap: 16 }}>
                      <span className="mono" style={{ fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.12em' }}>{s.k}</span>
                      <span style={{ fontSize: 14, color: 'var(--fg)' }}>{s.label} ↗</span>
                    </a>
                  ))}
                </div>
              </div>
            </div>

            <form onSubmit={submit} style={{ background: 'var(--bg-2)', padding: '40px', border: '1px solid var(--border)' }}>
              <h2 className="display" style={{ fontSize: 36, marginBottom: 32 }}>{t.form_title}</h2>
              <div className="form-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
                <div>
                  <label className="mono" style={{ display: 'block', fontSize: 10, color: 'var(--fg-dim)', letterSpacing: '0.18em', marginBottom: 8 }}>{t.fields.name.toUpperCase()}</label>
                  <input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} style={inputStyle} />
                </div>
                <div>
                  <label className="mono" style={{ display: 'block', fontSize: 10, color: 'var(--fg-dim)', letterSpacing: '0.18em', marginBottom: 8 }}>{t.fields.email.toUpperCase()}</label>
                  <input type="email" required value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} style={inputStyle} />
                </div>
              </div>
              <div style={{ marginBottom: 28 }}>
                <label className="mono" style={{ display: 'block', fontSize: 10, color: 'var(--fg-dim)', letterSpacing: '0.18em', marginBottom: 8 }}>{t.fields.msg.toUpperCase()}</label>
                <textarea required rows="6" value={form.msg} onChange={e => setForm({ ...form, msg: e.target.value })} style={{ ...inputStyle, resize: 'vertical', fontFamily: 'Barlow Condensed', fontSize: 16 }}></textarea>
              </div>
              <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>
                {t.fields.submit} <span className="arrow">→</span>
              </button>
            </form>
          </div>
        </div>
      </section>
    </div>
  );
}
window.PageContact = PageContact;