// Careers page — general/open application, no fixed roles.
// ASWE hires "people, not roles" while the group is being built.

function CareersPage() {
  const [form, setForm] = useState({ name: '', email: '', area: '', message: '' });
  const [sent, setSent] = useState(false);
  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const onSubmit = (e) => {
    e.preventDefault();
    // No backend yet — compose an email so the application actually reaches us.
    const subject = encodeURIComponent('Open application — ' + form.area + ' — ' + form.name);
    const body = encodeURIComponent(form.message + '\n\n— ' + form.name + ' (' + form.email + ')\nArea: ' + form.area);
    window.location.href = `mailto:careers@aswe.in?subject=${subject}&body=${body}`;
    setSent(true);
    setTimeout(() => setSent(false), 5000);
    setForm({ name: '', email: '', area: '', message: '' });
  };

  const areas = [
    'Operations', 'Product', 'Manufacturing', 'Design',
    'Sales & Distribution', 'Finance', 'Technology', 'Quality',
    'Supply Chain', 'Marketing', 'People & HR', 'Something else',
  ];

  return (
    <div className="page" data-screen-label="Careers">
      {/* HERO */}
      <section style={{ paddingTop: 144, paddingBottom: 96 }}>
        <div className="container-wide">
          <Reveal>
            <div className="eyebrow">Careers</div>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="display-1" style={{ maxWidth: 15 + 'ch' }}>
              We hire people, <span className="accent-azure">not roles</span>.
            </h1>
          </Reveal>
          <Reveal delay={180}>
            <p className="lede" style={{ marginTop: 32, maxWidth: 60 + 'ch' }}>
              ASWE is being built from scratch — which means every team is
              being built from scratch. We're looking for diverse minds
              across every kind of work, not candidates for a fixed list
              of openings.
            </p>
          </Reveal>
        </div>
      </section>

      {/* HOW WE WORK */}
      <section className="bg-azure">
        <div className="container-wide">
          <div className="section-head">
            <Reveal>
              <div className="eyebrow">How we work</div>
              <h2 className="display-2">What you can expect from us.</h2>
            </Reveal>
          </div>

          <Reveal delay={100}>
            <div className="feature-grid">
              <div className="feature-card">
                <div className="feature-icon"
                     style={{ background: 'var(--azure-50)', color: 'var(--azure-600)' }}>
                  01
                </div>
                <h4>Deliberate</h4>
                <p>
                  We grow slowly on purpose. We'd rather build something
                  that lasts than something that impresses quickly.
                </p>
              </div>
              <div className="feature-card">
                <div className="feature-icon"
                     style={{ background: 'var(--orange-50)', color: 'var(--orange-600)' }}>
                  02
                </div>
                <h4>Transparent</h4>
                <p>
                  Our one principle applies inside the company too. You'll
                  know where we stand, what we're building, and why.
                </p>
              </div>
              <div className="feature-card">
                <div className="feature-icon"
                     style={{ background: 'var(--moss-50)', color: 'var(--moss-600)' }}>
                  03
                </div>
                <h4>Wide open</h4>
                <p>
                  Many teams, many departments, all being formed now. The
                  earlier you join, the more you get to shape.
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* AREAS */}
      <section>
        <div className="container-wide">
          <div className="split">
            <div className="split-copy">
              <Reveal>
                <div className="eyebrow">Where you could fit</div>
                <h2 className="display-2">Every team,<br />being formed now.</h2>
              </Reveal>
            </div>
            <div className="split-art">
              <Reveal delay={120}>
                <p style={{ fontSize: 'var(--fs-lg)', lineHeight: 1.65, marginTop: 0 }}>
                  We're not hiring for one department — we're building all
                  of them. If your work fits anywhere in a company that
                  makes and sells real products, it fits here.
                </p>
                <div className="areas-chips">
                  {areas.map((a) => (
                    <span key={a} className="area-chip">{a}</span>
                  ))}
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* OPEN APPLICATION */}
      <section className="bg-subtle" data-comment-anchor="open-application">
        <div className="container-wide">
          <div className="contact-grid">
            <div>
              <Reveal>
                <div className="eyebrow">Open application</div>
                <h2 className="display-2" style={{ maxWidth: 14 + 'ch' }}>
                  Tell us what you'd build here.
                </h2>
                <p className="lede" style={{ marginTop: 24, maxWidth: 48 + 'ch' }}>
                  No job codes, no keyword filters. Write to us like a
                  person — we read everything.
                </p>
              </Reveal>

              <Reveal delay={160}>
                <ul className="inline-list" style={{ marginTop: 40 }}>
                  <li><span className="num">01</span> <span>You write to us — this form or email</span></li>
                  <li><span className="num">02</span> <span>One conversation about your work</span></li>
                  <li><span className="num">03</span> <span>A small practical exercise, together</span></li>
                  <li><span className="num">04</span> <span>A clear answer, within two weeks</span></li>
                </ul>
              </Reveal>
            </div>

            <Reveal delay={120}>
              <form className="contact-form" onSubmit={onSubmit}>
                <h4>Apply — any role, any team</h4>
                <div className="field">
                  <label htmlFor="cr-name">Name</label>
                  <input id="cr-name" type="text" value={form.name}
                         onChange={onChange('name')} required
                         placeholder="Your name" />
                </div>
                <div className="field">
                  <label htmlFor="cr-email">Email</label>
                  <input id="cr-email" type="email" value={form.email}
                         onChange={onChange('email')} required
                         placeholder="you@example.com" />
                </div>
                <div className="field">
                  <label htmlFor="cr-area">Area of work</label>
                  <select id="cr-area" value={form.area}
                          onChange={onChange('area')} required>
                    <option value="" disabled>Choose the closest fit</option>
                    {areas.map((a) => (
                      <option key={a} value={a}>{a}</option>
                    ))}
                  </select>
                </div>
                <div className="field">
                  <label htmlFor="cr-message">Your work &amp; what you'd want to do</label>
                  <textarea id="cr-message" value={form.message}
                            onChange={onChange('message')} required
                            placeholder="A few lines about you — and a link to anything you've made." />
                </div>
                <button type="submit" className="btn btn-primary">
                  Send application <ArrowRight />
                </button>
                {sent && (
                  <div className="form-success">
                    Your email app should open with the application ready to send.
                  </div>
                )}
                <div className="form-alt">
                  Prefer email? <a href="mailto:careers@aswe.in">careers@aswe.in</a>
                </div>
              </form>
            </Reveal>
          </div>
        </div>
      </section>

      <ClosingLine />
    </div>
  );
}

Object.assign(window, { CareersPage });