/* Hayes Global Mobility — UI kit: Contact page (interactive form) */
(function () {
  const NS = window.HayesGlobalMobilityDesignSystem_489ece;
  const { SectionHeading, Input, Select, Checkbox, Button } = NS;
  const wrap = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 40px' };

  function Contact() {
    const [sent, setSent] = React.useState(false);
    const [name, setName] = React.useState('');

    return (
      <div>
        <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--color-navy-800)' }}>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.2, backgroundImage: "url('assets/skyline-hero.jpg')", backgroundSize: 'cover', backgroundPosition: 'center' }} />
          <div style={{ position: 'relative', ...wrap, padding: '72px 40px' }}>
            <SectionHeading onDark eyebrow="Contact Us" title="Begin Your Global Adventure" subtitle="Tell us about your goals and a Hayes advisor will be in touch within one business day." />
          </div>
        </section>

        <section style={{ ...wrap, padding: '72px 40px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'start' }}>
          <div style={{ background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-md)', padding: 36 }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '40px 10px' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--color-success-soft)', color: 'var(--color-success)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                  <i data-lucide="check" style={{ width: 30, height: 30 }}></i>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24, color: 'var(--text-heading)', margin: '0 0 8px' }}>Thank you{name ? `, ${name.split(' ')[0]}` : ''}!</h3>
                <p style={{ fontFamily: 'var(--font-ui)', fontSize: 15, color: 'var(--text-muted)', margin: '0 0 22px' }}>Your message is on its way. A Hayes advisor will reach out shortly.</p>
                <Button variant="outline" onClick={() => setSent(false)}>Send another message</Button>
              </div>
            ) : (
              <form onSubmit={(e) => { window.hayesSubmit(e, 'Website Contact Enquiry'); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                  <Input name="fullName" label="Full Name" placeholder="Jane Doe" required value={name} onChange={(e) => setName(e.target.value)} />
                  <Input name="email" label="Email" type="email" placeholder="jane@company.com" required />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                  <Input name="phone" label="Phone / WhatsApp" placeholder="+44 7882 761771" />
                  <Select name="service" label="Service of Interest" placeholder="Choose a service…" options={['Visa Services', 'Job Placement', 'Investment & Procurement']} required />
                </div>
                <Input name="goals" label="Tell us about your goals" placeholder="I'm looking to relocate to…" />
                <Checkbox name="contactConsent" label="I agree to be contacted about my enquiry." defaultChecked />
                <Button type="submit" variant="primary" size="lg" fullWidth>Send Message</Button>
              </form>
            )}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            {[['map-pin', 'Visit Us', 'Hayes, West London Stockley Park, Hayes UB11 1ET'],
              ['mail', 'Email', 'info@hayesglobalmobility.com'],
              ['message-circle', 'WhatsApp', '+44 7882761771'],
              ['clock', 'Hours', 'Mon–Fri · 9:00–18:00']].map(([ic, t, v]) => (
              <div key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ width: 44, height: 44, flexShrink: 0, borderRadius: 'var(--radius-md)', background: 'var(--color-navy-600)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i data-lucide={ic} style={{ width: 20, height: 20 }}></i>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 14, color: 'var(--text-heading)' }}>{t}</div>
                  <div style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--text-muted)', marginTop: 2 }}>{v}</div>
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>
    );
  }

  window.HayesContact = Contact;
})();