/* Trepa't — Página Quiénes somos */
const { Button: NButton } = window.TrepaTDesignSystem_f8c9ea;

function Nosotros({ lang, go }) {
  const t = window.TPT_I18N[lang].nosotros;
  window.useLucide("nosotros" + lang);
  return (
    <main className="view-enter">
      <window.Hero variant="teal" ghost="cream" seal crumb={t.hero.crumb}
        tagline={t.hero.tagline} title={t.hero.title} lead={t.hero.lead} />
      <window.Band tone="coral" />

      {/* Historia */}
      <section className="sec">
        <div className="container">
          <div className="split">
            <div className="split__media">
              <image-slot id="trepat-nosotros-story" shape="rounded" radius="16" placeholder={t.story.slot}></image-slot>
            </div>
            <div className="split__copy">
              <span className="eyebrow">{t.story.eyebrow}</span>
              <h2>{t.story.title}</h2>
              <p>{t.story.p1}</p>
              <p style={{ fontSize: 13, color: "var(--danger)", fontWeight: 700 }}>{t.story.p2}</p>
            </div>
          </div>
        </div>
      </section>

      {/* El nombre y la cabra */}
      <section className="sec--cream" style={{ borderBlock: "2px solid var(--ink)", padding: 0 }}>
        <div className="name-cabra">
          <div className="name-cabra__txt">
            <h2>{t.name.title}</h2>
            <p>{t.name.p}</p>
          </div>
          <div className="name-cabra__art">
            <img src={window.TPT_ASSET + "goat-color.png"} alt="" />
          </div>
        </div>
      </section>

      {/* Valores */}
      <section className="sec">
        <div className="container">
          <window.SecHead center eyebrow={t.values.eyebrow} title={t.values.title} />
          <div className="values">
            {t.values.items.map((v) => (
              <div key={v.t} className="value">
                <span className="value__ic"><i data-lucide={v.icon}></i></span>
                <h4>{v.t}</h4>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Equipo */}
      <section className="sec sec--sand">
        <div className="container">
          <window.SecHead center eyebrow={t.team.eyebrow} title={t.team.title} sub={t.team.note} />
          <div className="team">
            {t.team.members.map((m, i) => (
              <div key={i} className="team__card">
                <div className="team__photo">
                  <image-slot id={"trepat-team-" + i} shape="rounded" radius="16" placeholder={m.role}></image-slot>
                </div>
                <h4>{m.name}</h4>
                <p>{m.role}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <window.Band tone="ink" />

      <window.CTABanner title={t.cta.title} p={t.cta.p}>
        <NButton variant="secondary" size="lg" iconLeft={<i data-lucide="map-pin"></i>} onClick={() => go("nosotros")}>{t.cta.cta1}</NButton>
        <NButton variant="outline" size="lg" onClick={() => go("empezar")}>{t.cta.cta2}</NButton>
      </window.CTABanner>
    </main>
  );
}
window.Nosotros = Nosotros;