/* Careers data + page */

const ROLES = [
  { title: "Senior Flutter Engineer",         loc: "Dubai · Damascus",    type: "Full-time", team: "Mobile" },
  { title: "Senior Next.js Engineer",         loc: "Remote · MENA / EU",  type: "Full-time", team: "Web" },
  { title: "Product Designer",                loc: "Dubai · Istanbul",    type: "Full-time", team: "Design" },
  { title: "AI / LLM Engineer",               loc: "Remote · MENA / EU",  type: "Full-time", team: "AI" },
  { title: "Engineering Manager",             loc: "Dubai",               type: "Full-time", team: "Leadership" },
  { title: "DevOps Engineer",                 loc: "Damascus · Istanbul", type: "Full-time", team: "Platform" },
  { title: "Brand Designer (Contract)",       loc: "Remote",              type: "Contract",  team: "Design" },
  { title: "Engineering Internship — Summer", loc: "Dubai · Damascus",    type: "Internship", team: "All" },
];

const PERKS = [
  { title: "Real ownership",        desc: "Engineers own features end-to-end — design review, code, deploy, support." },
  { title: "Senior partners",       desc: "Pair with people 5–15 years deeper than you, on real production code." },
  { title: "Quarterly travel",      desc: "Visit a sister office or a client site once a quarter, on the studio." },
  { title: "Annual learning budget",desc: "$2,500/year for books, courses, conferences — no approval needed under $500." },
  { title: "Hardware you'd buy",    desc: "Whatever you actually want to work on — within reason. Replaced every 3 years." },
  { title: "30 days off",           desc: "Annual leave, plus the city's public holidays. We watch hours, not seat time." },
  { title: "Bilingual culture",     desc: "Standups happen in Arabic and English. Both are first-class." },
  { title: "Health, dental, family",desc: "Comprehensive coverage in every city we operate in." },
];

const PROCESS = [
  { title: "Intro call (30 min)",          desc: "We talk about your background and what you'd want from the next role. No coding." },
  { title: "Technical conversation (90 min)", desc: "Walk us through a recent project. Architecture, decisions, what you'd do differently." },
  { title: "Studio day (4–6 hours, paid)", desc: "Work on a small real problem with two of us. We see how we think together. You get paid for the day either way." },
];

function CareersPage() {
  React.useEffect(() => {
    document.title = "Careers — Innoveev";
    let m = document.head.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name","description"); document.head.appendChild(m); }
    m.setAttribute("content", "Open roles at Innoveev across Dubai, Damascus, Istanbul and Tallinn. We hire designers, engineers and operators.");
  }, []);

  return (
    <>
      <Nav />

      <header className="sub-hero">
        <div className="mesh" aria-hidden="true">
          <span className="mesh__blob mesh__blob--1"></span>
          <span className="mesh__blob mesh__blob--2"></span>
          <span className="mesh__blob mesh__blob--3"></span>
          <span className="mesh__fade-bottom"></span>
        </div>
        <div className="container">
          <div className="sub-hero__head">
            <span className="eyebrow">Careers</span>
            <h1 className="sub-hero__title">
              Build software where it's <em>actually needed.</em>
            </h1>
            <p className="sub-hero__lede">
              We hire deliberately — small classes, senior bar, every offer made by the person you'll
              report to. Eight roles open right now across our four cities.
            </p>
          </div>
        </div>
      </header>

      {/* Open roles */}
      <section className="section section--tight">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Open roles</span>
              <h2 className="h2 section-head__title">Eight roles, four cities, one bar.</h2>
            </div>
            <p className="lede section-head__lede">
              All roles ship to production from week one. Compensation is competitive globally, indexed
              to the city — we publish bands on request.
            </p>
          </div>

          <ul className="role-list">
            {ROLES.map((r) => (
              <li key={r.title} className="role-row">
                <a href="mailto:careers@innoveev.com" className="role-row__link" data-cursor="Apply">
                  <span className="role-row__title">{r.title}</span>
                  <span className="role-row__meta">{r.team}</span>
                  <span className="role-row__meta">{r.loc} · {r.type}</span>
                  <span className="role-row__chev" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                      <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Process */}
      <section className="section section--tight">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Interview process</span>
              <h2 className="h2 section-head__title">Three steps. Two weeks.</h2>
            </div>
            <p className="lede section-head__lede">
              We don't do whiteboard interviews. The process exists to figure out whether we'd both want
              to do this for the next several years — for everyone.
            </p>
          </div>

          <ol className="process-steps">
            {PROCESS.map((p, i) => (
              <li key={p.title} className="process-step">
                <div className="process-step__num">Step 0{i + 1}</div>
                <div className="process-step__title">{p.title}</div>
                <p className="process-step__desc">{p.desc}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* Perks */}
      <section className="section section--tight">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">What you get</span>
              <h2 className="h2 section-head__title">Beyond the salary.</h2>
            </div>
          </div>
          <div className="careers-perks">
            {PERKS.map((p) => (
              <div key={p.title} className="perk">
                <div className="perk__title">{p.title}</div>
                <p className="perk__desc">{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section section--tight">
        <div className="container">
          <div className="faq-closing">
            <h2 className="faq-closing__title">Don't see your role?</h2>
            <p className="faq-closing__lede">
              Send us a short note and a portfolio anyway. About a third of our hires come from
              speculative applications.
            </p>
            <div className="faq-closing__ctas">
              <a href="mailto:careers@innoveev.com" className="btn btn--primary">
                Email careers@innoveev.com <Arrow />
              </a>
              <a href="about.html" className="btn btn--secondary">Meet the team</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <TweaksUI />
      <StickyCTA threshold={520} label="Want to work with us?" cta="Browse open roles" href="#" />
      <BuildMode />
      <KeyboardEggs />
      <CookieBanner />
      <CustomCursor enabled={window.useTweaksDefaults.cursor} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<CareersPage />);