/* global React */
function Packages() {
  const { t } = window.useT();

  const cards = [
    { key: "1", cls: "is-feature", price: "ƒ 583", badge: t("common.most_booked") },
    { key: "2", cls: "is-secondary", price: "ƒ 795", badge: null },
    { key: "3", cls: "is-tertiary", price: "ƒ 295", badge: null },
  ];

  return (
    <section className="vsc-packages" id="paquetes" data-screen-label="Packages">
      <div className="vsc-wrap">
        <div className="vsc-packages-head">
          <div>
            <div className="vsc-eyebrow">{t("pkg.eyebrow")}</div>
            <h2>
              {t("pkg.h2.a")}<br/>
              <em>{t("pkg.h2.b")}</em>
            </h2>
          </div>
          <p style={{maxWidth:'34ch', margin:0, color:'var(--vsc-stone-500)', fontSize:15}}>
            {t("pkg.lead")}
          </p>
        </div>

        <div className="vsc-pkg-grid">
          {cards.map((c) => {
            const title = t(`pkg.${c.key}.title`);
            return (
              <article key={c.key} className={"vsc-pkg-card " + c.cls}>
                <div className="vsc-pkg-card-top">
                  <div className="vsc-eyebrow">{t(`pkg.${c.key}.eyebrow`)}</div>
                  {c.badge && <span className="vsc-pkg-badge">{c.badge}</span>}
                </div>
                <h3>{title.split("\n").map((ln, i) => (
                  <React.Fragment key={i}>{i > 0 && <br/>}{ln}</React.Fragment>
                ))}</h3>
                <p className="desc">{t(`pkg.${c.key}.desc`)}</p>
                <ul className="vsc-pkg-includes">
                  <li>{t(`pkg.${c.key}.i1`)}</li>
                  <li>{t(`pkg.${c.key}.i2`)}</li>
                  <li>{t(`pkg.${c.key}.i3`)}</li>
                </ul>
                <div className="vsc-pkg-foot">
                  <div className="vsc-pkg-price">{c.price}</div>
                  <div className="vsc-pkg-meta">{t(`pkg.${c.key}.meta`)}</div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.Packages = Packages;