/* ============================================================
   Contact — CTA, details, and an enquiry form (mailto submit).
   ============================================================ */
const { useState: useContactState } = React;
const CONTACT_EMAIL = 'info@tayhamilabs.in';

function Contact() {
  const [form, setForm] = useContactState({ name: '', email: '', profession: 'Business owner', message: '' });
  const [sent, setSent] = useContactState(false);

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent(`New enquiry from ${form.name || 'a business'} (${form.profession})`);
    const body = encodeURIComponent(
      `Name: ${form.name}\nEmail: ${form.email}\nBusiness type: ${form.profession}\n\n${form.message}`
    );
    window.location.href = `mailto:${CONTACT_EMAIL}?subject=${subject}&body=${body}`;
    setSent(true);
  };

  const field = {
    width: '100%', padding: '14px 16px', borderRadius: '14px', border: '1px solid rgba(255,255,255,0.13)',
    background: 'rgba(255,255,255,0.04)', color: '#fff', fontSize: '0.98rem', fontFamily: 'var(--font-body)', outline: 'none',
  };
  const label = { display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'rgba(236,234,242,0.7)', marginBottom: '8px', letterSpacing: '0.01em' };

  return (
    <Section id="contact" data-screen-label="Contact">
      {/* glow */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(800px 400px at 50% 0%, rgba(139,92,246,0.1), transparent 60%)', pointerEvents: 'none' }} />
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.05fr)', gap: 'clamp(36px,6vw,72px)', alignItems: 'center' }} className="contact-grid">
        {/* Left: CTA + details */}
        <div>
          <SectionHead
            eyebrow="Get in touch" eyebrowIcon="MessageCircle"
            title="Let's build your"
            titleAccent="business system."
            sub="Tell us what you want to improve — website enquiries, WhatsApp replies, CRM follow-up, dashboards or automation. We'll reply with a practical plan."
          />
          <Reveal delay={140}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', marginTop: '34px' }}>
              <a href={`mailto:${CONTACT_EMAIL}`} className="contact-line" style={{ display: 'flex', alignItems: 'center', gap: '14px', textDecoration: 'none', color: '#ECEAF2' }}>
                <span style={{ width: '46px', height: '46px', borderRadius: '13px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(155,232,221,0.1)', border: '1px solid rgba(155,232,221,0.2)', flex: '0 0 auto' }}>
                  <Icon name="Mail" size={20} style={{ color: '#9BE8DD' }} />
                </span>
                <span>
                  <span style={{ display: 'block', fontSize: '0.8rem', color: 'rgba(236,234,242,0.55)' }}>Email us</span>
                  <span style={{ display: 'block', fontWeight: 600, fontSize: '1.04rem' }}>{CONTACT_EMAIL}</span>
                </span>
              </a>
              <div style={{ display: 'flex', alignItems: 'center', gap: '14px', color: '#ECEAF2' }}>
                <span style={{ width: '46px', height: '46px', borderRadius: '13px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(155,232,221,0.1)', border: '1px solid rgba(155,232,221,0.2)', flex: '0 0 auto' }}>
                  <Icon name="MapPin" size={20} style={{ color: '#9BE8DD' }} />
                </span>
                <span>
                  <span style={{ display: 'block', fontSize: '0.8rem', color: 'rgba(236,234,242,0.55)' }}>Company</span>
                  <span style={{ display: 'block', fontWeight: 600, fontSize: '1.04rem' }}>Tayhami Labs Private Limited</span>
                </span>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Right: form */}
        <Reveal delay={120}>
          <form onSubmit={submit} style={{ position: 'relative', padding: 'clamp(26px,3.5vw,38px)', borderRadius: '26px', border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)' }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '30px 10px' }}>
                <div style={{ width: '64px', height: '64px', borderRadius: '50%', margin: '0 auto 20px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--grad-accent)' }}>
                  <Icon name="Check" size={30} style={{ color: '#0A0C18' }} strokeWidth={3} />
                </div>
                <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '1.4rem', color: '#fff', margin: '0 0 10px' }}>Your email is ready to send</h3>
                <p style={{ fontSize: '0.96rem', lineHeight: 1.6, color: 'rgba(236,234,242,0.7)', margin: '0 0 20px' }}>
                  We've opened a draft to {CONTACT_EMAIL} with your details. Hit send and we'll be in touch shortly.
                </p>
                <button type="button" onClick={() => setSent(false)} className="ghost-btn" style={{ background: 'rgba(255,255,255,0.05)', color: '#ECEAF2', border: '1px solid rgba(255,255,255,0.18)', borderRadius: '50px', padding: '11px 22px', fontWeight: 600, cursor: 'pointer' }}>
                  Edit details
                </button>
              </div>
            ) : (
              <>
                <div style={{ marginBottom: '18px' }}>
                  <label style={label}>Your name</label>
                  <input style={field} value={form.name} onChange={set('name')} placeholder="Your full name" required />
                </div>
                <div style={{ marginBottom: '18px' }}>
                  <label style={label}>Email</label>
                  <input style={field} type="email" value={form.email} onChange={set('email')} placeholder="you@business.com" required />
                </div>
                <div style={{ marginBottom: '18px' }}>
                  <label style={label}>Business type</label>
                  <select style={{ ...field, appearance: 'none', cursor: 'pointer' }} value={form.profession} onChange={set('profession')}>
                    <option style={{ color: '#000' }}>Business owner</option>
                    <option style={{ color: '#000' }}>Clinic / healthcare</option>
                    <option style={{ color: '#000' }}>Restaurant / cafe</option>
                    <option style={{ color: '#000' }}>Service business</option>
                    <option style={{ color: '#000' }}>Retail / local brand</option>
                    <option style={{ color: '#000' }}>Other business</option>
                  </select>
                </div>
                <div style={{ marginBottom: '24px' }}>
                  <label style={label}>How can we help?</label>
                  <textarea style={{ ...field, minHeight: '110px', resize: 'vertical' }} value={form.message} onChange={set('message')} placeholder="A little about your business, current challenges and what you want to automate or improve…" />
                </div>
                <button type="submit" className="cta-btn" style={{ width: '100%', background: 'var(--grad-accent)', color: '#0A0C18', borderRadius: '50px', padding: '16px', fontWeight: 700, fontSize: '1.02rem', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px', boxShadow: '0 4px 24px rgba(139,92,246,0.36)' }}>
                  Send enquiry <Icon name="ArrowRight" size={19} style={{ color: '#0A0C18' }} />
                </button>
              </>
            )}
          </form>
        </Reveal>
      </div>
    </Section>
  );
}

Object.assign(window, { Contact, CONTACT_EMAIL });