// Contact — animated form with check on submit.
const Contact = () => {
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const isMobile = useResponsive();
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => { setSent(false); setForm({ name: '', email: '', message: '' }); }, 4500);
  };
  return (
    <Section eyebrow="Contact Us">
      <Reveal>
        <div className="bf-contact-grid" style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 80, alignItems: 'stretch' }}>
          <div>
            <h2 className="bf-section-h2" style={{
              fontSize: isMobile ? 28 : 55, fontWeight: 800, letterSpacing: '-0.025em',
              color: '#EFEFF1', margin: '0 0 20px', lineHeight: 1.1,
            }}>
              Get in touch with the founders.
            </h2>
            <p style={{ fontSize: 18.75, color: '#ADADB8', lineHeight: 1.6, margin: '0 0 32px' }}>
              Have a custom use case you'd like to explore? Whether it's an unusual deployment,
              a niche detection model, or a partnership idea — we read every email.
            </p>
            <a href="mailto:founders@blinkfree.ai" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '14px 18px',
              background: '#18181B', border: '1px solid #2F2F35', borderRadius: 6,
              color: '#EFEFF1', textDecoration: 'none', fontSize: 17.5, fontWeight: 600,
              transition: 'border-color 100ms, color 100ms',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#9146FF'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#2F2F35'; }}
            >
              <i data-lucide="mail" style={{ width: 18, height: 18, color: '#9146FF' }}></i>
              founders@blinkfree.ai
            </a>
            <div style={{ marginTop: 40, padding: 20, background: '#0a0a0c', border: '1px solid #18181B', borderRadius: 6 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <span style={{
                  width: 8, height: 8, borderRadius: 9999, background: '#00C853',
                  boxShadow: '0 0 6px #00C853',
                  animation: 'bf-pulse 1.4s ease-in-out infinite',
                }} />
                <span style={{ fontSize: 13.75, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#00C853' }}>Online · 24/7</span>
              </div>
              <div style={{ fontSize: 16.25, color: '#ADADB8', lineHeight: 1.5 }}>
                Average response time under 4 hours during business days.
              </div>
            </div>
          </div>
          <div style={{
            background: '#18181B', borderRadius: 6, padding: 32, border: '1px solid #2F2F35',
            position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column',
          }}>
            {sent ? (
              <div style={{
                padding: '40px 0', textAlign: 'center',
                animation: 'bf-fadeIn 320ms cubic-bezier(0.2,0,0,1)',
              }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 9999, background: 'rgba(0,200,83,0.15)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20,
                  border: '2px solid rgba(0,200,83,0.4)',
                }}>
                  <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#00C853" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 13l4 4L19 7" style={{
                      strokeDasharray: 24, strokeDashoffset: 24,
                      animation: 'bf-draw 400ms cubic-bezier(0.2,0,0,1) 100ms forwards',
                    }} />
                  </svg>
                </div>
                <style>{`@keyframes bf-draw { to { stroke-dashoffset: 0; } }`}</style>
                <h3 style={{ fontSize: 27.5, fontWeight: 700, color: '#EFEFF1', margin: '0 0 8px' }}>Message Sent!</h3>
                <p style={{ fontSize: 16.25, color: '#ADADB8', margin: 0 }}>Average response in under 4 hours.</p>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 18, flex: 1 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <div>
                    <label style={{ display: 'block', fontSize: 13.75, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#ADADB8', marginBottom: 6 }}>Name</label>
                    <Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Your name" />
                  </div>
                  <div>
                    <label style={{ display: 'block', fontSize: 13.75, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#ADADB8', marginBottom: 6 }}>Email</label>
                    <Input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="you@company.com" />
                  </div>
                </div>
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
                  <label style={{ display: 'block', fontSize: 13.75, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#ADADB8', marginBottom: 6 }}>Message</label>
                  <Input as="textarea" value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} placeholder="Tell us about your deployment…" style={{ flex: 1, resize: 'none', minHeight: 80 }} />
                </div>
                <Button variant="primary" type="submit">Send Message →</Button>
              </form>
            )}
          </div>
        </div>
      </Reveal>
    </Section>
  );
};

window.Contact = Contact;