// Contact.jsx — Felipe Fin Fanfa
function Contact() {
  const { lang } = React.useContext(window.LangContext);
  const t = window.ffT[lang].contact;

  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  const baseInput = {
    fontFamily: 'Geist, sans-serif', fontSize: 14, color: '#CED4F2',
    background: 'rgba(1,4,10,0.5)', border: '1px solid rgba(206,212,242,0.12)',
    borderRadius: 10, padding: '13px 16px', outline: 'none', width: '100%',
    boxSizing: 'border-box', transition: 'all 200ms',
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError('');
    try {
      const apiUrl = window.FF_API_URL || '/api/send-message';
      const res = await fetch(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
      setSent(true);
    } catch (err) {
      setError(err.message?.startsWith('HTTP') || err.message?.length < 120
        ? `Erro: ${err.message}`
        : t.errorFallback);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="contact" style={{
      background: 'rgba(1,4,10,0.76)', padding: '120px 24px',
      position: 'relative', overflow: 'hidden', zIndex: 1,
      borderTop: '1px solid rgba(206,212,242,0.05)',
    }}>
      <div style={{
        position: 'absolute', bottom: -200, left: '50%', transform: 'translateX(-50%)',
        width: 1000, height: 500,
        background: 'radial-gradient(ellipse 60% 50% at 50% 100%, rgba(28,96,218,0.18) 0%, transparent 70%)',
        pointerEvents: 'none',
        animation: 'ffPulse 11s ease-in-out infinite',
      }} />

      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div className="ff-reveal" style={{
          fontFamily: 'Geist Mono, monospace', fontSize: 11.5, fontWeight: 500,
          color: '#1C60DA', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 28,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ width: 24, height: 1, background: '#1C60DA' }} />
          {t.section}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 'clamp(48px, 6vw, 100px)', alignItems: 'start' }} className="ff-contact-grid">
          <div>
            <h2 data-build="words" data-stagger="60" style={{
              fontFamily: 'Geist, sans-serif', fontWeight: 700, fontSize: 'clamp(32px, 4.6vw, 56px)',
              color: '#CED4F2', letterSpacing: '-0.035em', lineHeight: 1.05,
              margin: '0 0 24px', textWrap: 'balance',
            }}>
              {t.heading}
            </h2>
            <p className="ff-reveal" style={{
              fontFamily: 'Geist, sans-serif', fontSize: 17, color: '#A5ACCD',
              lineHeight: 1.65, margin: '0 0 36px', maxWidth: 460,
            }}>
              {t.sub}
            </p>

            <div data-build="stagger" data-stagger="100" data-dist="24" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <ContactRow
                icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>}
                label="Email" value="f.finfanfa@gmail.com" href="mailto:f.finfanfa@gmail.com"
              />
              <ContactRow
                icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-4 0v7h-4v-7a6 6 0 016-6zM2 9h4v12H2zM4 6a2 2 0 110-4 2 2 0 010 4z"/></svg>}
                label="LinkedIn" value="/in/felipe-fin-fanfa" href="https://linkedin.com/in/felipe-fin-fanfa"
              />
              <ContactRow
                icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/></svg>}
                label="GitHub" value="@felipefinfanfa" href="https://github.com/felipefinfanfa"
              />
              <ContactRow
                icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>}
                label={t.basedIn} value={t.basedInVal}
              />
            </div>
          </div>

          <div id="contact-form" data-build="slide-right" style={{
            background: 'linear-gradient(180deg, #070C18 0%, #04080F 100%)',
            border: '1px solid rgba(206,212,242,0.08)',
            borderRadius: 16, padding: 32,
            boxShadow: 'inset 0 1px 0 rgba(206,212,242,0.06)',
          }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '40px 16px' }}>
                <div style={{
                  width: 56, height: 56, margin: '0 auto 20px',
                  borderRadius: '50%', background: 'rgba(28,96,218,0.12)',
                  border: '1px solid rgba(28,96,218,0.4)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  animation: 'ffSentPop 600ms cubic-bezier(0.34,1.56,0.64,1)',
                }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#6FA3FF" strokeWidth="2"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div style={{ fontFamily: 'Geist, sans-serif', fontWeight: 600, fontSize: 20, color: '#CED4F2', marginBottom: 8 }}>{t.successTitle}</div>
                <div style={{ fontFamily: 'Geist, sans-serif', fontSize: 14, color: '#707AA9', lineHeight: 1.5 }}>{t.successSub}</div>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <Field label={t.nameLabel}>
                  <input
                    style={baseInput} type="text" placeholder={t.namePlaceholder} required
                    value={form.name} onChange={e => setForm({...form, name: e.target.value})}
                    onFocus={e => { e.target.style.borderColor = 'rgba(28,96,218,0.6)'; e.target.style.boxShadow = '0 0 0 3px rgba(28,96,218,0.12)'; }}
                    onBlur={e => { e.target.style.borderColor = 'rgba(206,212,242,0.12)'; e.target.style.boxShadow = 'none'; }}
                  />
                </Field>
                <Field label={t.emailLabel}>
                  <input
                    style={baseInput} type="email" placeholder="you@company.com" required
                    value={form.email} onChange={e => setForm({...form, email: e.target.value})}
                    onFocus={e => { e.target.style.borderColor = 'rgba(28,96,218,0.6)'; e.target.style.boxShadow = '0 0 0 3px rgba(28,96,218,0.12)'; }}
                    onBlur={e => { e.target.style.borderColor = 'rgba(206,212,242,0.12)'; e.target.style.boxShadow = 'none'; }}
                  />
                </Field>
                <Field label={t.msgLabel}>
                  <textarea
                    style={{ ...baseInput, height: 130, resize: 'none', lineHeight: 1.55, fontFamily: 'Geist, sans-serif' }}
                    placeholder={t.msgPlaceholder} required
                    value={form.message} onChange={e => setForm({...form, message: e.target.value})}
                    onFocus={e => { e.target.style.borderColor = 'rgba(28,96,218,0.6)'; e.target.style.boxShadow = '0 0 0 3px rgba(28,96,218,0.12)'; }}
                    onBlur={e => { e.target.style.borderColor = 'rgba(206,212,242,0.12)'; e.target.style.boxShadow = 'none'; }}
                  />
                </Field>
                {error && (
                  <div style={{ fontSize: 12.5, color: '#FF6B6B', textAlign: 'center' }}>{error}</div>
                )}
                <button type="submit" disabled={submitting} style={{
                  fontFamily: 'Geist, sans-serif', fontWeight: 600, fontSize: 14.5,
                  background: '#1C60DA', color: '#fff', border: 'none',
                  padding: '14px', borderRadius: 12, cursor: submitting ? 'wait' : 'pointer',
                  transition: 'all 200ms',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  boxShadow: '0 0 0 1px rgba(28,96,218,0.4), 0 8px 28px rgba(28,96,218,0.28)',
                  opacity: submitting ? 0.7 : 1,
                }}
                onMouseEnter={e => { if (!submitting) e.currentTarget.style.background = '#2B6FE8'; }}
                onMouseLeave={e => { if (!submitting) e.currentTarget.style.background = '#1C60DA'; }}
                >
                  {submitting ? (
                    <>
                      <svg width="14" height="14" viewBox="0 0 24 24" style={{ animation: 'ffSpin 700ms linear infinite' }}>
                        <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="2.5" strokeDasharray="40 18" strokeLinecap="round"/>
                      </svg>
                      {t.sending}
                    </>
                  ) : (
                    <>
                      {t.submit}
                      <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </>
                  )}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: 'block' }}>
      <span style={{ fontFamily: 'Geist Mono, monospace', fontSize: 11, fontWeight: 500, color: '#707AA9', letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginBottom: 8 }}>{label}</span>
      {children}
    </label>
  );
}

function ContactRow({ icon, label, value, href }) {
  const [hovered, setHovered] = React.useState(false);
  const inner = (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'flex', alignItems: 'center', gap: 14, padding: '12px 14px',
        background: hovered ? 'rgba(206,212,242,0.04)' : 'transparent',
        border: '1px solid rgba(206,212,242,0.06)', borderRadius: 10, transition: 'all 200ms',
      }}>
      <span style={{
        width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'rgba(28,96,218,0.1)', border: '1px solid rgba(28,96,218,0.2)',
        borderRadius: 8, color: '#6FA3FF', flexShrink: 0,
      }}>{icon}</span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 10.5, color: '#455084', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{label}</div>
        <div style={{ fontFamily: 'Geist, sans-serif', fontSize: 14, color: '#CED4F2', fontWeight: 500, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value}</div>
      </div>
      {href && (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#455084" strokeWidth="1.6" style={{ transform: hovered ? 'translate(2px, -2px)' : 'none', transition: 'transform 200ms', flexShrink: 0 }}>
          <path d="M7 17L17 7M7 7h10v10"/>
        </svg>
      )}
    </div>
  );
  return href
    ? <a href={href} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>{inner}</a>
    : inner;
}

Object.assign(window, { Contact });