/* Careers page */
const Careers = ({ go }) => {
  const [filter, setFilter] = React.useState("All");
  const departments = ["All", "Mobility", "Retail", "B2B", "Marketing", "Aftersales", "Group"];
  const roles = [
    { title: "Brand Manager — Yadea Mauritius",   dept: "Mobility",   loc: "Coromandel", type: "Full-time" },
    { title: "Visual Merchandiser",            dept: "Retail",     loc: "Bagatelle",  type: "Full-time" },
    { title: "B2B Account Executive",          dept: "B2B",        loc: "Coromandel", type: "Hybrid" },
    { title: "Service Technician — E-bikes",   dept: "Aftersales", loc: "Port Louis", type: "Full-time" },
    { title: "Head of Digital",                dept: "Marketing",  loc: "Coromandel", type: "Full-time" },
    { title: "Store Manager — Adopt",          dept: "Retail",     loc: "Bagatelle",  type: "Full-time" },
    { title: "Junior Buyer — Funky Fish",      dept: "Retail",     loc: "Coromandel", type: "Full-time" },
    { title: "Posterita Implementation Specialist", dept: "B2B",    loc: "Coromandel", type: "Field" },
    { title: "Logistics Coordinator",          dept: "Group",      loc: "Coromandel", type: "Full-time" },
    { title: "Pharmacist — Livewell",          dept: "Retail",     loc: "Phoenix",    type: "Full-time" },
    { title: "Performance Marketing Lead",     dept: "Marketing",  loc: "Coromandel", type: "Hybrid" },
    { title: "Citadel Apparel Designer",        dept: "Retail",     loc: "Coromandel", type: "Full-time" },
    { title: "Receptionist — Group HQ",        dept: "Group",      loc: "Coromandel", type: "Full-time" },
    { title: "Customer Care Specialist",       dept: "Aftersales", loc: "Coromandel", type: "Full-time" },
  ];
  const filtered = filter === "All" ? roles : roles.filter(r => r.dept === filter);

  const perks = [
    { ic: <Icon.Spark />, title: "Real ownership", body: "Brand managers run their P&L. Store managers run their store. We don't micromanage." },
    { ic: <Icon.Globe />, title: "All of Mauritius", body: "Stores across Port Louis, Bagatelle, Phoenix, Curepipe, Grand Baie, Flacq and beyond." },
    { ic: <Icon.Shield />,title: "Stable since 1983", body: "A family business that's kept payroll on time, every month, for over 40 years." },
    { ic: <Icon.Bolt />,  title: "Group discount", body: "Staff discount across all 6 retail brands — Adopt, Citadel, Funky Fish, Bottega Verde, Livewell, Yadea." },
  ];

  return (
    <main className="page-enter">
      <section style={{ paddingTop: 56, paddingBottom: 0 }}>
        <div className="shell-wide">
          <Eyebrow dot color="#CC1B2B">Careers</Eyebrow>
          <h1 className="display-hero" style={{ marginTop: 24 }}>
            Come build<br />
            the <span className="serif" style={{ fontStyle: "italic", color: "#CC1B2B" }}>next forty</span><br />
            years with us.
          </h1>
          <div style={{ marginTop: 40, display: "flex", gap: 24, alignItems: "end", justifyContent: "space-between", flexWrap: "wrap" }}>
            <p style={{ fontSize: 19, maxWidth: 580, lineHeight: 1.5 }}>
              Tamak has 175 employees across Mauritius. We promote from within. We've kept payroll on time every month since <em className="serif">1983</em>. We're <em className="serif">14</em> open roles away from being <em className="serif">189</em>.
            </p>
            <div style={{ display: "flex", gap: 24, alignItems: "end" }}>
              <Stat n={175} label="Team members" />
              <Stat n={14} label="Open roles" />
              <Stat n={92} suffix="%" label="Internal promotion" />
            </div>
          </div>
        </div>
      </section>

      {/* Perks */}
      <section className="section">
        <div className="shell-wide">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="perks-grid">
            {perks.map((p, i) => (
              <div key={i} style={{ background: "var(--paper-pure)", border: "1px solid var(--line)", borderRadius: 20, padding: 28, minHeight: 240, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div style={{ width: 44, height: 44, borderRadius: 999, background: "var(--orange)", color: "white", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{p.ic}</div>
                <div>
                  <div style={{ fontFamily: "var(--f-display)", fontSize: 22, letterSpacing: "-0.02em", marginBottom: 10 }}>{p.title}</div>
                  <div style={{ fontSize: 14, color: "var(--mute)", lineHeight: 1.5 }}>{p.body}</div>
                </div>
              </div>
            ))}
          </div>
          <style>{`@media (max-width: 900px) { .perks-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
        </div>
      </section>

      {/* Roles list */}
      <section className="section" id="roles">
        <div className="shell-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 24, flexWrap: "wrap", gap: 16 }}>
            <h2 className="display-xl">Open roles · {filtered.length}</h2>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {departments.map(d => (
                <button key={d} onClick={() => setFilter(d)} className="btn btn-sm" style={{
                  background: filter === d ? "var(--ink)" : "transparent",
                  color: filter === d ? "var(--paper)" : "var(--ink)",
                  border: `1px solid ${filter === d ? "var(--ink)" : "var(--line-strong)"}`,
                }}>{d}</button>
              ))}
            </div>
          </div>

          <div style={{ borderTop: "1px solid var(--ink)" }} className="roles-list">
            {filtered.map((r, i) => (
              <a key={i} className="role-row" style={{ display: "grid", gridTemplateColumns: "60px 1.8fr 1fr 1fr 1fr 80px", padding: "24px 0", borderBottom: "1px solid var(--line)", alignItems: "center", cursor: "pointer", transition: "padding 0.2s ease, background 0.2s ease" }}
                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--paper-warm)"; e.currentTarget.style.paddingLeft = "16px"; e.currentTarget.style.paddingRight = "16px"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.paddingLeft = "0"; e.currentTarget.style.paddingRight = "0"; }}
              >
                <div className="role-idx" style={{ fontFamily: "var(--f-mono)", fontSize: 12, color: "var(--mute)" }}>{String(i + 1).padStart(2, "0")}</div>
                <div className="role-title" style={{ fontFamily: "var(--f-display)", fontSize: 22, letterSpacing: "-0.02em" }}>{r.title}</div>
                <div className="role-dept" style={{ fontSize: 13, color: "var(--mute)" }}>{r.dept}</div>
                <div className="role-loc" style={{ fontSize: 13, color: "var(--mute)" }}>{r.loc}</div>
                <div className="role-type" style={{ fontSize: 13 }}><Tag>{r.type}</Tag></div>
                <div className="role-arrow" style={{ textAlign: "right" }}><Icon.ArrowUpRight /></div>
              </a>
            ))}
          </div>
          <style>{`
            /* Tablet: drop the index column + condense to title / dept+loc / type / arrow */
            @media (max-width: 900px) {
              .roles-list .role-row { grid-template-columns: 1.6fr 1fr 100px 40px !important; column-gap: 16px; }
              .roles-list .role-idx { display: none !important; }
              .roles-list .role-loc { display: none !important; }
              .roles-list .role-title { font-size: 18px !important; }
            }
            /* Mobile: stack title above meta row */
            @media (max-width: 560px) {
              .roles-list .role-row { grid-template-columns: 1fr 40px !important; grid-template-areas: "title arrow" "meta arrow"; row-gap: 8px; padding: 20px 0 !important; }
              .roles-list .role-title { grid-area: title; font-size: 17px !important; }
              .roles-list .role-dept  { grid-area: meta; font-size: 12px !important; }
              .roles-list .role-type  { display: none !important; }
              .roles-list .role-arrow { grid-area: arrow; align-self: start; padding-top: 4px; }
            }
          `}</style>
        </div>
      </section>

      {/* Internship band */}
      <section className="section">
        <div className="shell-wide">
          <div style={{ background: "#CC1B2B", color: "white", borderRadius: 28, padding: 56, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
            <div>
              <Eyebrow color="rgba(255,255,255,0.8)">● Now accepting Summer '26 applications</Eyebrow>
              <h3 className="display-lg" style={{ marginTop: 16, color: "white" }}>
                Tamak Summer<br />
                <span className="serif" style={{ fontStyle: "italic" }}>Internship Programme.</span>
              </h3>
              <p style={{ marginTop: 12, fontSize: 15, maxWidth: 460, opacity: 0.9 }}>
                12 weeks. Real work, real shipping. Open to students at the University of Mauritius, UoT, Curtin, and École de Management.
              </p>
            </div>
            <a onClick={() => go("contact")} className="btn btn-lg btn-paper" style={{ cursor: "pointer" }}>
              Apply now <Icon.ArrowRight size={14} />
            </a>
          </div>
        </div>
      </section>
    </main>
  );
};

const Stat = ({ n, label, suffix = "" }) => (
  <div>
    <div style={{ fontFamily: "var(--f-display)", fontSize: 52, fontWeight: 500, letterSpacing: "-0.035em", lineHeight: 1 }}>
      <CountUp to={n} suffix={suffix} />
    </div>
    <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)", marginTop: 4 }}>{label}</div>
  </div>
);

window.Careers = Careers;