/* DIPA — site components
   Long-scroll landing for the studio.
*/

const { useState, useEffect, useRef } = React;

/* ---------- Data ----------
   Obra: 15 proyectos reales, en el orden provisto por el estudio.
   Superficie pendiente (—). Fotografía: placeholders hasta recibir material.
*/
const HERO_SLIDES = [
  { num: "— 01", name: "Casa Endanik", meta: "Carrasco, UY · 2024 · 1100 m²", ph: "photo-1", img: "assets/obras/casa-endanik.jpg" },
  { num: "— 02", name: "Casa Fairway", meta: "Pilar, AR · 2024 · 1200 m²",    ph: "photo-5", img: "assets/obras/casa-fairway.jpg" },
  { num: "— 03", name: "Casa Marupe",  meta: "Nordelta, AR · 2024 · 650 m²",  ph: "photo-8", img: "assets/obras/casa-marupe.jpg" },
  { num: "— 04", name: "Guatemala",    meta: "Palermo, AR · 2025 · 1900 m²",  ph: "photo-3 has-facade", img: "assets/obras/guatemala-frontal.jpg" },
  { num: "— 05", name: "Arevalo",      meta: "Palermo, AR · 2025 · 2500 m²",  ph: "photo-7 has-facade", img: "assets/obras/arevalo.jpg" },
];

const WORKS = [
  { num: "01", name: "Casa Endanik", meta: "2024 · carrasco, uy · vivienda · 1100 m²", estado: "finalizada",       ph: "photo-1", img: "assets/obras/casa-endanik.jpg" },
  { num: "02", name: "Casa Fairway", meta: "2024 · pilar, ar · vivienda · 1200 m²",    estado: "en construcción", ph: "photo-5", img: "assets/obras/casa-fairway.jpg" },
  { num: "03", name: "Casa AP",      meta: "2023 · escobar, ar · vivienda · 500 m²",   estado: "finalizada",       ph: "photo-6", img: "assets/obras/casa-ap.jpg" },
  { num: "04", name: "Arevalo",      meta: "2025 · palermo, ar · edificio · 2500 m²",  estado: "proyecto",        ph: "photo-7 has-facade", img: "assets/obras/arevalo.jpg", facade: true },
  { num: "05", name: "Guatemala",    meta: "2025 · palermo, ar · edificio · 1900 m²",  estado: "en construcción", ph: "photo-3 has-facade", img: "assets/obras/guatemala-frontal.jpg", facade: true },
  { num: "06", name: "Casa FG",      meta: "2019 · escobar, ar · vivienda · 450 m²",   estado: "finalizada",       ph: "photo-6", img: "assets/obras/casa-fg-2.jpg" },
  { num: "07", name: "SLR",          meta: "2019 · palermo, ar · edificio · 1800 m²",  estado: "finalizada",       ph: "photo-8 has-facade", img: "assets/obras/slr.jpg", facade: true },
  { num: "08", name: "Casa GC",      meta: "2021 · escobar, ar · vivienda · 450 m²",   estado: "finalizada",       ph: "photo-2", img: "assets/obras/casa-gc.jpg" },
  { num: "09", name: "Casa SM",      meta: "2021 · escobar, ar · vivienda · 300 m²",   estado: "finalizada",       ph: "photo-1", img: "assets/obras/casa-sm.jpg" },
  { num: "10", name: "Ceibos",       meta: "2021 · escobar, ar · vivienda · 300 m²",   estado: "finalizada",       ph: "photo-5", img: "assets/obras/ceibos.jpg" },
  { num: "11", name: "Casa Marupe",  meta: "2024 · nordelta, ar · vivienda · 650 m²",  estado: "en construcción", ph: "photo-8", img: "assets/obras/casa-marupe.jpg" },
];

const ARCHIVE = [
  { year: "2025", name: "Guatemala",    place: "Palermo, AR",  program: "edificio", size: "1 900 m²", estado: "en construcción" },
  { year: "2025", name: "Arevalo",      place: "Palermo, AR",  program: "edificio", size: "2 500 m²", estado: "proyecto" },
  { year: "2024", name: "Casa Endanik", place: "Carrasco, UY", program: "vivienda", size: "1 100 m²", estado: "finalizada" },
  { year: "2024", name: "Casa Fairway", place: "Pilar, AR",    program: "vivienda", size: "1 200 m²", estado: "en construcción" },
  { year: "2024", name: "Casa Marupe",  place: "Nordelta, AR", program: "vivienda", size: "650 m²",  estado: "en construcción" },
  { year: "2024", name: "Casa Frame",   place: "Escobar, AR",  program: "vivienda", size: "600 m²",  estado: "proyecto" },
  { year: "2023", name: "Casa AP",      place: "Escobar, AR",  program: "vivienda", size: "500 m²",  estado: "finalizada" },
  { year: "2023", name: "Casa Costas",  place: "Escobar, AR",  program: "vivienda", size: "450 m²",  estado: "proyecto" },
  { year: "2023", name: "Casa Bit",     place: "Escobar, AR",  program: "vivienda", size: "450 m²",  estado: "finalizada" },
  { year: "2023", name: "Casa Pomelo",  place: "Escobar, AR",  program: "vivienda", size: "450 m²",  estado: "proyecto" },
  { year: "2022", name: "Casa Ronda",   place: "Pilar, AR",    program: "vivienda", size: "600 m²",  estado: "en construcción" },
  { year: "2022", name: "Casa SF",      place: "Escobar, AR",  program: "vivienda", size: "500 m²",  estado: "finalizada" },
  { year: "2022", name: "Casa Mag",     place: "Escobar, AR",  program: "vivienda", size: "400 m²",  estado: "proyecto" },
  { year: "2022", name: "Acasusso",     place: "Acasusso, AR", program: "vivienda", size: "350 m²",  estado: "proyecto" },
  { year: "2021", name: "Casa SM",      place: "Escobar, AR",  program: "vivienda", size: "300 m²",  estado: "finalizada" },
  { year: "2021", name: "Casa L",       place: "Escobar, AR",  program: "vivienda", size: "300 m²",  estado: "finalizada" },
  { year: "2021", name: "Ceibos",       place: "Escobar, AR",  program: "vivienda", size: "300 m²",  estado: "finalizada" },
  { year: "2021", name: "Casa GC",      place: "Escobar, AR",  program: "vivienda", size: "450 m²",  estado: "finalizada" },
  { year: "2020", name: "Nero",         place: "Bella Vista, AR", program: "edificio", size: "1 100 m²", estado: "finalizada" },
  { year: "2019", name: "SLR",          place: "Palermo, AR",  program: "edificio", size: "1 800 m²", estado: "finalizada" },
  { year: "2019", name: "Casa FG",      place: "Escobar, AR",  program: "vivienda", size: "450 m²",  estado: "finalizada" },
];

const PRESS = [
  { year: "2024", pub: "Summa+",     title: "Edificio Prima — edición de obra reciente.",                       ext: "nº 198 / ar" },
  { year: "2024", pub: "ArchDaily",  title: "Casa Endanik: una arquitectura del lugar.",                        ext: "feature" },
  { year: "2023", pub: "Plot",       title: "Diálogos con DIPA: materialidad y permanencia.",                    ext: "nº 81 / ar" },
  { year: "2023", pub: "ARQ Clarín", title: "Casa Fairway, hormigón visto y patio interior.",                    ext: "supl. arq" },
  { year: "2022", pub: "Domus",      title: "South American practices to watch — DIPA Arquitectos.",             ext: "edición latam" },
  { year: "2022", pub: "Bienal CPAU",title: "Mención categoría vivienda — Casa Marupe.",                          ext: "distinción" },
  { year: "2021", pub: "Wallpaper*", title: "Buenos Aires, on the rise — three studios reshaping the city.",     ext: "feature" },
];

/* ---------- Header ---------- */
const Header = ({ lang = "es", onLang }) => {
  const labels = lang === "en"
    ? { obra: "work", estudio: "studio", archivo: "archive", prensa: "press", contacto: "contact" }
    : { obra: "obra", estudio: "estudio", archivo: "archivo", prensa: "prensa", contacto: "contacto" };
  return (
    <header className="site-header scrolled">
      <a className="logo" href="#top" aria-label="DIPA arquitectos">
        <img src="assets/DIPA_Logo_arquitectos.png" alt="DIPA arquitectos." />
      </a>
      <nav>
        <a href="#obra">{labels.obra}</a>
        <a href="#estudio">{labels.estudio}</a>
        <a href="#archivo">{labels.archivo}</a>
        <a href="#contacto">{labels.contacto}</a>
      </nav>
      <div className="utils">
        <div className="lang">
          <span
            className={lang === "es" ? "on" : ""}
            onClick={() => onLang && onLang("es")}
            role="button"
          >es</span>
          <span className="sep">·</span>
          <span
            className={lang === "en" ? "on" : ""}
            onClick={() => onLang && onLang("en")}
            role="button"
          >en</span>
        </div>
      </div>
    </header>
  );
};

/* ---------- Hero (slider) ---------- */
const Hero = ({ autoplay = true, lang }) => {
  const [i, setI] = useState(0);
  const n = HERO_SLIDES.length;
  useEffect(() => {
    if (!autoplay) return;
    const t = setInterval(() => setI((x) => (x + 1) % n), 5200);
    return () => clearInterval(t);
  }, [autoplay, n]);
  const cur = HERO_SLIDES[i];
  const labels = lang === "en"
    ? { selected: "selected work · 2024", scroll: "scroll", next: "next" }
    : { selected: "obra seleccionada · 2024", scroll: "deslizar", next: "siguiente" };
  return (
    <section className="hero" data-screen-label="hero">
      <div className="stage" style={{ transform: `translateX(-${i * 100}%)` }}>
        {HERO_SLIDES.map((s, idx) => (
          <div
            key={idx}
            className={`slide photo ${s.img ? "" : s.ph}`}
            data-label={s.img ? undefined : `fotografía — ${s.name.toLowerCase()}`}
          >
            {s.img && <img className="real" src={s.img} alt={s.name} />}
          </div>
        ))}
      </div>

      <div className="caption">
        <div className="num">{cur.num}</div>
        <div className="name">{cur.name}</div>
        <div className="meta">{cur.meta}</div>
      </div>

      <div className="scroll-hint">{labels.scroll} ↓</div>

      <div className="bottom-bar">
        <span>{labels.selected}</span>
        <span className="counter">{String(i + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}</span>
        <div className="ctrls">
          <a onClick={() => setI((x) => (x - 1 + n) % n)}>← {lang === "en" ? "prev" : "anterior"}</a>
          <a onClick={() => setI((x) => (x + 1) % n)}>{labels.next} →</a>
        </div>
      </div>
    </section>
  );
};

/* ---------- Manifiesto ---------- */
const Manifiesto = ({ lang }) => {
  if (lang === "en") {
    return (
      <section className="manifesto" id="manifiesto" data-screen-label="manifiesto">
        <div className="eyebrow">— 01</div>
        <div className="body">
          <p style={{ margin: 0 }}>
            We design spaces that hold experiences of singular quality.
            <em> Materials speak — they hold memory </em>
            and can awaken sensations and emotion. So that to inhabit
            is not only to be, but to feel.
          </p>
        </div>
        <aside>
          <div className="pair"><div className="k">approach</div><div className="v">A residential practice made for those who live in them. A few projects at a time, each followed closely from idea to detail.</div></div>
          <div className="pair"><div className="k">method</div><div className="v">A rigorous, carefully guided process where every decision is studied, contrasted and validated before moving on.</div></div>
          <div className="pair"><div className="k">purpose</div><div className="v">To materialize, in the best way and in detail, a way of living.</div></div>
        </aside>
      </section>
    );
  }
  return (
    <section className="manifesto" id="manifiesto" data-screen-label="manifiesto">
      <div className="eyebrow">— 01</div>
      <div className="body">
        <p style={{ margin: 0 }}>
          Diseñamos espacios que contengan vivencias de calidad única.
          <em> Los materiales hablan, tienen memoria </em>
          y son capaces de despertar sensaciones y emociones. Que habitar
          no sea solo estar, sino sentir.
        </p>
      </div>
      <aside>
        <div className="pair"><div className="k">enfoque</div><div className="v">Una práctica residencial pensada para quienes las habitan. Pocos proyectos a la vez, cada uno acompañado de cerca desde la idea hasta el detalle.</div></div>
        <div className="pair"><div className="k">método</div><div className="v">Un proceso riguroso y cuidadosamente guiado, donde cada decisión se estudia, se contrasta y se valida antes de continuar.</div></div>
        <div className="pair"><div className="k">propósito</div><div className="v">Materializar, de la mejor manera y en detalle, una forma de vivir.</div></div>
      </aside>
    </section>
  );
};

/* ---------- Experiencia (full-bleed spread) ---------- */
const Experiencia = ({ lang }) => (
  <section className="experiencia" id="experiencia" data-screen-label="experiencia">
    <div className="visual">
      <img src="assets/obras/exp-hero.jpg" alt="" />
    </div>
    <div className="content">
      <div className="triptych">
        <img src="assets/obras/exp-1.png" alt="" />
        <img src="assets/obras/exp-2.png" alt="" />
        <img src="assets/obras/exp-3.png" alt="" />
      </div>
      <h2 className="exp-title">
        {lang === "en" ? "experience." : "experiencia."}
      </h2>
      {lang === "en" ? (
        <div className="body">
          <p>We understand architecture as an experience discovered through the senses. It is not only about spaces, but about how those spaces affect us, hold us and accompany us in everyday life. We believe materials speak, that they hold memory, and that they can awaken memories, sensations and deep emotions.</p>
          <p>That is why we conceive each project as a whole, where every decision —from light to texture, from scale to silence— is part of a single narrative. We seek a continuity between spaces that is not only physical, but also emotional, generating a fluid, coherent and meaningful experience.</p>
          <p>We care that the everyday becomes special. That every path, every encounter with matter and light, has intention. That to inhabit is not only to be, but to feel.</p>
        </div>
      ) : (
        <div className="body">
          <p>Entendemos la arquitectura como una experiencia que se descubre a través de los sentidos. No se trata solo de espacios, sino de cómo esos espacios nos afectan, nos contienen y nos acompañan en la vida cotidiana. Creemos que los materiales hablan, que tienen memoria, y que son capaces de despertar recuerdos, sensaciones y emociones profundas.</p>
          <p>Por eso concebimos cada proyecto como una totalidad, donde cada decisión —desde la luz hasta la textura, desde la escala hasta el silencio— forma parte de un mismo relato. Buscamos que la continuidad entre los espacios no sea solo física, sino también emocional, generando una experiencia fluida, coherente y significativa.</p>
          <p>Nos interesa que lo cotidiano se vuelva especial. Que cada recorrido, cada encuentro con la materia y la luz, tenga intención. Que habitar no sea solo estar, sino sentir.</p>
        </div>
      )}
    </div>
  </section>
);

/* ---------- SectionHead ---------- */
const SectionHead = ({ num, title, lhs, rhs }) => (
  <div className="section-head">
    <div className="lhs">
      <span className="num">— {num}</span>
      <h2>{title}</h2>
    </div>
    <div className="rhs">{rhs}</div>
  </div>
);

/* ---------- Obra ---------- */
const ESTADO_EN = { "finalizada": "completed", "en construcción": "under construction", "proyecto": "in design" };
const estadoLabel = (e, lang) => (lang === "en" ? (ESTADO_EN[e] || e) : e);

const Obra = ({ lang }) => (
  <section id="obra" data-screen-label="obra">
    <SectionHead
      num="02"
      title={lang === "en" ? "selected work." : "obra."}
      rhs={<><a>{lang === "en" ? "11 works" : "11 obras"}</a></>}
    />
    <div className="obra">
      {WORKS.map((w) => (
        <a key={w.num} className="work" href="#">
          <div
            className={`photo ${w.img ? (w.facade ? "framed-facade" : "") : w.ph}`}
            data-label={w.img ? undefined : `fotografía — ${w.name.toLowerCase()}`}
          >
            {w.img && <img className="real" src={w.img} alt={w.name} />}
          </div>
          <figcaption>
            <span className="num">{w.num}</span>
            <div className="info">
              <span className="name">{w.name}</span>
              <span className="meta">{w.meta}</span>
              <span className={`estado estado--${w.estado === "en construcci\u00f3n" ? "obra" : w.estado}`}>{estadoLabel(w.estado, lang)}</span>
            </div>
            <span className="link">{lang === "en" ? "view →" : "ver →"}</span>
          </figcaption>
        </a>
      ))}
    </div>
  </section>
);

/* ---------- Featured / pull-quote on photo ---------- */
const Featured = ({ lang }) => (
  <section className="featured" data-screen-label="featured">
    <div className="photo" data-label={undefined}>
      <img className="real" src="assets/obras/casa-ap-destacada.jpg" alt="Casa AP" />
    </div>
    <div className="scrim" />
    <div className="text">
      <div>
        <blockquote>
          {lang === "en"
            ? "To inhabit is not only to be, but to feel."
            : "Que habitar no sea solo estar, sino sentir."}
        </blockquote>
        <div className="attr">— dipa</div>
      </div>
      <div className="right">
        <span className="num">— obra destacada</span>
        <span className="name">Casa AP</span>
        <span className="meta">2023 · escobar, ar · 500 m²</span>
      </div>
    </div>
  </section>
);

/* ---------- Proceso ---------- */
const PROCESO = [
  {
    num: "01",
    es: { name: "Concepto y estrategia", desc: "Comprendemos la forma de vivir del cliente y la traducimos en una propuesta coherente, atemporal y técnicamente sólida. Definición del programa, factibilidad del terreno y concepto de diseño." },
    en: { name: "Concept & strategy",    desc: "We grasp how the client lives and translate it into a coherent, timeless and technically sound proposal. Brief, site feasibility and the design concept." },
  },
  {
    num: "02",
    es: { name: "Desarrollo ejecutivo", desc: "Interiorismo arquitectónico y proyecto ejecutivo: especificaciones, detalles de terminaciones, coordinación de ingenierías y la documentación completa para presupuestar y construir." },
    en: { name: "Executive development", desc: "Architectural interior and executive project: specifications, finish details, engineering coordination and the full documentation to budget and build." },
  },
  {
    num: "03",
    es: { name: "Dirección y gestión de obra", desc: "Supervisión durante toda la vigencia de la obra, control de desvíos, plan de tareas y financiero. Acompañamiento constante para llegar a las terminaciones esperadas." },
    en: { name: "Construction direction", desc: "Supervision through the entire build, deviation control, task and financial planning. Constant guidance toward the finishes expected." },
  },
  {
    num: "04",
    es: { name: "Curaduría de interiores", desc: "Opcional. Definición de mobiliario, materiales y decoración: moodboard, distribución, detalle a medida y seguimiento de fabricación en talleres." },
    en: { name: "Interior curation", desc: "Optional. Furniture, materials and decoration: moodboard, layout, bespoke detailing and fabrication follow-up at the workshops." },
  },
];

const Proceso = ({ lang }) => (
  <section id="proceso" data-screen-label="proceso">
    <SectionHead
      num="04"
      title={lang === "en" ? "process." : "proceso."}
      rhs={<><a>{lang === "en" ? "four stages" : "cuatro etapas"}</a></>}
    />
    <div className="proceso">
      <div className="proceso-lede">
        {lang === "en"
          ? "Each project is a unique piece, developed through a rigorous, carefully guided process — where every decision is studied, contrasted and validated before moving on."
          : "Cada proyecto es una pieza única, desarrollada a través de un proceso riguroso y cuidadosamente guiado — donde cada decisión se estudia, se contrasta y se valida antes de continuar."}
      </div>
      <div className="proceso-grid">
        {PROCESO.map((p) => (
          <div key={p.num} className="etapa">
            <div className="num">{p.num}</div>
            <div className="name">{p[lang === "en" ? "en" : "es"].name}</div>
            <div className="desc">{p[lang === "en" ? "en" : "es"].desc}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Estudio ---------- */
const Estudio = ({ lang }) => (
  <section id="estudio" data-screen-label="estudio">
    <SectionHead
      num="03"
      title={lang === "en" ? "studio." : "estudio."}
      rhs={<><a>buenos aires · ar</a></>}
    />
    <div className="estudio">
      <div className="top">
        <div className="col-text">
          {lang === "en" ? (
            <>
              <h3>To materialize an idea of living.</h3>
              <p>DIPA is a Buenos Aires architecture studio devoted to the house. We design spaces that hold experiences of singular quality — functional, efficient aesthetics for a fluid, pleasurable way of living.</p>
              <p>We understand architecture as an experience discovered through the senses. Each project is a whole, where every decision — from light to texture, from scale to silence — is part of the same story.</p>
              <p>The studio is led by two partners, supported by architects, technicians and invited specialists according to each stage. We take on a limited number of projects at once, to guarantee the dedication each one requires.</p>
            </>
          ) : (
            <>
              <h3>Materializar una idea de vivir.</h3>
              <p>DIPA es un estudio dedicado a la arquitectura residencial. Diseñamos espacios que contengan vivencias de calidad única — estéticas funcionales y eficientes para una manera fluida y placentera de vivir.</p>
              <p>Entendemos la arquitectura como una experiencia que se descubre a través de los sentidos. Cada proyecto es una totalidad, donde cada decisión — de la luz a la textura, de la escala al silencio — forma parte de un mismo relato.</p>
              <p>El estudio está dirigido por sus dos socios, acompañado por arquitectos, técnicos y asesores invitados según la etapa. Trabajamos con una cantidad limitada de proyectos en simultáneo, para garantizar la dedicación que cada obra requiere.</p>
            </>
          )}
        </div>
        <div className="col-portrait">
          <div className="photo photo-portrait">
            <img className="real" src="assets/obras/socios.jpg" alt="Los socios de DIPA" />
          </div>
          <div className="caption">
            <span className="names">Matías Di Pietro · Agustina Parodi</span>
            <span>{lang === "en" ? "buenos aires · 2024" : "buenos aires · 2024"}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Archivo ---------- */
const Archivo = ({ lang }) => (
  <section id="archivo" data-screen-label="archivo">
    <SectionHead
      num="05"
      title={lang === "en" ? "archive." : "archivo."}
      rhs={<><a>{lang === "en" ? "21 works" : "21 obras"}</a></>}
    />
    <div className="archivo">
      <div className="row head">
        <span>{lang === "en" ? "year" : "año"}</span>
        <span>{lang === "en" ? "project" : "obra"}</span>
        <span>{lang === "en" ? "location" : "ubicación"}</span>
        <span>{lang === "en" ? "program" : "programa"}</span>
        <span>m²</span>
        <span>{lang === "en" ? "status" : "estado"}</span>
        <span></span>
      </div>
      {ARCHIVE.map((r, idx) => (
        <a key={idx} className="row" href="#">
          <span className="year">{r.year}</span>
          <span className="name">{r.name}</span>
          <span className="place">{r.place.toLowerCase()}</span>
          <span className="program">{r.program}</span>
          <span className="size">{r.size}</span>
          <span className={`estado estado--${r.estado === "en construcci\u00f3n" ? "obra" : r.estado}`}>{estadoLabel(r.estado, lang)}</span>
          <span className="arrow">→</span>
        </a>
      ))}
    </div>
  </section>
);

/* ---------- Prensa ---------- */
const Prensa = ({ lang }) => (
  <section id="prensa" data-screen-label="prensa">
    <SectionHead
      num="06"
      title={lang === "en" ? "press." : "prensa."}
      rhs={<><a>2020 — 2024</a></>}
    />
    <div className="prensa">
      <div className="intro">
        {lang === "en"
          ? "Conversations, features and recognitions about the studio's work."
          : "Conversaciones, publicaciones y distinciones sobre el trabajo del estudio."}
      </div>
      <div className="list">
        {PRESS.map((p, idx) => (
          <a key={idx} className="item" href="#">
            <span className="year">{p.year}</span>
            <span className="pub">{p.pub}</span>
            <span className="title">{p.title}</span>
            <span className="ext">{p.ext} ↗</span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Contacto / footer ---------- */
const Contacto = ({ lang }) => (
  <section id="contacto" className="contacto" data-screen-label="contacto">
    <div className="head">
      <h2 className="big">
        {lang === "en"
          ? <>each project<br /><em>— a unique opportunity.</em></>
          : <>cada proyecto<br /><em>— una oportunidad única.</em></>}
      </h2>
      <div className="right">
        <p className="lede">
          {lang === "en"
            ? <>We get deeply involved, understanding that behind every decision there is a way of living that deserves to be interpreted with precision.<br /><br />We take on a limited number of projects at once, to guarantee the level of dedication each work requires. We understand architecture as a process where value lies not only in the result, but in every decision that builds it.<br /><br />If this approach resonates with you, it will be a pleasure to develop this project together.</>
            : <>Nos involucramos en profundidad, entendiendo que detrás de cada decisión hay una forma de vivir que merece ser interpretada con precisión.<br /><br />Trabajamos con una cantidad limitada de proyectos en simultáneo, para garantizar el nivel de dedicación que cada obra requiere. Entendemos la arquitectura como un proceso donde el valor no está solo en el resultado, sino en cada decisión que lo construye.<br /><br />Si este enfoque resuena con ustedes, será un placer desarrollar este proyecto en conjunto.</>}
        </p>
        <a className="cta" href="mailto:info@dipaarquitectos.com">
          {lang === "en" ? "write to us" : "escribir al estudio"} →
        </a>
      </div>
    </div>

    <div className="grid">
      <div className="col">
        <div className="k">{lang === "en" ? "studio" : "estudio"}</div>
        <div className="v">
          Soler 5983, Depto. 103<br />
          Buenos Aires<br />
          Argentina
        </div>
      </div>
      <div className="col">
        <div className="k">{lang === "en" ? "contact" : "contacto"}</div>
        <div className="v">
          <a href="mailto:info@dipaarquitectos.com">info@dipaarquitectos.com</a>
        </div>
      </div>
      <div className="col">
        <div className="k">{lang === "en" ? "hours" : "horario"}</div>
        <div className="v">
          {lang === "en" ? "mon — fri" : "lun — vie"}<br />
          {lang === "en" ? "by appointment" : "con cita previa"}
        </div>
      </div>
      <div className="col">
        <div className="k">{lang === "en" ? "elsewhere" : "redes"}</div>
        <div className="v">
          <a href="https://www.instagram.com/dipaarquitectos/" target="_blank" rel="noopener">@dipaarquitectos ↗</a><br />
          <a href="https://dipaarquitectos.com">dipaarquitectos.com ↗</a>
        </div>
      </div>
    </div>

    <div className="baseline">
      <img src="assets/DIPA_Logo.png" alt="DIPA" />
      <span>arquitectos. · buenos aires, ar</span>
      <span>© 2026 — todos los derechos reservados.</span>
    </div>
  </section>
);

Object.assign(window, {
  Header, Hero, Manifiesto, Experiencia, Obra, Featured, Proceso, Estudio, Archivo, Prensa, Contacto,
});
