// careers.jsx — Careers page

const CAREER_BENEFITS = [
  {
    icon: "map",
    label: "01 — Remote",
    title: "100% remote",
    body:
      "Work from anywhere in the world. Our fully-remote setup lets you balance work and life on your own terms — no commute, no relocations, no compromises.",
  },
  {
    icon: "send",
    label: "02 — Travel",
    title: "Freedom to travel",
    body:
      "Take your laptop on the road. We believe great work happens wherever you do your best thinking — recharge, explore, and spend time on what truly matters.",
  },
  {
    icon: "clock",
    label: "03 — Flexible",
    title: "Flexible hours",
    body:
      "Everyone has their own rhythm. Pick the hours that maximize your productivity while keeping a real life outside of work. Some roles have more flex than others.",
  },
  {
    icon: "chart",
    label: "04 — Growth",
    title: "Career growth",
    body:
      "We invest in your development. From day one you'll have ownership over your craft and a clear path to grow into senior, lead, and management roles as we expand.",
  },
  {
    icon: "heart",
    label: "05 — Culture",
    title: "Great culture",
    body:
      "Join a small, supportive team that values innovation, collaboration, and mutual respect. Every voice matters here — you'll never be lost in the org chart.",
  },
  {
    icon: "user",
    label: "06 — Balance",
    title: "Work-life balance",
    body:
      "Consistent hours, remote flexibility, and the room to thrive in both your work and your personal life. When you feel your best, you do your best — and we support that.",
  },
];

const CAREER_ROLES = [
  {
    icon: "image",
    tag: "Creative",
    title: "Social Media Management",
    sub: "Designers, video editors, and creatives",
    body:
      "We're hiring talented graphic designers and short-form video editors who can turn a small-business brand into a feed people actually want to follow.",
  },
  {
    icon: "target",
    tag: "Paid Media",
    title: "Meta, Google & TikTok Ads",
    sub: "Ad managers across major platforms",
    body:
      "If you understand how to help small businesses grow through Meta ads, Google ads, TikTok ads, and the rest of the paid ecosystem — we'd love to talk.",
  },
  {
    icon: "chart",
    tag: "SEO",
    title: "SEO Specialists",
    sub: "On-page, link building, and AI-assisted blog writing",
    body:
      "Roles across SEO blog writing (AI-drafted, human-edited), on-site audits, back-link gathering, and technical SEO. Bring the rigor — we'll bring the clients.",
  },
  {
    icon: "instagram",
    tag: "Growth",
    title: "Instagram Growth",
    sub: "Manual, non-automated growth specialists",
    body:
      "We don't run bots. We're hiring growth specialists who understand the ins and outs of growing Instagram accounts through real, manual, human tactics.",
  },
  {
    icon: "support",
    tag: "Client",
    title: "Customer Success & Sales",
    sub: "Account managers and sales",
    body:
      "Love working with people? We're hiring teammates who genuinely enjoy helping customers find success on social media — both on the success and sales side.",
  },
];

const CAREERS_APPLY_URL = "https://forms.gle/YmBocGtWPHWU6L2bA";

function CareersPage({ onOpenModal, onBookDemo, onNav }) {
  return (
    <div className="page">
      {/* ── Hero ─────────────────────────────────────────────────────── */}
      <section className="hero centered-hero" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
            <span className="kicker" style={{ marginBottom: 24 }}>
              <span className="dot" /> Careers
            </span>
            <h1>
              Build a career <span className="display-em">you love.</span>
            </h1>
            <p className="hero-lede" style={{ margin: "20px auto 0" }}>
              Work in a culture that values innovation, growth, and craft — while
              making a real impact helping small businesses thrive on social media.
              We're a fully-remote team, and we're growing.
            </p>
            <div className="hero-ctas" style={{ justifyContent: "center", marginTop: 28 }}>
              <a
                className="btn btn--primary btn--lg"
                href={CAREERS_APPLY_URL}
                target="_blank"
                rel="noopener noreferrer"
              >
                Apply today <Icon name="arrow-right" size={16} />
              </a>
              <a
                className="btn btn--ghost btn--lg"
                href="#open-roles"
                onClick={(e) => {
                  e.preventDefault();
                  const el = document.getElementById("open-roles");
                  if (el) {
                    const top = el.getBoundingClientRect().top + window.scrollY - 72;
                    window.scrollTo({ top, behavior: "smooth" });
                  }
                }}
              >
                See open roles
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ── Why work with us ──────────────────────────────────────────── */}
      <section className="section section--bg2">
        <div className="container">
          <div className="section-head">
            <div className="kicker">
              <span className="dot" /> Why work with us
            </div>
            <h2>
              The kind of place <span className="display-em">you'd actually recommend.</span>
            </h2>
            <p>
              No mandatory all-hands, no surprise return-to-office, no AI replacing
              your craft. Just a small team doing great work for small businesses —
              from wherever you happen to be.
            </p>
          </div>

          <div className="value-grid">
            {CAREER_BENEFITS.map((b) => (
              <div key={b.icon + b.title} className="value-card">
                <div className="value-card-icon">
                  <Icon name={b.icon} size={22} />
                </div>
                <div className="value-card-num">{b.label}</div>
                <h3>{b.title}</h3>
                <p>{b.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Open roles ────────────────────────────────────────────────── */}
      <section className="section" id="open-roles">
        <div className="container">
          <div className="section-head">
            <div className="kicker">
              <span className="dot" /> Open roles
            </div>
            <h2>
              We're hiring across <span className="display-em">five teams.</span>
            </h2>
            <p>
              As we expand, we're always looking for talented, motivated people who
              love the craft. One application form, one team to talk to — pick the
              role that fits and we'll be in touch.
            </p>
          </div>

          <div className="careers-roles">
            {CAREER_ROLES.map((r, i) => (
              <a
                key={r.title}
                className="careers-role"
                href={CAREERS_APPLY_URL}
                target="_blank"
                rel="noopener noreferrer"
              >
                <div className="careers-role-num">
                  {String(i + 1).padStart(2, "0")}
                </div>
                <div className="careers-role-icon">
                  <Icon name={r.icon} size={22} />
                </div>
                <div className="careers-role-body">
                  <div className="careers-role-tag">{r.tag}</div>
                  <h3 dangerouslySetInnerHTML={{ __html: r.title }} />
                  <div className="careers-role-sub">{r.sub}</div>
                  <p>{r.body}</p>
                </div>
                <div className="careers-role-cta">
                  <span>Apply</span>
                  <Icon name="arrow-right" size={16} />
                </div>
              </a>
            ))}
          </div>

          {/* General apply card */}
          <div className="careers-general">
            <div className="careers-general-text">
              <div className="kicker">
                <span className="dot" /> Don't see your role?
              </div>
              <h3>We're always open to hearing from great people.</h3>
              <p>
                If you think you'd make our team better and you don't see a fit
                above, send us a note anyway. The form is the same — just tell us
                what you do best.
              </p>
            </div>
            <a
              className="btn btn--primary btn--lg"
              href={CAREERS_APPLY_URL}
              target="_blank"
              rel="noopener noreferrer"
            >
              Apply today <Icon name="arrow-right" size={16} />
            </a>
          </div>
        </div>
      </section>

      <FinalCTA onOpenModal={onOpenModal} onBookDemo={onBookDemo} />
    </div>
  );
}

Object.assign(window, { CareersPage });