// Careers index + Job detail — extracted from ignitedusa.com/careers/ and individual job posts.

const JOBS = (window.__CMS_DATA__ && window.__CMS_DATA__.jobs) || [
  {
    slug: "assistant-media-planner",
    title: "Assistant Media Planner",
    department: "Media",
    location: "Hybrid · Los Angeles, CA",
    type: "Full-Time / Non-Exempt",
    posted: "2 months ago",
    supervisor: "Media Supervisor",
    businessUnit: "Ignited",
    summary:
      "Support the integrated media team across planning, buying, campaign execution, and reporting. Work collaboratively across the agency on multiple clients to deliver accurate, high‑quality media work.",
    sections: [
      {
        heading: "About Ignited",
        paras: [
          "At Ignited, we’re a modern marketing and growth consultancy that’s been helping commercial clients spark meaningful, measurable growth since we were founded in 1999.",
          "For over 25 years, we’ve guided brands through the ever‑evolving marketing landscape by combining strategic consulting with creative digital communications, media planning & buying, experiential marketing, analytics, and more to help clients reach the right audiences in the right ways.",
          "We are seeking a detail‑oriented, proactive, and eager Assistant Media Planner to support the integrated media team. The core function of this role is media planning and buying, campaign execution, maintenance, and reporting.",
        ],
      },
      {
        heading: "Responsibilities",
        bullets: [
          "Support the media team with planning, buying, and campaign execution across digital and traditional channels, including research, setup, and reporting.",
          "Compile campaign reports, analyze performance data, and identify insights to support optimization efforts.",
          "Help manage campaign execution, including trafficking creative assets, organizing materials, and verifying placements and live links.",
          "Assist with tracking media billing, invoices, and budget pacing to ensure accuracy and organization.",
          "Use media and analytics platforms such as Google Campaign Manager, Google Ads, Google Analytics, Meta Ads Manager, and other research tools to support campaign setup and reporting.",
          "Manage campaign setup within paid media platforms — budgets, targeting, creative implementation, and performance monitoring.",
          "Stay informed on media trends, tools, and industry developments to support planning and reporting initiatives.",
          "Prepare campaign reports, presentations, and updates for internal teams, clients, and vendor partners.",
          "Gather media kits, pricing, audience research, and competitive insights to support media plan development.",
          "Create insertion orders and maintain organized records of contracts, vendor contacts, and campaign materials.",
          "Communicate with media vendors to confirm campaign details, deadlines, and deliverables.",
        ],
      },
      {
        heading: "Education",
        bullets: [
          "Bachelor’s Degree in Business, Marketing, Advertising or related discipline; and/or equivalent combination of education, training and related experience.",
        ],
      },
      {
        heading: "Qualifications",
        bullets: [
          "U.S. Citizenship required.",
          "Strong interest in advertising.",
          "Hybrid role — must be available to work on‑site in Los Angeles (West LA / South Bay) 2–3 days a week, and available for team offsites or outings.",
        ],
      },
      {
        heading: "Essential Skills & Experience",
        bullets: [
          "Displays a high level of initiative and independent thinking.",
          "Clear and concise verbal and written communication skills.",
          "Ability to collaborate with cross‑functional teams.",
          "Baseline understanding of paid media and its role within advertising.",
          "Baseline understanding of social platforms.",
          "Microsoft Office 365 (Outlook, Word, Excel, PowerPoint).",
          "Ability to adapt quickly, manage changing priorities, and maintain timely and professional communication.",
          "Strong organizational skills with the ability to manage multiple campaigns, deadlines, and campaign details accurately.",
          "Strong creative skills including copywriting and presentation deck development.",
          "Strong communication skills with the confidence to ask questions and actively engage with the team.",
          "Curiosity and willingness to learn.",
        ],
      },
    ],
    apply: {
      email: "hr@ignitedusa.com",
      subject: "Application via Assistant Media Planner listing",
      note: "Please attach your cover letter and resume in .DOC or .PDF formats only.",
    },
  },
];

// ── Careers index ────────────────────────────────────────────────────

const CareersPage = ({ onOpenJob }) => {
  return (
    <main style={{ background: "var(--paper)", paddingBottom: 80 }}>
      {/* Header */}
      <section className="container r-page-head" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 24 }}>
          <span style={{ color: "var(--blue)" }}>◆</span>&nbsp;&nbsp;05 / Careers
        </div>
        <div className="r-grid-1-1" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "end" }}>
          <h1
            className="display r-h2-massive"
            style={{
              fontSize: "clamp(80px, 11vw, 168px)",
              margin: 0,
              lineHeight: 0.88,
              letterSpacing: "-0.035em",
            }}
          >
            <span style={{ fontStyle: "italic", fontWeight: 500 }}>{copyText("careers.title")}</span>
          </h1>
          <div>
            <div className="mono" style={{ color: "var(--blue)", marginBottom: 14 }}>↳ {copyText("careers.kicker")}</div>
            <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--ink)", margin: 0, maxWidth: 540 }}>
              {copyText("careers.intro")}
            </p>
          </div>
        </div>
      </section>

      <div className="container"><div className="hairline" /></div>

      {/* Listings */}
      <section className="container r-page-section" style={{ paddingTop: 48, paddingBottom: 96 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <span className="mono" style={{ color: "var(--muted)" }}>
            {JOBS.length} open {JOBS.length === 1 ? "role" : "roles"}
          </span>
          <span className="mono" style={{ color: "var(--muted)" }}>↓ Click any row to view details</span>
        </div>

        <div style={{ borderTop: "1px solid var(--rule-strong)" }}>
          {JOBS.map((j, i) => (
            <JobRow key={j.slug} job={j} index={i + 1} onOpen={() => onOpenJob(j.slug)} />
          ))}
        </div>
      </section>
    </main>
  );
};

const JobRow = ({ job, index, onOpen }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={`#job/${job.slug}`}
      onClick={(e) => { e.preventDefault(); onOpen(); }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid",
        gridTemplateColumns: "60px 2fr 1fr 1fr auto",
        gap: 24,
        alignItems: "center",
        padding: "28px 0",
        borderBottom: "1px solid var(--rule)",
        color: "var(--ink)",
        background: hover ? "rgba(10,10,15,0.03)" : "transparent",
        transition: "background .15s ease",
      }}
      className="r-job-row"
    >
      <span className="mono" style={{ color: "var(--muted)" }}>
        {String(index).padStart(2, "0")}
      </span>
      <div>
        <div
          className="display"
          style={{
            fontSize: "clamp(22px, 2.2vw, 32px)",
            letterSpacing: "-0.02em",
            lineHeight: 1.05,
            fontWeight: 600,
          }}
        >
          {job.title}
        </div>
        <div style={{ marginTop: 6, fontSize: 14, color: "var(--muted)", maxWidth: 560, lineHeight: 1.45 }}>
          {job.summary}
        </div>
      </div>
      <div className="r-job-meta">
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 4 }}>Department</div>
        <div style={{ fontSize: 14 }}>{job.department}</div>
      </div>
      <div className="r-job-meta">
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 4 }}>Location</div>
        <div style={{ fontSize: 14 }}>{job.location}</div>
      </div>
      <span
        style={{
          color: "var(--blue)",
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
          transform: hover ? "translate(4px,-4px)" : "none",
          transition: "transform .25s ease",
        }}
      >
        <ArrowUpRight size={22} />
      </span>
    </a>
  );
};

const EmptyState = () => (
  <div
    style={{
      padding: "80px 24px",
      textAlign: "center",
      border: "1px dashed var(--rule-strong)",
      borderRadius: 16,
      background: "var(--paper-2)",
    }}
  >
    <div className="display" style={{ fontSize: 28, letterSpacing: "-0.02em", marginBottom: 8 }}>
      No matches right now.
    </div>
    <p style={{ margin: 0, fontSize: 15, color: "var(--muted)" }}>
      Try clearing your filters, or reach out to{" "}
      <a href="mailto:hr@ignitedusa.com" style={{ color: "var(--blue)" }}>hr@ignitedusa.com</a>.
    </p>
  </div>
);

// ── Job detail ───────────────────────────────────────────────────────

const JobPage = ({ slug, onBack }) => {
  const job = JOBS.find((j) => j.slug === slug);

  if (!job) {
    return (
      <main className="container" style={{ padding: "120px 0", minHeight: "60vh" }}>
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 16 }}>404 · Listing not found</div>
        <h1 className="display" style={{ fontSize: 56, margin: 0, letterSpacing: "-0.02em" }}>
          That role isn’t open.
        </h1>
        <p style={{ marginTop: 24, fontSize: 17, color: "var(--muted)", maxWidth: 540 }}>
          The listing may have been filled or removed. Head back to careers to see what’s open today.
        </p>
        <div style={{ marginTop: 32 }}>
          <PillButton as="a" href="#careers" onClick={(e) => { e.preventDefault(); onBack(); }} variant="dark" size="md">
            ← Back to careers
          </PillButton>
        </div>
      </main>
    );
  }

  const mailto = `mailto:${job.apply.email}?subject=${encodeURIComponent(job.apply.subject)}`;

  return (
    <main style={{ background: "var(--paper)", paddingBottom: 0 }}>
      {/* Hero */}
      <section className="container r-page-head" style={{ paddingTop: 56, paddingBottom: 64 }}>
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 28, display: "flex", gap: 18, alignItems: "center" }}>
          <a
            href="#careers"
            onClick={(e) => { e.preventDefault(); onBack(); }}
            style={{ color: "var(--muted)", display: "inline-flex", alignItems: "center", gap: 6 }}
          >
            <span style={{ display: "inline-block", transform: "rotate(180deg)" }}><ArrowRight size={10} /></span>
            All jobs
          </a>
          <span style={{ opacity: 0.4 }}>/</span>
          <span style={{ color: "var(--blue)" }}>◆</span>
          <span>{job.department} · {job.type}</span>
        </div>

        <h1
          className="display"
          style={{
            fontSize: "clamp(48px, 7.2vw, 120px)",
            margin: 0,
            lineHeight: 0.92,
            letterSpacing: "-0.035em",
            textWrap: "balance",
            maxWidth: 1200,
          }}
        >
          {job.title}
          <span style={{ color: "var(--blue)" }}>.</span>
        </h1>

        <p
          style={{
            marginTop: 28,
            marginBottom: 0,
            maxWidth: 720,
            fontSize: 19,
            lineHeight: 1.5,
            color: "var(--muted)",
            letterSpacing: "-0.005em",
          }}
        >
          {job.summary}
        </p>

        {/* Meta strip */}
        <div
          className="r-job-meta-strip"
          style={{
            marginTop: 48,
            paddingTop: 24,
            borderTop: "1px solid var(--rule-strong)",
            display: "grid",
            gridTemplateColumns: "repeat(5, 1fr)",
            gap: 24,
          }}
        >
          <CsMeta label="Business Unit" value={job.businessUnit} />
          <CsMeta label="Reports to" value={job.supervisor} />
          <CsMeta label="Location" value={job.location} />
          <CsMeta label="Status" value={job.type} />
          <CsMeta label="Posted" value={job.posted} />
        </div>

        {/* CTA */}
        <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
          <PillButton as="a" href={mailto} variant="blue" size="md">
            Apply via email <ArrowUpRight size={12} />
          </PillButton>
          <PillButton as="a" href="#careers" onClick={(e) => { e.preventDefault(); onBack(); }} variant="ghost" size="md">
            See other roles
          </PillButton>
        </div>
      </section>

      {/* Body sections */}
      <section className="container r-page-section" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div
          className="r-job-body"
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 2fr",
            gap: 80,
            alignItems: "start",
          }}
        >
          <div style={{ position: "sticky", top: 120 }} className="r-job-toc">
            <SectionEyebrow index="—" label="In this listing" />
            <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 10 }}>
              {job.sections.map((s, i) => (
                <a
                  key={i}
                  href={`#sec-${i}`}
                  style={{ fontSize: 14, color: "var(--ink)", letterSpacing: "-0.005em" }}
                >
                  <span className="mono" style={{ color: "var(--muted)", marginRight: 10 }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  {s.heading}
                </a>
              ))}
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 56 }}>
            {job.sections.map((s, i) => (
              <div key={i} id={`sec-${i}`}>
                <SectionEyebrow index={String(i + 1).padStart(2, "0")} label={s.heading} />
                <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 16 }}>
                  {s.paras && s.paras.map((p, k) => (
                    <p
                      key={k}
                      style={{
                        margin: 0,
                        fontSize: 17,
                        lineHeight: 1.6,
                        color: k === 0 ? "var(--ink)" : "rgba(10,10,15,0.78)",
                        letterSpacing: "-0.005em",
                        textWrap: "pretty",
                      }}
                    >
                      {p}
                    </p>
                  ))}
                  {s.bullets && (
                    <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
                      {s.bullets.map((b, k) => (
                        <li
                          key={k}
                          style={{
                            display: "grid",
                            gridTemplateColumns: "16px 1fr",
                            gap: 14,
                            fontSize: 16,
                            lineHeight: 1.55,
                            color: "var(--ink)",
                            letterSpacing: "-0.005em",
                          }}
                        >
                          <span
                            aria-hidden="true"
                            style={{
                              display: "inline-block",
                              width: 6,
                              height: 6,
                              marginTop: 11,
                              background: "var(--blue)",
                              borderRadius: 99,
                            }}
                          />
                          <span>{b}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Apply slab */}
      <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "112px 0" }}>
        <div className="container">
          <SectionEyebrow index="→" label="How to apply" color="rgba(255,255,255,0.55)" />
          <div
            className="r-job-apply-grid"
            style={{
              marginTop: 32,
              display: "grid",
              gridTemplateColumns: "1.05fr 1fr",
              gap: 80,
              alignItems: "end",
            }}
          >
            <h2
              className="display"
              style={{
                fontSize: "clamp(34px, 4.2vw, 64px)",
                margin: 0,
                lineHeight: 1.02,
                letterSpacing: "-0.025em",
                textWrap: "balance",
              }}
            >
              Email your details to{" "}
              <a
                href={mailto}
                style={{ fontStyle: "italic", fontWeight: 500, color: "var(--blue)" }}
              >
                {job.apply.email}
              </a>.
            </h2>
            <div>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "rgba(255,255,255,0.72)" }}>
                {job.apply.note}
              </p>
              <div style={{ marginTop: 28 }}>
                <PillButton as="a" href={mailto} variant="paper" size="lg">
                  Apply via email <ArrowUpRight size={14} />
                </PillButton>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* EEO + E-Verify */}
      <section className="container r-page-section" style={{ paddingTop: 80, paddingBottom: 96 }}>
        <div className="r-job-legal" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          <div>
            <SectionEyebrow index="—" label={copyText("careers.eoe_heading")} />
            <p style={{ marginTop: 20, fontSize: 14, lineHeight: 1.6, color: "var(--muted)" }}>
              {copyText("careers.eoe_body")}
            </p>
          </div>
          <div>
            <SectionEyebrow index="—" label={copyText("careers.everify_heading")} />
            <p style={{ marginTop: 20, fontSize: 14, lineHeight: 1.6, color: "var(--muted)" }}>
              {copyText("careers.everify_body")}
            </p>
          </div>
        </div>
      </section>
    </main>
  );
};

window.JOBS = JOBS;
window.CareersPage = CareersPage;
window.JobPage = JobPage;