// Nivk.com Insights marketing, Careers page
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12 || !window.LTQM || !window.LTQM.PageHeader){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon, Button } = DS;
const { PageHeader, SectionWrap, SectionHead, IconTile } = window.LTQM;

const VALUES = [
  { icon: "globe", t: "Remote-first, async", d: "Work from anywhere. We default to writing, short meetings, and long focus blocks, not calendars full of standups." },
  { icon: "target", t: "Close to real clients", d: "Everyone talks to the brands we report for. The roadmap comes from what clients actually need to see and act on." },
  { icon: "git-branch", t: "High ownership, small team", d: "You'll own surfaces end to end. No layers, no hand-offs, ship it, watch it, improve it." },
  { icon: "shield-check", t: "Built to last", d: "Independent and deliberate. The dashboard stays free to explore; we grow on our clients' results, not someone else's clock." },
];

const BENEFITS = [
  { icon: "globe-2", t: "Fully remote" },
  { icon: "calendar-check", t: "Flexible hours" },
  { icon: "plane", t: "4 weeks PTO + holidays" },
  { icon: "heart-pulse", t: "Health stipend" },
  { icon: "graduation-cap", t: "Learning budget" },
  { icon: "armchair", t: "Home-office setup" },
  { icon: "trending-up", t: "Equity for everyone" },
  { icon: "users", t: "Twice-yearly meetups" },
];

function Careers() {
  return (
    <div>
      <PageHeader pill="Careers" pillIcon="briefcase"
        title="Help us show clients"
        gray="exactly what's working."
        sub="We're a small, remote-first team building the content-performance and search-visibility reporting behind Nivk.com Insights.">
        <a href="#roles" style={{ display: "inline-flex", alignItems: "center", gap: 8, height: 44, padding: "0 20px", borderRadius: 10, background: "var(--ink-900)", color: "#fff", fontSize: 14, fontWeight: 500 }}>
          Get in touch <Icon name="arrow-down" size={16} />
        </a>
      </PageHeader>

      {/* Values */}
      <SectionWrap>
        <SectionHead pill="How we work" pillIcon="compass" title="A few things" gray="we care about." />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }} className="lt-feat-grid">
          {VALUES.map((v,i)=>(
            <div key={i} style={{ display: "flex", gap: 16, padding: 24, borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
              <IconTile name={v.icon} />
              <div>
                <div style={{ fontSize: 15.5, fontWeight: 600, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>{v.t}</div>
                <div style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.6, marginTop: 7 }}>{v.d}</div>
              </div>
            </div>
          ))}
        </div>
      </SectionWrap>

      {/* Benefits */}
      <SectionWrap tone="muted">
        <SectionHead pill="Benefits" pillIcon="gift" title="The basics, handled." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12 }} className="lt-src-grid">
          {BENEFITS.map((b,i)=>(
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "16px 18px", borderRadius: 12, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
              <Icon name={b.icon} size={18} strokeWidth={1.8} style={{ color: "var(--text-strong)", flex: "none" }} />
              <span style={{ fontSize: 13.5, fontWeight: 500, color: "var(--text-body)" }}>{b.t}</span>
            </div>
          ))}
        </div>
      </SectionWrap>

      {/* Open application */}
      <SectionWrap id="roles" style={{ maxWidth: 760 }}>
        <SectionHead pill="Open application" pillIcon="list-checks" title="No specific openings" gray="posted right now." />
        <div style={{ display: "flex", alignItems: "center", gap: 20, padding: "28px 30px", borderRadius: 18, border: "1px solid var(--border-subtle)", background: "var(--paper)", flexWrap: "wrap" }}>
          <IconTile name="mail" size={44} />
          <div style={{ flex: 1, minWidth: 240 }}>
            <div style={{ fontSize: 16, fontWeight: 600, color: "var(--text-strong)" }}>We're always interested in great people.</div>
            <div style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.55, marginTop: 4 }}>If you'd love to work on content performance, GEO, or making data genuinely useful, tell us what you'd build and why.</div>
          </div>
          <Button variant="primary" leadingIcon="message-circle" onClick={()=>{window.location.href="/contact";}}>Get in touch</Button>
        </div>
      </SectionWrap>
    </div>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.Careers = Careers;
})();