// Cta.jsx — closing CTA + contact form (delivers to info@greysurface.com via Forms.jsx)
const CTA_INBOX = 'info@greysurface.com';
const CTA_SUBJECT = 'Website enquiry — greysurface.com';
// ponytail: Forms.jsx is not yet on every page that loads Cta.jsx — resolve its helpers
// at render/submit time so a missing include degrades to the mailto fallback, never a blank page.
const CtaTrap = () => { const H = window.Honeypot; return H ? <H /> : null; };

const Cta = () => {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const onSubmit = async (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    setStatus('sending');
    try {
      if (!window.submitToInbox || !window.formToObject) throw new Error('Form delivery is not loaded on this page');
      await window.submitToInbox(window.formToObject(form), { subject: CTA_SUBJECT });
      setStatus('sent');
    } catch (_) {
      setStatus('error');
    }
  };
  return (
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px 64px' }}>
      <div style={{
        background: '#0f1011', border: '1px solid #23252a',
        borderRadius: 24, padding: 56, position: 'relative', overflow: 'hidden',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center',
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 1,
          background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.4) 50%, transparent)',
        }} />
        <div style={{
          position: 'absolute', top: -120, left: '20%', width: 600, height: 280,
          background: 'radial-gradient(ellipse at center, rgba(94,105,210,0.12) 0%, transparent 70%)',
          pointerEvents: 'none',
        }} />

        <div style={{ position: 'relative' }}>
          <p style={{
            fontSize: 13, fontWeight: 500, color: '#828fff',
            letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14,
          }}>Get started</p>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4vw, 48px)',
            fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.6px',
            color: '#f7f8f8', margin: '0 0 18px',
          }}>Talk to our team</h2>
          <p style={{ fontSize: 16, color: '#8a8f98', lineHeight: 1.6, margin: '0 0 28px', maxWidth: 440 }}>
            Tell us about your environment and what you need tested. One of our testers will reply within one business day to set up a scoping call.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { icon: 'mail', l: CTA_INBOX, href: `mailto:${CTA_INBOX}` },
              { icon: 'lock', l: 'PGP key available on request' },
            ].map(c => (
              <div key={c.l} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Icon name={c.icon} size={14} color="#828fff" />
                {c.href
                  ? <a href={c.href} style={{ fontSize: 14, color: '#d0d6e0', textDecoration: 'none' }}>{c.l}</a>
                  : <span style={{ fontSize: 14, color: '#d0d6e0' }}>{c.l}</span>}
              </div>
            ))}
          </div>
        </div>

        <div style={{
          background: '#141516', border: '1px solid #23252a',
          borderRadius: 16, padding: 28, position: 'relative',
        }}>
          {status === 'sent' ? (
            <div style={{ textAlign: 'center', padding: '40px 16px' }}>
              <div style={{
                width: 48, height: 48, borderRadius: '50%',
                background: 'rgba(39,166,68,0.15)',
                border: '1px solid rgba(39,166,68,0.3)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                margin: '0 auto 18px',
              }}>
                <Icon name="check" size={22} color="#27a644" strokeWidth={2.5} />
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600,
                letterSpacing: '-0.5px', color: '#f7f8f8', margin: '0 0 8px',
              }}>Message received</h3>
              <p style={{ fontSize: 14, color: '#8a8f98', lineHeight: 1.5, margin: 0 }}>
                One of our testers will reply within one business day.
              </p>
            </div>
          ) : (
            <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <CtaTrap />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <Field name="name" label="Full name" placeholder="Jane Doe" required />
                <Field name="email" label="Work email" placeholder="jane@company.com" type="email" required />
              </div>
              <Field name="company" label="Company" placeholder="Acme Corp" />
              <SelectField name="service" label="Service of interest" options={['Penetration Testing','Web Application Pentesting','Mobile Application Pentesting','Cloud Pentesting','Continuous Pentesting','Red Teaming','Not sure yet']} />
              <Field name="message" label="Anything else" placeholder="Environment, timing, compliance driver…" textarea />
              <button type="submit" disabled={status === 'sending'} style={{
                fontFamily: 'var(--font-text)', fontSize: 14, fontWeight: 500,
                background: '#5e6ad2', color: '#fff', border: 'none',
                borderRadius: 8, padding: '11px 18px', cursor: status === 'sending' ? 'wait' : 'pointer',
                opacity: status === 'sending' ? 0.7 : 1,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                transition: 'background 150ms ease-out',
              }}
              onMouseEnter={e => e.currentTarget.style.background = '#828fff'}
              onMouseLeave={e => e.currentTarget.style.background = '#5e6ad2'}
              >
                {status === 'sending' ? 'Sending…' : 'Send request'}
                {status !== 'sending' && <Icon name="arrowRight" size={13} color="#fff" strokeWidth={2} />}
              </button>
              {status === 'error' && (
                <p role="alert" style={{ fontSize: 13, color: '#e8543a', lineHeight: 1.5, margin: 0 }}>
                  Your message could not be sent. Please email us directly at{' '}
                  <a href={`mailto:${CTA_INBOX}?subject=${encodeURIComponent(CTA_SUBJECT)}`} style={{ color: '#f7f8f8', textDecoration: 'underline' }}>{CTA_INBOX}</a>.
                </p>
              )}
              <p style={{ fontSize: 12, color: '#62666d', lineHeight: 1.5, margin: 0 }}>Sent to {CTA_INBOX}. We reply within one business day.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

const Field = ({ name, label, placeholder, type = 'text', textarea, required }) => {
  const Tag = textarea ? 'textarea' : 'input';
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
      <span style={{ fontSize: 12, color: '#8a8f98', fontWeight: 500 }}>{label}{required ? <span style={{ color: '#828fff' }}> *</span> : null}</span>
      <Tag
        name={name}
        type={type}
        placeholder={placeholder}
        required={required}
        rows={textarea ? 3 : undefined}
        style={{
          fontFamily: 'var(--font-text)', fontSize: 14, width: '100%', minWidth: 0,
          background: '#0a0a0b', color: '#f7f8f8',
          border: '1px solid #23252a', borderRadius: 8,
          padding: '10px 12px', outline: 'none',
          resize: textarea ? 'vertical' : 'none',
          transition: 'border-color 120ms ease-out, box-shadow 120ms ease-out',
        }}
        onFocus={e => { e.target.style.borderColor = '#5e6ad2'; e.target.style.boxShadow = '0 0 0 3px rgba(94,105,210,0.15)'; }}
        onBlur={e => { e.target.style.borderColor = '#23252a'; e.target.style.boxShadow = 'none'; }}
      />
    </label>
  );
};

const SelectField = ({ name, label, options }) => (
  <label style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
    <span style={{ fontSize: 12, color: '#8a8f98', fontWeight: 500 }}>{label}</span>
    <select name={name} style={{
      fontFamily: 'var(--font-text)', fontSize: 14, width: '100%', minWidth: 0,
      background: '#0a0a0b', color: '#f7f8f8',
      border: '1px solid #23252a', borderRadius: 8,
      padding: '10px 12px', outline: 'none', cursor: 'pointer',
      appearance: 'none',
      backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%238a8f98\' stroke-width=\'2\'><path d=\'M6 9l6 6 6-6\'/></svg>")',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'right 12px center',
      paddingRight: 32,
    }}>
      {options.map(o => <option key={o} style={{ background: '#0a0a0b' }}>{o}</option>)}
    </select>
  </label>
);

Object.assign(window, { Cta });