// Branding case page — 13 Fronteras
// Source of truth: uploads/13_fronteras_caso_estudio.pdf

// Small inline carousel — 4 image-slot placeholders, prev/next arrows,
// keyboard support, dot indicators. Resets index when slide count
// changes; touch-swipe handled via the pointerdown horizontal-delta
// heuristic so it works in the design tool's preview iframe too.
function MaterialCarousel({ slides }) {
  const [i, setI] = React.useState(0);
  const n = slides.length;
  const carouselRef = React.useRef(null);
  const go = (d) => {
    setI((p) => (p + d + n) % n);
    const el = carouselRef.current;
    if (el && getComputedStyle(el).overflowX === 'auto') {
      const slideW = el.querySelector('.mat-slide')?.offsetWidth || 0;
      el.scrollBy({ left: d * slideW, behavior: 'smooth' });
    }
  };
  const startX = React.useRef(null);
  const onDown = (e) => {startX.current = e.clientX;};
  const onUp = (e) => {
    if (startX.current == null) return;
    const dx = e.clientX - startX.current;
    startX.current = null;
    if (Math.abs(dx) > 50) go(dx < 0 ? 1 : -1);
  };
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "ArrowLeft") go(-1);
      if (e.key === "ArrowRight") go(1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [n]);
  return (
    <div className="mat-carousel" ref={carouselRef}>
      <div
        className="mat-track"
        onPointerDown={onDown}
        onPointerUp={onUp}
        style={{ transform: `translateX(-${i * 100}%)` }}>
        
        {slides.map((s) =>
        <div key={s.id} className="mat-slide">
            <Placeholder tag={s.tag} id={s.id} className="ph-mat" />
          </div>
        )}
      </div>
      <button className="mat-nav prev" onClick={() => go(-1)} aria-label="Anterior">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M15 18l-6-6 6-6" />
        </svg>
      </button>
      <button className="mat-nav next" onClick={() => go(1)} aria-label="Siguiente">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M9 18l6-6-6-6" />
        </svg>
      </button>
      <div className="mat-dots">
        {slides.map((_, j) =>
        <button
          key={j}
          className={`dot${j === i ? " active" : ""}`}
          onClick={() => setI(j)}
          aria-label={`Slide ${j + 1}`} />

        )}
      </div>
      <div className="mat-counter">
        <span className="mono">{String(i + 1).padStart(2, "0")}</span>
        <span className="mono dim"> / {String(n).padStart(2, "0")}</span>
      </div>
    </div>);

}

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

        <header className="case-header">
          <div className="label" style={{ marginBottom: 24 }}>
            {es ? "Branding · Estrategia · Diseño de espacios" : "Branding · Strategy · Space design"}
          </div>
          <h1 className="h-xl">13 Fronteras</h1>
          <p className="lede muted" style={{ marginTop: 32 }}>
            {es ?
            "Rediseñar un restaurante desde adentro: proceso, concepto y el arte de trabajar con alguien que no confía en nadie." :
            "Redesigning a restaurant from the inside: process, concept and the art of working with someone who trusts no one."}
          </p>
          <div className="case-meta-row">
            <div className="item"><span className="k">{es ? "Ubicación" : "Location"}</span><span className="v">Buenos Aires</span></div>
            <div className="item"><span className="k">{es ? "Modalidad" : "Mode"}</span><span className="v">Freelance</span></div>
            <div className="item"><span className="k">{es ? "Equipo" : "Team"}</span><span className="v">Nacho + Jess + Nico</span></div>
            <div className="item"><span className="k">{es ? "Alcance" : "Scope"}</span><span className="v">{es ? "Branding · Arquitectura · Estrategia" : "Branding · Architecture · Strategy"}</span></div>
          </div>
        </header>

        <Placeholder tag={es ? "13 Fronteras — Local Palermo" : "13 Fronteras — Palermo venue"} id="BRA-HERO" className="ph-hero" />

        <Reveal className="prose-section">
          <h3>{es ? "El cliente" : "The client"}</h3>
          <div className="body-text">
            <h4>Dave</h4>
            <p>{es ?
              "Dave es chef, es estadounidense, y cruzó América en camioneta con su mujer y sus perros antes de abrir un restaurante en San Telmo. Cada plato en su menú era una parada de ese viaje. El nombre del lugar lo decía todo: 13 Fronteras, una por cada frontera que atravesó." :
              "Dave is a chef, American, and he drove across the Americas in a pickup truck with his wife and dogs before opening a restaurant in San Telmo. Every dish on the menu was a stop on that trip. The name said it all: 13 Fronteras, one for each border he crossed."}</p>
            <p>{es ?
              "Era un tipo difícil. Autosuficiente hasta el hueso. En su primer restaurante había hecho prácticamente todo él solo: atendía las mesas, cocinaba, explicaba los platos, tomaba las reservas. Llamaba a colaboradores solo cuando no tenía más opción, pero siempre dirigía, siempre controlaba. Ceder el proceso creativo a otro equipo no era algo que le saliera naturalmente." :
              "He was a difficult guy. Self-sufficient to the bone. In his first restaurant he had done practically everything himself: waited tables, cooked, explained the dishes, took the reservations. He called in collaborators only when he had no other option, but he always directed, always controlled. Handing over a creative process to another team did not come naturally to him."}</p>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "Cómo llegamos" : "How we got there"}</h3>
          <div className="body-text">
            <p>{es ?
              "Jess había ido a comer sola y volvió con la certeza de que teníamos que conocerlo. Fuimos juntos, salimos extasiados, y en el taxi de vuelta decidimos algo impulsivo: armar un proyecto concept que uniera diseño y gastronomía. Sin cliente, sin encargo, solo con ganas." :
              "Jess had gone to eat alone and came back certain we had to meet him. We went together, walked out blown away, and in the taxi back we made an impulsive decision: build a concept project that linked design and gastronomy. No client, no brief, just the urge."}</p>
            <p>{es ?
              "Elegimos Epecuén como inspiración: una ciudad argentina que quedó bajo el agua tras una inundación y cuyas ruinas, al retirarse el lago décadas después, se convirtieron en un atractivo turístico único. Diseñamos la identidad visual y la vajilla para una experiencia gastronómica inspirada en ese lugar. Con ese proyecto bajo el brazo volvimos a ver a Dave." :
              "We chose Epecuén as inspiration: an Argentine town that ended up underwater after a flood, whose ruins — after the lake receded decades later — became a unique tourist site. We designed the visual identity and the tableware for a dining experience inspired by that place. With that project under our arm we went back to Dave."}</p>
            <p>{es ?
              "Le gustó pero no lo suficiente. Nos encargó un plato inspirado en el hornero; lo desarrollamos, lo presupuestamos, lo presentamos. No avanzó. Dave todavía no confiaba en nuestro proceso. Así que seguimos yendo a comer. Esperamos." :
              "He liked it, but not enough. He commissioned us a dish inspired by the hornero bird; we developed it, costed it, presented it. It didn't move forward. Dave still didn't trust our process. So we kept going there to eat. We waited."}</p>
            <p>{es ?
              "Un día nos llamó con algo más ambicioso: quería mudar el restaurante de San Telmo a Palermo y necesitaba un equipo que lo diseñara completo. Aceptamos con una sola condición: que confiara en nuestro proceso." :
              "One day he called with something more ambitious: he wanted to move the restaurant from San Telmo to Palermo and needed a team to design it end-to-end. We accepted with one condition: that he trust our process."}</p>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "El equipo" : "The team"}</h3>
          <div className="body-text">
            <p>{es ?
              "Convoqué a Nico, un arquitecto con un gusto exquisito por el diseño y la gastronomía. Él y Jess no se conocían. Pegaron onda enseguida. Los tres formamos el equipo que iba a llevar adelante el proyecto." :
              "I brought in Nico, an architect with an exquisite eye for design and food. He and Jess didn't know each other. They clicked immediately. The three of us became the team that would carry the project forward."}</p>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "La metodología" : "Method"}</h3>
          <div className="body-text">
            <h4>{es ? "Cuatro etapas" : "Four stages"}</h4>
            <p>{es ?
              "Antes de dibujar una sola línea, necesitábamos entender qué tenía Dave en la cabeza. Y Dave, siendo Dave, no lo hacía fácil. Propusimos trabajar en cuatro etapas:" :
              "Before drawing a single line, we needed to understand what Dave had in his head. And Dave, being Dave, didn't make it easy. We proposed four stages:"}</p>
          </div>
        </Reveal>

        <Reveal as="section" className="case-fullblock">
          <ol className="method-stages">
            <li>
              <span className="num">01</span>
              <div>
                <h5>{es ? "Briefing y kick-off" : "Briefing & kick-off"}</h5>
                <p>{es ?
                  "Workshop de co-creación para sentar las bases conceptuales. Design thinking y brainstorming con Dave como protagonista, no como espectador." :
                  "Co-creation workshop to lay the conceptual foundations. Design thinking and brainstorming with Dave as protagonist, not as spectator."}</p>
              </div>
            </li>
            <li>
              <span className="num">02</span>
              <div>
                <h5>{es ? "Anteproyecto" : "Pre-design"}</h5>
                <p>{es ?
                  "Traducción visual de lo que surgió en el workshop. Moodboards, referencias, primeras aproximaciones estéticas." :
                  "Visual translation of what emerged from the workshop. Moodboards, references, first aesthetic approaches."}</p>
              </div>
            </li>
            <li>
              <span className="num">03</span>
              <div>
                <h5>{es ? "Proyecto" : "Project"}</h5>
                <p>{es ?
                  "Trabajo con el espacio real. Medidas, materiales, comunicación visual, definición de cada ambiente." :
                  "Work with the real space. Measurements, materials, visual communication, definition of each room."}</p>
              </div>
            </li>
            <li>
              <span className="num">04</span>
              <div>
                <h5>{es ? "Dirección" : "Direction"}</h5>
                <p>{es ?
                  "Búsqueda de proveedores, presupuestos y gestión de implementación." :
                  "Sourcing suppliers, costing, and implementation management."}</p>
              </div>
            </li>
          </ol>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "El workshop y lo que encontramos" : "The workshop and what we found"}</h3>
          <div className="body-text">
            <p style={{ textAlign: "left", padding: "0px", margin: "17px 0px" }}>{es ?
              "Arrancamos con la etapa 1. Sentamos a Dave, pusimos papeles en la mesa, hicimos el mindmapping. De ahí salieron los conceptos que iban a guiar todo lo que vino después: aventura, contraste, misterio, provocación, incomodidad divertida." :
              "We started with stage 1. We sat Dave down, put paper on the table, ran the mindmapping. Out of it came the concepts that would guide everything that followed: adventure, contrast, mystery, provocation, playful discomfort."}</p>
          </div>
        </Reveal>

        <Reveal as="section" className="case-fullblock">
          <figure className="case-quote">
            <blockquote style={{ maxWidth: "463px" }}>
              {es ?
              "Mi cocina es de las Américas. Muchos chefs buscan una pareja para los sabores, lo que va bien. Pero yo busco el contraste. Me gusta provocar." :
              "My cooking is of the Americas. Many chefs look for a partner for the flavors, what goes well. But I look for the contrast. I like to provoke."}
            </blockquote>
            <figcaption>— Dave, {es ? "durante el workshop" : "during the workshop"}</figcaption>
          </figure>

        </Reveal>

        <Reveal className="prose-section">
          <div />
          <div className="body-text">
            <p>{es ?
              "Esa frase se convirtió en el eje conceptual del proyecto. Todo lo que diseñamos a partir de ese momento tenía que responder a esa idea: contraste de fronteras." :
              "That sentence became the conceptual axis of the project. Everything we designed from that moment on had to answer to that idea: a contrast of borders."}</p>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "Las decisiones de diseño" : "The design decisions"}</h3>
          <div className="body-text">
            <p>{es ?
              "El restaurante se dividió en tres espacios, cada uno con su propio carácter. El límite entre ellos era, literalmente, la frontera." :
              "The restaurant was split into three spaces, each with its own character. The boundary between them was, literally, the border."}</p>
          </div>
        </Reveal>

        <Reveal as="section" className="case-fullblock">
          <div className="three-spaces">
            <div className="space">
              <div className="space-label">{es ? "Recepción" : "Reception"}</div>
              <div className="space-words">
                <span>{es ? "Aventura" : "Adventure"}</span>
                <span>{es ? "Origen" : "Origin"}</span>
                <span>{es ? "Rústico" : "Rustic"}</span>
              </div>
            </div>
            <div className="space">
              <div className="space-label">{es ? "Zona de comensales" : "Dining area"}</div>
              <div className="space-words">
                <span>Performance</span>
                <span>{es ? "Misterio" : "Mystery"}</span>
                <span>{es ? "Interacción" : "Interaction"}</span>
              </div>
            </div>
            <div className="space">
              <div className="space-label">{es ? "Cocina" : "Kitchen"}</div>
              <div className="space-words">
                <span>{es ? "Laboratorio" : "Laboratory"}</span>
                <span>{es ? "Honesto" : "Honest"}</span>
                <span>{es ? "Prolijo" : "Tidy"}</span>
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "Materialidad" : "Materials"}</h3>
          <div className="body-text">
            <p>{es ?
              "Para los materiales elegimos la madera quemada con la técnica japonesa Shou Sugi Ban, la piedra, el metal y el barro. Cada uno con su temperatura, su textura, su personalidad. El contraste no era una metáfora: estaba en la pared, en la mesa, en el plato." :
              "For materials we chose burnt wood using the Japanese Shou Sugi Ban technique, stone, metal, and clay. Each one with its temperature, its texture, its personality. Contrast wasn't a metaphor: it was on the wall, on the table, on the plate."}</p>
            <p>{es ?
              "El branding acompañó esa misma lógica: sofisticado pero con personalidad. Sin pretensiones pero sin ingenuidad." :
              "Branding followed the same logic: sophisticated but with personality. Without pretension but without naivety."}</p>
          </div>
        </Reveal>

        <Reveal as="div" className="case-fullblock" style={{ paddingTop: 32 }}>
          <MaterialCarousel
            slides={[
            { id: "BRA-MAT-01", tag: es ? "Shou Sugi Ban · Madera quemada" : "Shou Sugi Ban · Burnt wood" },
            { id: "BRA-MAT-02", tag: es ? "Piedra · Recepción" : "Stone · Reception" },
            { id: "BRA-MAT-03", tag: es ? "Metal · Cocina" : "Metal · Kitchen" },
            { id: "BRA-MAT-04", tag: es ? "Barro · Vajilla" : "Clay · Tableware" }]
            } />
          
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "Lo que nos llevamos" : "What we took with us"}</h3>
          <div className="body-text">
            <p>{es ?
              "El proyecto no llegó a concretarse. Las urgencias de Dave terminaron siendo incompatibles con la metodología que él mismo había acordado. Quería ir más rápido de lo que habíamos pactado, y nuestra única condición desde el día uno había sido que el proceso se respetara." :
              "The project never got built. Dave's urgencies turned out to be incompatible with the methodology he himself had agreed to. He wanted to move faster than what we had agreed on, and our one condition from day one had been that the process be respected."}</p>
            <p>{es ?
              "Cerramos el vínculo dejándole todo el material necesario para seguir con otro equipo. Sin rencor, pero con algo de pena. Tiempo después, viendo el nuevo local de Dave ya abierto en Palermo, reconocimos muchas de las ideas que habíamos trabajado juntos. Eso fue suficiente." :
              "We closed the relationship leaving him all the material needed to continue with another team. No grudge, but a bit of sadness. Some time later, seeing Dave's new venue open in Palermo, we recognized many of the ideas we had worked on together. That was enough."}</p>
          </div>
        </Reveal>

        <Reveal as="section" className="case-fullblock">
          <div className="label" style={{ marginBottom: 24 }}>
            {es ? "Tres aprendizajes" : "Three lessons"}
          </div>
          <ol className="case-takeaways">
            <li>
              <span className="num">01</span>
              <h5 style={{ fontSize: "15px", fontFamily: "Geist", fontWeight: "600" }}>{es ? "Un proceso bien hecho deja valor aunque no llegue al final." : "A well-run process leaves value even if it doesn't reach the end."}</h5>
              <p style={{ margin: "10px 0px 0px" }}>{es ? "Las ideas no desaparecen cuando se rompe un vínculo." : "Ideas don't disappear when a relationship breaks."}</p>
            </li>
            <li>
              <span className="num">02</span>
              <h5 style={{ fontSize: "15px", fontFamily: "Geist", fontWeight: "600" }}>{es ? "Respetar la metodología no es capricho: es lo que garantiza coherencia." : "Respecting the methodology isn't a whim: it's what guarantees coherence."}</h5>
              <p style={{ margin: "10px 0px 0px" }}>{es ? "Sin eso, el diseño es decoración." : "Without it, design is decoration."}</p>
            </li>
            <li>
              <span className="num">03</span>
              <h5 style={{ fontSize: "15px", fontFamily: "Geist", fontWeight: "600" }}>{es ? "Trabajar con un cliente difícil enseña más que trabajar con uno fácil." : "Working with a difficult client teaches more than working with an easy one."}</h5>
              <p style={{ margin: "10px 0px 0px" }}>{es ? "Dave nos obligó a articular y defender cada decisión con mucha más claridad." : "Dave forced us to articulate and defend every decision with far more clarity."}</p>
            </li>
          </ol>

          <div className="case-tags">
            {(es ?
            ["Estrategia", "Branding", "Diseño de espacios", "Workshop", "Co-creación", "Gastronomía"] :
            ["Strategy", "Branding", "Space design", "Workshop", "Co-creation", "Gastronomy"]).
            map((t) => <span key={t} className="case-tag">{t}</span>)}
          </div>
        </Reveal>

        <Reveal as="section" style={{ padding: "clamp(48px, 9vw, 96px) 0 48px" }}>
          <h3 className="label" style={{ marginBottom: 32 }}>
            {es ? "Otros proyectos de branding" : "Other branding projects"}
          </h3>
          <div className="other-projects">
            {[
              { title: "Meridiano", sub: "2020 · Meridiano" },
              { title: "Delike", sub: "2020 · Foodbrainers" },
              { title: "Foodbrainers", sub: "2020 · Foodbrainers" },
              { title: "Debit Card", sub: "2020 · Openbank" },
              { title: "Esenses", sub: "2018 · Tridimage" },
              { title: "Cunnington", sub: "2017 · Tridimage" }
            ].map((p, i) => {
              const n = i + 1;
              return (
                <div key={n} className="project">
                  <Placeholder
                    tag={es ? `Proyecto ${String(n).padStart(2, "0")}` : `Project ${String(n).padStart(2, "0")}`}
                    id={`BRA-OTHER-${String(n).padStart(2, "0")}`}
                    className="ph-tall" />

                  <div className="meta">
                    <div className="title">{p.title}</div>
                    <div className="sub">{p.sub}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>

        {/*
                                                                 NOTE — The 6 placeholders above use ids BRA-OTHER-01–06.
                                                                 Replace the titles + sub fields with real project metadata when ready.
                                                                */}
      </div>

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

}
window.Branding = Branding;