// ============================================================
// IMPRINT — case study page (v2 narrative, June 2026).
// Copy source of truth: imprint-brief.md — wording is VERBATIM,
// do not paraphrase. Components from imprint-case-parts.jsx;
// product screens from imprint-screens.jsx.
// Layout: centred 700px article column for reading text;
// screens sit beside their corresponding paragraphs (.cs-mrow).
// ============================================================
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

// ---- count-up on scroll into view ----
function CountUp({ to, suffix = '', prefix = '', dur = 1400 }) {
  const ref = useRefC(null);
  const [val, setVal] = useStateC(0);
  useEffectC(() => {
    const el = ref.current; if (!el) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started) {
          started = true;
          const t0 = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - t0) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(Math.round(eased * to));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, dur]);
  return <span ref={ref} className="cs-countup">{prefix}{val}{suffix}</span>;
}

// phase-coloured kicker for the interface sections
function PhaseKicker({ color, children }) {
  return (
    <div className="cs-kicker reveal">
      <span className="phdot" style={{ background: color }}></span>
      {children}
    </div>
  );
}

// ============================================================
// THE PAGE
// ============================================================
function ImprintCaseStudy({ onNav }) {
  useReveal();
  return (
    <main className="cs-main">
      {/* 1 — HERO */}
      <section className="cs-hero" data-screen-label="Imprint — Hero">
        <div className="shell">
          <a className="cs-back" href="#" onClick={(e) => { e.preventDefault(); onNav('home'); }}>← Back to work</a>
          <div className="cs-hero-titlerow reveal">
            <div className="cs-hero-title" style={{ marginBottom: 0 }}>Imprint</div>
          </div>
          <p className="cs-hero-sub reveal">Configuring AI agents in plain language, no engineering required.</p>
          <div className="cs-pills reveal">
            <div className="cs-pill"><span className="pk">Type</span><span className="pv">Self-initiated design exploration</span></div>
            <div className="cs-pill"><span className="pk">Role</span><span className="pv">UX design, design thinking, interaction design, AI prompt design</span></div>
            <div className="cs-pill"><span className="pk">Platform</span><span className="pv">Web application</span></div>
            <div className="cs-pill"><span className="pk">Design tools</span><span className="pv">Figma, Claude</span></div>
          </div>
          <div className="cs-note reveal">
            <div className="nk"><span className="star">✦</span>A note on how this was made</div>
            <p>Every screen in this case study was created through <strong>AI prompt design</strong>, using <strong>Claude as the design tool</strong> rather than building screens by hand. I wanted to see how far I could push AI generated design through prompting alone, treating it as a creative and technical challenge in itself. <strong>The design thinking and every decision behind it is entirely my own.</strong> This is an exploration of what becomes possible when you pair a designer's way of thinking with AI as the hands.</p>
          </div>
        </div>
      </section>

      {/* 2 — THE PROBLEM */}
      <section className="cs-section" data-screen-label="Imprint — The problem">
        <div className="shell cs-narrow">
          <div className="cs-kicker reveal"><span className="ln"></span>The problem</div>
          <h2 className="cs-h2 reveal">The people who know the work can't configure the tools.</h2>
          <p className="cs-body reveal">AI agents are still very new territory. Even now in 2026 many people working in non-technical roles have never set one up and have no real frame of reference for what the process involves. I was curious about the space and decided to try configuring one myself earlier this year to get a proper feel for it.</p>
          <p className="cs-body reveal"><strong>It was harder than I expected.</strong> The interfaces were dense, the terminology assumed a technical background I did not have and I spent more time trying to understand what I was being asked to do than actually doing it. I got there eventually but it took far longer than it should have and I still was not fully confident in what I had built.</p>
          <p className="cs-body reveal">If I was finding it this difficult as someone who works in digital products every day, <strong>the gap for a customer service lead or operations manager with no product background was going to be significant.</strong></p>
          <p className="cs-body reveal">And it was. The same frustration kept showing up in forums and ops communities. People who had been asked to configure AI agents for their teams, tried to do it and hit a wall almost immediately.</p>
          <div className="cs-voxes reveal">
            <figure className="cs-vox">
              <blockquote>"There were too many fields I didn't understand and I didn't want to get it wrong and have it say something weird to a customer."</blockquote>
            </figure>
            <figure className="cs-vox">
              <blockquote>"In the end our IT guy set it up based on a document I wrote. It kind of works but it doesn't really behave the way I would."</blockquote>
            </figure>
          </div>
          <p className="cs-lead reveal"><strong>The knowledge was always there.</strong> The tools just never asked for it in a way those people could actually answer.</p>
        </div>
      </section>

      {/* 3 — THE OUTCOME (dark band) */}
      <section className="cs-outcome-band" data-screen-label="Imprint — The outcome">
        <div className="shell">
          <div className="cs-kicker reveal"><span className="ln"></span>The outcome</div>
          <div className="cs-outcomes">
            <div className="cs-outcome reveal"><span className="star">✦</span><p>Customer service leads can configure agents themselves without needing engineering support</p></div>
            <div className="cs-outcome reveal"><span className="star">✦</span><p>Teams describe how they work in plain language rather than translating it into something a system can read</p></div>
            <div className="cs-outcome reveal"><span className="star">✦</span><p>Users can preview and correct agent behaviour before anything goes live</p></div>
          </div>
        </div>
      </section>

      {/* 4 — RESEARCH */}
      <section className="cs-section" data-screen-label="Imprint — Research">
        <div className="shell">
          <div className="cs-narrow">
            <div className="cs-kicker reveal"><span className="ln"></span>Research</div>
            <h2 className="cs-h2 reveal">What makes configuring an AI agent so difficult?</h2>
            <p className="cs-body reveal">This frustration shows up everywhere once you start looking for it. Forum threads, product reviews, LinkedIn posts from operations people who tried to automate their workflows and hit a wall. The details change but the shape of the problem is always the same: <strong>the person with the knowledge could not get it into the tool without technical help.</strong></p>
            <p className="cs-body reveal">Three data points showed this was not a small niche problem.</p>
          </div>
          <div className="cs-stats">
            <div className="cs-stat reveal">
              <div className="cs-stat-n"><CountUp to={40} suffix="%" /></div>
              <div className="cs-stat-c">of agentic AI projects will be cancelled by end of 2027 due to unclear business value and inadequate risk controls.</div>
              <div className="cs-stat-src">Gartner, 2025</div>
            </div>
            <div className="cs-stat reveal">
              <div className="cs-stat-n"><CountUp to={84} suffix="%" /></div>
              <div className="cs-stat-c">of organisations have not redesigned jobs or workflows around AI capabilities, with skills shortages cited as the single biggest barrier to integration.</div>
              <div className="cs-stat-src">Deloitte State of AI in the Enterprise, 2026</div>
            </div>
            <div className="cs-stat reveal">
              <div className="cs-stat-n"><CountUp to={1} suffix="%" /></div>
              <div className="cs-stat-c">of organisations have achieved AI maturity where it is systematically embedded across workflows.</div>
              <div className="cs-stat-src">McKinsey, 2025</div>
            </div>
          </div>
        </div>
      </section>

      {/* 5 — COMPETITIVE AUDIT */}
      <section className="cs-section" data-screen-label="Imprint — Competitive audit" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="cs-narrow">
            <div className="cs-kicker reveal"><span className="ln"></span>Competitive audit</div>
            <p className="cs-body reveal">I audited the tools sitting across different parts of the market to understand what was already out there and where the gaps were.</p>
          </div>
          <CompetitorAudit />
          <div className="cs-narrow" style={{ marginTop: 40 }}>
            <p className="cs-body reveal">The gap was the same across all of them. <strong>Real configuration depth required technical fluency. Nobody had figured out how to offer both at once.</strong> That was the gap worth designing for.</p>
          </div>
        </div>
      </section>

      {/* 6 — PERSONAS */}
      <section className="cs-section" data-screen-label="Imprint — Personas">
        <div className="shell">
          <div className="cs-narrow">
            <div className="cs-kicker reveal"><span className="ln"></span>Personas</div>
            <h2 className="cs-h2 reveal">Figuring out who this needed to work for</h2>
            <p className="cs-body reveal">People managing a single team's process have different frustrations from those juggling multiple workflows across an organisation. Personas are a useful way to keep both groups in mind throughout the design process.</p>
          </div>
          <Personas />
          <div className="cs-narrow" style={{ marginTop: 44 }}>
            <p className="cs-body reveal">Maya and Jordan are already aware of their problem with existing tools. Once the product matures there would be space to design for a third type of user who is newer to AI agents entirely and needs more guidance and education to get started. For now <strong>Maya and Jordan are the focus</strong>.</p>
            <p className="cs-body reveal">Translating their frustrations into user stories helped me get specific about what the product actually needed to achieve before designing anything.</p>
          </div>
          <UserStories />
        </div>
      </section>

      {/* 7 — WHAT TO BUILD */}
      <section className="cs-section" data-screen-label="Imprint — Problem statement">
        <div className="shell cs-narrow">
          <div className="cs-kicker reveal"><span className="ln"></span>Figuring out what to build</div>
          <p className="cs-body reveal">To define what the product should actually solve for I needed to land on one core problem statement. Based on Maya as the primary persona:</p>
          <p className="cs-pstate reveal">Maya needs a way to configure an AI agent that reflects her team's real process, because every tool available requires a level of technical knowledge she should not need to have.</p>
          <p className="cs-body reveal">This is not a minor inconvenience. <strong>An agent that does not behave correctly talks to real customers</strong> and the consequences of getting it wrong are immediate and visible.</p>
          <p className="cs-body reveal">So how do I create a setup experience that is appropriate, genuinely usable for someone like Maya and honest about what AI agents actually are?</p>
          <p className="cs-body reveal">To understand what features would serve Maya and Jordan best I mapped out what the product needed to offer against their needs directly. It needed to let users <strong>configure an agent in plain language</strong> with no logic trees or technical knowledge required, give them a way to <strong>review and correct agent behaviour before going live</strong> and keep them <strong>in control after launch</strong>. That gave me a clear feature set to design toward.</p>
          <div className="cs-sg">
            <div className="cs-sg-item reveal">
              <div className="k">Scope</div>
              <p className="cs-body">I scoped this to the initial agent setup flow on web, from the moment a user starts configuration through to activating their agent for the first time. Post-launch management, team collaboration and template features sit outside this scope but are worth building toward in a future phase.</p>
            </div>
            <div className="cs-sg-item reveal">
              <div className="k">Goal statement</div>
              <p className="cs-body">Imprint will let non-technical users configure an AI agent by describing their process in plain language, without engineering support. I will measure success through usability testing, looking at whether users can <strong>complete the full setup flow without assistance</strong> and whether they <strong>choose to activate their agent at the end</strong> rather than going back to edit.</p>
            </div>
          </div>
        </div>
      </section>

      {/* 8 — USER FLOW */}
      <section className="cs-section" data-screen-label="Imprint — User flow">
        <div className="shell">
          <div className="cs-narrow">
            <div className="cs-kicker reveal"><span className="ln"></span>User flow mapping</div>
            <h2 className="cs-h2 reveal">Finding the exact moment things go wrong</h2>
            <p className="cs-body reveal">Before sketching any solutions I wanted to map how someone actually moves through existing agent builders step by step rather than assume the whole experience needed rethinking. What the user flow mapping showed was that <strong>five of the six steps were completely fine</strong>. The breakdown was always at step four: configuring logic and triggers. That is the single moment where you have to stop thinking like someone who knows their job and start thinking like someone who understands system architecture.</p>
          </div>
          <UserFlow />
          <div className="cs-narrow" style={{ marginTop: 36 }}>
            <p className="cs-body reveal">Finding that the problem was concentrated in one specific step changed the brief considerably. <strong>I was not trying to reinvent the entire setup experience. I just needed to replace that one step</strong> with something that matched how Maya actually thinks. This led to the central design question:</p>
            <div className="cs-em-card reveal">How might we let someone like Maya configure an AI agent by describing her work, without ever needing to think about how the system works underneath?</div>
          </div>
        </div>
      </section>

      {/* 9 — APPROACH */}
      <section className="cs-section" data-screen-label="Imprint — Approach exploration">
        <div className="shell">
          <div className="cs-narrow">
            <div className="cs-kicker reveal"><span className="ln"></span>Considering the approach</div>
            <p className="cs-body reveal">With a clear problem to solve I started sketching directions loosely before committing to anything, with a <strong>no-bad-ideas mindset</strong>. Three approaches came out of that exploration worth developing further.</p>
          </div>
          <div className="cs-mrow reveal">
            <div className="txt">
              <span className="cs-dir-tag fail">✕ Rejected</span>
              <h4 className="cs-dir-h">Form-based</h4>
              <p className="cs-body">The obvious starting point and I explored it properly rather than dismissing it early. The problem is that <strong>a friendlier form is still a form</strong>. Maya is still being asked to take what she knows and convert it into fields and categories which is exactly the translation problem I was trying to eliminate. The interface looks simpler on the surface but the cognitive work is identical. Not the right direction.</p>
            </div>
            <div className="vis"><Mockup url="app.imprint.ai/setup/playbook"><FormDirection /></Mockup></div>
          </div>
          <div className="cs-mrow flip reveal">
            <div className="txt">
              <span className="cs-dir-tag mid">~ Partial</span>
              <h4 className="cs-dir-h">Drag and drop</h4>
              <p className="cs-body">More promising. A visual node builder feels more intuitive than a spreadsheet of conditions and for users who think spatially it works reasonably well. But the mental model underneath is still technical. You are connecting triggers to actions with a nicer interface over the top. <strong>Jordan might get through this but Maya would not.</strong> I could see this working as an advanced editing view for a later phase but it was not the right entry point.</p>
            </div>
            <div className="vis"><ExploreWire kind="drag" /></div>
          </div>
          <div className="cs-mrow reveal">
            <div className="txt">
              <span className="cs-dir-tag win">✓ Chosen</span>
              <h4 className="cs-dir-h">Conversational interview</h4>
              <p className="cs-body">This worked because it flipped the dynamic entirely. Instead of asking Maya to structure her knowledge <strong>the interface does it for her</strong>. It asks questions, she answers however feels natural and the system interprets it. She never needs to think about how the agent works underneath. It was the only direction where the translation burden sat entirely on the product rather than the person.</p>
            </div>
            <div className="vis"><Mockup url="app.imprint.ai/setup/playbook"><S3 onNext={() => {}} /></Mockup></div>
          </div>
        </div>
      </section>

      {/* 10 — INFORMATION ARCHITECTURE */}
      <section className="cs-section" data-screen-label="Imprint — Information architecture">
        <div className="shell">
          <div className="cs-narrow">
            <div className="cs-kicker reveal"><span className="ln"></span>Information architecture</div>
            <h2 className="cs-h2 reveal">Getting the structure right before touching screens</h2>
            <p className="cs-body reveal">With the conversational interview chosen I mapped the information architecture before designing any detailed screens, because <strong>getting the phases wrong here would mean building the right screens in the wrong order</strong>. Four phases came out of that mapping, each with a distinct job.</p>
          </div>
          <IADiagram />
          <div className="cs-callout reveal">
            <div className="co-k">The phase I nearly talked myself out of</div>
            <p>Early on I had a version that went straight from Teach to Live and skipped Trust entirely. The reasoning seemed sound: if the interview went well, a preview step was just adding friction before the finish line.</p>
            <p>But one question kept bothering me. <strong>How does Maya actually know the interview went well?</strong> She answered some questions and the system said it understood but she has not watched the agent handle a real situation yet. Asking her to hand over customer conversations to something she has never seen respond felt like too big a leap, especially given that one of her core frustrations is having no way to verify the agent is behaving correctly until something goes wrong. <strong>Trust stayed in and it ended up being the most important part of the whole experience</strong>, because it is the moment where confidence either forms or it does not.</p>
          </div>
        </div>
      </section>

      {/* 11 — INTERFACE · SETUP */}
      <section className="cs-section" data-screen-label="Imprint — Setup screens">
        <div className="shell">
          <div className="cs-narrow">
            <PhaseKicker color="#6D7CE0">Considering the interface · 01 Setup</PhaseKicker>
            <p className="cs-body reveal">I worked through different directions for each core screen through prompting, exploring variations before committing to a final design. The goal was to figure out <strong>what each screen actually needed to do</strong> before deciding how it should look.</p>
          </div>
          <div className="cs-mrow reveal">
            <div className="txt">
              <p className="cs-body">An earlier direction led with product benefits on the welcome screen. Testing the concept with the persona in mind it became obvious quickly that promotional language does nothing for the hesitation Maya brings into a new tool she has already failed to use once before. Switching to <strong>three plain facts</strong>, ten minutes to complete, five steps and nothing goes live until you say so, answered the things she actually needed to know before clicking anything.</p>
            </div>
            <div className="vis"><Mockup url="app.imprint.ai/setup"><S1 onNext={() => {}} /></Mockup></div>
          </div>
          <div className="cs-mrow flip reveal">
            <div className="txt">
              <p className="cs-body">Using <strong>step segments rather than a progress bar</strong> came out of thinking about progressive disclosure. A progress bar implies an unknown distance. Step segments show Maya the exact shape of what she has signed up for before she starts, which removes one more reason to hesitate.</p>
            </div>
            <div className="vis"><Mockup url="app.imprint.ai/setup/context"><S2 onNext={() => {}} /></Mockup></div>
          </div>
        </div>
      </section>

      {/* 12 — INTERFACE · TEACH */}
      <section className="cs-section" data-screen-label="Imprint — Teach screens">
        <div className="shell">
          <div className="cs-narrow">
            <PhaseKicker color="#8B6FD4">Considering the interface · 02 Teach</PhaseKicker>
          </div>
          <div className="cs-mrow reveal">
            <div className="txt">
              <p className="cs-body">One question at a time, open text field and <strong>no example answers</strong>. An earlier exploration included example prompts to help people get started but they consistently produced more generic responses. People pattern-match off an example rather than describe how they actually work and for Maya that means the agent ends up reflecting the example rather than her real process. The blank field got more genuine answers every time so I kept it empty.</p>
            </div>
            <div className="vis"><Mockup url="app.imprint.ai/setup/playbook"><S3 onNext={() => {}} /></Mockup></div>
          </div>
          <div className="cs-mrow flip reveal">
            <div className="txt">
              <p className="cs-body">The confirmation card is <strong>the interaction I felt best about across the whole project</strong>. After each answer Maya sees what she wrote and directly below it what the agent understood from it. If the interpretation is off she can edit it on the spot. That moment of comparison is where she starts to build a real mental model of how the agent thinks, directly addressing her frustration of never being able to verify what it actually knows.</p>
            </div>
            <div className="vis"><Mockup url="app.imprint.ai/setup/playbook"><S4 onNext={() => {}} /></Mockup></div>
          </div>
          <div className="cs-mrow reveal">
            <div className="txt">
              <p className="cs-body">Guardrails got their own screen because they are <strong>a categorically different kind of decision</strong> from the playbook interview. The interview covers typical situations. Guardrails are about edge cases where getting it wrong has real consequences and a dedicated screen signals that difference rather than letting it get lost in the interview.</p>
            </div>
            <div className="vis"><Mockup url="app.imprint.ai/setup/guardrails"><S5 onNext={() => {}} /></Mockup></div>
          </div>
        </div>
      </section>

      {/* 13 — INTERFACE · TRUST */}
      <section className="cs-section" data-screen-label="Imprint — Trust screens">
        <div className="shell">
          <div className="cs-narrow">
            <PhaseKicker color="#B47AAC">Considering the interface · 03 Trust</PhaseKicker>
          </div>
          <div className="cs-mrow reveal">
            <div className="txt">
              <p className="cs-body">My first direction for this screen was read-only. Maya could watch the agent respond to scenarios but could not change anything. Going back to her frustrations it became obvious that was <strong>exactly the wrong call</strong>. A preview you cannot act on does not solve her core problem, it just surfaces it in a more visible way. Making the responses editable inline turned it from a source of anxiety into something genuinely useful.</p>
              <p className="cs-body">The scenarios run in <strong>a deliberate order</strong> too, starting with the most common situations and working toward edge cases. By the time Maya sees the agent mishandle something tricky she has already watched it handle several familiar situations well. That context makes a real difference to how she interprets the mistake and whether she feels ready to fix it rather than abandon the whole setup.</p>
            </div>
            <div className="vis"><TrustShowcase /></div>
          </div>
        </div>
      </section>

      {/* 14 — INTERFACE · LIVE */}
      <section className="cs-section" data-screen-label="Imprint — Live screens">
        <div className="shell">
          <div className="cs-narrow">
            <PhaseKicker color="#C26B8F">Considering the interface · 04 Live</PhaseKicker>
          </div>
          <div className="cs-mrow reveal">
            <div className="txt">
              <p className="cs-body">The go-live screen summarises what the agent knows before asking Maya to activate it. It is less of a checklist and more of <strong>a deliberate pause before a significant handoff</strong>, giving her one last moment to feel genuinely ready rather than just clicking through to the end. The "not ready, keep editing" link gets equal visual weight to the activate button for exactly that reason.</p>
            </div>
            <div className="vis"><Mockup url="app.imprint.ai/setup/go-live"><S8 onNext={() => {}} /></Mockup></div>
          </div>
          <div className="cs-mrow flip reveal">
            <div className="txt">
              <p className="cs-body">The pause button sits <strong>permanently in the top navigation</strong> on the dashboard. Early feedback called it visual clutter and honestly that is a fair point. But for Jordan, who needs to move fast and update things as processes change, being able to stop the agent at any point without hunting through settings is what tells him he is still in charge of something now running on his behalf. Tidying it into a menu would have made the screen cleaner and slightly less honest about what it is.</p>
            </div>
            <div className="vis"><Mockup url="app.imprint.ai/home"><S9 /></Mockup></div>
          </div>
        </div>
      </section>

      {/* 15 — FULL PROTOTYPE */}
      <section className="cs-section" data-screen-label="Imprint — Full prototype">
        <div className="shell">
          <div className="cs-narrow">
            <div className="cs-kicker reveal"><span className="ln"></span>The full prototype</div>
            <h2 className="cs-h2 reveal">Walk the whole journey, end to end.</h2>
          </div>
          <div style={{ marginTop: 36 }} className="reveal">
            <ImprintPrototype />
          </div>
        </div>
      </section>

      {/* 16 — CONCLUSION */}
      <section className="cs-section" data-screen-label="Imprint — Conclusion">
        <div className="shell cs-narrow">
          <div className="cs-kicker reveal"><span className="ln"></span>In conclusion</div>
          <p className="cs-lead reveal">Looking back at the original goal, the test was whether non-technical users could complete the full setup independently and feel confident enough to activate their agent rather than going back to edit. <strong>Maya has a way to describe her team's process in her own words and see exactly how the agent understood it before anything goes live.</strong> Jordan can move through setup quickly and knows he can adjust or pause the agent without needing technical help.</p>
          <p className="cs-body reveal">One thing this project made me think about more broadly is how you know when an AI output is wrong. For someone like Maya there is no obvious signal.</p>
          <div className="cs-em-card reveal" style={{ margin: '32px 0' }}>A confidently wrong response looks identical to a correct one and that puts a lot of responsibility on the interface to surface uncertainty rather than hide it.</div>
          <p className="cs-body reveal">It is something I want to keep exploring as AI products mature because I do not think the industry has figured it out yet.</p>
          <p className="cs-body reveal">The part I would revisit first is the <strong>Teach phase</strong>. The conversational interview works well for clear straightforward scenarios but there are situations where someone knows something is important and struggles to articulate it as a direct answer to a question. A follow-up prompt along the lines of <em>"can you give me an example of when that has come up?"</em> might get closer to the nuance a single open question sometimes misses. That would be the first thing to explore in a proper research round with real users.</p>
          <div className="cs-kicker reveal" style={{ marginTop: 48 }}><span className="ln"></span>Worth building on</div>
          <div className="cs-build">
            <div className="cs-build-item reveal"><span className="star">✦</span>A feedback loop where the agent surfaces situations it handled poorly and Maya can teach it from real conversations</div>
            <div className="cs-build-item reveal"><span className="star">✦</span>A collaborative mode where multiple team members contribute to the same playbook</div>
            <div className="cs-build-item reveal"><span className="star">✦</span>Starter templates for common roles so nobody has to begin from a blank page</div>
          </div>
          <p className="cs-signoff reveal">After all, no product is ever truly finished.</p>
        </div>
      </section>

      {/* 17 — NEXT PROJECT */}
      <section className="cs-next">
        <div className="shell">
          <a className="cs-next-link" href="#" onClick={(e) => { e.preventDefault(); onNav('water-management'); }}>
            <div>
              <div className="nl-k">Next · back to work</div>
              <div className="nl-t">Water Management Platform</div>
            </div>
            <span className="cs-next-arrow">→</span>
          </a>
        </div>
      </section>

      <Footer onNav={onNav} />
    </main>
  );
}

Object.assign(window, { ImprintCaseStudy, CountUp, PhaseKicker });
