/* Content + translations for the portfolio.
   Exposed on window so other Babel scripts can read it. */

const I18N = {
  pl: {
    chromeL: "● PORTFOLIO  /  WYDANIE 2026",
    chromeR: "",
    super: "super",
    product: "product",
    designer: "designer.",
    polaroidName: "Natalia Yockelle",
    polaroidSub: "Product Designer · Brand Builder · System Thinker",
    contactTitle: "// KONTAKT",
    labelMail: "MAIL",
    labelTel: "TEL",
    labelIn: "IN/",
    selectedWork: "wybrane projekty",
    sectionWork: "WYBRANE PROJEKTY",
    sectionTestimonials: "REKOMENDACJE",
    sectionContact: "KONTAKT",
    heroTagline: "Interdyscyplinarna projektantka z zamiłowaniem do prototypowania i rozwiązywania trudnych problemów. Ponad 10 lat doświadczenia w projektowaniu web, produktowym, brandingu i grafice. Z natury ciekawska, myślę systemowo, tworzę produkty, które robią różnicę.",
    available: "DOSTĘPNA OD CZERWCA 2026",
    hint: "Złap i przeciągnij dowolny element",
    readMore: "Czytaj",
    readCase: "Otwórz",
    tocLabel: "W tym studium",
    introLabel: "Wprowadzenie",
    nextLabel: "Następna rekomendacja",
    prevLabel: "Poprzednia rekomendacja",
    closeLabel: "Zamknij",
    cases: [
      {
        n: "01",
        title: "Mattereum — Product Redesign",
        meta: "PRODUCT DESIGN · 2022",
        desc: "Narzędzie wspierające zespoły produktowe w analizie insightów z badań użytkowników.",
        tags: ["PRODUCT DESIGN", "WEB3", "BRANDING"],
        tape: "pink",
      },
      {
        n: "02",
        title: "Black Keycard — Members Club",
        meta: "BRANDING · UX · 2019",
        desc: "Marka i produkt dla invite-only klubu supercarów — branding, web i system bookingu oparty na tokenach.",
        tags: ["BRANDING", "UX", "PRODUCT"],
        tape: "mint",
      },
      {
        n: "03",
        title: "Flownow — Produktowy Onboarding",
        meta: "ONBOARDING · 2024",
        desc: "Przeprojektowany onboarding przyspieszający pracę zespołu oraz zbieranie informacji od klientów.",
        tags: ["Onboarding", "Growth", "UX/UI"],
        tape: "blue",
      },
    ],
    testimonials: [
      {
        quote: "Z Natalią pracowaliśmy nad kilkoma projektami — web i produkt. Do każdego briefu podchodzi z otwartością i nastawieniem na rozwój. Jest szybka, niezawodna i rygorystyczna w myśleniu oraz wykonaniu. Bardzo techniczna i wszechstronna — z Natalią zawsze ponownie, bez wahania.",
        name: "Kate Pincott",
        position: "Head of Design",
        company: "Mattereum",
        photo: "assets/testimonial-1.jpeg",
        color: "pink",
      },
      {
        quote: "Natalia rozumie, jak marka i design ucieleśniają wartości produktu oraz historie, które chce on opowiadać. Pracujemy razem nad sklepem e-commerce dla naszego małego, rodzinnego biznesu. Przeprowadziła nas przez wszystkie etapy — identyfikację grupy docelowej, zrozumienie historii produktów i zbudowanie marki, która to wszystko obejmuje.",
        name: "Luke Wilson",
        position: "Engineer · Product Owner",
        company: "Freelancer",
        photo: "assets/testimonial-2.jpeg",
        color: "yellow",
      },
      {
        quote: "Praca Natalii nad Black Keycard w San Francisco była wybitna. Weszła w złożoną przestrzeń, gdzie luksus spotyka Web3, i zamieniła ją w klarowne, eleganckie, w pełni funkcjonalne doświadczenie cyfrowe. Wyróżnia ją umiejętność upraszczania tam, gdzie inne zespoły komplikują — usuwa tarcie, zamiast dokładać warstw. Efekt: produkt, który działa bez wysiłku, a jednocześnie oferuje głębię i bezpieczeństwo, jakich oczekuje się od ekosystemu krypto. Nie zaprojektowała tylko interfejsu — zbudowała pełną podróż użytkownika. Od onboardingu po codzienne użycie, każdy punkt styku był intencjonalny i intuicyjny, spójny z premium marką. Balans między estetyką a funkcjonalnością trzymała z prawdziwą precyzją. Natalia ma rzadką umiejętność: rozumie zarówno emocjonalną stronę luksusu, jak i techniczną stronę Web3. To połączenie trudno znaleźć — pozwoliło jej przełożyć abstrakcyjne koncepcje blockchainowe na coś, co ludzie naprawdę rozumieją i lubią używać. Jej dbałość o detal, klarowność w myśleniu produktowym i zdolność egzekucji na wysokim poziomie były kluczowe dla sukcesu projektu. Wprowadza strukturę tam, gdzie jest chaos, i prostotę tam, gdzie jest szum. Jeśli budujesz na styku technologii i premium experience, Natalia to nie tylko świetny wybór — to strategiczny atut.",
        name: "Patrick O'Reilly",
        position: "CEO",
        company: "Black Keycard",
        photo: "assets/testimonial-3.jpeg",
        color: "blue",
      },
    ],
  },
  en: {
    chromeL: "● PORTFOLIO  /  2026 EDITION",
    chromeR: "",
    super: "super",
    product: "product",
    designer: "designer.",
    polaroidName: "Natalia Yockelle",
    polaroidSub: "Product Designer · Brand Builder · System Thinker",
    contactTitle: "// CONTACT",
    labelMail: "MAIL",
    labelTel: "TEL",
    labelIn: "IN/",
    selectedWork: "selected work",
    sectionWork: "SELECTED WORK",
    sectionTestimonials: "REVIEWS",
    sectionContact: "GET IN TOUCH",
    heroTagline: "Interdisciplinary designer with a love for prototyping and solving hard problems. 10+ years across web, product, brand, and visual design. Curious by default, system thinker, building products that make a difference.",
    available: "AVAILABLE FROM JUNE 2026",
    hint: "Pick up and drag anything",
    readMore: "Read",
    readCase: "Open",
    tocLabel: "In this study",
    introLabel: "Intro",
    nextLabel: "Next testimonial",
    prevLabel: "Previous testimonial",
    closeLabel: "Close",
    cases: [
      {
        n: "01",
        title: "Mattereum — Product Redesign",
        meta: "PRODUCT DESIGN · 2022",
        desc: "A tool that helps product teams turn user research into actionable insight.",
        tags: ["PRODUCT DESIGN", "WEB3", "BRANDING"],
        tape: "pink",
      },
      {
        n: "02",
        title: "Black Keycard — Members Club",
        meta: "BRANDING · UX · 2019",
        desc: "Brand and product for an invite-only supercar club — identity, web and a token-based booking system.",
        tags: ["BRANDING", "UX", "PRODUCT"],
        tape: "mint",
      },
      {
        n: "03",
        title: "Flownow — Product Onboarding",
        meta: "ONBOARDING · 2024",
        desc: "A redesigned onboarding flow accelerating team workflow and new-customer intake.",
        tags: ["Onboarding", "Growth", "UX/UI"],
        tape: "blue",
      },
    ],
    testimonials: [
      {
        quote: "Nat and I have worked together on several projects across web and product. She comes to each brief with an open and a growth mindset. She is fast, dependable and rigorous across both her thinking and execution of design. Being strongly technical and highly adaptable I'd work with Nat again in a heartbeat.",
        name: "Kate Pincott",
        position: "Head of Design",
        company: "Mattereum",
        photo: "assets/testimonial-1.jpeg",
        color: "pink",
      },
      {
        quote: "Natalia really gets how the brand and design really embody the values of a product and the stories it seeks to tell. We're collaborating on an e-commerce site for our small family business, and she's taken us through all the steps of identifying our target audience, understanding the stories we wish to tell with our products, and crafting a brand which encapsulates this.",
        name: "Luke Wilson",
        position: "Engineer · Product Owner",
        company: "Freelancer",
        photo: "assets/testimonial-2.jpeg",
        color: "yellow",
      },
      {
        quote: "Natalia's work on Black Keycard in San Francisco was nothing short of exceptional. She stepped into a complex space where high-end luxury meets Web3 and turned it into a clear, elegant, and highly functional digital experience.\n\nWhat stood out immediately was her ability to simplify what most teams overcomplicate. Instead of adding layers, she removed friction. The result was a product that feels effortless to use, while still delivering the depth and security expected from a crypto-native ecosystem.\n\nShe didn't just design an interface. She built a full user journey. From onboarding to daily usage, every touchpoint was intentional, intuitive, and aligned with a premium brand experience. The balance between aesthetics and functionality was handled with real precision.\n\nNatalia has a rare skill. She understands both the emotional side of luxury and the technical side of Web3. That combination is hard to find. It allowed her to translate abstract blockchain concepts into something people can actually understand and enjoy using.\n\nHer attention to detail, clarity in product thinking, and ability to execute at a high level made her a key part of the project's success. She brings structure where there is chaos, and simplicity where there is noise.\n\nIf you are building at the intersection of technology and premium experience, Natalia is not just a great choice. She is a strategic asset.",
        name: "Patrick O'Reilly",
        position: "CEO",
        company: "Black Keycard",
        photo: "assets/testimonial-3.jpeg",
        color: "blue",
      },
    ],
  },
};

const CONTACT = {
  mail: "natalia@yockelle.com",
  tel: "+48 661 887 685",
  linkedin: "linkedin.com/in/yockelle",
  mailHref: "mailto:natalia@yockelle.com",
  telHref: "tel:+48661887685",
  linkedinHref: "https://www.linkedin.com/in/yockelle/",
};

/* SVG case study art — rendered as an inline <svg> child so we don't
   depend on background-image url(data:...) which struggles in some
   screenshot pipelines. */
function CaseArt({ palette, label }) {
  const [a, b, c] = palette;
  const pid = `p-${label.replace(/[^a-z0-9]/gi, "")}`;
  return (
    <svg viewBox="0 0 300 300" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" style={{ display: "block", position: "absolute", inset: 0 }}>
      <defs>
        <pattern id={pid} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
          <rect width="14" height="14" fill={a} />
          <rect width="7" height="14" fill={b} />
        </pattern>
      </defs>
      <rect width="300" height="300" fill={a} />
      <rect width="300" height="300" fill={`url(#${pid})`} opacity="0.55" />
      <rect x="30" y="36" width="240" height="228" rx="8" fill={c} opacity="0.96" />
      <rect x="52" y="58" width="124" height="14" rx="3" fill={a} opacity="0.65" />
      <rect x="52" y="82" width="196" height="8" rx="3" fill={a} opacity="0.35" />
      <rect x="52" y="100" width="160" height="8" rx="3" fill={a} opacity="0.35" />
      <rect x="52" y="132" width="196" height="100" rx="6" fill={a} opacity="0.2" />
      <circle cx="90" cy="186" r="22" fill={b} opacity="0.85" />
      <rect x="124" y="170" width="110" height="10" rx="3" fill={a} opacity="0.55" />
      <rect x="124" y="190" width="80" height="8" rx="3" fill={a} opacity="0.35" />
      <text x="150" y="252" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="13" letterSpacing="2" fill={a} opacity="0.65">{label}</text>
    </svg>
  );
}

const CASE_PALETTES = [
  { palette: ["#e94f2e", "#f0ff3d", "#1b1a17"], label: "MATTEREUM" },
  { palette: ["#1b1a17", "#f0ff3d", "#f4efe2"], label: "KEYCARD" },
  { palette: ["#2956d8", "#f4efe2", "#e94f2e"], label: "FLOWNOW" },
];

window.I18N = I18N;
window.CONTACT = CONTACT;
window.CASE_PALETTES = CASE_PALETTES;
window.CaseArt = CaseArt;
