/* Tazeyo! — Kariyer sayfası ana uygulaması */
const { useState: useStateApp, useMemo } = React;

function Logo({ theme = "onlight", size = "nav" }) {
  return (
    <span className={`kyo kyo--${theme} kyo--${size}`} role="img" aria-label="kariyeryo">
      <span className="kyo__1">kariyer</span>
      <span className="kyo__2">yo!</span>
    </span>
  );
}

function Nav({ onJobsClick }) {
  return (
    <header className="nav">
      <div className="wrap nav__inner">
        <a href="#top" aria-label="kariyeryo ana sayfa">
          <Logo theme="onlight" size="nav" />
        </a>
        <div className="nav__right">
          <span className="nav__tag">Kariyer</span>
          <button className="btn btn--primary" onClick={onJobsClick}>Açık pozisyonlar</button>
        </div>
      </div>
    </header>
  );
}

function Hero({ data, onJobsClick }) {
  return (
    <section className="hero" id="top">
      <img className="hero__amblem" src="assets/tazeyo-amblem.svg" alt="" aria-hidden="true" />
      <div className="wrap">
        <p className="hero__eyebrow">{data.eyebrow}</p>
        <h1 className="hero__title">
          {data.title[0]} <em>{data.title[1]}</em>{data.title[2]}
        </h1>
        <p className="hero__sub">{data.sub}</p>
        <div className="hero__actions">
          <button className="btn btn--primary btn--lg" onClick={onJobsClick}>Açık pozisyonları gör<Icon name="arrow-down" size={20} /></button>
        </div>
        <div className="stats">
          {data.stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="stat__num">{s.num}</div>
              <div className="stat__label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ValuesSection({ values }) {
  return (
    <section className="section section--alt">
      <div className="wrap">
        <div className="section__head">
          <p className="section__eyebrow">Neden Tazeyo?</p>
          <h2 className="section__title">Tazeliği işine bağlı bir ekiple taşıyoruz</h2>
          <p className="section__sub">Doğallık, enerji ve tazelik sadece müşterilerimize verdiğimiz söz değil; birlikte çalışma şeklimiz.</p>
        </div>
        <div className="values">
          {values.map((v, i) => <ValueCard key={i} v={v} />)}
        </div>
      </div>
    </section>
  );
}

function JobsSection({ jobs, onOpen, anchorRef }) {
  const [filter, setFilter] = useStateApp("Tümü");
  const cities = useMemo(() => ["Tümü", ...Array.from(new Set(jobs.map((j) => j.city)))], [jobs]);
  const list = filter === "Tümü" ? jobs : jobs.filter((j) => j.city === filter);

  return (
    <section className="section" id="pozisyonlar" ref={anchorRef}>
      <div className="wrap">
        <div className="section__head">
          <p className="section__eyebrow">Açık pozisyonlar</p>
          <h2 className="section__title">Sana uygun rolü bul</h2>
          <p className="section__sub">İlana tıkla, detayları incele ve birkaç bilgiyle hemen başvur.</p>
        </div>

        <div className="filters">
          {cities.map((c) => (
            <button key={c} className="chip" aria-pressed={filter === c} onClick={() => setFilter(c)}>
              {c}{c !== "Tümü" && <span style={{ marginLeft: 6, opacity: .6 }}>({jobs.filter((j) => j.city === c).length})</span>}
            </button>
          ))}
        </div>

        {list.length ? (
          <div className="jobs">
            {list.map((job) => <JobCard key={job.id} job={job} onOpen={onOpen} />)}
          </div>
        ) : (
          <div className="jobs__empty">Bu konumda şu an açık pozisyon yok. Yakında tekrar bak!</div>
        )}
      </div>
    </section>
  );
}

function Footer({ contact }) {
  return (
    <footer className="footer">
      <img className="footer__amblem" src="assets/tazeyo-amblem-mono-white.svg" alt="" aria-hidden="true" />
      <div className="wrap footer__grid">
        <div className="footer__col" style={{ maxWidth: 340 }}>
          <div style={{ marginBottom: 18 }}><Logo theme="ondark" size="footer" /></div>
          <p className="footer__tag">Sadece en tazesi gelir. Ekibimize katıl, tazeliği birlikte kapılara taşıyalım.</p>
        </div>
        <div className="footer__col">
          <h4>İletişim</h4>
          <p>{contact.company}</p>
          <p>{contact.address}</p>
        </div>
        <div className="footer__col">
          <h4>Başvuru</h4>
          <p style={{ maxWidth: 260 }}>{contact.note}</p>
        </div>
      </div>
      <div className="wrap footer__bottom">
        © {new Date().getFullYear()} {contact.company}. Tüm hakları saklıdır.
      </div>
    </footer>
  );
}

const EMPLOYMENT_TYPE_MAP = {
  "Tam zamanlı": "FULL_TIME",
  "Yarı zamanlı": "PART_TIME",
  "Sözleşmeli": "CONTRACTOR",
  "Stajyer": "INTERN",
};

function App() {
  const data = window.CAREERS;
  const [activeJob, setActiveJob] = useStateApp(null);
  const [kvkkOpen, setKvkkOpen] = useStateApp(false);
  const jobsRef = React.useRef(null);

  // Inject JSON-LD JobPosting structured data for each open position
  React.useEffect(() => {
    const today = new Date().toISOString().split("T")[0];
    const scripts = data.jobs.map((job) => {
      const ld = {
        "@context": "https://schema.org",
        "@type": "JobPosting",
        "title": job.title,
        "description": [job.summary, "Sorumluluklar: " + job.responsibilities.join("; "), "Nitelikler: " + job.requirements.join("; ")].join(" — "),
        "datePosted": today,
        "hiringOrganization": {
          "@type": "Organization",
          "name": data.contact.company,
          "sameAs": "https://tazeyo.com",
        },
        "jobLocation": {
          "@type": "Place",
          "address": {
            "@type": "PostalAddress",
            "addressLocality": job.city,
            "addressRegion": job.city,
            "addressCountry": "TR",
          },
        },
        "employmentType": EMPLOYMENT_TYPE_MAP[job.type] || "OTHER",
        "workHours": job.type,
        "industry": "Perakende Gıda / E-ticaret",
        "occupationalCategory": job.dept,
        "applicantLocationRequirements": {
          "@type": "Country",
          "name": "Türkiye",
        },
      };
      const script = document.createElement("script");
      script.type = "application/ld+json";
      script.setAttribute("data-job-id", job.id);
      script.textContent = JSON.stringify(ld);
      document.head.appendChild(script);
      return script;
    });
    return () => scripts.forEach((s) => s.remove());
  }, []);

  const scrollToJobs = () => {
    if (jobsRef.current) window.scrollTo({ top: jobsRef.current.offsetTop - 60, behavior: "smooth" });
  };

  return (
    <>
      <Nav onJobsClick={scrollToJobs} />
      <main>
        <Hero data={data.hero} onJobsClick={scrollToJobs} />
        <ValuesSection values={data.values} />
        <JobsSection jobs={data.jobs} onOpen={setActiveJob} anchorRef={jobsRef} />
      </main>
      <Footer contact={data.contact} />

      <JobSheet job={activeJob} onClose={() => setActiveJob(null)} onShowKvkk={() => setKvkkOpen(true)} />
      <KvkkModal open={kvkkOpen} onClose={() => setKvkkOpen(false)} kvkk={data.kvkk} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);