const NsContact = ({ onSubmit = () => {} }) => {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', company: '', email: '', service: 'IPO Advisory', msg: '' });
  const requestRecipient = 'napat@kongyarith.com';
  const contacts = [
    { name: 'Mongkol Phetsuk', phone: '095-454-5994', line: 'Accounting Services' },
    { name: 'Ukrit Sukarak', phone: '095-498-9453', line: 'Accounting Services' },
    { name: 'Napat Kongyarith', phone: '082-574-7890', line: 'Internal Control' },
    { name: 'Nipittha Jenking', phone: '064-498-2424', line: 'Internal Control' },
  ];

  const handle = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    if (window.nsTrack) {
      window.nsTrack('submit_consultation_request', {
        service_interest: form.service,
        has_company: Boolean(form.company),
        has_message: Boolean(form.msg),
      });
    }
    onSubmit(form);
    const subject = `Consultation request - ${form.service}`;
    const body = [
      'New consultation request from Northstar website',
      '',
      `Name: ${form.name}`,
      `Company: ${form.company}`,
      `Email: ${form.email}`,
      `Service interest: ${form.service}`,
      '',
      'Message:',
      form.msg || '-',
    ].join('\n');
    window.location.href = `mailto:${requestRecipient}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };

  return (
    <section className="ns-section ns-section--cream" id="contact">
      <div className="ns-container ns-contact">
        <div className="ns-contact__copy">
          <div className="ns-eyebrow">Contact · ติดต่อเรา</div>
          <h2>Set your goals with us.</h2>
          <div className="ns-gold-line" />
          <p className="ns-contact__tag">"We'll guide you to success."</p>
          <div className="ns-contact-list">
            <div className="ns-contact-row">
              <div>
                <strong>Email</strong>
                <span>Consultation request</span>
              </div>
              <a href={`mailto:${requestRecipient}`} onClick={() => window.nsTrack && window.nsTrack('click_email', { location: 'contact', email_domain: 'kongyarith.com' })}>{requestRecipient}</a>
            </div>
            {contacts.map(c => (
              <div className="ns-contact-row" key={c.name}>
                <div>
                  <strong>{c.name}</strong>
                  <span>{c.line}</span>
                </div>
                <a href={`tel:${c.phone.replaceAll('-', '')}`} onClick={() => window.nsTrack && window.nsTrack('click_phone', { location: 'contact', contact_name: c.name, service_line: c.line })}>{c.phone}</a>
              </div>
            ))}
          </div>
        </div>

        <form className="ns-form" onSubmit={submit}>
          <h3>Request a consultation</h3>
          {sent ? (
            <div className="ns-form__ok">Thank you. Your email draft has been opened for sending to napat@kongyarith.com.</div>
          ) : (
            <>
              <div className="ns-form__split">
                <label>Name<input value={form.name} onChange={handle('name')} required /></label>
                <label>Company<input value={form.company} onChange={handle('company')} required /></label>
              </div>
              <label>Email<input type="email" value={form.email} onChange={handle('email')} required /></label>
              <label>Service interest
                <select value={form.service} onChange={handle('service')}>
                  <option>IPO Advisory</option>
                  <option>Accounting Services</option>
                  <option>Internal Control Services</option>
                  <option>Internal Audit</option>
                  <option>Enterprise Risk Management</option>
                  <option>SMEs Health Check</option>
                </select>
              </label>
              <label>Message<textarea value={form.msg} onChange={handle('msg')} /></label>
              <button className="ns-btn ns-btn--navy" type="submit">Send request</button>
            </>
          )}
        </form>
      </div>
    </section>
  );
};

const NsFooter = () => {
  return (
    <footer className="ns-footer">
      <div className="ns-container">
        <div className="ns-footer__grid">
          <div className="ns-footer__brand">
            <img src="assets/northstar-logo-real.png" alt="Northstar Corporation" />
            <div>
              <p>Northstar Corporation Co., Ltd. ให้บริการที่ปรึกษาด้านบัญชี การวางระบบควบคุมภายใน ตรวจสอบภายใน บริหารความเสี่ยง และการเตรียมความพร้อมเข้าสู่ตลาดหลักทรัพย์</p>
            </div>
          </div>
          <div>
            <h3>Services</h3>
            <p>IPO Advisory</p>
            <p>Accounting Services</p>
            <p>Internal Control Services</p>
            <p>Internal Audit</p>
            <p>Enterprise Risk Management</p>
            <p>SMEs Health Check</p>
          </div>
          <div>
            <h3>Company</h3>
            <p>About Us</p>
            <p>Our Team</p>
            <p>Contact</p>
          </div>
          <div>
            <h3>Key Expertise</h3>
            <p>ที่ปรึกษา IPO</p>
            <p>บริการด้านบัญชี</p>
            <p>วางระบบควบคุมภายใน</p>
            <p>ตรวจสอบภายใน</p>
            <p>บริหารความเสี่ยงองค์กร</p>
          </div>
        </div>
        <div className="ns-footer__bottom">
          <span>© 2026 Northstar Corporation Co., Ltd.</span>
          <span>"Set Your Goals with Us. We'll Guide You to Success."</span>
        </div>
      </div>
    </footer>
  );
};

window.NsContact = NsContact;
window.NsFooter = NsFooter;