/* global React, Reveal, Magnetic */
const NAL_EMAIL = 'business@nalsoftwaresolutions.com';
function Contact() {
  const [sent, setSent] = React.useState(false);
  const formRef = React.useRef(null);
  const onSubmit = (e) => {
    e.preventDefault();
    try {
      const f = formRef.current;
      if (!f) return;
      const get = (n) => (f.querySelector(`[name="${n}"]`)?.value || '').trim();
      const name = get('name'), company = get('company'), email = get('email');
      const ptype = get('project_type'), msg = get('message');
      const subject = `New project inquiry${company ? ` — ${company}` : name ? ` — ${name}` : ''}`;
      const body = [
        `Name: ${name || '—'}`,
        `Company: ${company || '—'}`,
        `Email: ${email || '—'}`,
        `Project type: ${ptype || '—'}`,
        '',
        'Message:',
        msg || '—',
      ].join('\n');
      const href = `mailto:${NAL_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
      window.location.href = href;
      setSent(true);
      setTimeout(() => setSent(false), 3500);
    } catch (_) {}
  };
  const details = [
    { label: 'Email',   value: 'business@nalsoftwaresolutions.com', href: 'mailto:business@nalsoftwaresolutions.com' },
    { label: 'Office',  value: 'NAL SOFTWARE SOLUTIONS FZ-LLC\nCompass building - Al Hulaila\nRas Al Khaimah\nU.A.E', href: null },
    { label: 'Hours',   value: 'Mon–Fri · 09:00–18:00 GST',  href: null },
  ];
  return (
    <section id="contact" data-screen-label="06 Contact" style={{ padding: '140px clamp(20px,4vw,48px) 120px', background: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle, rgba(14,22,38,0.06) 1px, transparent 1.2px)',
        backgroundSize: '28px 28px',
        maskImage: 'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%)',
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
        <Reveal y={14}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#3A7BB8', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 22, height: 1, background: '#3A7BB8' }} />
            Contact
          </div>
        </Reveal>
        <Reveal y={16} delay={100}>
          <h2 style={{ fontSize: 'clamp(44px,5.5vw,80px)', fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 0.98, margin: 0, maxWidth: 900, color: '#0B1220' }}>
            Start a conversation. <span style={{ color: '#8695A8', fontStyle: 'italic', fontWeight: 400 }}>We reply within two business days.</span>
          </h2>
        </Reveal>

        <div className="nal-contact-grid" style={{ marginTop: 72, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'start' }}>
          {/* Form */}
          <Reveal y={20} delay={150}>
            <form ref={formRef} onSubmit={onSubmit} style={{
              background: '#fff', border: '1px solid #EEF2F6',
              borderRadius: 20, padding: 36,
              boxShadow: '0 24px 60px rgba(14,22,38,0.06)',
            }}>
              <div className="nal-contact-fields" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <Field name="name" label="Name" placeholder="Jane Doe" />
                <Field name="company" label="Company" placeholder="Acme Inc." />
              </div>
              <Field name="email" label="Email" type="email" placeholder="jane@acme.com" />
              <Field name="project_type" label="Project type" placeholder="Backend service · cloud migration · architecture review" />
              <Field name="message" label="Tell us what's broken" textarea placeholder="The problem, not the headcount plan. One or two paragraphs is perfect." />
              <div style={{ marginTop: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
                <span style={{ fontSize: 12, color: '#8695A8', lineHeight: 1.4 }}>
                  We read every message. Average response: 18 hours.
                </span>
                <Magnetic strength={8}>
                  <button type="submit" style={{
                    fontWeight: 600, fontSize: 15,
                    background: sent ? '#2E9D6E' : '#0B1220', color: '#fff', border: 0,
                    padding: '14px 22px', borderRadius: 999, cursor: 'pointer',
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    transition: 'background 260ms',
                  }}>
                    {sent ? 'Opening mail…' : 'Send message'}
                    <span style={{ fontSize: 17 }}>{sent ? '✓' : '↗'}</span>
                  </button>
                </Magnetic>
              </div>
            </form>
          </Reveal>

          {/* Details */}
          <Reveal y={20} delay={250}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#8695A8', textTransform: 'uppercase', marginBottom: 20 }}>
                Or reach us directly
              </div>
              <dl style={{ margin: 0 }}>
                {details.map((d, i) => (
                  <div key={i} data-nal="contact-row" style={{
                    padding: '20px 0',
                    borderTop: i === 0 ? '1px solid #EEF2F6' : 'none',
                    borderBottom: '1px solid #EEF2F6',
                    display: 'grid', gridTemplateColumns: '110px 1fr', gap: 20, alignItems: 'start',
                  }}>
                    <dt style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', color: '#8695A8', textTransform: 'uppercase', paddingTop: 2 }}>{d.label}</dt>
                    <dd style={{ margin: 0, fontSize: 15, color: '#0B1220', lineHeight: 1.55, whiteSpace: 'pre-line' }}>
                      {d.href
                        ? <a href={d.href} style={{ color: '#0B1220', textDecoration: 'none', borderBottom: '1px solid #D9E0E8', paddingBottom: 1 }}>{d.value}</a>
                        : d.value}
                    </dd>
                  </div>
                ))}
              </dl>
              <div style={{ marginTop: 28, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                {[
                  { l: 'GitHub', h: '@NAL-Software-Solutions-LLC', url: 'https://github.com/NAL-Software-Solutions-LLC' },
                ].map((s, i) => (
                  <a key={i} href={s.url} target={s.url === '#' ? undefined : '_blank'} rel={s.url === '#' ? undefined : 'noopener noreferrer'} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    padding: '10px 14px', borderRadius: 999,
                    background: '#fff', border: '1px solid #EEF2F6',
                    fontSize: 13, color: '#0B1220', textDecoration: 'none',
                    transition: 'border-color 220ms, background 220ms',
                  }}
                    onMouseEnter={e => { e.currentTarget.style.borderColor = '#B6C2CF'; e.currentTarget.style.background = '#F7F9FB'; }}
                    onMouseLeave={e => { e.currentTarget.style.borderColor = '#EEF2F6'; e.currentTarget.style.background = '#fff'; }}
                  >
                    <span style={{ fontWeight: 600 }}>{s.l}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#8695A8' }}>{s.h}</span>
                  </a>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Field({ label, placeholder, type = 'text', textarea, name }) {
  const [focus, setFocus] = React.useState(false);
  const common = {
    width: '100%', boxSizing: 'border-box',
    background: focus ? '#fff' : '#F7F9FB',
    border: `1px solid ${focus ? '#0B1220' : '#EEF2F6'}`,
    borderRadius: 10, padding: '12px 14px', marginTop: 8,
    color: '#0B1220', fontSize: 14.5, fontFamily: 'var(--font-sans)',
    outline: 'none', transition: 'border-color 200ms, background 200ms',
  };
  return (
    <label style={{ display: 'block', marginTop: 16 }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', color: '#5F6E82', textTransform: 'uppercase' }}>{label}</span>
      {textarea
        ? <textarea name={name} placeholder={placeholder} rows={5} style={{ ...common, resize: 'vertical', minHeight: 120 }}
            onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} />
        : <input name={name} type={type} placeholder={placeholder} style={common}
            onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} />}
    </label>
  );
}
window.Contact = Contact;