// SQSEO 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 users", d: "Everyone talks to SEOs, founders, and agencies. The roadmap comes from the searches people actually struggle to find." },
  { 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: "Profitable and independent. The core tool stays free; we grow deliberately, not on 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" },
];

const ROLES = [
  { dept: "Engineering", t: "Senior Product Engineer", loc: "Remote · Full-time", desc: "Own a surface of the app end to end, React front end to the keyword pipeline behind it." },
  { dept: "Engineering", t: "Backend Engineer, Search Pipeline", loc: "Remote · Full-time", desc: "Scale the systems that fan one seed into hundreds of longtails across 8 surfaces." },
  { dept: "Data", t: "Search Data Scientist (GEO)", loc: "Remote · Full-time", desc: "Model AI-search visibility and intent. Turn messy query data into trustworthy scores." },
  { dept: "Design", t: "Growth Designer", loc: "Remote · Contract", desc: "Shape the marketing site and onboarding. Minimal, expensive, conversion-minded." },
  { dept: "Go-to-market", t: "Content & SEO Lead", loc: "Remote · Full-time", desc: "Run our own playbook in public, longtail content that proves the product works." },
];

function Careers() {
  return (
    <div>
      <PageHeader pill="Careers" pillIcon="briefcase"
        title="Come build the search map."
        gray="Remote-first. Async. Deliberate."
        sub="We're a small team turning hidden search demand into something anyone can use. Help us build it.">
        <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 }}>
          See open roles <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 roles */}
      <SectionWrap id="roles" style={{ maxWidth: 880 }}>
        <SectionHead pill="Open roles" pillIcon="list-checks" title="We're hiring." gray="Find your seat." />
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {ROLES.map((r,i)=>(
            <a key={i} href="/contact" style={{ display: "flex", alignItems: "center", gap: 16, padding: "20px 22px", borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)", transition: "border-color var(--dur-base), transform var(--dur-base)" }}
              onMouseEnter={e=>{e.currentTarget.style.borderColor="var(--ink-200)";e.currentTarget.style.transform="translateY(-2px)";}}
              onMouseLeave={e=>{e.currentTarget.style.borderColor="var(--border-subtle)";e.currentTarget.style.transform="none";}}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ marginBottom: 6, lineHeight: 1.35 }}>
                  <span style={{ fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>{r.t}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--text-muted)", border: "1px solid var(--border-subtle)", borderRadius: 999, padding: "2px 9px", marginLeft: 10, whiteSpace: "nowrap", verticalAlign: "middle" }}>{r.dept}</span>
                </div>
                <div style={{ fontSize: 13, color: "var(--text-muted)", lineHeight: 1.5, marginBottom: 6 }}>{r.desc}</div>
                <div style={{ fontSize: 12, color: "var(--text-faint)" }}>{r.loc}</div>
              </div>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 500, color: "var(--ink-900)", whiteSpace: "nowrap" }}>Apply <Icon name="arrow-right" size={16} /></span>
            </a>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 26, fontSize: 13.5, color: "var(--text-muted)" }}>
          Don't see your role? <a href="/contact" style={{ color: "var(--ink-900)", fontWeight: 500 }}>Tell us what you'd build →</a>
        </div>
      </SectionWrap>
    </div>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.Careers = Careers;
})();