/* Contact — book a call */
const { useState: useStateCt, useRef: useRefCt } = React;

const WA_NUMBER = '918873002702';

function Contact() {
  const [sent, setSent] = useStateCt(false);
  const nameRef = useRefCt(null);
  const phoneRef = useRefCt(null);
  const bizRef = useRefCt(null);
  const msgRef = useRefCt(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = nameRef.current.value.trim();
    const phone = phoneRef.current.value.trim();
    const biz = bizRef.current.value;
    const msg = msgRef.current.value.trim();
    const text = `Hi! I'd like a free consultation.\n\nName: ${name}\nWhatsApp: ${phone}\nBusiness type: ${biz}${msg ? `\nWhat I want to fix: ${msg}` : ''}`;
    // Use a real anchor click — never blocked by popup blockers, works on mobile too
    const a = document.createElement('a');
    a.href = `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(text)}`;
    a.target = '_blank';
    a.rel = 'noopener noreferrer';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    setSent(true);
  };

  const contactItems = [
    {
      icon: <Ic.waLogo size={16} />,
      label: 'WhatsApp (fastest)',
      value: '+91 88730 02702',
      href: `https://wa.me/${WA_NUMBER}`,
    },
    {
      icon: <Ic.mail size={16} />,
      label: 'Email',
      value: 'amanpoddar9@gmail.com',
      href: 'mailto:amanpoddar9@gmail.com',
    },
    {
      icon: <Ic.cal size={16} />,
      label: 'Calendar',
      value: 'Weekdays, 10am–7pm IST',
      href: null,
    },
  ];

  return (
    <section id="contact" className="tight">
      <div className="wrap">
        <div className="contact">
          <div>
            <div className="eyebrow">Book a free 30-min consultation</div>
            <h2 style={{marginTop: 18}}>Tell us about your business. <span className="serif">We'll bring the plan.</span></h2>
            <p style={{color: 'var(--muted)', marginTop: 16, maxWidth: '40ch'}}>No pitch deck. No upsell theatre. A working call with whoever would actually run your project.</p>
            <div style={{marginTop: 32, display: 'flex', flexDirection: 'column', gap: 14}}>
              {contactItems.map((item, i) => (
                <div key={i} style={{display: 'flex', alignItems: 'center', gap: 12, color: 'var(--ink-2)'}}>
                  <span style={{width: 36, height: 36, borderRadius: '50%', background: 'var(--paper-2)', display: 'grid', placeItems: 'center', color: 'var(--ink)', flexShrink: 0}}>
                    {item.icon}
                  </span>
                  <div>
                    <div style={{fontSize: 12, color: 'var(--muted)'}}>{item.label}</div>
                    {item.href ? (
                      <a href={item.href} target={item.href.startsWith('http') ? '_blank' : undefined} rel="noopener noreferrer"
                         style={{fontWeight: 500, color: 'var(--ink)', textDecoration: 'none'}}
                         onMouseEnter={e => e.target.style.color = 'var(--accent)'}
                         onMouseLeave={e => e.target.style.color = 'var(--ink)'}>
                        {item.value}
                      </a>
                    ) : (
                      <div style={{fontWeight: 500}}>{item.value}</div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="formbox">
            {sent ? (
              <div style={{textAlign: 'center', padding: 40}}>
                <div style={{width: 56, height: 56, borderRadius: '50%', background: 'var(--accent)', margin: '0 auto 18px', display: 'grid', placeItems: 'center', color: 'var(--accent-ink)'}}><Ic.check size={26} /></div>
                <h3 style={{fontSize: 22}}>Thanks — talk soon.</h3>
                <p style={{color: 'var(--muted)', marginTop: 8}}>WhatsApp opened with your message. We'll confirm a slot within the hour.</p>
                <button className="btn ghost" style={{marginTop: 18}} onClick={() => setSent(false)}>Send another</button>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <div className="field">
                  <label htmlFor="ct-name">Your name</label>
                  <input id="ct-name" ref={nameRef} type="text" placeholder="Your name" required />
                </div>
                <div className="grid-2">
                  <div className="field">
                    <label htmlFor="ct-phone">WhatsApp number</label>
                    <input id="ct-phone" ref={phoneRef} type="tel" placeholder="+91 9xxxx xxxxx" required />
                  </div>
                  <div className="field">
                    <label htmlFor="ct-biz">Business type</label>
                    <select id="ct-biz" ref={bizRef}>
                      <option>Retail shop</option>
                      <option>Clinic / salon</option>
                      <option>Restaurant / café</option>
                      <option>D2C / online</option>
                      <option>Services</option>
                      <option>Other</option>
                    </select>
                  </div>
                </div>
                <div className="field">
                  <label htmlFor="ct-msg">What do you want to fix first?</label>
                  <textarea id="ct-msg" ref={msgRef} rows="3" placeholder="e.g. Customers call at odd hours, we miss bookings."></textarea>
                </div>
                <button type="submit" className="btn accent" style={{ justifyContent: 'center', width: '100%', padding: '14px 18px' }}>
                  <Ic.waLogo size={16} /> Send via WhatsApp
                </button>
                <div className="small" style={{textAlign: 'center'}}>Opens WhatsApp. We reply within 1 working hour.</div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;