/* ============================================================
   FLOREA GRUP — Reusable cards
   ============================================================ */

function DivisionCard({ d, i }) {
  const { L } = useL();
  return (
    <Reveal d={(i % 3) + 1} className="dcard" as="a" {...{ href: "#/divisions/" + d.id }}>
      <div className="dcard__img">
        {d.img ? <img src={d.img} alt={L(d.name)} /> : <Ph label={d.ph} />}
        <span className="dcard__no">{d.no}</span>
      </div>
      <div className="dcard__body">
        <span className="dcard__cat">{L(d.cat)}</span>
        <h3 className="h-md">{L(d.name)}</h3>
        <p className="dcard__tag">{L(d.tag)}</p>
        <span className="tlink dcard__link">{L(FG.UI.learn_more)} <Ic.arrow /></span>
      </div>
    </Reveal>
  );
}

function ProjectCard({ p, i, big }) {
  const { L } = useL();
  return (
    <Reveal d={(i % 3) + 1} className={"pcard" + (big ? " pcard--big" : "")}>
      {p.img ? <img src={p.img} alt={L(p.title)} className="pcard__img" /> : <Ph label={p.ph} className="pcard__img" />}
      <div className="pcard__overlay">
        <span className="pcard__meta">{L(p.meta)}</span>
        <h3 className="pcard__title">{L(p.title)}</h3>
      </div>
    </Reveal>
  );
}

function NewsCard({ n, i, featured }) {
  const { L } = useL();
  return (
    <Reveal d={(i % 3) + 1} className={"ncard" + (featured ? " ncard--feat" : "")}>
      {n.img ? <img src={n.img} alt={L(n.title)} className="ncard__img" /> : <Ph label={n.ph} className="ncard__img" />}
      <div className="ncard__body">
        <div className="ncard__meta">
          <span className="chip">{L(n.cat)}</span>
          <span className="muted">{L(n.date)}</span>
        </div>
        <h3 className={featured ? "h-lg" : "h-md"}>{L(n.title)}</h3>
        <p className="muted ncard__ex">{L(n.excerpt)}</p>
        <span className="tlink">{L(FG.UI.read_more)} <Ic.arrow /></span>
      </div>
    </Reveal>
  );
}

Object.assign(window, { DivisionCard, ProjectCard, NewsCard });