// Oserot Careers

const ROLES = [
  {
    title: "Forward-Deployed Engineer",
    discipline: "ai",
    location: "Milan or Remote",
    type: "Full-time",
    body: "Embed with a partner company and ship production AI systems alongside their team. You will own evals, agent infrastructure, and the operational handoff. Strong opinions about deployment, weak attachment to frameworks.",
  },
  {
    title: "Founding Engineer, Forge",
    discipline: "forge",
    location: "Milan or Remote",
    type: "Full-time",
    body: "Help us build the second generation of internal tooling for serious operators. You will work across the stack and decide what the stack should be. Five years of shipping software end-to-end.",
  },
  {
    title: "Promoter",
    discipline: "studio",
    location: "Milan or Remote",
    type: "Full-time",
    body: "You are the public face of Oserot at conferences, founder dinners, and partner meetings. You introduce the studio, qualify opportunities, and translate them back for the team. Comfortable in rooms with founders and investors.",
  },
  {
    title: "Junior Analyst",
    discipline: "capital",
    location: "Milan or Remote",
    type: "Full-time",
    body: "Support the Capital team across diligence, portfolio monitoring, and market mapping. Recent graduate or one to two years in venture, banking, or consulting. Sharp memos, clear models, low ego.",
  },
  {
    title: "Generalist Fellowship",
    discipline: "labs",
    location: "Milan or Remote",
    type: "6-month fellowship",
    body: "A six-month rotation across every discipline. For graduates and career-changers who are unreasonably good at picking things up. Two seats per year.",
  },
];

const EMAIL = "hello@oserot.com";
function mailtoFor(role) {
  const subject = encodeURIComponent(`Application — ${role.title}`);
  const body = encodeURIComponent(
    `Hi Oserot,\n\nI'd like to apply for the ${role.title} role.\n\nAttached: CV, links to past work.\n\n— `
  );
  return `mailto:${EMAIL}?subject=${subject}&body=${body}`;
}

const ArrowRight = ({ size = 14 }) => (
  <svg viewBox="0 0 16 16" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
    <path d="M3 8h10M9 4l4 4-4 4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="index.html" className="brand">Oserot<span className="brand-mark">*</span></a>
        <div className="nav-links">
          <a href="index.html#approach">Approach</a>
          <a href="index.html#disciplines">Disciplines</a>
          <a href="Careers.html" aria-current="page">Careers</a>
          <a href="index.html#contact">Contact</a>
        </div>
        <a className="btn btn-primary" href={`mailto:${EMAIL}`}>Get in touch <ArrowRight /></a>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="careers-hero">
      <div className="container">
        <a href="index.html" className="careers-brand">Oserot<span className="brand-mark">*</span></a>
        <div className="careers-hero-row">
          <h1>Careers.</h1>
          <p>{ROLES.length} open roles. Apply by email.</p>
        </div>
      </div>
    </section>
  );
}

function Roles() {
  return (
    <section className="roles">
      <div className="container">
        <ul className="role-list">
          {ROLES.map((r, i) => (
            <li key={i}>
              <a className="role" href={mailtoFor(r)}>
                <div className="role-main">
                  <div className="role-title-line">
                    <h3>{r.title}</h3>
                  </div>
                  <p className="role-body">{r.body}</p>
                </div>
                <div className="role-meta">
                  <div className="role-meta-row">
                    <span className="role-meta-label">Location</span>
                    <span>{r.location}</span>
                  </div>
                  <div className="role-meta-row">
                    <span className="role-meta-label">Type</span>
                    <span>{r.type}</span>
                  </div>
                  <div className="role-apply">
                    Apply via email <ArrowRight />
                  </div>
                </div>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function NoFit() {
  return (
    <section className="nofit">
      <div className="container">
        <div className="nofit-grid">
          <div>
            <div className="sec-kicker">General application</div>
            <h2>Nothing fits, <em>but you'd thrive here.</em></h2>
          </div>
          <div className="nofit-body">
            <p>Write a short note about what you do well and the kind of work you want to do next. Attach links to anything shipped. We read every application.</p>
            <div className="nofit-actions">
              <a className="btn btn-primary" href={`mailto:${EMAIL}?subject=${encodeURIComponent("General application")}`}>
                Write to {EMAIL} <ArrowRight />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-mark">
            <span className="footer-wordmark">Oserot<span className="brand-mark">*</span></span>
            <p className="footer-tag">An operating studio.<br />Working together since 2017.</p>
          </div>
          </div>

        <div className="footer-cols">
          <div className="footer-col">
            <div className="footer-col-label">Index</div>
            <ul>
              <li><a href="index.html#approach">Approach</a></li>
              <li><a href="index.html#disciplines">Disciplines</a></li>
              <li><a href="index.html#studio">Operating model</a></li>
              <li><a href="index.html#contact">Contact</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <div className="footer-col-label">Join us</div>
            <ul>
              <li><a href="Careers.html">Careers</a></li>
              <li><a href="Careers.html">Open roles <span className="role-count">{ROLES.length}</span></a></li>
              <li><a href="Careers.html">Fellowship</a></li>
              <li><a href={`mailto:${EMAIL}?subject=${encodeURIComponent("General application")}`}>General application</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-legal">
          <div className="footer-legal-left">
            <span>© 2026 Oserot S.r.l.</span>
          </div>
          <div className="footer-legal-right">
            <a href="Privacy.html">Privacy</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", "#2546ff");
    document.documentElement.style.setProperty("--accent-fg", "#ffffff");
  }, []);
  return (
    <>
      <Hero />
      <Roles />
      <NoFit />
      <Footer />
    </>
  );
}

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