// TitanContact.jsx — Contact form + footer

const TitanContact = () => {
  const [form, setForm] = React.useState({ name: '', email: '', inquiry: [], message: '' });
  const [submitted, setSubmitted] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch('https://formspree.io/f/xnjwagqy', {
      method: 'POST',
      headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: form.name,
        email: form.email,
        business: form.message,
        services: form.inquiry.join(', '),
      }),
    })
      .then(res => { if (res.ok) setSubmitted(true); })
      .catch(() => {});
  };

  const inputStyle = {
    width: '100%', padding: '11px 14px', borderRadius: 4,
    border: '1px solid #E2C887', fontSize: 15, fontWeight: 300,
    fontFamily: "'DM Sans', sans-serif", color: '#0F1A2E',
    background: '#fff', outline: 'none', transition: 'border-color 150ms, box-shadow 150ms',
  };

  const labelStyle = {
    display: 'block', fontSize: 13, fontWeight: 400, color: '#273951', marginBottom: 7,
  };

  return (
    <section id="contact" style={{ background: '#fff', padding: '96px 32px', fontFamily: "'DM Sans', sans-serif", borderTop: '1px solid #e5edf5' }}>
      <div className="contact-grid" style={{ maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>

        {/* Left — copy */}
        <div>
          <div style={{ fontSize: 11, fontWeight: 500, color: '#967844', letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 14 }}>Get in touch</div>
          <h2 style={{ fontSize: 'clamp(28px,4vw,40px)', fontWeight: 400, lineHeight: 1.15, letterSpacing: '-0.7px', color: '#0F1A2E', marginBottom: 18, textWrap: 'pretty' }}>
            Let's talk about your books
          </h2>
          <p style={{ fontSize: 16, fontWeight: 300, lineHeight: 1.7, color: '#475569', marginBottom: 40, textWrap: 'pretty' }}>
            Schedule a free 30-minute call. We'll review your current setup and show you exactly how Titan Ledgers can help - no pressure, no commitment.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {[
              { icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>, label: 'Location', val: 'Sugar Land, Texas' },
              { icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>, label: 'Email', val: 'matthew.austin@titanledgers.com' },
              { icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.5a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.77 2.7h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 10.09a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>, label: 'Response time', val: 'Replies within 1 business day' },
            ].map((d, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(189,151,72,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  {d.icon}
                </div>
                <div style={{ paddingTop: 6 }}>
                  <div style={{ fontSize: 11, fontWeight: 500, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 2 }}>{d.label}</div>
                  <div style={{ fontSize: 14, fontWeight: 300, color: '#273951' }}>{d.val}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right — form */}
        <div style={{
          background: '#f8fafc', border: '1px solid #e5edf5', borderRadius: 12, padding: '36px 32px',
          boxShadow: 'rgba(15,26,46,0.06) 0px 3px 6px 0px',
        }}>
          {submitted ? (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(189,151,72,0.14)', border: '1px solid rgba(189,151,72,0.32)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <div style={{ fontSize: 20, fontWeight: 500, color: '#0F1A2E', marginBottom: 10 }}>Message received.</div>
              <div style={{ fontSize: 15, fontWeight: 300, color: '#475569', lineHeight: 1.65 }}>We will be reaching out to you shortly.</div>
            </div>
          ) : (
            <form onSubmit={handleSubmit}>
              <div style={{ marginBottom: 20 }}>
                <label style={labelStyle}>Your name</label>
                <input
                  type="text" required placeholder="Jane Smith"
                  value={form.name}
                  onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
                  style={inputStyle}
                  onFocus={e => { e.target.style.borderColor = '#BD9748'; e.target.style.boxShadow = '0 0 0 3px rgba(189,151,72,0.14)'; }}
                  onBlur={e => { e.target.style.borderColor = '#E2C887'; e.target.style.boxShadow = 'none'; }}
                />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label style={labelStyle}>Email address</label>
                <input
                  type="email" required placeholder="jane@yourcompany.com"
                  value={form.email}
                  onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
                  style={inputStyle}
                  onFocus={e => { e.target.style.borderColor = '#BD9748'; e.target.style.boxShadow = '0 0 0 3px rgba(189,151,72,0.14)'; }}
                  onBlur={e => { e.target.style.borderColor = '#E2C887'; e.target.style.boxShadow = 'none'; }}
                />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label style={labelStyle}>What is your business? <span style={{ color: '#94a3b8', fontWeight: 300 }}>(optional)</span></label>
                <textarea
                  rows="3" placeholder="A few sentences is plenty."
                  value={form.message}
                  onChange={e => setForm(f => ({ ...f, message: e.target.value }))}
                  style={{ ...inputStyle, minHeight: 84, resize: 'vertical', lineHeight: 1.5 }}
                  onFocus={e => { e.target.style.borderColor = '#BD9748'; e.target.style.boxShadow = '0 0 0 3px rgba(189,151,72,0.14)'; }}
                  onBlur={e => { e.target.style.borderColor = '#E2C887'; e.target.style.boxShadow = 'none'; }}
                />
              </div>
              <div style={{ marginBottom: 28 }}>
                <label style={labelStyle}>Which services are you interested in?</label>
                <ServicesMultiSelect
                  options={['Monthly bookkeeping','Catch-up & clean-up','Payroll support','QuickBooks setup','Other']}
                  selected={form.inquiry}
                  onChange={next => setForm(f => ({ ...f, inquiry: next }))}
                />
              </div>
              <button type="submit" style={{
                width: '100%', padding: '13px 20px', borderRadius: 4,
                fontSize: 15, fontWeight: 500, background: '#16263D', color: '#BD9748',
                border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif",
                transition: 'background 150ms, color 150ms',
                letterSpacing: '0.1px',
              }}
                onMouseEnter={e => { e.currentTarget.style.background = '#223249'; e.currentTarget.style.color = '#E9CE87'; }}
                onMouseLeave={e => { e.currentTarget.style.background = '#16263D'; e.currentTarget.style.color = '#BD9748'; }}
              >Get a free consultation &rarr;</button>
              <div style={{ fontSize: 12, fontWeight: 300, color: '#94a3b8', textAlign: 'center', marginTop: 14 }}>
                No spam. Reply within one business day.
              </div>
            </form>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
        @media (max-width: 768px) {
          #contact { padding: 56px 20px !important; }
          .contact-grid { gap: 32px !important; }
        }
      `}</style>
    </section>
  );
};


// Multi-select dropdown — replaces the stacked checkbox list.
const ServicesMultiSelect = ({ options, selected, onChange }) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [open]);

  const toggle = (opt) => {
    onChange(selected.includes(opt) ? selected.filter(i => i !== opt) : [...selected, opt]);
  };

  const summary = selected.length === 0
    ? 'Select services'
    : selected.length === 1
      ? selected[0]
      : `${selected.length} selected`;

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button
        type="button"
        onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', padding: '11px 14px', borderRadius: 4,
          border: '1px solid ' + (open ? '#BD9748' : '#E2C887'),
          background: '#fff', cursor: 'pointer',
          fontFamily: "'DM Sans', sans-serif",
          fontSize: 15, fontWeight: 300,
          color: selected.length ? '#0F1A2E' : '#94a3b8',
          textAlign: 'left',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          boxShadow: open ? '0 0 0 3px rgba(189,151,72,0.14)' : 'none',
          transition: 'border-color 150ms, box-shadow 150ms',
        }}
      >
        <span>{summary}</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: open ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 150ms' }}>
          <polyline points="6 9 12 15 18 9"/>
        </svg>
      </button>

      {selected.length > 1 && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
          {selected.map(opt => (
            <span key={opt} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 12, fontWeight: 400, color: '#967844',
              background: 'rgba(189,151,72,0.10)', border: '1px solid #E2C887',
              borderRadius: 20, padding: '3px 8px 3px 10px',
            }}>
              {opt}
              <button
                type="button"
                onClick={() => toggle(opt)}
                aria-label={`Remove ${opt}`}
                style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#967844', display: 'flex', alignItems: 'center', padding: 0, fontFamily: 'inherit' }}
              >
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
              </button>
            </span>
          ))}
        </div>
      )}

      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 6px)', left: 0, right: 0,
          background: '#fff', border: '1px solid #E2C887', borderRadius: 6,
          boxShadow: 'rgba(15,26,46,0.18) 0px 20px 40px -20px, rgba(0,0,0,0.08) 0px 10px 20px -10px',
          padding: 6, zIndex: 10,
          maxHeight: 260, overflowY: 'auto',
        }}>
          {options.map(opt => {
            const isOn = selected.includes(opt);
            return (
              <label key={opt} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                cursor: 'pointer', padding: '10px 12px', borderRadius: 4,
                background: isOn ? 'rgba(189,151,72,0.08)' : 'transparent',
                transition: 'background 100ms',
              }}
                onMouseEnter={e => { if (!isOn) e.currentTarget.style.background = '#f8fafc'; }}
                onMouseLeave={e => { if (!isOn) e.currentTarget.style.background = 'transparent'; }}
              >
                <div style={{
                  width: 16, height: 16, borderRadius: 3,
                  border: '1.5px solid ' + (isOn ? '#BD9748' : '#c5cdd8'),
                  background: isOn ? '#BD9748' : '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, transition: 'all 100ms',
                }}>
                  {isOn && <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#0F1A2E" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>}
                </div>
                <input type="checkbox" style={{ display: 'none' }} checked={isOn} onChange={() => toggle(opt)} />
                <span style={{ fontSize: 14, fontWeight: 300, color: isOn ? '#967844' : '#273951' }}>{opt}</span>
              </label>
            );
          })}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { TitanContact, ServicesMultiSelect });