// CAREERS
const { useState, useEffect } = React;
const { Link, Btn, ROLES } = window;

function Careers() {
  return (
    <main className="page-enter">
      <CareersHero />
      <CareersHonesty />
      <RolesList />
      <CareersBenefits />
      <CareersApply />
    </main>
  );
}

function CareersHero() {
  return (
    <section style={{ paddingTop: 180, paddingBottom: 60 }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
        <div>
          <div className="eyebrow">↳ Carrières · {ROLES.length} postes ouverts</div>
          <h1 className="serif" style={{ fontSize: "clamp(64px, 9.4vw, 200px)", lineHeight: 0.9, letterSpacing: "-0.025em", marginTop: 28 }}>
            Ce que travailler<br/>chez Clyvonna <em style={{ color: "var(--acid-deep)" }}>est réellement</em>.
          </h1>
        </div>
        <div>
          <p className="body-lg" style={{ maxWidth: 460 }}>
            Nous vous parlerons des aspects difficiles avant que vous n'acceptiez l'offre. Aucune section « baby-foot » sur cette page. Nous grandissons de 4 à 5 personnes par an, en toute conscience.
          </p>
        </div>
      </div>
    </section>
  );
}

function CareersHonesty() {
  const items = [
    { t: "Une équipe expérimentée par construction.", d: "14 d'entre nous sur 27 ont plus de dix ans d'expérience dans le métier. Si vous cherchez un poste junior, nous proposons un seul parcours : le programme éditorial. Sinon, nous vous orienterons vers un confrère." },
    { t: "Un recrutement réfléchi.", d: "Notre processus comprend six entretiens et une semaine d'essai. La semaine d'essai est rémunérée. Nous savons dire non avec respect et précision." },
    { t: "Nous travaillons sérieusement, dans des horaires normaux.", d: "Nous ne sommes pas un studio « culte du surmenage ». Sprints trimestriels, aucune nuit blanche depuis 2021. Plusieurs membres ont des enfants en bas âge. Une collègue élève des chèvres." },
    { t: "Nous sommes indépendants et comptons le rester.", d: "Nous avons décliné des offres significatives de groupes de communication. Le travail est l'actif ; la structure n'est que le véhicule. Si vous cherchez de l'equity en vue d'une revente, nous ne sommes pas le bon studio." },
    { t: "Nous débattons, ouvertement.", d: "Notre Slack est animé. Nous débattons positionnement, copy, ou opportunité de prendre un compte. Nous n'avons aucun problème d'expression. Parfois nous devons même nous demander de baisser d'un ton." },
    { t: "Intéressement au résultat, pas d'actions.", d: "Nous partageons 20 % des bénéfices avec l'équipe chaque année. Nous n'offrons pas d'equity. Notre entretien annuel est une vraie conversation, pas un formulaire à 360 degrés." },
  ];
  return (
    <section style={{ padding: "120px 0", background: "var(--cream-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num">Ce que nous disons aux candidats</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Six vérités,<br/>par écrit.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 460 }}>
            Nous envoyons cette liste à chaque candidat avant le premier appel. Elle est publiée ici car nous préférons ne pas vous faire perdre une semaine sur un processus qui se solderait par un refus.
          </p>
        </div>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
        {items.map((it, i) => (
          <div key={i} style={{ padding: 32, background: "var(--cream)", border: "1px solid var(--rule)" }}>
            <div className="mono" style={{ color: "var(--muted)", marginBottom: 12 }}>0{i+1}</div>
            <h3 className="serif" style={{ fontSize: 32, lineHeight: 1.06, letterSpacing: "-0.01em", marginBottom: 16 }}>{it.t}</h3>
            <p className="body" style={{ maxWidth: 520 }}>{it.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function RolesList() {
  return (
    <section style={{ padding: "120px 0" }}>
      <div className="page">
        <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginBottom: 48 }}>Postes ouverts</h2>
        {ROLES.map((r, i) => <RoleRow key={i} r={r} i={i} />)}
      </div>
    </section>
  );
}

function RoleRow({ r, i }) {
  const [hover, setHover] = useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={() => alert(`Formulaire de candidature pour : ${r.title}`)} style={{ cursor: "pointer" }}>
      <div style={{ display: "grid", gridTemplateColumns: "60px 1.6fr 1fr 1fr 200px", gap: 32, padding: "36px 0", borderTop: "1px solid var(--rule)", borderBottom: i === ROLES.length - 1 ? "1px solid var(--rule)" : "none", alignItems: "center", transition: "transform .35s var(--ease)", transform: hover ? "translateX(20px)" : "none" }}>
        <span className="mono" style={{ color: "var(--muted)" }}>{String(i+1).padStart(2, "0")}</span>
        <h3 className="serif" style={{ fontSize: "clamp(28px, 3vw, 44px)", lineHeight: 1.05, letterSpacing: "-0.01em" }}>{r.title}</h3>
        <span className="mono" style={{ color: "var(--muted)" }}>{r.team}</span>
        <span className="mono" style={{ color: "var(--muted)" }}>Cedar Rapids, Iowa (télétravail possible)</span>
        <div className="flex items-center justify-between" style={{ gap: 16 }}>
          <span className="pill"><span className="dot" />{r.type}</span>
          <span className="serif" style={{ fontSize: 28, color: hover ? "var(--acid-deep)" : "var(--ink)", transition: "color .2s" }}>→</span>
        </div>
      </div>
    </div>
  );
}

function CareersBenefits() {
  return (
    <section style={{ padding: "120px 0", background: "var(--ink)", color: "var(--cream)" }}>
      <div className="page">
        <div className="flex justify-between items-end" style={{ marginBottom: 48 }}>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", color: "var(--cream)" }}>
            En pratique.<em style={{ color: "var(--acid)" }}>—</em>
          </h2>
          <span className="mono" style={{ color: "rgba(242,237,228,0.5)" }}>↳ Identique pour tous, pas de négociation</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {[
            ["Rémunération", "Publiée publiquement par poste. Haut de fourchette de marché — nous ne sous-payons pas."],
            ["Intéressement", "20 % du bénéfice annuel. Répartition basée sur l'ancienneté et la pratique, jamais sur l'appréciation subjective."],
            ["Congés payés", "30 jours minimum, à prendre. Nous tenons sur ce point."],
            ["Congé sabbatique", "6 semaines payées après 4 ans d'ancienneté. Nous prenons en charge le billet d'avion."],
            ["Santé & mutuelle", "Couverture intégrale, ayants droit inclus. Là où la géographie le permet."],
            ["Épargne retraite", "Abondement de 8 %, acquis dès la première année."],
            ["Locaux", "Cedar Rapids (Iowa) — équipe en télétravail compatible à l'international."],
            ["Outils", "À votre charge, remboursés. Mac ou Linux. Deux écrans si vous le souhaitez."],
            ["Journée pain", "Tous les mercredis. Vous n'êtes pas obligé de cuire, mais vous êtes obligé de manger."],
          ].map(([k, v]) => (
            <div key={k} style={{ padding: 24, background: "var(--ink-2)", border: "1px solid rgba(242,237,228,0.12)", borderRadius: 4 }}>
              <div className="lx-label" style={{ color: "rgba(242,237,228,0.55)", marginBottom: 10 }}>{k}</div>
              <p className="body-lg" style={{ color: "var(--cream)" }}>{v}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CareersApply() {
  return (
    <section style={{ padding: "120px 0" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end" }}>
        <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 88px)", lineHeight: 0.96, letterSpacing: "-0.02em" }}>
          Vous ne trouvez pas votre poste ?
        </h2>
        <div>
          <p className="body-lg" style={{ marginBottom: 24, maxWidth: 460 }}>
            Écrivez-nous. Nous lisons chaque candidature. Nous créons rarement des postes sur mesure, mais cela s'est produit deux fois ces trois dernières années — et ces deux personnes sont toujours parmi nous.
          </p>
          <Btn to="/contact" variant="acid" magnetic>Nous écrire</Btn>
        </div>
      </div>
    </section>
  );
}

window.Careers = Careers;