const { Link: Link_cd, useParams: useParams_cd, Navigate: Navigate_cd } = ReactRouterDOM;

function CareerDetail() {
  const { slug } = useParams_cd();
  const job = window.getJob(slug);

  useSEO({
    title: job ? `${job.title} | Careers at Cyrion AI` : 'Role not found | Cyrion AI',
    description: job ? job.summary : 'This role could not be found.',
    path: `/careers/${slug}`,
  });

  if (!job) return <Navigate_cd to="/careers" replace />;

  const jsonLd = {
    '@context': 'https://schema.org', '@type': 'JobPosting', title: job.title, description: job.summary,
    datePosted: job.posted, employmentType: job.type === 'Contract' ? 'CONTRACTOR' : 'FULL_TIME',
    hiringOrganization: { '@type': 'Organization', name: 'Cyrion AI', sameAs: 'https://cyrion.ai/' },
    jobLocation: { '@type': 'Place', address: job.location },
  };

  return (
    <div data-screen-label={`career-${job.slug}`}>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <section className="page-hero">
        <div className="page">
          <div className="breadcrumb" style={{ marginBottom: 20 }}><Link_cd to="/">Home</Link_cd><span>/</span><Link_cd to="/careers">Careers</Link_cd><span>/</span><span className="ink">{job.title}</span></div>
          <div className="row" style={{ gap: 10, marginBottom: 18, flexWrap: 'wrap' }}><span className="tag-chip">{job.team}</span><span className="tag-chip">{job.location}</span><span className="tag-chip">{job.type}</span></div>
          <h1 className="h1" style={{ maxWidth: 820 }}>{job.title}</h1>
          <p className="body-lg" style={{ maxWidth: 640, marginTop: 22 }}>{job.summary}</p>
          <div className="row" style={{ gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <Link_cd className="btn btn-primary" to={`/careers/${job.slug}/apply`}>Apply for this role →</Link_cd>
            <Link_cd className="btn btn-ghost" to="/careers">← All open roles</Link_cd>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingBottom: 0 }}>
        <div className="page">
          <div className="prose">
            <h2>About the role</h2>
            <p>{job.about}</p>
            <h2>What you'll do</h2>
            <ul>{job.responsibilities.map((r) => <li key={r}>{r}</li>)}</ul>
            <h2>What we're looking for</h2>
            <ul>{job.requirements.map((r) => <li key={r}>{r}</li>)}</ul>
            {job.niceToHave && job.niceToHave.length > 0 && (<><h2>Nice to have</h2><ul>{job.niceToHave.map((r) => <li key={r}>{r}</li>)}</ul></>)}
            <h2>Compensation &amp; benefits</h2>
            <p>{job.compensation}</p>
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)', background: 'var(--bg-deep)' }}>
        <div className="page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20 }}>
          <div><div className="h3">Ready to apply?</div><p className="body" style={{ marginTop: 8 }}>Tell us about yourself — takes about five minutes.</p></div>
          <Link_cd className="btn btn-primary" to={`/careers/${job.slug}/apply`}>Apply for this role →</Link_cd>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CareerDetail });