// About page
function About({ lang }) {
  const es = lang === "es";
  return (
    <div className="page" data-screen-label="About">
      <div className="container">
        <Link to="home" className="back-link">← {es ? "Volver" : "Back"}</Link>

        <section className="about-hero">
          <div>
            <div className="label" style={{ marginBottom: 24 }}>About</div>
            <h1 className="h-display" style={{ fontSize: "clamp(56px, 9vw, 132px)" }}><TextReveal text="Ignacio Elffman" /></h1>
            <p className="mono upper" style={{ marginTop: 24, fontSize: 12, letterSpacing: ".08em", color: "var(--muted)" }}>
              {es ? "Diseñador gráfico · Director de arte · Productor" : "Graphic designer · Art director · Producer"}
            </p>
          </div>
          <Placeholder tag={es ? "Retrato · BA" : "Portrait · BA"} id="ME-01" />
        </section>

        <section style={{ padding: "96px 0", borderBottom: "0.5px solid var(--line)" }}>
          <p className="h-md" style={{ maxWidth: "22ch", fontWeight: 600 }}>
            {es ?
            "Soy diseñador gráfico. Esa es mi esencia y el punto de partida de todo lo que hago." :
            "I am a graphic designer. That is my essence and the starting point of everything I do."}
          </p>
        </section>

        <Reveal className="prose-section">
          <h3>{es ? "Recorrido" : "Path"}</h3>
          <div className="body-text">
            <p>{es ?
              "A lo largo de más de 15 años de carrera ese punto de partida me llevó a lugares que no estaban en el mapa original: una mina de oro en la Patagonia dictando workshops de co-creación con operarios, el mundo del packaging y el branding trabajando para marcas de Argentina, Latinoamérica y Europa, y una startup de arte y blockchain donde fui founder, diseñador de producto y director de arte al mismo tiempo." :
              "Over more than 15 years in the field, that starting point took me to places that weren't on the original map: a gold mine in Patagonia running co-creation workshops with operators, the world of packaging and branding working for brands across Argentina, Latin America and Europe, and an art-and-blockchain startup where I was founder, product designer and art director at the same time."}</p>
            <p>{es ?
              "Trabajé como freelance desde el inicio, fui parte de Tridimage durante 11 años —uno de los estudios de packaging y branding más reconocidos de la región— y co-fundé BAG, donde construimos tres productos propios y un equipo internacional desde un mensaje de WhatsApp en pandemia." :
              "I worked freelance from the start, was part of Tridimage for 11 years —one of the most recognized packaging and branding studios in the region— and co-founded BAG, where we built three proprietary products and an international team out of a WhatsApp message during the pandemic."}</p>
            <p>{es ?
              "Lo que conecta todo ese recorrido es una misma forma de trabajar: antes de diseñar, entender. Antes de proponer, preguntar. El pensamiento de diseño como metodología para resolver problemas reales, independientemente de si eso termina en un logo, en una etiqueta, en el desarrollo de un software o en la construcción de un objeto." :
              "What connects that whole journey is one same way of working: before designing, understand. Before proposing, ask. Design thinking as a methodology to solve real problems, regardless of whether it ends in a logo, a label, the development of a piece of software or the construction of an object."}</p>
          </div>
        </Reveal>

        <Reveal as="section" style={{ padding: "96px 0" }}>
          <div className="label" style={{ marginBottom: 32 }}>{es ? "Áreas de trabajo" : "Areas of work"}</div>
          <div className="areas-grid">
            <div className="area">
              <h3>Branding</h3>
              <p>{es ? "Identidad visual, estrategia de marca, sistemas de diseño y dirección de arte." : "Visual identity, brand strategy, design systems and art direction."}</p>
            </div>
            <div className="area">
              <h3>Packaging</h3>
              <p>{es ? "Diseño de envases y etiquetas con criterio técnico y narrativo. De la idea a la producción." : "Design of packaging and labels with technical and narrative criteria. From the idea to production."}</p>
            </div>
            <div className="area">
              <h3>{es ? "Diseño de producto" : "Product design"}</h3>
              <p>{es ? "UX, UI y dirección de arte para productos digitales. De la estrategia al pixel perfect." : "UX, UI and art direction for digital products. From strategy to pixel perfect."}</p>
            </div>
            <div className="area">
              <h3>{es ? "Estrategia y proceso" : "Strategy & process"}</h3>
              <p>{es ? "Workshops de co-creación, auditorías de marca, metodología de design thinking aplicada." : "Co-creation workshops, brand audits, applied design-thinking methodology."}</p>
            </div>
          </div>
        </Reveal>

        <Reveal as="section" style={{ padding: "96px 0", borderTop: "0.5px solid var(--line)" }}>
          <div className="label" style={{ marginBottom: 24 }}>{es ? "Hoy" : "Today"}</div>
          <p className="lede" style={{ maxWidth: "32ch", fontSize: "clamp(24px, 2.6vw, 36px)", lineHeight: 1.25, fontWeight: 500, letterSpacing: "-0.015em" }}>
            <TextReveal text={es ?
            "Hoy trabajo de forma independiente y busco proyectos donde el diseño sea una herramienta de pensamiento, no solo de ejecución. Si tenés un problema que todavía no sabés bien cómo resolver, probablemente sea un buen punto de partida para hablar." :
            "Today I work independently and look for projects where design is a tool for thinking, not just execution. If you have a problem you don't yet quite know how to solve, it's probably a good starting point for us to talk."} />
          </p>
          <div style={{ marginTop: 48, display: "flex", flexDirection: "column", gap: 14, fontSize: 16 }}>
            <a href="mailto:hola@ignacioelffman.com" style={{ display: "inline-flex", gap: 16, alignItems: "baseline" }}>
              <span className="mono upper" style={{ fontSize: 11, color: "var(--muted)", minWidth: 80 }}>Email</span>
              <span style={{ fontSize: 22, fontWeight: 500 }}>ignacio.elffman@gmail.com</span>
            </a>
            <a href="https://wa.me/5492214183041" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", gap: 16, alignItems: "baseline" }}>
              <span className="mono upper" style={{ fontSize: 11, color: "var(--muted)", minWidth: 80 }}>WhatsApp</span>
              <span style={{ fontSize: 22, fontWeight: 500 }}>+54 9 221 418 3041 ↗</span>
            </a>
            <a href="https://www.linkedin.com/in/ignacio-elffman/" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", gap: 16, alignItems: "baseline" }}>
              <span className="mono upper" style={{ fontSize: 11, color: "var(--muted)", minWidth: 80 }}>LinkedIn</span>
              <span style={{ fontSize: 22, fontWeight: 500 }}>/in/ignacio-elffman ↗</span>
            </a>
          </div>
        </Reveal>
      </div>

      <CTA lang={lang} />
    </div>);

}

window.About = About;