function HomePage() {
  const toAyuda = (e) => { e.preventDefault(); const el = document.getElementById("ayudamos"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: "smooth" }); };
  return <>
    <section className="navy hero">
      <Rules side="l" /><Rules side="r" />
      <div className="wrap hero-c">
        <img className="hlogo rv" src={A + "/logo/logo-centered-white-bronze.png"} alt="Lex Securities Advisory" />
        <div className="rv d2">
          <p className="label ctr"><i className="ln"></i><span>Asesoría legal en mercado de valores</span><i className="ln"></i></p>
          <h1 className="h1 h1-long">Estructuramos tu capital con criterio legal y <em>mirada de inversionista.</em></h1>
          <p className="lead">Para empresas que buscan financiamiento e inversionistas que quieren entender lo que firman, explicado de forma sencilla.</p>
          <div className="btns">
            <Button variant="accent" size="lg" onClick={toAgenda}>Agenda una llamada gratuita</Button>
            <Button variant="outline-inverse" size="lg" iconStart={<Icon name="message-circle" size={18} />} onClick={() => openWA("general")}>Escríbenos por WhatsApp</Button>
          </div>
          <p className="fine"><FreeCall className="" /></p>
          <a className="down" href="#ayudamos" onClick={toAyuda}>Ver servicios <Icon name="arrow-down" size={15} /></a>
        </div>
      </div>
    </section>

    <section className="ivory sec hs" id="ayudamos">
      <div className="wrap">
        <h2 className="h2 rv">¿A quién ayudamos?</h2>
        <div className="aud">{AUDIENCES.map((a) => <article className="acard rv" key={a.id}>
          <h3 className="h3">{a.t}</h3>
          <p>{a.p}</p>
          <div className="fory"><p className="k">¿Es tu caso?</p>
            <ul className="alist">{a.perfiles.map((s) => <li key={s}><Icon name="check" size={18} strokeWidth={1.5} color="var(--lex-bronze)" /><div>{s}</div></li>)}</ul>
          </div>
          <div className="foot">
            <Button variant="outline-inverse" iconEnd={<Icon name="arrow-right" size={16} />} onClick={() => go("/" + a.id)}>{a.id === "inversionistas" ? "Ir a Inversionistas" : "Ir a Empresas"}</Button>
            <a className="tlink" href={wa(a.id)} target="_blank" rel="noopener"><Icon name="message-circle" size={15} />WhatsApp</a>
          </div>
        </article>)}</div>
      </div>
    </section>

    <AcadStrip />

    <section className="white sec hs">
      <div className="wrap">
        <Label>Nuestros pilares</Label>
        <h2 className="h2 rv">Visión · Estrategia · Confianza</h2>
        <div className="pillars">{PILLARS.map(([t, ic, d], i) => <article className="pillar rv" key={t}>
          <div className="top"><span className="pn">{"0" + (i + 1)}</span><Icon name={ic} size={44} strokeWidth={1.1} color="var(--lex-bronze)" /></div>
          <h3>{t}</h3><p>{d}</p>
        </article>)}</div>
      </div>
    </section>

    <AreasSection className="ivory sec hs" />

    <RutaSummary />

    <section className="ivory sec hs">
      <div className="wrap">
        <h2 className="h2 rv">Cómo trabajamos</h2>
        <Steps />
      </div>
    </section>

    <section className="white sec hs">
      <div className="wrap">
        <Label>Equipo</Label>
        <TeamCard compact />
      </div>
    </section>

    <section className="ivory sec hs">
      <div className="wrap">
        <div className="pub-head2 pub-home">
          <div><Label>Mercado de valores, explicado</Label><h2 className="h2 rv">Artículos y guías</h2><a className="tlink" style={{ marginTop: 28 }} href="#/publicaciones">Ver todas <Icon name="arrow-right" size={14} /></a></div>
          <img className="mascot sm rv d2" src={A + "/character/14-seated-explaining.png"} alt="La mascota de Lex, un toro con traje, sentado y explicando" />
        </div>
        <Soon text="Estamos preparando nuestros primeros artículos."><div className="arts">{ARTICLES.slice(0, 3).map((a) => <ArticleCard key={a.t} a={a} />)}</div></Soon>
      </div>
    </section>

    <Testimonials kind="clientes" />

    <section className="white sec hs">
      <div className="wrap faq-grid">
        <div>
          <Label>Preguntas frecuentes</Label>
          <h2 className="h2 rv">Lo que suelen preguntarnos.</h2>
          <p className="lead">¿Tienes otra duda? Escríbenos y te respondemos.</p>
          <div className="btns" style={{ marginTop: 28 }}><a className="tlink" href={WA} target="_blank" rel="noopener"><Icon name="message-circle" size={15} />Escríbenos por WhatsApp</a></div>
        </div>
        <FAQ />
      </div>
    </section>

    <ClosingBand />
    <WebinarPopup />
  </>;
}
Object.assign(window, { HomePage });