// Case study pages — shared template + per-project data

// ── Per-project data ─────────────────────────────────────────────────────────

const CASE_DATA = {

  "web-ui": { navLabel: "Interface designs" },

  "baby-food": {
    navLabel: "Baby food",
    eyebrow: "UI/UX Case study",
    title: "Baby food.",
    lede: "A monthly food subscription service for little ones. Designed for tired parents who shop on their phones at 2 a.m.",
    facts: [
    { label: "Role", value: "Product & Graphic designer" },
    { label: "Team", value: "20 people" },
    { label: "Year", value: "2018" }],

    heroImg: { src: "assets/baby-main.png", alt: "Baby food subscription mobile app onboarding flow", style: { width: "100%", height: "100%", objectFit: "contain" } },
    heroImgBg: "rgba(244,247,248,0)",
    overview: {
      tag: "Overview",
      title: "The full picture, from purée to pixel.",
      body: ["One of the first projects where I encountered the complete approach to building a brand from scratch, from designing the user experience of an app to creating its graphic elements.",
      "A group of people and technologists came together and decided to produce and sell baby food made from 100% natural ingredients, with no additives.",
      "This app was used mostly by mothers with young children, who signed up for weekly or monthly subscriptions to receive packages of baby food."]
    },
    role: {
      tag: "My main role", tagColor: "bf-tag-blue",
      title: "Make subscriptions feel effortless.",
      body: ["To create a perfect experience for modifying food packages and managing weekly or monthly subscriptions.",
      "What did we know? That this app is used mostly by mothers, who have little time to shop for things on their phone."]
    },
    challenges: {
      tag: "Advantages & challenges", tagColor: "bf-tag-green",
      title: "One free box, then a long-term decision.",
      body: ["This product stood out because everyone could start by ordering one free box containing all the products, so they could try them out first before deciding whether to sign up for a monthly subscription.",
      "What was challenging was how to create a simple and short experience for setting up a subscription with the desired products and different quantities of products in the boxes."]
    },
    process: {
      tag: "Subscription process", tagColor: "bf-tag-purple",
      title: "A wizard, one decision at a time.",
      intro: "This is a walkthrough of creating an order. The user goes through a wizard where they define, step by step, what they need for their baby. Some of these screens are scrollable.",
      steps: [
      { num: "01", title: "Baby name", img: "assets/baby-1-name.jpg", desc: "We ask for the baby's name so the user has a pleasant experience with the app. All the following steps will be tailored to the baby. We added a progress bar so the user has a sense of how much is left until the end of the process." },
      { num: "02", title: "Additional information", img: "assets/baby-2-info.jpg", desc: "We ask for the baby's age so we can create a box with food suited to that age." },
      { num: "03", title: "E-mail", img: "assets/baby-3-email.jpg", desc: "At this step, we ask for the user's email so we can create future shipments." },
      { num: "04", title: "Subscription box", img: "assets/baby-4-subscription.jpg", desc: "At this step, the user chooses the type of food for their baby. They can have just purée, just puffs, or a combination of both." },
      { num: "05", title: "Taste chooser", img: "assets/baby-5-taste.jpg", desc: "Here, the user chooses what their child likes most: whether it's just fruit, just vegetables, or maybe a combination of the two." },
      { num: "06", title: "Quantity", img: "assets/baby-6-quantity.jpg", scrollable: true, desc: "The amount of food here is automatically adjusted and suggested based on the baby's age and the options the user has chosen. The user is also able to modify the amount and change meals.\n\nEach product has an info icon next to it, where you can get information about that specific meal." },
      { num: "07", title: "Delivery interval", img: "assets/baby-7-interval.jpg", desc: "Here, the user chooses how many boxes they'll receive per month. The options are 1, 2, or 4 boxes per month. We also made sure to calculate for the user how many purée servings per day that comes out to for the baby." },
      { num: "08", title: "Delivery date", img: "assets/baby-8-date.jpg", scrollable: true, desc: "At this step, the user chooses when the first delivery will be." },
      { num: "09", title: "Delivery data", img: "assets/baby-9-data.jpg", scrollable: true, desc: "At this step, the user enters their delivery details." },
      { num: "10", title: "Order summary", img: "assets/baby-10-summary.jpg", scrollable: true, desc: "The last step before payment. The user is able to see exactly what will be delivered and when. The marketing team also got involved here, constantly hitting us up with extra perks like, for example, a discount coupon." }]

    },
    learnings: {
      tag: "What did I learn from this project?", tagColor: "bf-tag-orange",
      title: "End to end, every segment of the product.",
      body: "I learned how to take a detailed approach to planning and solving tasks, and how to thoroughly carry out the implementation plan for them. On this team, I was in touch with every segment of the product, from the purées themselves to collaborating with product owners and the marketing team."
    },
    floaters: [
    { src: "assets/food-apple.png", width: 240, top: "8%", left: "3%", delay: "0s", dur: "9s", r: "-15deg" },
    { src: "assets/food-banana.png", width: 280, top: "18%", right: "2%", delay: "-3s", dur: "11s", r: "20deg" },
    { src: "assets/food-broccoli.png", width: 220, top: "55%", left: "1%", delay: "-5s", dur: "10s", r: "8deg" },
    { src: "assets/food-carrot.png", width: 260, top: "70%", right: "3%", delay: "-1.5s", dur: "12s", r: "-25deg" },
    { src: "assets/food-mango.png", width: 200, top: "38%", left: "2%", delay: "-7s", dur: "8s", r: "12deg" },
    { src: "assets/food-spoon.png", width: 180, top: "82%", left: "6%", delay: "-4s", dur: "13s", r: "-30deg" },
    { src: "assets/food-apple.png", width: 160, top: "90%", right: "5%", delay: "-2s", dur: "10s", r: "18deg" },
    { src: "assets/food-banana.png", width: 200, top: "5%", right: "8%", delay: "-6s", dur: "9s", r: "-10deg" }]

  },

  "consultation": {
    navLabel: "Consulting services",
    eyebrow: "UX Case study",
    title: "Consulting services.",
    lede: "Online consultations for startups and small businesses. Designed so founders book a call the way they actually think.",
    facts: [
    { label: "Role", value: "Product Designer" },
    { label: "Team", value: "3 people" },
    { label: "Year", value: "2020" }],

    heroImg: { src: "assets/consult-hero.png", alt: "Consulting services platform for startups and small businesses", style: { width: "100%", height: "100%", objectFit: "contain" } },
    heroImgBg: "transparent",
    overview: {
      tag: "Overview",
      title: "A complete redesign of the online consulting app.",
      body: ["One of the interesting projects I had was to do a complete redesign of the Online consulting service app. This application was helping startups, entrepreneurs and small and mid-sized companies to start a business.",
      "A group of experts was providing qualified advice for all kinds of business topics. With an option to schedule online meetings, the user was able to find out everything that is needed for starting up a business, expanding the team and managing finances."]
    },
    role: {
      tag: "My main role", tagColor: "bf-tag-blue",
      title: "Design the best possible user flow.",
      body: ["My role was to create the best possible user flow in collaboration with the product owner. We will use a scenario where the goal for the user will be to book a session with an expert.",
      "Also to create a prototype for desktop and mobile versions."]
    },
    challenges: {
      tag: null, tagColor: "bf-tag-green",
      title: "Blueprint.",
      body: ["UX strategy blueprint is really important for every team member to realize what a new project is all about. With Blueprint, we can define and set up challenges, focus areas and guiding principles in our new strategy.",
      "And most important of all, for me, is to define and set Design rules. We have to follow our design rules and principles to create the best possible easy-to-use application."],
      img: "assets/consult-blueprint.jpg"
    },
    extraSections: [
    {
      title: "Design rules.",
      body: "From the established blueprint, we determined the following design rules:",
      list: ["Our services are a joy to use.", "All pieces of information must be transparent.", "Simple, understandable and fast."]
    },
    {
      title: "User journey walkthrough.",
      body: "We started with one scenario. From the searching phase, experience on the website to conversion. We have noted possible thoughts and needs for every action. Using User Journey walkthrough we can identify good or bad parts of the experience. It looks like this:",
      img: "assets/consult-user-journey.png"
    }],

    process: {
      tag: "Booking process", tagColor: "bf-tag-purple",
      title: "Mobile wireframes.",
      intro: "Using this User Journey we were able to create our first wireframes.",
      steps: [
      { num: "01", title: "Topics page", img: "assets/consult-1-topics.jpg", desc: "The user would land on a page where they could choose the topic they need in order to expand their knowledge of the business." },
      { num: "02", title: "Selection", img: "assets/consult-2-selection.jpg", scrollable: true, desc: "On this page, the user gets direct information about the chosen topic. They can also see who the expert will be that helps them gain knowledge about the business. Here they can also see all the information about the meeting that will take place and everything that meeting includes." },
      { num: "03", title: "Session", img: "assets/consult-3-session.jpg", scrollable: true, desc: "On the next page, the user books a session with the chosen topic and the chosen expert. They pick an available date and time." },
      { num: "04", title: "Register", img: "assets/consult-4-register.jpg", desc: "For the login page, it was important to us to clearly present all the options included if you want to register." },
      { num: "05", title: "Create account", img: "assets/consult-5-create-account.jpg", scrollable: true, desc: "Of course, the user is also able to create a new account." },
      { num: "06", title: "Payment", img: "assets/consult-6-payment.jpg", scrollable: true, desc: "The payment step. Here, it was important to us that every piece of information be clearly visible and transparent." },
      { num: "07", title: "Thank you page", img: "assets/consult-7-thankyou.jpg", desc: "On this page, we clearly let the user know that they had successfully completed registration and service selection." },
      { num: "08", title: "Next", img: "assets/consult-8-next.jpg", scrollable: true, desc: "On the My Services page, the user could see, in full detail, exactly what would happen and when." }]


    },
    learnings: {
      tag: "What did I learn from this project?", tagColor: "bf-tag-orange",
      title: "Set standards early, ship faster.",
      body: "I learned how important it is to set standards and rules at the very start of a project. How important it is to take a detailed approach and clearly and loudly note down what we want to achieve. By doing this, we cut down the time spent trying to figure out what we can do, how much we can do, and how quickly we can get something done."
    },
    postProcess: {
      tag: "Challenges", tagColor: "bf-tag-orange",
      title: "Registration and payment, done right.",
      body: ["The user would, of course, receive emails about the various steps they needed to complete. The biggest problem was how to nicely handle registration if the user is new, since they would need to confirm the email and how to bring them back to the step they were already on.",
      "Another challenge was how to simplify the payment process to be as straightforward as possible, without a lot of waiting or jumping from page to page."]
    },
    floaters: [
    { src: "assets/food-apple.png", width: 220, top: "10%", left: "2%", delay: "0s", dur: "9s", r: "-10deg" },
    { src: "assets/food-mango.png", width: 200, top: "40%", right: "2%", delay: "-4s", dur: "11s", r: "15deg" },
    { src: "assets/food-spoon.png", width: 160, top: "70%", left: "3%", delay: "-6s", dur: "10s", r: "8deg" },
    { src: "assets/food-carrot.png", width: 180, top: "80%", right: "4%", delay: "-2s", dur: "12s", r: "-20deg" }]

  },

  "realestate": {
    navLabel: "Real estate",
    eyebrow: "UX Case study",
    title: "Real estate.",
    lede: "Communication between real-estate agents and their clients, faster than WhatsApp.",
    facts: [
    { label: "Role", value: "UI / UX Designer" },
    { label: "Team", value: "5 people" },
    { label: "Year", value: "2020" }],

    heroImg: { src: "assets/realestate-hero.jpg", alt: "Real estate communication app for agents and clients", style: { width: "100%", height: "100%", objectFit: "cover" } },
    heroImgBg: "transparent",
    overview: {
      tag: "Overview",
      title: "A CRM redesign with 3500 users already on board.",
      body: [
      "When I started working on this project, I came across an application where a lot of things were already set up. This application was a CRM for real estate agents. My idea was to walk through every segment of the application and get familiar with all features, and what were the things that could change and improve.",
      "The biggest challenge was how to convince stakeholders what was wrong and what needed to be changed, while not compromising the already existing user experience. The app already had over 3500 users, who were used to the old app and existing actions. The biggest problem was changing components that would drastically affect the design of the system that already existed.",
      "I came up with the idea to make a document in which I recorded my observations. I will present only a few first rows of a document."]

    },
    role: {
      tag: "The document", tagColor: "bf-tag-blue",
      title: "Recording observations, one row at a time.",
      body: [
      "The document consisted of seven columns. The first two columns are activity and a page with a bad example. The third and fourth was a description of the problem I encountered, and a screenshot of the same. In the last three columns, I have noted possible suggestions on how to solve the problem and the complexity of the task and how much it could affect the existing design.",
      "This document has helped the Product Owner to make the request clearer and to present to others what the potential problems are."],

      img: "assets/realestate-document.jpg"
    },
    challenges: {
      tag: "The challenge", tagColor: "bf-tag-green",
      title: "Bridging agents and clients.",
      body: [
      "One of the many tasks I've had on this project was to improve communication between agents and users. The agents were able to see in their database which objects fit which user. But there was no way to communicate with them except to call them or send them the desired objects on e-mail.",
      "We came up with the idea to create a system where the Agent will be able to submit proposals of objects in a web form in which users will have a better overview of suggested objects.",
      "Sitemap looked like this:"],

      img: "assets/realestate-user-journey.jpg"
    },
    process: {
      tag: "Agent flow", tagColor: "bf-tag-purple",
      title: "Mobile wireframes.",
      intro: "A walkthrough of the key screens built for the agent–client communication flow.",
      screenHeight: 590,
      preSections: [
      {
        title: "Agent",
        body: "The agent could choose specific properties and select which ones to send to a potential client.",
        img: "assets/realestate-agent.jpg"
      },
      {
        title: "Client",
        body: "The client could review the agent's suggestions and rate them. They would receive an email containing the agent's proposal.",
        img: "assets/realestate-client.jpg"
      }],

      steps: [
      { title: "Properties list", img: "assets/realestate-properties-list.jpg", scrollable: true, desc: "When they tried to check what the agent had sent them, the user could go from property to property and get detailed information about what was offered." },
      { title: "Property view", img: "assets/realestate-property-view.jpg", scrollable: true, desc: "Detailed view of a single property. The user could send a response back to the agent saying whether they like it or not. A sticky section at the bottom of the page would help them decide." },
      { title: "Decline", img: "assets/realestate-decline.jpg", scrollable: true, desc: "The client could send a clear response to the agent, whether they like the property or not." },
      { title: "Message", img: "assets/realestate-message.jpg", scrollable: true, desc: "If the client had any additional questions, they could send them directly to the agent. The agent would then ultimately get in touch with them by phone." },
      { title: "Approval", img: "assets/realestate-approval.jpg", scrollable: true, desc: "If the client confirms that they like this property, the agent would receive a message and could contact the client about the next steps." },
      { title: "Search result", img: "assets/realestate-profile-search.jpg", scrollable: true, desc: "The client could also view a list of their created search filters and modify them on their profile page. Depending on what the client entered here, the agent could choose what to send to the potential client." },
      { title: "Profile page", img: "assets/realestate-profile-page.jpg", scrollable: true, desc: "The client could modify their information in the database." }]
    },
    learnings: {
      tag: "What did I learn from this project?", tagColor: "bf-tag-orange",
      title: "Two sides, one clear conversation.",
      body: "So we have created a system where it will be much easier for the user to communicate with the Agent and vice versa.\n\nThe agent will be able to choose between two options. The first option is to send the user only a search query.\n\nAfter the user completes the query and clicks on the save button, the agent will be able to see possible matches in their database.\n\nThe user will also be able to view the matches on his small website and will be able to rate the proposed object on the buttons for like or dislike."
    },
    floaters: [
    { src: "assets/food-broccoli.png", width: 220, top: "8%", left: "2%", delay: "0s", dur: "10s", r: "5deg" },
    { src: "assets/food-banana.png", width: 240, top: "30%", right: "2%", delay: "-3s", dur: "9s", r: "-12deg" },
    { src: "assets/food-apple.png", width: 180, top: "65%", left: "1%", delay: "-5s", dur: "11s", r: "20deg" },
    { src: "assets/food-spoon.png", width: 160, top: "85%", right: "3%", delay: "-7s", dur: "13s", r: "-8deg" }]

  },

  "travel": {
    navLabel: "Travel app",
    eyebrow: "UI/UX Case study",
    title: "Travel app.",
    lede: "Reserving and discovering travel destinations for young people, built around how Gen-Z actually plans trips.",
    facts: [
    { label: "Role", value: "Graphic, UI, UX Design" },
    { label: "Team", value: "6 people" },
    { label: "Year", value: "2021" }],

    heroImg: { src: "assets/travel-hero.jpg", alt: "Travel reservation and discovery web app for young travellers", style: { width: "100%", height: "100%", objectFit: "cover" } },
    heroImgBg: "transparent",
    overview: {
      tag: "Overview",
      title: "A piece of the puzzle.",
      body: [
      "This is where it all started. But absolutely everything.",
      "I was chilling one hot summer afternoon back in 2009 in a pub where my friend Bogi was working behind the bar. He was also a co-owner of the Puzzle travel agency. I was complaining about how I had nowhere to go to the seaside that summer. He asked me to come along with him and be a tour guide on the trip. That's where my career as an animator and tour guide began, which then flowed into becoming the graphic designer for that same agency. From there, the director, Ćoso, sent me to help his close friend Marko at another company, where I'd be a UI designer. In the meantime, I developed a strong interest in user experience.",
      "And now, here I am."]

    },
    role: {
      tag: "My main role", tagColor: "bf-tag-blue",
      title: "Redesign for the mobile generation.",
      body: [
      "To redesign the existing website and adapt the user experience for young people.",
      "Why was the look on mobile so important? Because everyone they talked to (and I mean literally everyone) was viewing the site on their phone. No one ever turned on a computer. So we looked at how to simplify it."]

    },
    challenges: {
      tag: "About Puzzle", tagColor: "bf-tag-green",
      title: "Young people, big energy, tight budgets.",
      body: [
      "Puzzle is a travel agency aimed mostly at young people and students who want to travel on a budget with a group of their peers. Craziness, fun, and parties were generally the hallmarks of these trips, both at the seaside and on winter holidays."],

      img: "assets/travel-puzzle.jpg"
    },
    process: {
      tag: "User flow", tagColor: "bf-tag-purple",
      title: "Mobile wireframes.",
      intro: "A walkthrough of the full user journey, from landing on the homepage all the way to paying for a trip and reading about it in the magazine.",
      steps: [
      { num: "01", title: "Main page", img: "assets/travel-1-main.jpg", scrollable: true, desc: "The young user lands on the homepage. At the top of the page, they can filter for what interests them, destination type and trip duration. Below that, they can see all upcoming trips in one place, along with flash deals, featured destinations, and a preview of the magazine." },
      { num: "02", title: "Trips page", img: "assets/travel-2-trips.jpg", scrollable: true, desc: "This is the trip results page, a list of available trips filtered by the user's preferences. Each card shows the destination photo, trip duration, last-minute availability notice, original and discounted price, with quick Reserve and Details actions." },
      { num: "03", title: "Detailed trip description", img: "assets/travel-3-trip-detail.jpg", scrollable: true, desc: "A full description of a single trip, including all pricing tiers by date range and accommodation type, what's included and excluded in the price, video, photo gallery, day-by-day program, and available excursions." },
      { num: "04", title: "Accommodation", img: "assets/travel-4-accommodation.jpg", scrollable: true, desc: "A detailed view of a single accommodation: photos, description, and a pricing table broken down by room type. What made these special is that the user could start a free reservation for the trip and that accommodation at any time, with no upfront payment." },
      { num: "05", title: "Reservation", img: "assets/travel-5-reservation.jpg", scrollable: true, desc: "To make a reservation, the user enters their booking details: travel date, accommodation, room type, name, email, and phone number. After submitting, they are contacted by an agent who calls them and walks them through the next steps." },
      { num: "06", title: "Payment", img: "assets/travel-6-payment.jpg", scrollable: true, desc: "The user could also choose to pay for their accommodation online and receive a 10% discount. The same pricing table is shown, but clicking a price initiates the payment flow rather than the free reservation." },
      { num: "07", title: "Magazine", img: "assets/travel-7-magazine.jpg", scrollable: true, desc: "Puzzle had plenty of articles that blended life and travel into one. The magazine page shows a categorised list of articles, each with a cover photo, category tag, title, date, excerpt, and a read more link." },
      { num: "08", title: "A single article", img: "assets/travel-8-article.jpg", scrollable: true, desc: "A full article view with a hero image, category tag, social sharing, author credit, body text, inline imagery, tag cloud, and a horizontally scrollable related articles section at the bottom." }]
    },
    learnings: {
      tag: "What did I learn from this project?", tagColor: "bf-tag-orange",
      title: "Know your users, then design around them.",
      body: "Working on Puzzle taught me how much context matters before a single pixel is drawn. The entire redesign was driven by one simple observation: every single user was on their phone. From that, everything else followed: the filter-first homepage, the quick-reserve flow, the free booking with a callback instead of a complex checkout.\n\nI also learned how to balance business goals with user needs. The 10% online payment discount was a clever incentive that worked for both sides. And the magazine wasn't just content. It was a trust-builder that kept young travellers coming back."
    },
    floaters: [
    { src: "assets/food-mango.png", width: 230, top: "6%", left: "2%", delay: "0s", dur: "9s", r: "10deg" },
    { src: "assets/food-carrot.png", width: 250, top: "25%", right: "2%", delay: "-4s", dur: "11s", r: "-18deg" },
    { src: "assets/food-broccoli.png", width: 190, top: "60%", left: "2%", delay: "-2s", dur: "10s", r: "6deg" },
    { src: "assets/food-banana.png", width: 210, top: "78%", right: "3%", delay: "-6s", dur: "12s", r: "-8deg" }]

  },

  "luxury-watch": {
    navLabel: "Luxury Watch App",
    eyebrow: "UI/UX Case study",
    title: "Luxury Watch App.",
    lede: "A mobile app for watch enthusiasts and passionate collectors, designed from scratch, including a full design system built in lockstep with the front-end team.",
    facts: [
    { label: "Role", value: "UI / UX Designer" },
    { label: "Deliverable", value: "Design System + App" },
    { label: "Year", value: "2024" },
    { label: "Award", value: "2× Swiss Design 2025" }],

    heroImg: { src: "assets/Luxury Watch App Hero.jpg", alt: "Luxury watch mobile app, designed from scratch with a full design system", style: { width: "100%", height: "100%", objectFit: "cover" } },
    heroImgBg: "#5b5bd6",
    overview: {
      tag: "Overview",
      title: "Made with love, from scratch.",
      body: [
      "The last project I was working on was one of the most exciting of my career, and truly made with love. I was tasked with designing a mobile app for watch enthusiasts and passionate collectors of handwatches.",
      "What made this project particularly meaningful to me was the opportunity to design everything from scratch. This included building the entire design system from the ground up, a system mutually supported by both the design team and the front-end team, allowing everyone to work with the same naming conventions and ultimately produce a cohesive, beautiful front-end experience."]

    },
    role: {
      tag: "Project constraints", tagColor: "bf-tag-blue",
      title: "Working within a luxury identity.",
      body: [
      "From the very beginning, we had clear boundaries to work within. The app needed to follow the brand identity of one of the most famous luxury watch retailers in the world, which meant every design decision had to align with their established visual language."]

    },
    challenges: {
      tag: "The challenge", tagColor: "bf-tag-green",
      title: "Creativity within constraints.",
      body: [
      "The most challenging aspect of the project was finding the balance between creativity and brand compliance, pushing the design forward while staying faithful to guidelines that carried a distinct note of luxury identity."]

    },
    process: {
      tag: "Mobile frames", tagColor: "bf-tag-purple",
      title: "The features.",
      intro: "We developed several standout features for collectors.",
      steps: [
      { title: "Digital Collection", img: "assets/Digital collection.jpg", scrollable: true, desc: "Users could create digital profiles of their own watches, complete with all the necessary documentation in one place: guarantees, manuals, and insurance receipts. For users already registered in the company's system, their collection was prepared in advance and pulled directly from the database." },
      { title: "Insurance", img: "assets/Insurance.jpg", scrollable: true, desc: "Users could insure their beloved watch collection directly through the app, giving collectors peace of mind without leaving the platform. One key benefit was the ability to insure multiple watches at once, with the entire process handled inside the app, with no need to contact or visit the insurance group directly." },
      { title: "Sell-to-Company", img: "assets/Sell to company.jpg", scrollable: true, desc: "Users had the option to sell their watches directly to the company. As part of the flow, users could request an estimation and then choose to accept or reject the offer. Once agreed, they could arrange a shipment or bring it in personally, whichever felt right for them." },
      { title: "Watch Services", img: "assets/Watch services.jpg", scrollable: true, desc: "Users could book an appointment to bring their watch in for servicing, ensuring their pieces stayed in pristine condition with the same trusted hands that knew them best." },
      { title: "Agent Appointments", img: "assets/Agent Appointments.jpg", scrollable: true, desc: "Users were able to book an appointment with an agent to explore a specific watch or piece of jewelry, turning the discovery process into a personal, guided experience." },
      { title: "Collection Marketplace", img: "assets/Collection marketplace.jpg", scrollable: true, desc: "The flagship feature, allowing users to track their entire collection on a dedicated marketplace and stay informed about the value and movement of their pieces." }]

    },
    recognition: {
      tag: "Recognition",
      title: "2025 Swiss Design Competition.",
      body: "One of the most rewarding outcomes of this project was being recognized at the 2025 Swiss design competition, a testament to the care, craftsmanship, and collaboration that went into building this app.",
      awards: [
      { place: "3rd Prize", category: "User Experience Design" },
      { place: "3rd Prize", category: "Design Overall" }],
      certs: [
      { src: "assets/Award-User-experience-small.jpg", alt: "Best of Swiss Apps 2025 – User Experience Bronze" },
      { src: "assets/Award-Design-small.jpg", alt: "Best of Swiss Apps 2025 – Design Bronze" }]


    },
    learnings: {
      tag: "What did I learn from this project?", tagColor: "bf-tag-orange",
      title: "A system that outlives the project.",
      body: "Building an entire design system from scratch while simultaneously designing the product taught me that the two can't be separated. Every component decision is a system decision. Every naming choice is a handshake with the developer who'll implement it.\n\nWorking within the constraints of a world-class luxury brand also sharpened my understanding of restraint, knowing when to push and when to let the brand speak."
    },
    floaters: []
  }

};

// ── Shared components ─────────────────────────────────────────────────────────

function ImgSkeleton({ src, alt, imgStyle, fetchpriority, loading, decoding, onLoad, ...rest }) {
  const [loaded, setLoaded] = React.useState(false);
  const imgRef = React.useRef(null);

  // If image is already cached, skip skeleton immediately after mount
  React.useEffect(() => {
    if (imgRef.current && imgRef.current.complete && imgRef.current.naturalWidth > 0) {
      setLoaded(true);
    }
  }, [src]);

  return (
    <React.Fragment>
      {!loaded && <div className="sk-shimmer" />}
      <img
        ref={imgRef}
        src={src} alt={alt}
        fetchpriority={fetchpriority}
        loading={loading}
        decoding={decoding || "async"}
        style={{ ...imgStyle, opacity: loaded ? 1 : 0, transition: 'opacity .4s ease, transform 1.1s cubic-bezier(.22,1,.36,1)', willChange: 'transform, opacity' }}
        onLoad={() => {setLoaded(true);onLoad && onLoad();}}
        {...rest} />
      
    </React.Fragment>);

}
Object.assign(window, { ImgSkeleton });

function MobileFrame({ src, alt, scrollable, screenHeight }) {
  const height = screenHeight || 580;
  const isPlaceholder = !src || src.startsWith("placeholder:");
  const label = isPlaceholder ? (src || "").replace("placeholder:", "") || alt : null;
  return (
    <div className="bf-phone" style={{ width: "350px", padding: "4px", borderRadius: "30px", backgroundColor: "rgb(204, 212, 215)" }}>
      <div className="bf-phone-screen" style={{ overflowY: scrollable ? "auto" : "hidden", height: height }}>
        {isPlaceholder ?
        <div style={{
          width: "100%", height: "100%", background: "#f0f2f4",
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          gap: 12, padding: 24
        }}>
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
              <rect x="4" y="4" width="40" height="40" rx="8" fill="#dde1e5" />
              <rect x="14" y="14" width="20" height="14" rx="3" fill="#b0b8c1" />
              <circle cx="24" cy="34" r="4" fill="#b0b8c1" />
            </svg>
            <span style={{ fontFamily: "ui-monospace,monospace", fontSize: 11, color: "#8a9199", textAlign: "center", textTransform: "uppercase", letterSpacing: ".1em", lineHeight: 1.4 }}>{label}</span>
          </div> :

        <ImgSkeleton src={src} alt={alt} loading="lazy" imgStyle={{ width: "100%", height: scrollable ? "auto" : "100%", objectFit: scrollable ? "unset" : "cover", objectPosition: "top", display: "block" }} />
        }
      </div>
    </div>);

}

function HeroImgPlaceholder({ label }) {
  return (
    <div style={{
      width: "100%", height: "100%", minHeight: 320,
      background: "#eceef1",
      borderRadius: 32,
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      gap: 16
    }}>
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
        <rect x="8" y="8" width="64" height="64" rx="16" fill="#d4d9df" />
        <rect x="22" y="22" width="36" height="24" rx="6" fill="#aab2bb" />
        <circle cx="40" cy="56" r="7" fill="#aab2bb" />
      </svg>
      <span style={{ fontFamily: "ui-monospace,monospace", fontSize: 12, color: "#8a9199", textTransform: "uppercase", letterSpacing: ".12em" }}>{label}</span>
    </div>);

}

// ── Generic case study template ───────────────────────────────────────────────

function CaseStudyContent({ caseId, onClose, stories, index, setIndex }) {
  if (caseId === "web-ui") {
    return <InterfaceDesignsContent onClose={onClose} stories={stories} index={index} setIndex={setIndex} />;
  }
  const d = CASE_DATA[caseId];
  if (!d) return null;
  const nextStory = stories && index < stories.length - 1 ? stories[index + 1] : null;

  return (
    <React.Fragment>
      {/* Floating background images — disabled */}
      {false && d.floaters.map((item, i) => null)}

      {/* Nav bar */}
      <div className="sub-bar">
        <button className="back-btn" onClick={onClose}>
          <Ico name="arrow-left" size={16} /> Back to home
        </button>
        <div style={{ fontFamily: "Patrick Hand SC", fontSize: 26, color: "var(--muted)" }} className="sub-bar-title">{d.navLabel}</div>
        <div className="sub-nav">
          <button aria-label="Previous" onClick={() => setIndex(index - 1)} style={{ visibility: index === 0 ? "hidden" : "visible" }}>
            <Ico name="arrow-left" size={16} />
          </button>
          <span className="sub-idx">{String(index + 1).padStart(2, "0")} / {String((stories || []).length).padStart(2, "0")}</span>
          <button aria-label="Next" onClick={() => setIndex(index + 1)} style={{ visibility: index === (stories || []).length - 1 ? "hidden" : "visible" }}>
            <Ico name="arrow-right" size={16} />
          </button>
        </div>
      </div>

      {/* HERO */}
      <div className="bf-hero">
        <div className="bf-hero-text">
          <div className="bf-eyebrow">{d.eyebrow}</div>
          <h1>{d.title}</h1>
          <p className="lede">{d.lede}</p>
          <div className="bf-facts">
            {d.facts.map((f, i) =>
            <div className="bf-fact" key={i}><small>{f.label}</small><strong>{f.value}</strong></div>
            )}
          </div>
        </div>
        <div className={`bf-hero-img${d.heroImgClass ? " " + d.heroImgClass : ""}`} style={{ backgroundColor: d.heroImgBg || "transparent" }}>
          {d.heroImg.src.startsWith("placeholder:") ?
          <HeroImgPlaceholder label={d.heroImg.alt} /> :

          <ImgSkeleton key={caseId} src={d.heroImg.src} alt={d.heroImg.alt} fetchpriority="high" loading="eager" imgStyle={{ ...d.heroImg.style }} />
          }
        </div>
      </div>

      {/* OVERVIEW + ROLE + CHALLENGES */}
      <div className="bf-section bf-bg-cream">
        <div className="bf-wrap">
          <div className="bf-block">
            <div className="bf-tag">{d.overview.tag}</div>
            <h2>{d.overview.title}</h2>
            {d.overview.body.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          {d.role.img ?
          <React.Fragment>
              <div className="bf-block" style={{ marginTop: 56 }}>
                <div className={`bf-tag ${d.role.tagColor}`}>{d.role.tag}</div>
                <h2>{d.role.title}</h2>
                {d.role.body.map((p, i) => <p key={i}>{p}</p>)}
                <img src={d.role.img} alt={d.role.tag} loading="lazy" decoding="async" style={{ width: "100%", borderRadius: 16, marginTop: 28, boxShadow: "0 8px 30px -10px rgba(0,0,0,0.18)" }} />
              </div>
              {!d.challenges.img &&
            <div className="bf-block" style={{ marginTop: 56 }}>
                  {d.challenges.tag && <div className={`bf-tag ${d.challenges.tagColor}`}>{d.challenges.tag}</div>}
                  <h2>{d.challenges.title}</h2>
                  {d.challenges.body.map((p, i) => <p key={i}>{p}</p>)}
                </div>
            }
            </React.Fragment> :

          <div className="bf-split">
              <div className="bf-block">
                <div className={`bf-tag ${d.role.tagColor}`}>{d.role.tag}</div>
                <h2>{d.role.title}</h2>
                {d.role.body.map((p, i) => <p key={i}>{p}</p>)}
              </div>
              {!d.challenges.img &&
            <div className="bf-block">
                  {d.challenges.tag && <div className={`bf-tag ${d.challenges.tagColor}`}>{d.challenges.tag}</div>}
                  <h2>{d.challenges.title}</h2>
                  {d.challenges.body.map((p, i) => <p key={i}>{p}</p>)}
                </div>
            }
            </div>
          }
          {d.challenges.img &&
          <div className="bf-block" style={{ marginTop: 56 }}>
              {d.challenges.tag && <div className={`bf-tag ${d.challenges.tagColor}`}>{d.challenges.tag}</div>}
              <h2>{d.challenges.title}</h2>
              {d.challenges.body.map((p, i) => <p key={i}>{p}</p>)}
              <div style={{ width: "100%", borderRadius: 16, marginTop: 28, boxShadow: "0 8px 30px -10px rgba(0,0,0,0.18)", overflow: "hidden", height: "clamp(220px, 60vw, 480px)" }}>
                <img src={d.challenges.img} alt={d.challenges.tag || "image"} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }} />
              </div>
            </div>
          }
          {d.extraSections && d.extraSections.map((sec, i) =>
          <div className="bf-block" key={i} style={{ marginTop: 56 }}>
              <h2>{sec.title}</h2>
              {sec.body && <p>{sec.body}</p>}
              {sec.list &&
            <ol style={{ paddingLeft: 24, marginTop: 12, lineHeight: 1.7 }}>
                  {sec.list.map((item, j) => <li key={j}>{item}</li>)}
                </ol>
            }
              {sec.img && <img src={sec.img} alt={sec.title} loading="lazy" decoding="async" style={{ width: "100%", borderRadius: 16, marginTop: 24 }} />}
            </div>
          )}
        </div>
      </div>

      {/* PROCESS */}
      <div className="bf-section">
        <div className="bf-wrap">
          <div className="bf-process-intro">
            <div className={`bf-tag ${d.process.tagColor}`}>{d.process.tag}</div>
            <h2>{d.process.title}</h2>
            <p>{d.process.intro}</p>
          </div>
          {d.process.preSections &&
          <div className="pre-sections-grid" style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 40,
            marginBottom: 80
          }}>
              {d.process.preSections.map((sec, i) =>
            <div key={i}>
                  <h3 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, fontSize: "clamp(24px,2.5vw,34px)", letterSpacing: "-0.02em", marginBottom: 12 }}>{sec.title}</h3>
                  <p style={{ fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.6, marginBottom: 20 }}>{sec.body}</p>
                  <img src={sec.img} alt={sec.title} loading="lazy" decoding="async" style={{ width: "100%", borderRadius: 16, boxShadow: "0 8px 30px -10px rgba(0,0,0,0.18)", display: "block" }} />
                </div>
            )}
            </div>
          }
          <div className="bf-steps" style={{ gap: "0px" }}>
            {d.process.steps.map((step, i) =>
            <div className={"bf-step " + (i % 2 === 1 ? "reverse" : "")} key={step.num || i}>
                <div className="bf-step-phone">
                  <MobileFrame src={step.img} alt={step.title} scrollable={!!step.scrollable} screenHeight={d.process.screenHeight} />
                </div>
                <div className="bf-step-text">
                  {step.num && <div className="bf-step-num">{step.num}</div>}
                  <h3>{step.title}</h3>
                  <p>{step.desc}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* POST-PROCESS SECTION */}
      {d.postProcess &&
      <div className="bf-section bf-bg-cream">
          <div className="bf-wrap">
            <div className="bf-block">
              <div className={`bf-tag ${d.postProcess.tagColor}`}>{d.postProcess.tag}</div>
              <h2>{d.postProcess.title}</h2>
              {d.postProcess.body.map((p, i) => <p key={i}>{p}</p>)}
            </div>
          </div>
        </div>
      }

      {/* RECOGNITION / AWARDS */}
      {d.recognition &&
      <div className="bf-section" style={{ background: "var(--ink)" }}>
          <div className="bf-wrap">
            <div className="bf-tag" style={{ background: "rgba(245,156,43,0.18)", color: "var(--yellow)", marginBottom: 20 }}>{d.recognition.tag}</div>
            <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(32px,4vw,56px)", lineHeight: 1, margin: "0 0 18px", color: "#fff" }}>{d.recognition.title}</h2>
            <p style={{ fontSize: 17, color: "rgba(255,255,255,0.72)", lineHeight: 1.6, maxWidth: 680, marginBottom: 40 }}>{d.recognition.body}</p>
            <div style={{ display: "flex", gap: 20, flexWrap: "wrap" }}>
              {d.recognition.awards.map((a, i) =>
            <div key={i} style={{
              background: "rgba(255,255,255,0.06)",
              border: "1px solid rgba(255,255,255,0.12)",
              borderRadius: 20, padding: "28px 36px",
              display: "flex", flexDirection: "column", gap: 8, minWidth: 220
            }}>
                  <div style={{ fontFamily: "'Patrick Hand SC',cursive", fontSize: 42, color: "var(--yellow)", lineHeight: 1 }}>{a.place}</div>
                  <div style={{ fontSize: 15, color: "rgba(255,255,255,0.7)", fontWeight: 500 }}>{a.category}</div>
                </div>
            )}
            </div>
            {d.recognition.certs &&
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 40, maxWidth: 860 }}>
              {d.recognition.certs.map((c, i) =>
            <div key={i} style={{
              borderRadius: 16, overflow: "hidden",
              flexShrink: 0,
              boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
              border: "1px solid rgba(255,255,255,0.1)"
            }}>
                <img src={c.src} alt={c.alt} loading="lazy" decoding="async" style={{ width: "100%", display: "block" }} />
              </div>
            )}
            </div>
          }
          </div>
        </div>
      }

      {/* LEARNINGS */}
      <div className="bf-section bf-bg-dark">
        <div className="bf-wrap">
          <div className="bf-learn">
            <div className={`bf-tag ${d.learnings.tagColor}`}>{d.learnings.tag}</div>
            <h2>{d.learnings.title}</h2>
            {d.learnings.body.split("\n\n").map((para, i) =>
            <p key={i} style={{ color: "rgb(169,169,169)", marginBottom: 14 }}>{para}</p>
            )}
          </div>
        </div>
      </div>

      {/* DISCLAIMER */}
      <div className="bf-disclaimer">
        <div className="bf-wrap">
          <p><em style={{ color: "rgb(75,75,75)", fontSize: "14px" }}>*Disclaimer: Some images shown in this portfolio are not my personal property. Some of them were created by me or by third parties and are used for project and presentation purposes only. All rights belong to their respective owners.</em></p>
        </div>
      </div>

      <div className="bf-footer-actions">
        <div className="bf-wrap" style={{ display: "flex", justifyContent: "flex-end", padding: "32px 0 60px" }}>
          {nextStory &&
          <button className="cta" onClick={() => setIndex(index + 1)}>
              Next: {nextStory.title.split("\n")[0]} <Ico name="arrow-right" size={16} />
            </button>
          }
        </div>
      </div>
    </React.Fragment>);

}

// ── UX Superpower page ───────────────────────────────────────────────────────

function UXSuperpowerContent({ onClose, stories, index, setIndex }) {
  const nextSpec = stories && index < stories.length - 1 ? stories[index + 1] : null;

  return (
    <React.Fragment>
      {/* Nav bar */}
      <div className="sub-bar">
        <button className="back-btn" onClick={onClose}>
          <Ico name="arrow-left" size={16} /> Back to home
        </button>
        <div style={{ fontFamily: "Patrick Hand SC", color: "var(--muted)", fontSize: "26px" }} className="sub-bar-title">User Experience</div>
        <div className="sub-nav">
          <button aria-label="Previous" onClick={() => setIndex(index - 1)} style={{ visibility: index === 0 ? "hidden" : "visible" }}>
            <Ico name="arrow-left" size={16} />
          </button>
          <span className="sub-idx">{String(index + 1).padStart(2, "0")} / {String((stories || []).length).padStart(2, "0")}</span>
          <button aria-label="Next" onClick={() => setIndex(index + 1)} style={{ visibility: index === (stories || []).length - 1 ? "hidden" : "visible" }}>
            <Ico name="arrow-right" size={16} />
          </button>
        </div>
      </div>

      {/* HERO */}
      <div style={{ padding: "clamp(40px,6vw,90px) clamp(20px,5vw,72px) 0", maxWidth: 1280, margin: "0 auto" }}>
        <div className="sp-hero-grid">
          <div className="sp-hero-text">
            <div className="bf-eyebrow">Superpower</div>
            <h1 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.03em", fontSize: "clamp(48px,7vw,88px)", lineHeight: 0.9, margin: "0 0 20px" }}>
              User<br />experience.
            </h1>
            <p style={{ fontSize: "clamp(17px,1.5vw,20px)", color: "var(--ink-soft)", lineHeight: 1.55, maxWidth: 520 }}>
              Why does a flawless user experience matter? Because even a small detail can shape how people perceive your entire brand.
            </p>
          </div>
          <div className="sp-hero-illo" style={{ position: "relative", borderRadius: 32, overflow: "hidden", aspectRatio: "4/3", background: "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <ImgSkeleton src="assets/ux-hero-v6.svg" alt="User experience design process illustration" loading="lazy" imgStyle={{ width: "100%", height: "100%", objectFit: "contain", padding: 24 }} />
          </div>
        </div>
      </div>

      {/* SECTION 1: What is UX */}
      <div className="bf-section bf-bg-cream" style={{ marginTop: 60 }}>
        <div className="bf-wrap">
          <div style={{ maxWidth: 760 }}>
            <div className="bf-tag bf-tag-blue">What is user experience?</div>
            <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(32px,4vw,52px)", lineHeight: 1, margin: "0 0 20px" }}>
              It's not just about the app, it's about the entire product.
            </h2>
            <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, marginBottom: 14 }}>
              It's not just about how easy, efficient, logical, and enjoyable an app is to use. A complete user experience also considers how someone interacts with the entire product, not just the app itself.
            </p>
            <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65 }}>Can improving the right features make users fall in love with a brand? Absolutely. That's why we need to a clear picture from the user's perspective: what truly makes them happy, what daily frustrations stand in their way, and how we can improve them.

            </p>
          </div>
        </div>
      </div>

      {/* SECTION 2: Strategy */}
      <div className="bf-section">
        <div className="bf-wrap">
          <div className="two-col-grid">
            <div>
              <div className="bf-tag bf-tag-blue">Strategy, or how it's built</div>
              <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(32px,4vw,52px)", lineHeight: 1, margin: "0 0 20px" }}>
                Every project needs a different approach.
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, marginBottom: 14 }}>
                I've often joined projects where the team didn't have a clear workflow for improving the user experience. Some weren't even interested in making improvements, and most didn't have a clear picture of what UX really is, or why it's so important to improve it.
              </p>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, marginBottom: 14 }}>
                <strong>Success lies in your ability to showcase results and demonstrate just how important user experience really is.</strong>
              </p>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65 }}>
                Sometimes you need to create a completely new experience, sometimes you need to improve an existing one, and sometimes you don't even know who your user is, which (more often than not, is the case). That's why we need the right approach and strategy, tailored to the actual need.
              </p>
            </div>
            <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <ImgSkeleton src="assets/ux-illustration.png" alt="User experience design process illustration" loading="lazy" imgStyle={{ width: "70%", height: "auto", objectFit: "contain" }} />
            </div>
          </div>
        </div>
      </div>

      {/* SECTION 3: Blueprint */}
      <div className="bf-section bf-bg-cream">
        <div className="bf-wrap">
          <div className="bf-tag bf-tag-blue">Blueprint & design rules</div>
          <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 20px", maxWidth: 720 }}>
            A blueprint everyone on the team can align with.
          </h2>
          <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, maxWidth: 720, marginBottom: 40 }}>
            A UX strategy blueprint is essential for helping every team member understand what a new project is really about. It allows us to define challenges, set focus areas, and establish guiding principles, and most importantly, our design rules. Following these rules and principles is what enables us to create the best possible, easy-to-use application.
          </p>
          <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, maxWidth: 720, marginBottom: 40 }}>
            Here's what a blueprint can look like:
          </p>
          <div style={{ position: "relative", borderRadius: 24, overflow: "hidden", boxShadow: "0 18px 40px -20px rgba(34,75,86,0.25)" }}>
            <ImgSkeleton src="assets/ux-blueprint.jpg" alt="UX strategy blueprint sketched out on a wall" loading="lazy" imgStyle={{ width: "100%", display: "block" }} />
          </div>
        </div>
      </div>

      {/* SECTION 4: Design rules */}
      <div className="bf-section">
        <div className="bf-wrap">
          <div className="bf-tag bf-tag-blue">Design guidelines and principles</div>
          <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 28px" }}>
            Three rules.<br />No exceptions.
          </h2>
          {[
          { num: "01", rule: "Keep it user-centered." },
          { num: "02", rule: "Keep all information transparent." },
          { num: "03", rule: "Keep it simple, clear, and fast." }].
          map((r) =>
          <div key={r.num} style={{ display: "flex", gap: 20, alignItems: "flex-start", marginBottom: 24 }}>
              <div style={{ fontFamily: "Patrick Hand SC", fontSize: 32, color: "var(--blue)", lineHeight: 1, flexShrink: 0, marginTop: 2 }}>{r.num}</div>
              <div style={{ fontSize: 20, fontWeight: 700, color: "var(--ink)", lineHeight: 1.3 }}>{r.rule}</div>
            </div>
          )}
          <p style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.65, marginTop: 16, borderLeft: "3px solid var(--blue)", paddingLeft: 16, maxWidth: 720 }}>
            Throughout the design process, these three rules are the one thing everyone must stick to. That means no one (not even someone at the C-level) can propose anything that conflicts with them.
          </p>
          <div style={{ position: "relative", borderRadius: 24, overflow: "hidden", boxShadow: "0 18px 40px -20px rgba(34,75,86,0.25)", marginTop: 40, marginBottom: 8 }}>
            <ImgSkeleton src="assets/ux-david-rota-2.png" alt="Product owner David Rota presenting UX design principles to the team in 2021" loading="lazy" imgStyle={{ width: "100%", display: "block" }} />
          </div>
          <p style={{ fontSize: 13, color: "var(--muted)", fontStyle: "italic", textAlign: "center", lineHeight: 1.5 }}>
            * My dear PO David Rota presenting principles to the team back in 2021.
          </p>
        </div>
      </div>

      {/* SECTION 5: User Journey */}
      <div className="bf-section bf-bg-dark">
        <div className="bf-wrap">
          <div className="bf-tag" style={{ background: "rgba(255,255,255,.1)", color: "#fff" }}>User Journey</div>
          <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 20px", color: "#fff", maxWidth: 720 }}>
            Clicks, thoughts, and needs, all in one view.
          </h2>
          <p style={{ fontSize: 17, color: "rgba(255,255,255,.72)", lineHeight: 1.65, maxWidth: 720, marginBottom: 40 }}>
            A user journey is made up of three layers. In the middle is the user flow: the actual clicks. Above it are the user's potential thoughts, and below, in green, are their needs. This way, we can easily map out everything the user needs and design the best possible flow around it.
          </p>
          <div style={{ position: "relative" }}><ImgSkeleton src="assets/ux-user-journey.png" alt="User journey diagram showing the three layers of flow, thoughts, and needs" loading="lazy" imgStyle={{ width: "100%", display: "block" }} /></div>
        </div>
      </div>

      <div className="bf-footer-actions">
        <div className="bf-wrap" style={{ display: "flex", justifyContent: "flex-end", padding: "32px 0 60px" }}>
          {nextSpec &&
          <button className="cta" onClick={() => setIndex(index + 1)}>
              Next: {nextSpec.title ? nextSpec.title.split("\n")[0] : "Next"} <Ico name="arrow-right" size={16} />
            </button>
          }
        </div>
      </div>
    </React.Fragment>);

}

// ── UI Superpower page ───────────────────────────────────────────────────────

function UISuperpowerContent({ onClose, stories, index, setIndex }) {
  const nextSpec = stories && index < stories.length - 1 ? stories[index + 1] : null;

  return (
    <React.Fragment>
      {/* Nav bar */}
      <div className="sub-bar">
        <button className="back-btn" onClick={onClose}>
          <Ico name="arrow-left" size={16} /> Back to home
        </button>
        <div style={{ fontFamily: "Patrick Hand SC", fontSize: 26, color: "var(--muted)" }} className="sub-bar-title">UI & Design Systems</div>
        <div className="sub-nav">
          <button aria-label="Previous" onClick={() => setIndex(index - 1)} style={{ visibility: index === 0 ? "hidden" : "visible" }}>
            <Ico name="arrow-left" size={16} />
          </button>
          <span className="sub-idx">{String(index + 1).padStart(2, "0")} / {String((stories || []).length).padStart(2, "0")}</span>
          <button aria-label="Next" onClick={() => setIndex(index + 1)} style={{ visibility: index === (stories || []).length - 1 ? "hidden" : "visible" }}>
            <Ico name="arrow-right" size={16} />
          </button>
        </div>
      </div>

      {/* HERO */}
      <div style={{ padding: "clamp(40px,6vw,90px) clamp(20px,5vw,72px) 0", maxWidth: 1280, margin: "0 auto" }}>
        <div className="sp-hero-grid">
          <div className="sp-hero-text">
            <div className="bf-eyebrow" style={{ color: "var(--purple)" }}>Superpower</div>
            <h1 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.03em", fontSize: "clamp(48px,7vw,88px)", lineHeight: 0.9, margin: "0 0 20px" }}>
              UI &amp; Design<br />systems.
            </h1>
            <p style={{ fontSize: "clamp(17px,1.5vw,20px)", color: "var(--ink-soft)", lineHeight: 1.55, maxWidth: 520 }}>Fine art in the digital space. Visual designers are the artists that developers simply can't do without.

            </p>
          </div>
          <div className="sp-hero-illo" style={{ position: "relative", borderRadius: 32, overflow: "hidden", aspectRatio: "4/3", background: "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <ImgSkeleton src="assets/ui-hero-v3.svg" alt="UI and design systems illustration" loading="lazy" imgStyle={{ width: "100%", height: "100%", objectFit: "contain" }} />
          </div>
        </div>
      </div>

      {/* SECTION 1: The art guys */}
      <div className="bf-section bf-bg-cream" style={{ marginTop: 60 }}>
        <div className="bf-wrap">
          <div className="two-col-grid">
            <div style={{ maxWidth: 600 }}>
              <div className="bf-tag bf-tag-purple">Artists</div>
              <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 20px" }}>
                Who even are<br />those two?
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, marginBottom: 14 }}>
                On my very first project, I was working closely with my dear colleague Goran. Our senior team lead (a guy in his late 40s) was running a meeting and didn't even notice there were two new team members in the room. About fifteen minutes in, he wondered out loud, "Who are these two guys?" Someone answered, "Front-end and designer." He replied, "Oh, the artists."
              </p>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, marginBottom: 14 }}>
                What the heck? I thought back then. We're not artists, we're developers.
              </p>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65 }}>
                Back then, I couldn't understand what he meant. But honestly, after all these years, I've come to realize he was right. We are a kind of visual artist, the kind developers simply can't do without. In fact, no one can.
              </p>
            </div>
            <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <ImgSkeleton src="assets/ui-illustration.png" alt="UI and design systems illustration" loading="lazy" imgStyle={{ width: "70%", height: "auto", objectFit: "contain" }} />
            </div>
          </div>
        </div>
      </div>
      <div className="bf-section">
        <div className="bf-wrap">
          <div className="bf-tag bf-tag-purple">What matters the most?</div>
          <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 20px", maxWidth: 720 }}>
            Attractive, intuitive,<br />and understandable.
          </h2>
          <div className="two-col-grid tight" style={{ marginTop: 16 }}>
            <div>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, marginBottom: 14 }}>
                Every design has to be attractive, intuitive, and understandable. Period. For me, cleanness and simplicity are what make a design truly successful. But the most important skill is balancing your artistic ambition with what's actually feasible.
              </p>

            </div>
            <div>
              <div style={{ background: "#f5f0fd", borderRadius: 20, padding: "clamp(20px,3vw,36px)" }}>
                <div style={{ fontFamily: "Patrick Hand SC", fontSize: 22, color: "var(--purple)", marginBottom: 20 }}>Things I have a real command of</div>
                {["Subtlety", "Smooth feel of use", "Animations", "Transitions"].map((item, i) =>
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
                    <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--purple)", flexShrink: 0 }}></div>
                    <span style={{ fontSize: 18, fontWeight: 700, color: "var(--ink)" }}>{item}</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* SECTION 3: Design system */}
      <div className="bf-section bf-bg-dark">
        <div className="bf-wrap">
          <div className="bf-tag" style={{ background: "rgba(255,255,255,.1)", color: "#fff" }}>A healthy design system</div>
          <div className="two-col-grid">
            <div>
              <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 20px", color: "#fff" }}>
                Built clean.<br />From day one.
              </h2>
              <p style={{ fontSize: 17, color: "rgba(255,255,255,.72)", lineHeight: 1.65, marginBottom: 14 }}>
                It's essential to build and maintain a healthy, clean design system from the very beginning. Every element and component should be useful for both designers and developers.
              </p>
              <p style={{ fontSize: 17, color: "rgba(255,255,255,.72)", lineHeight: 1.65 }}>
                Consistency is crucial, of course, along with the brand's following visual elements.
              </p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 16 }}>
              {[
              { label: "Consistency", icon: "▦", desc: "Same patterns, every screen" },
              { label: "Usefulness", icon: "◎", desc: "For designers and devs alike" },
              { label: "Brand fidelity", icon: "◈", desc: "Visual language that holds" },
              { label: "Cleanliness", icon: "◻", desc: "No dead components" }].
              map((card, i) =>
              <div key={i} style={{ background: "rgba(255,255,255,.07)", borderRadius: 16, padding: "20px 18px" }}>
                  <div style={{ fontSize: 28, marginBottom: 8, color: "var(--purple)" }}>{card.icon}</div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: "#fff", marginBottom: 4 }}>{card.label}</div>
                  <div style={{ fontSize: 12, color: "rgba(255,255,255,.5)" }}>{card.desc}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="bf-footer-actions">
        <div className="bf-wrap" style={{ display: "flex", justifyContent: "flex-end", padding: "32px 0 60px" }}>
          {nextSpec &&
          <button className="cta" onClick={() => setIndex(index + 1)}>
              Next: {nextSpec.title ? nextSpec.title.split("\n")[0] : "Next"} <Ico name="arrow-right" size={16} />
            </button>
          }
        </div>
      </div>
    </React.Fragment>);

}

// ── Prototype & Testing Superpower page ──────────────────────────────────────

function ProtoSuperpowerContent({ onClose, stories, index, setIndex }) {
  const nextSpec = stories && index < stories.length - 1 ? stories[index + 1] : null;

  return (
    <React.Fragment>
      {/* Nav bar */}
      <div className="sub-bar">
        <button className="back-btn" onClick={onClose}>
          <Ico name="arrow-left" size={16} /> Back to home
        </button>
        <div style={{ fontFamily: "Patrick Hand SC", fontSize: 26, color: "var(--muted)" }} className="sub-bar-title">Prototype & Testing</div>
        <div className="sub-nav">
          <button aria-label="Previous" onClick={() => setIndex(index - 1)} style={{ visibility: index === 0 ? "hidden" : "visible" }}>
            <Ico name="arrow-left" size={16} />
          </button>
          <span className="sub-idx">{String(index + 1).padStart(2, "0")} / {String((stories || []).length).padStart(2, "0")}</span>
          <button aria-label="Next" onClick={() => setIndex(index + 1)} style={{ visibility: index === (stories || []).length - 1 ? "hidden" : "visible" }}>
            <Ico name="arrow-right" size={16} />
          </button>
        </div>
      </div>

      {/* HERO */}
      <div style={{ padding: "clamp(40px,6vw,90px) clamp(20px,5vw,72px) 0", maxWidth: 1280, margin: "0 auto" }}>
        <div className="sp-hero-grid">
          <div className="sp-hero-text">
            <div className="bf-eyebrow" style={{ color: "#C97A1F" }}>Superpower</div>
            <h1 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.03em", fontSize: "clamp(48px,7vw,88px)", lineHeight: 0.9, margin: "0 0 20px" }}>
              Prototype<br />&amp; Testing.
            </h1>
            <p style={{ fontSize: "clamp(17px,1.5vw,20px)", color: "var(--ink-soft)", lineHeight: 1.55, maxWidth: 520 }}>
              The ultimate power that gives you every answer you need. We can't truly know how a product works until we try it for ourselves.
            </p>
          </div>
          <div className="sp-hero-illo" style={{ position: "relative", borderRadius: 32, overflow: "hidden", aspectRatio: "4/3", background: "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <ImgSkeleton src="assets/proto-hero-v3.svg" alt="Prototyping and user testing illustration" loading="lazy" imgStyle={{ width: "100%", height: "100%", objectFit: "contain" }} />
          </div>
        </div>
      </div>

      {/* SECTION 1: The last and most important thing */}
      <div className="bf-section bf-bg-cream" style={{ marginTop: 60 }}>
        <div className="bf-wrap">
          <div className="two-col-grid">
            <div>
              <div className="bf-tag bf-tag-yellow">Last...</div>
              <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 20px" }}>
                ...but not least.
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, marginBottom: 14 }}>We can't truly know how a product works until we try it for real. Visually, we can create anything, but until we actually hold in our hands what we've built, and start using it, we can't tell whether it's genuinely good.

              </p>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65 }}>
                The same goes for print. On screen, it gives you one feeling; in print, a completely different one. That's why it's essential to test every product across every form it takes.
              </p>
            </div>
            <div style={{ position: "relative", borderRadius: 24, overflow: "hidden", boxShadow: "0 18px 40px -20px rgba(34,75,86,0.25)", aspectRatio: "3/4" }}>
              <ImgSkeleton src="assets/proto-image-1.jpg" alt="User testing session in progress" loading="lazy" imgStyle={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" }} />
            </div>
          </div>
        </div>
      </div>

      {/* SECTION 2: Real people, real environment */}
      <div className="bf-section">
        <div className="bf-wrap">
          <div className="two-col-grid">
            <div className="mob-order-last" style={{ position: "relative", borderRadius: 24, overflow: "hidden", boxShadow: "0 18px 40px -20px rgba(34,75,86,0.25)" }}>
              <ImgSkeleton src="assets/proto-image-2.jpg" alt="User testing a prototype in a real-world environment" loading="lazy" imgStyle={{ width: "100%", display: "block" }} />
            </div>
            <div>
              <div className="bf-tag bf-tag-yellow">Real people in a real environment.</div>
              <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 20px" }}>
                Are we the users?<br />Of course not.
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, marginBottom: 14 }}>
                We can test a design on ourselves all we want, but we'll never really know how a user behaves until we put it in front of them. What are they actually thinking while using the product? How do they navigate it? Do they navigate it at all?
              </p>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65 }}>
                The only way to find out is in a real environment, with real users and the actual product in their hands. Combined with the right questions and careful observation, that's how we get the answers we need.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* SECTION 3: What we discover — dark */}
      <div className="bf-section bf-bg-dark">
        <div className="bf-wrap">
          <div className="bf-tag" style={{ background: "rgba(255,255,255,.1)", color: "#fff" }}>What testing reveals</div>
          <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 40px", color: "#fff", maxWidth: 680 }}>
            Discover problems before production.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 20, marginBottom: 48 }}>
            {[
            { q: "Is our app easy to use?", icon: "◎" },
            { q: "Where does the user run into problems?", icon: "◈" },
            { q: "What would mean a lot to them as an option?", icon: "◻" },
            { q: "What is unnecessary for them?", icon: "▦" }].
            map((card, i) =>
            <div key={i} style={{ background: "rgba(255,255,255,.07)", borderRadius: 16, padding: "24px 20px" }}>
                <div style={{ fontSize: 28, color: "var(--yellow)", marginBottom: 12 }}>{card.icon}</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#fff", lineHeight: 1.4 }}>{card.q}</div>
              </div>
            )}
          </div>
          <div style={{ borderLeft: "3px solid var(--yellow)", paddingLeft: 24, maxWidth: 680 }}>
            <p style={{ fontSize: 20, fontWeight: 700, color: "#fff", lineHeight: 1.4, margin: 0 }}>
              That way, we uncover potential problems and resolve them before production, saving the most valuable and most irreversible resource of all: <span style={{ color: "var(--yellow)" }}>time.</span>
            </p>
          </div>
        </div>
      </div>

      <div className="bf-footer-actions">
        <div className="bf-wrap" style={{ display: "flex", justifyContent: "flex-end", padding: "32px 0 60px" }}>
          {nextSpec &&
          <button className="cta" onClick={() => setIndex(index + 1)}>
              Next: {nextSpec.title ? nextSpec.title.split("\n")[0] : "Next"} <Ico name="arrow-right" size={16} />
            </button>
          }
        </div>
      </div>
    </React.Fragment>);

}

// ── Brand Identities Superpower page ─────────────────────────────────────────

function BrandSuperpowerContent({ onClose, stories, index, setIndex }) {
  const nextSpec = stories && index < stories.length - 1 ? stories[index + 1] : null;

  return (
    <React.Fragment>
      {/* Nav bar */}
      <div className="sub-bar">
        <button className="back-btn" onClick={onClose}>
          <Ico name="arrow-left" size={16} /> Back to home
        </button>
        <div style={{ fontFamily: "Patrick Hand SC", fontSize: 26, color: "var(--muted)" }} className="sub-bar-title">Brand identities</div>
        <div className="sub-nav">
          <button aria-label="Previous" onClick={() => setIndex(index - 1)} style={{ visibility: index === 0 ? "hidden" : "visible" }}>
            <Ico name="arrow-left" size={16} />
          </button>
          <span className="sub-idx">{String(index + 1).padStart(2, "0")} / {String((stories || []).length).padStart(2, "0")}</span>
          <button aria-label="Next" onClick={() => setIndex(index + 1)} style={{ visibility: index === (stories || []).length - 1 ? "hidden" : "visible" }}>
            <Ico name="arrow-right" size={16} />
          </button>
        </div>
      </div>

      {/* HERO */}
      <div style={{ padding: "clamp(40px,6vw,90px) clamp(20px,5vw,72px) 0", maxWidth: 1280, margin: "0 auto" }}>
        <div className="sp-hero-grid">
          <div className="sp-hero-text">
            <div className="bf-eyebrow" style={{ color: "#BE185D" }}>Superpower</div>
            <h1 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.03em", fontSize: "clamp(48px,7vw,88px)", lineHeight: 0.9, margin: "0 0 20px" }}>
              Brand<br />identities.
            </h1>
            <p style={{ fontSize: "clamp(17px,1.5vw,20px)", color: "var(--ink-soft)", lineHeight: 1.55, maxWidth: 520 }}>
              Crafting and refining visual elements, the first touchpoint with a product, and the one that shapes how people visually perceive the brand.
            </p>
          </div>
          <div className="sp-hero-illo" style={{ position: "relative", borderRadius: 32, overflow: "hidden", aspectRatio: "4/3", background: "transparent", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
            <ImgSkeleton src="assets/brand-hero-v3.svg" alt="Brand identity design illustration" loading="lazy" imgStyle={{ width: "100%", height: "100%", objectFit: "contain" }} />
          </div>
        </div>
      </div>

      {/* SECTION 1: First touchpoint */}
      <div className="bf-section bf-bg-cream" style={{ marginTop: 60 }}>
        <div className="bf-wrap">
          <div className="two-col-grid asym align-start">
            <div>
              <div className="bf-tag bf-tag-pink">First touchpoint with a product</div>
              <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 20px" }}>
                More than a logo.<br />It's a feeling.
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65, marginBottom: 14 }}>
                A brand identity is what reflects a brand, what makes it visually distinct and recognizable, and what kind of impression it leaves on people. Together with all its elements, it communicates with the audience and shapes how they feel about the brand.
              </p>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", lineHeight: 1.65 }}>
                But brand identity isn't only about the visual side. It comes through in every message and value the brand projects into the world. Through those messages, people sense what kind of brand it really is: relaxed, confident, luxurious, or fun.
              </p>
            </div>
            <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center", alignSelf: "center" }}>
              <ImgSkeleton src="assets/brand-illustration.svg" alt="Brand identity design illustration" loading="lazy" imgStyle={{ width: "90%", height: "auto", objectFit: "contain" }} />
            </div>
          </div>
        </div>
      </div>

      {/* SECTION 2: Consistency — dark */}
      <div className="bf-section bf-bg-dark">
        <div className="bf-wrap">
          <div className="two-col-grid">
            <div>
              <div className="bf-tag" style={{ background: "rgba(255,255,255,.1)", color: "#fff" }}>Rule #1</div>
              <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,52px)", lineHeight: 1, margin: "0 0 24px", color: "#fff" }}>
                Consistency!<br />That's non-negotiable.
              </h2>
              <p style={{ fontSize: 17, color: "rgba(255,255,255,.72)", lineHeight: 1.65 }}>
                The look and feel have to be the same across every part of a brand. From the logo on a paper bag to the loading spinner in the app, it all has to look unified.
              </p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 14 }}>
              {[
              { label: "Print", icon: "◻" },
              { label: "Digital", icon: "◎" },
              { label: "Motion", icon: "▶" },
              { label: "Environment", icon: "◈" },
              { label: "Voice & tone", icon: "◦" },
              { label: "Behaviour", icon: "▦" }].
              map((item, i) =>
              <div key={i} style={{
                background: "rgba(255,255,255,.07)", borderRadius: 14,
                padding: "20px 18px", display: "flex", flexDirection: "column", gap: 8
              }}>
                  <div style={{ fontSize: 22, color: "#EC4899" }}>{item.icon}</div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: "#fff" }}>{item.label}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* SECTION 3: Brand portfolio preview */}
      <div className="bf-section">
        <div className="bf-wrap">
          <div className="bf-tag bf-tag-pink">Some of the brands I designed</div>
          <h2 style={{ fontFamily: "'Figtree',sans-serif", fontWeight: 800, letterSpacing: "-0.02em", fontSize: "clamp(28px,3.5vw,46px)", lineHeight: 1, margin: "0 0 40px", maxWidth: 600 }}>
            Each one a different<br />world to figure out.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 20 }}>
            {[
            { src: "assets/brand-uranak.jpg", name: "Uranak" },
            { src: "assets/brand-serbian-week.jpg", name: "Serbian Week" },
            { src: "assets/brand-bed-beer.jpg", name: "Bed & Beer" },
            { src: "assets/brand-nef.jpg", name: "NEF" },
            { src: "assets/brand-bos.jpg", name: "BOS" }].
            map((b, i) =>
            <div key={i} style={{ borderRadius: 20, overflow: "hidden", boxShadow: "0 8px 24px -8px rgba(34,75,86,.18)", aspectRatio: "1", position: "relative" }}>
                <ImgSkeleton src={b.src} alt={b.name} loading="lazy" imgStyle={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                <div style={{
                position: "absolute", bottom: 0, left: 0, right: 0,
                padding: "20px 14px 14px",
                background: "linear-gradient(transparent, rgba(0,0,0,.55))",
                color: "#fff", fontSize: 13, fontWeight: 700
              }}>{b.name}</div>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="bf-footer-actions">
        <div className="bf-wrap" style={{ display: "flex", justifyContent: "flex-end", padding: "32px 0 60px" }}>
          {nextSpec &&
          <button className="cta" onClick={() => setIndex(index + 1)}>
              Next: {nextSpec.title ? nextSpec.title.split("\n")[0] : "Next"} <Ico name="arrow-right" size={16} />
            </button>
          }
        </div>
      </div>
    </React.Fragment>);

}

// ── CaseStudyContent: delegate web-ui to its own component ───────────────────
const _OrigCaseStudyContent = CaseStudyContent;
// Patch: if caseId is "web-ui", render the gallery instead
// (We redefine CaseStudyContent to intercept the web-ui case)

// Keep BabyFoodContent as a thin wrapper for backwards compat
function BabyFoodContent({ onClose, stories, index, setIndex }) {
  return <CaseStudyContent caseId="baby-food" onClose={onClose} stories={stories} index={index} setIndex={setIndex} />;
}

// ── CaseSubpage shell ─────────────────────────────────────────────────────────

// Maps UX_CASES index → caseId
const CASE_IDS = ["luxury-watch", "baby-food", "consultation", "realestate", "travel", "web-ui"];

function CaseSubpage({ open, onClose, stories, index, setIndex, accent }) {
  const scrollRef = React.useRef(null);
  const [displayIndex, setDisplayIndex] = React.useState(index);
  const [fading, setFading] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      requestAnimationFrame(() => {
        if (scrollRef.current) scrollRef.current.scrollTop = 0;
      });
    }
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    if (index === displayIndex) return;
    setFading(true);
    const t = setTimeout(() => {
      setDisplayIndex(index);
      if (scrollRef.current) scrollRef.current.scrollTop = 0;
      setFading(false);
    }, 220);
    return () => clearTimeout(t);
  }, [index, open]);

  React.useEffect(() => {
    if (!open) setDisplayIndex(index);
  }, [open]);

  React.useEffect(() => {
    const onKey = (e) => {
      if (!open) return;
      if (e.key === "Escape") onClose();
      if (stories && e.key === "ArrowRight" && index < stories.length - 1) setIndex(index + 1);
      if (stories && e.key === "ArrowLeft" && index > 0) setIndex(index - 1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, index, stories, setIndex, onClose]);

  if (!stories || !stories.length) return <div className="subpage" aria-hidden="true" />;

  const caseId = CASE_IDS[displayIndex];
  const isKnownCase = !!CASE_DATA[caseId];

  return (
    <div className={"subpage " + (open ? "open" : "")} ref={scrollRef} aria-hidden={!open}>
      <div style={{ transition: "opacity .22s ease, transform .22s ease", opacity: fading ? 0 : 1, transform: fading ? "translateY(12px)" : "translateY(0)", position: "relative", zIndex: 1 }}>
        {isKnownCase ?
        <CaseStudyContent key={caseId} caseId={caseId} onClose={onClose} stories={stories} index={displayIndex} setIndex={setIndex} /> :
        <StoryContent onClose={onClose} stories={stories} index={displayIndex} setIndex={setIndex} accent={accent} />
        }
      </div>
    </div>);

}

Object.assign(window, { CaseSubpage, BabyFoodContent, CaseStudyContent, UXSuperpowerContent, UISuperpowerContent, ProtoSuperpowerContent, BrandSuperpowerContent });