/* global React */
// Shared subpage chrome: PageHero, StatStrip, AnchorStrip, QuoteCallout, FinalCTA

function PageHero({ kicker, title, sub, ctas = [], variant = "default", crumbs }) {
  return (
    <section className={"page-hero page-hero--" + variant} data-screen-label="Hero">
      <div className="page-hero__inner">
        {crumbs && crumbs.length > 0 && (
          <nav className="page-hero__crumbs" aria-label="breadcrumb">
            {crumbs.map((c, i) => (
              <React.Fragment key={i}>
                {i > 0 && <i data-lucide="chevron-right" aria-hidden="true"></i>}
                {c.href ? <a href={window.langHref ? window.langHref(c.href) : c.href}>{c.label}</a> : <span aria-current="page">{c.label}</span>}
              </React.Fragment>
            ))}
          </nav>
        )}
        <div className="page-hero__eye">{kicker}</div>
        <h1 className="page-hero__h" dangerouslySetInnerHTML={{ __html: title }}></h1>
        <p className="page-hero__sub">{sub}</p>
        <div className="page-hero__ctas">
          {ctas.map((c, i) => (
            <a key={i} href={c.href ? (window.langHref ? window.langHref(c.href) : c.href) : "#"} className={"btn " + (i === 0 ? "btn--accent" : "btn--ghost-light")}>
              {c.label} {i === 0 ? null : <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i>}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatStrip({ stats }) {
  return (
    <section className="stat-strip" data-screen-label="Stats">
      <div className="stat-strip__inner">
        {stats.map((s, i) => (
          <div key={i} className="stat-strip__cell">
            <div className="stat-strip__num" dangerouslySetInnerHTML={{ __html: s.num }}></div>
            <div className="stat-strip__lbl">{s.lbl}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function AnchorStrip({ items }) {
  const lang = (typeof window !== "undefined" && window.SOFTERA_LANG) || "fi";
  return (
    <div className="anchor-strip" data-screen-label="Ankkurit">
      <div className="anchor-strip__inner">
        <span className="anchor-strip__lbl">{lang === "fi" ? "Sisältö" : "Contents"}</span>
        {items.map((it) => (
          <a key={it.href} href={it.href}>{it.label}</a>
        ))}
      </div>
    </div>
  );
}

function QuoteCallout({ quote, name, role, avatar }) {
  return (
    <div className="quote-callout">
      <div className="quote-callout__inner">
        <p className="quote-callout__q">"{quote}"</p>
        <div className="quote-callout__by">
          <div className="quote-callout__av">{avatar}</div>
          <div>
            <div className="quote-callout__name">{name}</div>
            <div className="quote-callout__role">{role}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PageHero = PageHero;
window.StatStrip = StatStrip;
window.AnchorStrip = AnchorStrip;
window.QuoteCallout = QuoteCallout;