// CareersPage.jsx
//
// Real, current openings (Sales Executive - multiple, Marketing Executive,
// and Sales/Marketing/Development internships), from the site owner
// directly - not fabricated. Apply flow is a real in-site form
// (CareerApplicationForm.jsx, one per role, accordion-toggled open by
// "Apply Now" so only one is expanded and rendering a Turnstile widget at
// a time) posting to /api/mail-handler.php - replaces the previous
// mailto: link now that a real backend exists to receive it. The
// recipient mailbox is configured server-side only (api/.env) and never
// appears anywhere in this file or the page it renders.
//
// "Who this role is for/isn't for" reuses AboutPage's honest-disqualifier
// convention. Where we genuinely don't have an answer (remote policy,
// compensation range), the FAQ says so directly instead of inventing one -
// same anti-hallucination bar as the rest of the site, just applied to
// hiring instead of product claims.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const WORKING_HERE = [
  {
    title: "Direct access to the founding team",
    body: "No manager relaying decisions for you - you'll work with the people actually building and selling the product.",
  },
  {
    title: "You own the calendar, and the outcome",
    body: "Decisions in your area are yours to make and defend, not stuck behind a five-person approval chain.",
  },
  {
    title: "It's real, not a pitch deck",
    body: "Every module linked from this site is something you can click into and see running - not a roadmap slide you have to caveat, sell, or build around.",
  },
  {
    title: "Early means unfinished, honestly",
    body: "We have one real pilot partner and a small team. If you need an established playbook to follow, this probably isn't the stage for you.",
  },
];

const ROLE_IS_FOR = [
  "People who want to build a function - sales, marketing, or engineering - not inherit a mature one",
  "Someone comfortable communicating clearly about a technical product without dumbing it down or drowning it in jargon",
  "Someone who wants to see the actual result of their work, not just report activity upward",
];

const ROLE_NOT_FOR = [
  "If you need a defined playbook and a large team to execute it, we're not there yet",
  "If a fully remote-first culture with no in-person collaboration is a hard requirement, ask us directly - we haven't published a fixed policy here",
  "If a large, established compensation and benefits package is the deciding factor, an early-stage startup probably isn't the right fit right now",
];

const CAREERS_FAQS = [
  {
    q: "What's the interview process like?",
    a: "We keep it simple - a conversation with the founding team, not a five-round process with take-home assignments piled on top. Exact steps depend on the role.",
  },
  {
    q: "Is this role remote, hybrid, or in-office?",
    a: "We haven't published a fixed answer here - ask us directly when you apply, and we'll give you a straight answer, not a runaround.",
  },
  {
    q: "What's the compensation range?",
    a: "We don't publish a number on this page since it's scoped to the candidate and experience - ask directly and we'll tell you plainly, not make you guess.",
  },
  {
    q: "I don't check every box in the requirements - should I still apply?",
    a: "The requirements listed are what we think matters, not a rigid checklist. If you can make the case for how your experience translates, we'll read it.",
  },
  {
    q: "How soon will I hear back after applying?",
    a: "We're a small team reading applications ourselves, not routing them through an ATS - we won't promise a specific number of days, but you won't be met with silence either.",
  },
  {
    q: "Are the internships paid, and how long do they run?",
    a: "Both are scoped per intern and role rather than fixed on this page - ask directly when you apply and we'll tell you straight, not leave you guessing.",
  },
];

const OPEN_ROLES = [
  {
    title: "Sales Executive",
    type: "Full-time · Multiple Openings",
    summary:
      "Bring SkelBiz to the SME manufacturers and processors who need it - owning the conversation from first outreach through onboarding, working directly with the founding team.",
    responsibilities: [
      "Reach out to SME manufacturers and processors and get them on a scoped demo call",
      "Run demo calls once ramped up - walking prospects through the modules that matter to their operation",
      "Follow through to close - moving a real conversation to a signed onboarding, not a stalled pipeline",
      "Work directly with the product and marketing team on what prospects are actually asking for",
      "Keep an honest, up-to-date pipeline - not vanity activity numbers",
      "Sell from real, published pricing (₹1,499-₹6,998/month, India) and a live ROI calculator - not a black-box number you have to defend without backup",
    ],
    requirements: [
      "2.5+ years in B2B sales, ideally for a SaaS or technical/industrial product - or a strong fresher, we're genuinely open to both",
      "Comfortable with outbound - cold calls, cold emails, and following up without being pushy",
      "Can hold a conversation about a technical product without reading from a script",
      "Self-directed - we're small, so you'll own your own pipeline",
      "Bonus: experience selling to manufacturing, logistics, or other operationally-focused SMEs",
    ],
  },
  {
    title: "Marketing Executive",
    type: "Full-time",
    summary:
      "Own marketing execution as one of our first dedicated marketing hires - working directly with the founding team, not through five layers of approval.",
    responsibilities: [
      "Plan and execute content marketing - product content, email, case studies as we earn them",
      "Manage our social presence and grow organic reach among SME manufacturers and processors",
      "Run demand generation campaigns that turn into real demo requests, not just impressions",
      "Build sales enablement material alongside the product team",
      "Track what's actually working and double down on it - not vanity metrics",
      "Sharpen positioning tools prospects actually use - our Tally/Zoho/Odoo comparison pages and manual-tracking ROI calculator - based on what lands and what doesn't",
    ],
    requirements: [
      "2+ years in B2B marketing, ideally for a SaaS or technical product",
      "Comfortable writing - you'll be the voice of a product built for people who don't have time for marketing fluff",
      "Self-directed - we're small, so you'll own your own calendar",
      "Bonus: experience marketing to manufacturing, logistics, or other operationally-focused industries",
    ],
  },
  {
    title: "Sales Intern",
    type: "Internship",
    summary: "Learn B2B sales on a real product, working directly alongside the sales and founding team.",
    responsibilities: [
      "Research and qualify leads before they reach a sales conversation",
      "Assist with outreach - drafting, sending, and tracking follow-ups",
      "Sit in on real demo calls and see how they're actually run",
      "Help keep pipeline notes accurate and current",
    ],
    requirements: [
      "Currently studying or recently graduated - no prior sales experience required",
      "Comfortable writing and speaking clearly",
      "Curious enough to ask why a prospect said no, not just log it",
      "Available for a consistent time commitment we'll agree on upfront",
    ],
  },
  {
    title: "Marketing Intern",
    type: "Internship",
    summary:
      "Get real marketing execution experience - content, social, and campaigns for a live product, not a hypothetical brand.",
    responsibilities: [
      "Help plan and write content - social posts, product content, email",
      "Support demand-gen campaigns and help track what's actually working",
      "Assist with sales enablement material alongside the marketing and product team",
      "Research what SME manufacturers and processors actually respond to",
    ],
    requirements: [
      "Currently studying or recently graduated - no prior marketing experience required",
      "Comfortable writing, even if it's not polished yet",
      "Interested in B2B/technical marketing, not just consumer brand content",
      "Available for a consistent time commitment we'll agree on upfront",
    ],
  },
  {
    title: "Development Intern",
    type: "Internship",
    summary:
      "Work on real product code - the same NestJS backend and React frontend running in production, not a sandboxed toy project.",
    responsibilities: [
      "Ship real, scoped features or fixes on the backend (NestJS/TypeORM/PostgreSQL) or frontend (React/TypeScript)",
      "Work directly with the team building the product, not a separate intern track",
      "Learn the codebase by actually reading and modifying it, with real code review",
    ],
    requirements: [
      "Currently studying or recently graduated in CS or a related field",
      "Comfortable with JavaScript/TypeScript fundamentals - React or Node experience is a plus, not a requirement",
      "Curious enough to ask questions instead of guessing",
      "Available for a consistent time commitment we'll agree on upfront",
    ],
  },
];

function CareersPage() {
  useDocumentMeta(
    "Careers - SkelBiz Manufacturing Operations Platform",
    "SkelBiz is hiring Sales Executives and a Marketing Executive to help us reach SME manufacturers and processors, plus Sales, Marketing, and Development interns. Apply directly on this page."
  );

  const [openRole, setOpenRole] = React.useState(null);

  return (
    <>
      <section className="bg-brand-navy px-6 py-20 text-center">
        <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-emerald-300">
          Careers
        </span>
        <h1 className="mx-auto mt-6 max-w-2xl text-4xl font-extrabold text-white sm:text-5xl">
          Help us reach the businesses who need this.
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-blue-100">
          We're small and early - which means real ownership, not a job title on an org chart nobody reads.
        </p>
      </section>

      <section className="bg-surface py-20">
        <div className="mx-auto max-w-6xl px-6">
          <h2 className="text-center text-2xl font-bold text-brand-navy">What working here actually looks like</h2>
          <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2">
            {WORKING_HERE.map((w) => (
              <div key={w.title} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                <h3 className="text-base font-semibold text-brand-navy">{w.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{w.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-4xl px-6">
          <div className="space-y-10">
          {OPEN_ROLES.map((role) => (
            <div key={role.title} className="rounded-card border border-slate-200 bg-surface-card p-8 shadow-card sm:p-10">
              <div className="flex flex-wrap items-center gap-3">
                <h2 className="text-2xl font-bold text-brand-navy">{role.title}</h2>
                <span className="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
                  {role.type}
                </span>
              </div>
              <p className="mt-4 text-base leading-relaxed text-slate-600">{role.summary}</p>

              <h3 className="mt-8 text-sm font-semibold uppercase tracking-wide text-brand-steel">What you'll do</h3>
              <ul className="mt-4 space-y-3">
                {role.responsibilities.map((item) => (
                  <li key={item} className="flex items-start gap-2 text-sm leading-relaxed text-slate-600">
                    <svg className="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M20 6L9 17l-5-5" />
                    </svg>
                    {item}
                  </li>
                ))}
              </ul>

              <h3 className="mt-8 text-sm font-semibold uppercase tracking-wide text-brand-steel">What we're looking for</h3>
              <ul className="mt-4 space-y-3">
                {role.requirements.map((item) => (
                  <li key={item} className="flex items-start gap-2 text-sm leading-relaxed text-slate-600">
                    <svg className="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M20 6L9 17l-5-5" />
                    </svg>
                    {item}
                  </li>
                ))}
              </ul>

              {openRole === role.title ? (
                <CareerApplicationForm role={role.title} onDone={() => setOpenRole(null)} />
              ) : (
                <button
                  type="button"
                  onClick={() => setOpenRole(role.title)}
                  className="mt-8 rounded-card bg-emerald-600 px-6 py-3 text-sm font-semibold text-white shadow-card transition hover:bg-emerald-700"
                >
                  Apply Now
                </button>
              )}
            </div>
          ))}
          </div>
        </div>
      </section>

      <section className="bg-surface py-20">
        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-6 lg:grid-cols-2">
          <div>
            <h2 className="text-xl font-bold text-brand-navy">Who these roles are for</h2>
            <ul className="mt-4 space-y-3">
              {ROLE_IS_FOR.map((w) => (
                <li key={w} className="flex items-start gap-2 text-sm leading-relaxed text-slate-600">
                  <svg className="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M20 6L9 17l-5-5" />
                  </svg>
                  {w}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h2 className="text-xl font-bold text-brand-navy">Who these roles aren't for</h2>
            <ul className="mt-4 space-y-3">
              {ROLE_NOT_FOR.map((w) => (
                <li key={w} className="flex items-start gap-2 text-sm leading-relaxed text-slate-600">
                  <svg className="mt-0.5 h-4 w-4 shrink-0 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                    <path strokeLinecap="round" d="M6 6l12 12M18 6L6 18" />
                  </svg>
                  {w}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-3xl px-6">
          <h2 className="text-center text-2xl font-bold text-brand-navy">Frequently asked</h2>
          <div className="mt-10 space-y-5">
            {CAREERS_FAQS.map((item) => (
              <div key={item.q} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                <h3 className="text-base font-semibold text-brand-navy">{item.q}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{item.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-surface px-6 py-20 text-center">
        <h2 className="text-xl font-bold text-brand-navy">Don't see a fit?</h2>
        <p className="mx-auto mt-3 max-w-2xl text-sm leading-relaxed text-slate-600">
          We're not going to invent openings that don't exist. If something changes, it'll show up here first
          - or reach out through our Contact page and tell us what you'd want to work on.
        </p>
        <a
          href="/contact/"
          className="mt-6 inline-block rounded-card border border-slate-200 bg-white px-6 py-3 text-sm font-semibold text-brand-navy shadow-card transition hover:border-brand-navy/30"
        >
          Contact Us
        </a>
      </section>
    </>
  );
}
