// Nosotros — José. Diseñador. Buenos Aires.
function Nosotros() {
  const [lang] = window.useLang();
  const isEn = lang === "en";

  return (
    <section className="nos" id="nosotros">
      <div className="container nos-grid">
        <Reveal as="aside" className="nos-photo rv-up">
          <div className="nos-photo-frame">
            <img src="../assets/FotodePerfil.jpeg" alt="José Manuel Diaz Herrera" className="nos-photo-img"/>
          </div>
        </Reveal>
        <div className="nos-copy">
          <div className="nos-titles">
            <Reveal className="rv-up" delay={0}>
              <span className="eyebrow">{isEn ? "ABOUT" : "NOSOTROS"}</span>
            </Reveal>
            <Reveal as="h2" className="section-title rv-up" delay={100}>
              {isEn ? <>José.<br/>Founder.<br/>Buenos Aires.</> : <>José.<br/>Founder.<br/>Buenos Aires.</>}
            </Reveal>
          </div>
          <div className="nos-body">
            <Reveal as="p" className="rv-up" delay={200}>
              {isEn ? (
                <>After years doing design and development across very different contexts, I founded <em className="nos-celtis">CELTIS</em>: a studio that designs the systems companies actually use to run, every day.</>
              ) : (
                <>Después de años haciendo diseño y desarrollo para distintos contextos, fundé <em className="nos-celtis">CELTIS</em>: un estudio para diseñar sistemas que las empresas usan todos los días para funcionar.</>
              )}
            </Reveal>
            <Reveal as="p" className="rv-up" delay={280}>
              {isEn
                ? "I take one project at a time. I start by understanding how you work. Then I design the system your operation is asking for."
                : "Trabajo de a un proyecto por vez. Empiezo por entender cómo trabajás. Después diseño el sistema que tu operación pide."}
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Nosotros = Nosotros;