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

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

    const sectionTitle = (n, t) => (
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '4px 0 4px' }}>
        <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--color-navy-600)', color: 'var(--color-gold-400)', fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 13, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{n}</span>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--text-heading)', margin: 0 }}>{t}</h3>
      </div>
    );

    return (
      <div>
        {React.createElement(window.HayesPageHeader, {
          eyebrow: 'Get Started',
          title: 'Start Your Application',
          sub: 'Complete the form below and a Hayes advisor will contact you within one business day to map out your next steps.',
        })}

        <section style={{ ...wrap, padding: '72px 40px', display: 'grid', gridTemplateColumns: '1.4fr 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' }}>Application received{name ? `, ${name.split(' ')[0]}` : ''}!</h3>
                <p style={{ fontFamily: 'var(--font-ui)', fontSize: 15, color: 'var(--text-muted)', margin: '0 0 22px', maxWidth: 380, marginInline: 'auto' }}>Thank you. A Hayes advisor will review your details and reach out within one business day.</p>
                <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
                  <Button variant="primary" onClick={() => onNavigate('Home')}>Back to Home</Button>
                  <Button variant="outline" onClick={() => { setSent(false); }}>Submit another</Button>
                </div>
              </div>
            ) : (
              <form onSubmit={(e) => { window.hayesSubmit(e, 'New Application — Hayes Global Mobility'); setSent(true); window.scrollTo({ top: 0 }); }} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                {sectionTitle(1, 'About You')}
                <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="nationality" label="Nationality" placeholder="e.g. German" />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                  <Input name="email" label="Email" type="email" placeholder="jane@email.com" required />
                  <Input name="phone" label="Phone / WhatsApp" placeholder="+44 7882 761771" />
                </div>

                {sectionTitle(2, 'What You Need')}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                  <Select name="service" label="Service of Interest" placeholder="Choose a service…" options={['Visa Services', 'Job Placement', 'Investment & Procurement']} required />
                  <Select name="destination" label="Destination" placeholder="Where to?" options={['United Kingdom', 'United States', 'Germany', 'Other']} />
                </div>
                <Input name="goals" label="Tell us about your goals" placeholder="I'm looking to relocate to London for a software role…" />

                {sectionTitle(3, 'Confirm')}
                <Checkbox name="contactConsent" label="I agree to be contacted about my application." defaultChecked />
                <Checkbox name="updates" label="Subscribe to global mobility updates." />
                <Button type="submit" variant="primary" size="lg" fullWidth>Submit Application</Button>
              </form>
            )}
          </div>

          <aside style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ background: 'var(--color-navy-700)', color: '#fff', borderRadius: 'var(--radius-lg)', padding: 28 }}>
              <Badge variant="gold" size="sm">What Happens Next</Badge>
              <ol style={{ listStyle: 'none', padding: 0, margin: '18px 0 0', display: 'flex', flexDirection: 'column', gap: 16 }}>
                {[['Review', 'We assess your profile within one business day.'],
                  ['Consultation', 'A free call to confirm the right route for you.'],
                  ['Action Plan', 'A clear, costed plan from application to arrival.']].map(([t, d], i) => (
                  <li key={t} style={{ display: 'flex', gap: 12 }}>
                    <span style={{ width: 24, height: 24, flexShrink: 0, borderRadius: '50%', background: 'var(--color-gold-400)', color: 'var(--color-navy-900)', fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 12, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</span>
                    <div>
                      <div style={{ fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 15 }}>{t}</div>
                      <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13.5, color: 'rgba(255,255,255,0.78)', marginTop: 2 }}>{d}</div>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
            <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 24, background: '#fff' }}>
              <div style={{ fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 14, color: 'var(--text-heading)', marginBottom: 8 }}>Prefer to talk first?</div>
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--text-muted)', marginBottom: 14 }}>Reach our advisors directly.</div>
              <Button variant="outline" size="sm" fullWidth onClick={() => onNavigate('Contact')}>Contact Us</Button>
            </div>
          </aside>
        </section>
      </div>
    );
  }

  window.HayesApply = Apply;
})();