/* global React, STORIES */

function storyLoc(s) {
  const lang = window.SOFTERA_LANG || "fi";
  return (lang === "en" && s.en) ? Object.assign({}, s, s.en) : s;
}

function StoryHero({ s }) {
  const v = storyLoc(s);
  return (
    <section className="story-hero">
      <div className="story-hero__inner">
        <div className="story-hero__crumbs">
          <a href={window.langHref("yritys")}>{window.L("Yritys","Company")}</a>
          <i data-lucide="chevron-right"></i>
          <a href={window.langHref("yritys#tarinat")}>{window.L("Tarinat","Stories")}</a>
          <i data-lucide="chevron-right"></i>
          <span>{v.name}</span>
        </div>
        <div className="story-hero__chapter">{v.chapter}</div>
        <h1 className="story-hero__title">{v.title}</h1>
        <div className="story-hero__by">
          <div className={"sft-avatar sft-avatar--lg " + s.avatarColor}>{s.initials}</div>
          <div className="story-hero__by-text">
            <span className="story-hero__by-name">{v.name}</span>
            <span className="story-hero__by-role">{v.role}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function StoryBody({ s }) {
  const v = storyLoc(s);
  return (
    <section className="story-body">
      <div className="story-body__inner">
        <div className="story-facts">
          {v.facts.map(f => (
            <div key={f.lbl}>
              <div className="story-fact__lbl">{f.lbl}</div>
              <div className="story-fact__val">{f.val}</div>
            </div>
          ))}
        </div>
        {v.body.map((b, i) => {
          if (b.type === "lead") return <p key={i} className="story-body__lead">{b.text}</p>;
          if (b.type === "h") return <h2 key={i} className="story-body__h">{b.text}</h2>;
          if (b.type === "pull") return <blockquote key={i} className="story-pull">{`"${b.text}"`}</blockquote>;
          return <p key={i}>{b.text}</p>;
        })}
      </div>
    </section>
  );
}

function OtherStoriesCard({ s }) {
  const v = storyLoc(s);
  return (
    <a href={window.langHref("tarina-" + s.slug)} className="y-card y-card--compact" style={{ textDecoration: "none", color: "inherit" }}>
      <div className="y-card__person">
        <div className={"sft-avatar sft-avatar--md " + s.avatarColor}>{s.initials}</div>
        <div>
          <div className="y-card__name">{v.name}</div>
          <div className="y-card__role">{v.role}</div>
        </div>
      </div>
      <div className="y-card__chapter">{v.chapter}</div>
      <h3 className="y-card__h">{v.title}</h3>
      <span className="y-card__more" style={{ marginTop: 8 }}>
        {window.L("Lue koko tarina","Read the full story")} <i data-lucide="arrow-right"></i>
      </span>
    </a>
  );
}

function StoryMore({ slug }) {
  const others = Object.values(STORIES).filter(s => s.slug !== slug);
  return (
    <section className="story-more">
      <div className="story-more__inner">
        <div className="story-more__head">
          <h2 className="story-more__title">{window.L("Lue lisää tarinoita","Read more stories")}</h2>
          <a className="story-more__back" href={window.langHref("yritys#tarinat")}>
            <i data-lucide="arrow-left"></i> {window.L("Takaisin yritys-sivulle","Back to the company page")}
          </a>
        </div>
        <div className="story-more__grid">
          {others.map(s => <OtherStoriesCard key={s.slug} s={s} />)}
        </div>
      </div>
    </section>
  );
}

function StoryCTA() {
  return (
    <section className="story-cta">
      <div className="story-cta__inner">
        <div>
          <h2 className="story-cta__h">{window.L("Oletko sinä seuraava softeralainen?","Are you the next Softera person?")}</h2>
          <p className="story-cta__p">
            {window.L("Lähetä vapaamuotoinen avoin hakemus ja keskustellaan, löytyisikö Softerasta uusi työpaikka juuri sinulle.","Send a free-form open application and let's talk about whether Softera has a new job for you.")}
          </p>
        </div>
        <div className="story-cta__actions">
          <a href="mailto:rekry@softera.fi" className="story-cta__btn">
            <i data-lucide="mail"></i> {window.L("Lähetä avoin hakemus","Send an open application")}
          </a>
          <span className="story-cta__mail">rekry@softera.fi</span>
        </div>
      </div>
    </section>
  );
}

function StoryPage({ slug }) {
  const s = STORIES[slug];
  React.useEffect(() => {
    const t = setInterval(() => { if (window.lucide) { lucide.createIcons(); } }, 300);
    setTimeout(() => clearInterval(t), 3000);
  }, []);
  return (
    <div data-screen-label={"Tarina " + s.name} className="story-page">
      <div style={{ position: "relative" }}>
        <Header />
        <StoryHero s={s} />
      </div>
      <StoryBody s={s} />
      <StoryMore slug={s.slug} />
      <StoryCTA />
      <Footer />
    </div>
  );
}

window.StoryPage = StoryPage;