/* Trepa't — Actividades: índice + ficha de detalle (con PDF descargable) */
const { Button: AButton } = window.TrepaTDesignSystem_f8c9ea;

const ACT_TONE = {
  coral: { bg: "var(--coral-400)", fg: "var(--white)", hero: "ink" },
  "teal-light": { bg: "var(--teal-light)", fg: "var(--ink)", hero: "teallight" },
  "teal-mid": { bg: "var(--teal-mid)", fg: "var(--white)", hero: "petrol" },
  ink: { bg: "var(--ink)", fg: "var(--cream)", hero: "ink" },
  cream: { bg: "var(--cream)", fg: "var(--ink)", hero: "teallight" },
};

const actHref = (a) => (a.page ? a.page : "actividad/" + a.slug);

function FichaLinks({ slug, lang, t, compact }) {
  const others = ["ES", "VAL", "EN"].filter((l) => l !== lang);
  return (
    <div className={"ficha-links" + (compact ? " ficha-links--compact" : "")}>
      <a className="ficha-btn" href={window.TPT_FICHA(slug, lang)} target="_blank" rel="noopener">
        <i data-lucide="file-down"></i>
        <span>{t.pdf}</span>
      </a>
      <div className="ficha-alt">
        <span>{t.pdfAlt}</span>
        {others.map((l) => (
          <a key={l} href={window.TPT_FICHA(slug, l)} target="_blank" rel="noopener">{l}</a>
        ))}
      </div>
    </div>
  );
}

/* Tarjeta de actividad — se reutiliza en el índice, en Inicio y en Empezar */
function ActCard({ a, lang, t, go, mini }) {
  const c = a[lang], tone = ACT_TONE[a.tone];
  return (
    <article className={"actc" + (mini ? " actc--mini" : "")}>
      <div className="actc__head">
        <span className="actc__ic" style={{ background: tone.bg, color: tone.fg }}><i data-lucide={a.icon}></i></span>
        <span className="actc__tag">{c.tag}</span>
      </div>
      <h3 className="actc__title">{c.title}</h3>
      {!mini && <p className="actc__lead">{c.lead}</p>}
      {!mini && (
        <div className="actc__chips">
          {c.chips.map((ch) => <span key={ch} className="actc__chip">{ch}</span>)}
        </div>
      )}
      <div className="actc__foot">
        <div className="actc__price">
          <small>{t.from}</small>
          <b>{a.from}</b>
          <span>{a.fromUnit[lang]}</span>
        </div>
        <div className="actc__actions">
          <AButton variant={mini ? "outline" : "primary"} size="sm" iconRight={<i data-lucide="arrow-right"></i>}
            onClick={() => go(actHref(a))}>{t.see}</AButton>
          {!mini && (
            <a className="actc__pdf" href={window.TPT_FICHA(a.slug, lang)} target="_blank" rel="noopener"
               title={t.pdf} aria-label={t.pdf + " · " + c.title}>
              <i data-lucide="file-text"></i>
            </a>
          )}
        </div>
      </div>
    </article>
  );
}

/* Selección de actividades para otras páginas */
function ActPicks({ slugs, lang, go, mini, cols }) {
  const t = window.TPT_I18N[lang].act;
  return (
    <div className={"act-grid" + (cols === 3 ? " act-grid--3" : "")}>
      {slugs.map((s) => <ActCard key={s} a={window.TPT_ACT_BY_SLUG[s]} lang={lang} t={t} go={go} mini={mini} />)}
    </div>
  );
}

/* Tarjeta compacta de tarifas + ficha, para reutilizar en otras páginas */
function FichaCard({ slug, lang }) {
  const t = window.TPT_I18N[lang].act, a = window.TPT_ACT_BY_SLUG[slug], c = a[lang];
  return (
    <div className="actd__card actd__card--inline">
      <span className="actd__card-kicker">{t.prices}</span>
      <table className="actd__table">
        <tbody>{c.rows.map((r) => <tr key={r[0]}><th>{r[0]}</th><td>{r[1]}</td></tr>)}</tbody>
      </table>
      {c.priceNote && <p className="actd__pricenote">{c.priceNote}</p>}
      <FichaLinks slug={slug} lang={lang} t={t} compact />
    </div>
  );
}

/* ============================== ÍNDICE ============================== */
function Actividades({ lang, go }) {
  const t = window.TPT_I18N[lang].act;
  const groups = window.TPT_ACT_GROUPS[lang];
  window.useLucide("actividades" + lang);

  return (
    <main className="view-enter">
      <window.Hero variant="teal" ghost="navy" seal crumb={t.crumb}
        tagline={t.hero.tagline} title={t.hero.title} lead={t.hero.lead} />
      <window.Band tone="ink" />

      {groups.map((g, gi) => (
        <section key={g.id} className={"sec" + (gi === 1 ? " sec--cream" : gi === 2 ? " sec--sand" : "")}>
          <div className="container">
            <window.SecHead eyebrow={g.eyebrow} title={g.title} sub={g.d} />
            <div className="act-grid">
              {window.TPT_ACT.filter((a) => a.group === g.id).map((a) => (
                <ActCard key={a.slug} a={a} lang={lang} t={t} go={go} />
              ))}
            </div>
          </div>
        </section>
      ))}

      <window.Band tone="coral" />
      <window.CTABanner title={t.cta.title} p={t.cta.p}>
        <AButton variant="secondary" size="lg" iconLeft={<i data-lucide="mail"></i>} onClick={() => go("contacto")}>{t.cta.b1}</AButton>
      </window.CTABanner>
    </main>
  );
}

/* ============================== FICHA DE DETALLE ============================== */
function Actividad({ lang, go, slug }) {
  const t = window.TPT_I18N[lang].act;
  const a = window.TPT_ACT_BY_SLUG[slug];
  window.useLucide("actividad" + slug + lang);

  React.useEffect(() => { if (!a) go("actividades"); }, [a]);
  if (!a) return null;

  const c = a[lang];
  const tone = ACT_TONE[a.tone];
  const related = window.TPT_ACT.filter((x) => x.group === a.group && x.slug !== a.slug).slice(0, 3);

  return (
    <main className="view-enter">
      <window.Hero variant={tone.hero} ghost={a.tone === "ink" || a.tone === "coral" ? "coral" : "cream"}
        crumb={t.crumb} tagline={c.tag} title={c.title} lead={c.lead}>
        <AButton variant="primary" size="lg" iconRight={<i data-lucide="file-down"></i>}
          onClick={() => window.open(window.TPT_FICHA(a.slug, lang), "_blank")}>{t.pdf}</AButton>
        <AButton variant="cream" size="lg" iconLeft={<i data-lucide="arrow-left"></i>} onClick={() => go("actividades")}>{t.back}</AButton>
      </window.Hero>
      <window.Band tone="coral" />

      <section className="sec">
        <div className="container">
          <div className="actd">
            {/* ---- contenido ---- */}
            <div className="actd__main">
              <div className="actd__chips">
                {c.chips.map((ch) => <span key={ch} className="actc__chip">{ch}</span>)}
              </div>

              {c.p2 && <p className="actd__lead">{c.p2}</p>}

              {c.list && (
                <div className="actd__block">
                  <h2>{c.listTitle}</h2>
                  <ul className="checklist">
                    {c.list.map((l) => <li key={l}><i data-lucide="check"></i>{l}</li>)}
                  </ul>
                </div>
              )}

              <div className="actd__block">
                <h2>{t.schedule}</h2>
                <p>{c.horario}</p>
              </div>

              {c.incl && (
                <div className="actd__block">
                  <h2>{t.includes}</h2>
                  <ul className="checklist">
                    {c.incl.map((l) => <li key={l}><i data-lucide="check"></i>{l}</li>)}
                  </ul>
                </div>
              )}

              {c.important && (
                <div className="actd__block">
                  <h2>{t.important}</h2>
                  <ul className="actd__notes">
                    {c.important.map((l) => <li key={l}><i data-lucide="info"></i><span>{l}</span></li>)}
                  </ul>
                </div>
              )}

              <div className="actd__block">
                <h2>{t.signup}</h2>
                <p>{c.insc}</p>
                <div className="actd__ctas">
                  <AButton variant="primary" iconLeft={<i data-lucide="mail"></i>} onClick={() => go("contacto")}>{t.contact}</AButton>
                  {a.page && <AButton variant="outline" iconRight={<i data-lucide="arrow-up-right"></i>} onClick={() => go(a.page)}>{t.moreOn}</AButton>}
                </div>
              </div>
            </div>

            {/* ---- lateral: tarifas + ficha ---- */}
            <aside className="actd__side">
              <div className="actd__card">
                <span className="actd__card-kicker">{t.prices}</span>
                <div className="actd__from">
                  <small>{t.from}</small>
                  <b>{a.from}</b>
                  <span>{a.fromUnit[lang]}</span>
                </div>
                <table className="actd__table">
                  <tbody>
                    {c.rows.map((r) => <tr key={r[0]}><th>{r[0]}</th><td>{r[1]}</td></tr>)}
                  </tbody>
                </table>
                {c.priceNote && <p className="actd__pricenote">{c.priceNote}</p>}
              </div>
              <div className="actd__card actd__card--pdf">
                <h3>{t.fichaTitle}</h3>
                <p>{t.fichaP}</p>
                <FichaLinks slug={a.slug} lang={lang} t={t} />
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* ---- otras actividades ---- */}
      <section className="sec sec--cream">
        <div className="container">
          <window.SecHead eyebrow={t.relatedEyebrow} title={t.related} />
          <div className="act-grid act-grid--3">
            {related.map((r) => <ActCard key={r.slug} a={r} lang={lang} t={t} go={go} mini />)}
          </div>
        </div>
      </section>
      <window.Band tone="ink" />
    </main>
  );
}

Object.assign(window, { Actividades, Actividad, ActCard, ActPicks, FichaCard });