/* Stablex case study — V2 "editorial" layout.
   Reached from the Morpara hero block (route: case/morpara) so both layouts
   coexist. Structure synthesized from 4 reference case studies:
   - narrow single text column, imagery breaks wider (Kyson Dana)
   - summary card up top + "Behind the work" credits close (Buzz Usborne)
   - pill section markers, numbered decision tracks, arrow impact bullets,
     sticky-note reflections (Vegapay)
   - type-over-image hero confidence (Robin Noguier)
   Site fonts (Clash Display / Cabinet Grotesk), green accent, red signature. */

const SXV2_HOME_LIGHT = (typeof window !== "undefined" && window.__resources && window.__resources.stablexHomeLight) || "assets/stablex-home-light.png";
const SXV2_HOME_DARK = (typeof window !== "undefined" && window.__resources && window.__resources.stablexHomeDark) || "assets/stablex-home-dark.png";
const SXV2_OLD_HOME = (typeof window !== "undefined" && window.__resources && window.__resources.stablexOldHomeScreen) || "assets/stablex-old-home-screen.png";
const SXV2_OLD_BUYSELL = (typeof window !== "undefined" && window.__resources && window.__resources.stablexOldBuysellScreen) || "assets/stablex-old-buysell-screen.png";
const SXV2_PROB_BEFORE_1 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexProbBefore1) || "assets/stablex-prob-before-1.png";
const SXV2_PROB_BEFORE_2 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexProbBefore2) || "assets/stablex-prob-before-2.png";
const SXV2_BEFORE_KYC = "assets/stablex-before-kyc.png";
const SXV2_PROB_AFTER_1 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexProbAfter1) || "assets/stablex-prob-after-1.png";
const SXV2_PROB_AFTER_2 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexProbAfter2) || "assets/stablex-prob-after-2.png";

const SXV2_NEW_BUYSELL = (typeof window !== "undefined" && window.__resources && window.__resources.stablexNewBuysell) || "assets/stablex-new-buysell.png";
const SXV2_BASIC_BUYSELL = (typeof window !== "undefined" && window.__resources && window.__resources.stablexBasicBuysell) || "assets/sx-basic-buysell.png";
const SXV2_ADVANCED_BUYSELL = (typeof window !== "undefined" && window.__resources && window.__resources.stablexAdvancedBuysell) || "assets/sx-advanced-buysell.png";
const SXV2_ADVANCED_MARKET = (typeof window !== "undefined" && window.__resources && window.__resources.stablexAdvancedMarket) || "assets/sx-advanced-market.png";
const SXV2_BASIC_BUYSELL_LIGHT = (typeof window !== "undefined" && window.__resources && window.__resources.stablexBasicBuysellLight) || "assets/sx-basic-buysell-light.png";
const SXV2_ADVANCED_BUYSELL_LIGHT = (typeof window !== "undefined" && window.__resources && window.__resources.stablexAdvancedBuysellLight) || "assets/sx-advanced-buysell-light.png";
const SXV2_FINAL_DEMO_WHITE = (typeof window !== "undefined" && window.__resources && window.__resources.stablexFinalDemoWhite) || "assets/sx-final-demo-white.png";
const SXV2_FINAL_QUICK_BUYSELL = (typeof window !== "undefined" && window.__resources && window.__resources.stablexFinalQuickBuysell) || "assets/sx-final-quick-buysell.png";
const SXV2_FINAL_ADV_MARKET2 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexFinalAdvMarket2) || "assets/sx-final-advanced-market2.png";
const SXV2_DS_DARK = (typeof window !== "undefined" && window.__resources && window.__resources.stablexDsComponentsDark) || "assets/ds-components-dark.png";
const SXV2_DS_LIGHT = (typeof window !== "undefined" && window.__resources && window.__resources.stablexDsComponentsLight) || "assets/ds-components-light.png";

/* onboarding flow screens (decision 2) — 01 & 02 pending re-upload (ASCII name) */
const SXV2_OB_01 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexOb01) || "assets/sx-ob-01-welcome.png";
const SXV2_OB_02 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexOb02) || "assets/sx-ob-02-account-opening.png";
const SXV2_OB_03 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexOb03) || "assets/sx-ob-milestone-light.png";
const SXV2_OB_04 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexOb04) || "assets/sx-ob-handoff-light.png";
const SXV2_OB_05 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexOb05) || "assets/sx-ob-live-light.png";
const SXV2_OB_SIGNUP = (typeof window !== "undefined" && window.__resources && window.__resources.stablexObSignup) || "assets/sx-ob-signup-light.png";
const SXV2_OB_DEMO_NEW = (typeof window !== "undefined" && window.__resources && window.__resources.stablexObDemoNew) || "assets/sx-ob-demo-new-light.png";
const SXV2_OB_BEFORE_SIGNUP = (typeof window !== "undefined" && window.__resources && window.__resources.stablexObBeforeSignup) || "assets/sx-ob-before-signup.png";
const SXV2_OB_BEFORE_LEVELS = (typeof window !== "undefined" && window.__resources && window.__resources.stablexObBeforeLevels) || "assets/sx-ob-before-levels.png";
const SXV2_OB_BEFORE_HOME2 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexObBeforeHome2) || "assets/sx-ob-before-home2.png";
const SXV2_DEMO_GAM_1 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexDemoGam1) || "assets/sx-demo-gam-1-light.png";
const SXV2_DEMO_GAM_2 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexDemoGam2) || "assets/sx-demo-gam-2-light.png";
const SXV2_DEMO_GAM_3 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexDemoGam3) || "assets/sx-demo-gam-3-light.png";
const SXV2_DEMO_GAM_4 = (typeof window !== "undefined" && window.__resources && window.__resources.stablexDemoGam4) || "assets/sx-demo-gam-4-light.png";

const SXV2_BRAND = (typeof window !== "undefined" && window.__resources && window.__resources.stablexBrand) || "assets/stablex-brand.png";

/* ---------- local building blocks ---------- */

function V2Pill({ children }) {
  return (
    <span className="inline-flex items-center whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[14px] uppercase tracking-[0.18em]"
          style={{ borderColor: "rgba(15,26,22,.25)", color: "rgba(15,26,22,.6)" }}>
      {children}
    </span>
  );
}

/* ---------- bottom floating section navigator (same dock as the Stablex page) ---------- */
function V2SectionNav() {
  const items = [
    ["v2-problem", "Problem"], ["v2-discovery", "Discovery"], ["v2-decisions", "Decisions"],
    ["v2-final", "Final design"], ["v2-impact", "Impact"],
  ];
  const [active, setActive] = React.useState("v2-problem");
  const [shown, setShown] = React.useState(false);
  const [navUp, setNavUp] = React.useState(false);
  const lastYRef = React.useRef(0);
  React.useEffect(() => {
    const pick = () => {
      const mid = window.scrollY + window.innerHeight * 0.5;
      let current = items[0][0];
      for (const [id] of items) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top + window.scrollY <= mid) current = id;
      }
      setActive(current);
      const y = window.scrollY;
      setShown(y > 40);
      if (y < lastYRef.current - 2) setNavUp(true);
      else if (y > lastYRef.current + 2 || y <= 2) setNavUp(false);
      lastYRef.current = y;
    };
    pick();
    window.addEventListener("scroll", pick, { passive: true });
    window.addEventListener("resize", pick);
    return () => { window.removeEventListener("scroll", pick); window.removeEventListener("resize", pick); };
  }, []);
  const go = (e, id) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
  };
  return (
    <React.Fragment>
    <nav className="md:hidden fixed left-0 right-0 z-40" style={{ top: navUp ? 64 : 0, opacity: shown ? 1 : 0, transition: "opacity .4s ease, top .3s ease", pointerEvents: shown ? "auto" : "none" }}>
      <div className="flex items-center gap-1 overflow-x-auto px-3 py-2" style={{ background: "#331110", borderBottom: "1px solid rgba(255,255,255,0.12)", WebkitOverflowScrolling: "touch" }}>
        {items.map(([id, label]) => {
          const on = active === id;
          return (
            <a key={id} href={`#${id}`} onClick={(e) => go(e, id)}
               className="shrink-0 text-[11px] uppercase tracking-[0.12em] rounded-full px-3.5 py-1.5 whitespace-nowrap"
               style={on ? { background: "#5C2E2C", color: "#ffffff", fontWeight: 600 } : { color: "rgba(255,255,255,0.55)" }}>
              {label}
            </a>
          );
        })}
      </div>
    </nav>
    <nav className="hidden md:block fixed left-1/2 z-40"
         style={{
           bottom: 24,
           transform: `translateX(-50%) translateY(${shown ? 0 : 28}px)`,
           opacity: shown ? 1 : 0,
           pointerEvents: shown ? "auto" : "none",
           transition: "opacity .5s cubic-bezier(0.16,1,0.3,1), transform .5s cubic-bezier(0.16,1,0.3,1)",
         }}>
      <div className="flex items-center gap-1 rounded-full px-2 py-2"
           style={{ background: "#331110", border: "1px solid rgba(255,255,255,0.1)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)", boxShadow: "0 16px 50px -18px rgba(0,0,0,0.9)" }}>
        {items.map(([id, label]) => {
          const on = active === id;
          return (
            <a key={id} href={`#${id}`} onClick={(e) => go(e, id)}
               className="text-[12px] uppercase tracking-[0.14em] rounded-full px-3.5 py-2 transition-all duration-300 whitespace-nowrap"
               style={on
                 ? { background: "#5C2E2C", color: "#ffffff", fontWeight: 600 }
                 : { color: "rgba(255,255,255,0.5)" }}>
              {label}
            </a>
          );
        })}
      </div>
    </nav>
    </React.Fragment>
  );
}

/* light striped placeholder for big panels (the global .stripe-placeholder is dark) */
function V2Placeholder({ label, height = 340 }) {
  return (
    <div className="grid place-items-center"
         style={{ height, backgroundImage: "repeating-linear-gradient(45deg, rgba(15,26,22,.05) 0 10px, transparent 10px 20px)" }}>
      <span className="text-[12px] uppercase tracking-[0.2em] px-4 text-center" style={{ color: "rgba(15,26,22,.5)" }}>{label}</span>
    </div>
  );
}

/* narrow editorial text column */
function V2Col({ children, className = "" }) {
  return <div className={`mx-auto px-6 max-w-[680px] ${className}`}>{children}</div>;
}

/* wide tinted panel that breaks out of the text column */
function V2Panel({ children, caption, tint = "#F4F4F5", className = "", maxW = "1080px" }) {
  return (
    <figure className={`mx-auto px-6 ${className}`} style={{ maxWidth: maxW }}>
      <div className="rounded-2xl overflow-hidden" style={{ background: tint }}>
        {children}
      </div>
      {caption && <figcaption className="mt-3 text-[14px]" style={{ color: "rgba(15,26,22,.5)" }}>{caption}</figcaption>}
    </figure>
  );
}

function V2Phone({ src, label, width = "190px", className = "", style, frameRadius = "1.6rem", screenRadius = "1.25rem", framePad = 5 }) {
  return (
    <div className={`relative ${className}`} style={{ width, ...style }}>
      <div className="relative" style={{ background: "#998787", borderRadius: frameRadius, padding: framePad, aspectRatio: "9 / 19.5", boxShadow: "0 40px 90px -40px rgba(0,0,0,.55)" }}>
        <div className="relative w-full h-full overflow-hidden grid place-items-center" style={{ borderRadius: screenRadius, background: src ? "#fff" : undefined }}>
          {src ? (
            <img src={src} alt={label} draggable="false" className="absolute inset-0 w-full h-full object-cover object-top select-none" />
          ) : (
            <div className="absolute inset-0 stripe-placeholder grid place-items-center">
              <span className="text-[12px] uppercase tracking-[0.16em] px-3 text-center leading-relaxed" style={{ color: "rgba(255,255,255,.45)" }}>{label}</span>
            </div>
          )}
          {src && <div className="absolute inset-0 pointer-events-none" style={{ background: "rgba(0,0,0,.03)" }} />}
        </div>
      </div>
    </div>
  );
}

/* collapsible research setup — questions + participant profiles (Discovery, option C) */
function V2ForkDiagram() {
  const node = (label, sub, tone) => (
    <div className="flex flex-col items-center text-center shrink-0">
      <span
        className="rounded-full px-3 py-1.5 text-[13px] whitespace-nowrap"
        style={
          tone === "fork"
            ? { background: "rgba(220,32,39,.08)", color: "#9a1f24", border: "1px dashed rgba(220,32,39,.4)" }
            : tone === "accent"
            ? { background: "rgba(21,217,151,.14)", color: "#0E8C63" }
            : { background: "rgba(15,26,22,.05)", color: "rgba(15,26,22,.75)" }
        }
      >
        {label}
      </span>
      {sub ? <span className="mt-1 text-[11px]" style={{ color: "rgba(15,26,22,.4)" }}>{sub}</span> : <span className="mt-1 text-[11px]">&nbsp;</span>}
    </div>
  );
  const arrow = (
    <span className="shrink-0 text-[15px] px-1 mt-[7px]" style={{ color: "rgba(15,26,22,.3)" }}>→</span>
  );
  return (
    <div className="mt-5 rounded-xl px-5 py-5" style={{ background: "rgba(15,26,22,.03)" }}>
      <div className="flex items-start gap-1.5">
        <span className="text-[11px] uppercase tracking-[0.16em] w-[58px] shrink-0 mt-[8px]" style={{ color: "rgba(15,26,22,.4)" }}>Before</span>
        <div className="flex items-start gap-1.5 flex-wrap">
          {node("Signup")}
          {arrow}
          {node("Pick One: Demo or Real Account?", null, "fork")}
          {arrow}
          {node("user freezes")}
        </div>
      </div>
      <div className="mt-3.5 flex items-start gap-1.5">
        <span className="text-[11px] uppercase tracking-[0.16em] w-[58px] shrink-0 mt-[8px]" style={{ color: "rgba(15,26,22,.4)" }}>After</span>
        <div className="flex items-start gap-1.5 flex-wrap">
          {node("Signup")}
          {arrow}
          {node("Demo", "Level 1")}
          {arrow}
          {node("ID Verification")}
          {arrow}
          {node("Real account", "Level 2", "accent")}
        </div>
      </div>
    </div>
  );
}

/* onboarding flow — Before fork vs After milestone path, with a framed screen
   aligned under each After step. Rendered on a dark panel (decision 2). */
function V2OnboardingFlow() {
  const lightTrack = "rgba(255,255,255,.14)";
  const node = (label, sub, tone) => {
    const styles = tone === "handoff"
      ? { background: "linear-gradient(rgba(21,217,151,.16),rgba(21,217,151,.16)), #0a0a0a", color: "#6EE7B7", border: "1px solid rgba(21,217,151,.4)" }
      : tone === "real"
      ? { background: "linear-gradient(rgba(232,0,28,.16),rgba(232,0,28,.16)), #0a0a0a", color: "#FF8A93", border: "1px solid rgba(232,0,28,.45)" }
      : tone === "fork"
      ? { background: "linear-gradient(rgba(232,0,28,.10),rgba(232,0,28,.10)), #0a0a0a", color: "#FF8A93", border: "1px dashed rgba(232,0,28,.5)" }
      : { background: "linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)), #0a0a0a", color: "rgba(255,255,255,.9)", border: "1px solid rgba(255,255,255,.12)" };
    return (
      <div className="flex flex-col items-center text-center">
        <span className="rounded-lg px-3 py-2 text-[14px] leading-tight font-medium whitespace-nowrap" style={styles}>{label}</span>
        {sub && <span className="mt-1.5 text-[11px] uppercase tracking-[0.12em]" style={{ color: "rgba(255,255,255,.4)" }}>{sub}</span>}
      </div>
    );
  };

  const after = [
    { label: "Sign up", src: SXV2_OB_SIGNUP, screen: "personal info" },
    { label: "Demo", sub: "Level 1", src: SXV2_OB_DEMO_NEW, screen: "demo home" },
    { label: "Milestone", sub: "Upgrade encouraged", src: SXV2_OB_03, screen: "demo milestone" },
    { label: "Hand-off", sub: "“you’re ready”", tone: "handoff", src: SXV2_OB_04, screen: "go-live" },
    { label: "Live Account", sub: "Level 2", tone: "real", src: SXV2_OB_05, screen: "live home" },
  ];

  const before = [
    { label: "Sign up", src: SXV2_OB_BEFORE_SIGNUP, screen: "signup form" },
    { label: "The Fork", src: SXV2_OB_BEFORE_LEVELS, screen: "account levels" },
    { label: "Demo", src: SXV2_OLD_HOME, screen: "markets home" },
    { label: "Live Account", tone: "handoff", src: SXV2_OB_BEFORE_HOME2, screen: "markets home" },
  ];

  const box = "rounded-2xl px-6 py-9 md:px-10 md:py-11";

  return (
    <div className="space-y-4">
      {/* BEFORE — left: fork text/diagram · right: 4 badged screens bleeding off bottom */}
      <div className={`${box} relative overflow-hidden md:min-h-[240px]`} style={{ background: "#331110" }}>
        <div className="relative z-10 md:max-w-[50%]">
          <div className="text-[12px] uppercase tracking-[0.2em] mb-4" style={{ color: "rgba(255,255,255,.45)" }}>Before</div>
          <div className="flex items-center gap-3 flex-wrap">
            {node("Sign up")}
            <svg width="30" height="46" viewBox="0 0 30 46" fill="none" className="shrink-0" style={{ color: "rgba(255,255,255,.3)" }}>
              <path d="M1 23 H10 C16 23 16 12 22 12 H29" stroke="currentColor" strokeWidth="1.5" fill="none" />
              <path d="M1 23 H10 C16 23 16 34 22 34 H29" stroke="currentColor" strokeWidth="1.5" fill="none" />
              <path d="M26 9 L29 12 L26 15" stroke="currentColor" strokeWidth="1.5" fill="none" />
              <path d="M26 31 L29 34 L26 37" stroke="currentColor" strokeWidth="1.5" fill="none" />
            </svg>
            <div className="flex flex-col gap-2">
              <div className="flex items-center gap-2">{node("Demo", null, "fork")}<span className="text-[12px]" style={{ color: "rgba(255,255,255,.4)" }}>no exit</span></div>
              <div className="flex items-center gap-2">{node("Live account", null, "fork")}<span className="text-[12px]" style={{ color: "rgba(255,255,255,.4)" }}>too early</span></div>
            </div>
          </div>
          <p className="mt-4 text-[14px]" style={{ color: "rgba(255,255,255,.5)" }}>User must choose before seeing the product.</p>
        </div>

        {/* right: four small badged screens with connectors, bottom third clipped */}
        <div className="hidden md:block absolute top-14 pointer-events-none" style={{ width: "46%", right: "calc(2.5rem + 100px)" }}>
          {/* badge row + connector lines */}
          <div className="relative" style={{ paddingTop: 26 }}>
            <svg viewBox="0 0 100 60" preserveAspectRatio="none" className="absolute inset-0 w-full h-full">
              {/* Sign up → The Fork : solid grey (badge mid-height) */}
              <path d="M11.5 43 H37.2" fill="none" stroke="rgba(255,255,255,.28)" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
              {/* The Fork → Demo : dashed green */}
              <path d="M37.2 43 H62.8" fill="none" stroke="rgba(21,217,151,.6)" strokeWidth="1.5" strokeDasharray="4 3" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
              {/* The Fork → Live Account : top-centre up, right over Demo, down into Live Account top-centre */}
              <path d="M37.2 26 V11 Q37.2 6 39 6 H86.7 Q88.5 6 88.5 11 V26" fill="none" stroke="rgba(21,217,151,.6)" strokeWidth="1.5" strokeDasharray="4 3" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
              {/* Demo → Live Account : dashed green */}
              <path d="M62.8 43 H88.5" fill="none" stroke="rgba(21,217,151,.6)" strokeWidth="1.5" strokeDasharray="4 3" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />aling-stroke" />
            </svg>
            <div className="relative flex justify-end gap-2.5">
              {before.map((s, i) => (
                <div key={"bb" + i} className="flex justify-center" style={{ width: "23%" }}>
                  {node(s.label, null, s.tone)}
                </div>
              ))}
            </div>
          </div>
          {/* phone row, aligned under each badge */}
          <div className="flex justify-end gap-2.5 mt-[10px]">
            {before.map((s, i) => (
              <div key={"bp" + i} className="flex justify-center" style={{ width: "23%" }}>
                <V2Phone src={s.src} label={s.screen} width="100%" frameRadius="0.85rem" screenRadius="0.66rem" framePad={2.5} />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* AFTER — its own box, same width */}
      <div className={box} style={{ background: "#331110" }}>
        <div className="text-[12px] uppercase tracking-[0.2em] mb-2" style={{ color: "rgba(255,255,255,.45)" }}>After</div>

        {/* dashed “upgrade from any step” connectors, joining Hand-off from ABOVE */}
        <svg viewBox="0 0 100 30" preserveAspectRatio="none" className="w-full block" style={{ height: 30 }}>
          <path d="M30 30 V13 Q30 8 30.83 8 H69.17 Q70 8 70 13 V30" fill="none" stroke="rgba(21,217,151,.6)" strokeWidth="1.5" strokeDasharray="4 3" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
          <path d="M50 30 V23 Q50 18 50.83 18 H70" fill="none" stroke="rgba(21,217,151,.6)" strokeWidth="1.5" strokeDasharray="4 3" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
        </svg>

        {/* node row */}
        <div className="relative grid gap-x-3" style={{ gridTemplateColumns: `repeat(${after.length}, minmax(0,1fr))` }}>
          <div className="absolute pointer-events-none" style={{ top: 18, left: "10%", right: "10%", height: 2, background: lightTrack }} />
          {after.map((s, i) => (
            <div key={"n" + i} className={"relative flex justify-center" + (i === after.length - 1 ? " mt-[62px] col-span-full md:mt-0 md:col-span-1" : "")} style={{ zIndex: 1 }}>
              {node(s.label, s.sub, s.tone)}
            </div>
          ))}
        </div>

        {/* screen row, aligned under each node — hidden on mobile (schema only) */}
        <div className="hidden md:grid gap-x-5 mt-6" style={{ gridTemplateColumns: `repeat(${after.length}, minmax(0,1fr))` }}>
          {after.map((s, i) => (
            <div key={"p" + i} className="flex justify-center">
              <V2Phone src={s.src} label={s.src ? s.screen : "pending"} width="95%" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* collapsible research setup — questions + participant profiles (Discovery, option C) */
function V2ResearchSetup() {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="mt-4">
      <button
        type="button"
        onClick={() => setOpen(!open)}
        className="inline-flex items-center gap-2 text-[16px] font-medium"
        style={{ color: "#0E8C63", background: "none", border: "none", padding: 0, cursor: "pointer" }}
      >
        {open ? "Hide research setup" : "See research setup"}
        <span style={{ transform: open ? "rotate(90deg)" : "none", transition: "transform .25s ease", display: "inline-block" }}>→</span>
      </button>
      {open && (
        <div className="mt-5 rounded-2xl px-7 py-6 md:px-8" style={{ background: "#FFFFFF" }}>
          <p className="text-[16px] leading-[1.7]" style={{ color: "rgba(15,26,22,.78)" }}>
            We showed early wireframes to 12 participants, 6 starters, 6 pros, and asked them to
            think out loud through two moments: their first impression of the demo account, and whether
            they could see a way out of it.
          </p>
          <p className="mt-4 text-[16px] leading-[1.7]" style={{ color: "rgba(15,26,22,.78)" }}>
            The pattern was consistent enough to act on. Starters didn&apos;t mind beginning in a demo —
            but only when the path to a real account was visible from the start. Without it, the demo
            felt like the product, not a starting point. Pros didn&apos;t object to the demo existing.
            They objected to not being able to ignore it.
          </p>
          <p className="mt-4 text-[16px] leading-[1.7]" style={{ color: "rgba(15,26,22,.78)" }}>
            That gave us a clear condition: demo as Level 1 works, but only if the upgrade is always
            one tap away, never hidden behind a flow they didn&apos;t ask for.
          </p>
          <div className="mt-7 pt-6 flex gap-8" style={{ borderTop: "1px solid rgba(15,26,22,.08)" }}>
            <div className="text-[14px] uppercase tracking-[0.18em]" style={{ color: "rgba(15,26,22,.5)" }}>Starters · 6</div>
            <div className="text-[14px] uppercase tracking-[0.18em]" style={{ color: "rgba(15,26,22,.5)" }}>Pros · 6</div>
          </div>
        </div>
      )}
    </div>
  );
}

/* numbered decision block — Vegapay track style */
function V2Decision({ n, title, body, whyNot, influence, panel, caption, tint, panelMaxW, hidePanelMobile }) {
  return (
    <div className="mt-24 first:mt-16">
      <V2Col>
        <Reveal>
          <h3 className="font-display font-medium text-[24px] md:text-[30px] leading-[1.15] tracking-tight" style={{ color: "#0f1a16" }}>
            <span style={{ color: "#331110" }}>{n}.</span> <span style={{ color: "#331110" }}>{title}</span>
          </h3>
        </Reveal>
        <Reveal delay={70}>
          <p className="mt-4 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.78)" }}>{body}</p>
        </Reveal>
        {whyNot && (
          <Reveal delay={120}>
            <p className="mt-4 text-[16px] leading-[1.65] italic" style={{ color: "rgba(15,26,22,.55)" }}>
              Instead of: {whyNot}
            </p>
          </Reveal>
        )}
        <Reveal delay={160}>
          <p className="mt-4 text-[16px] leading-[1.6] rounded-lg px-4 py-3 inline-block" style={{ background: "rgba(21,217,151,.1)", color: "rgba(15,26,22,.7)" }}>
            <span className="uppercase tracking-[0.14em] text-[12px]" style={{ color: "#331110" }}>My influence · </span>
            {influence}
          </p>
        </Reveal>
      </V2Col>
      <Reveal delay={120}>
        <div className={hidePanelMobile ? "hidden md:block" : undefined}>
          <V2Panel caption={caption} tint={tint} maxW={panelMaxW || "1080px"} className="mt-10">
            {panel}
          </V2Panel>
        </div>
      </Reveal>
    </div>
  );
}

/* ---------- the page ---------- */

/* A single maroon "SPOILER ALERT" card that lives just below the Summary.
   It starts collapsed (height 0) and, once the summary scrolls to the upper
   part of the viewport, expands in normal flow, pushing Discovery and the
   rest of the page down by its own height. Two metrics side by side. */
function V2SpoilerCard() {
  const ref = React.useRef(null);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const tick = () => {
      const sum = document.getElementById("v2-summary");
      if (!sum) return;
      const vh = window.innerHeight;
      // Trigger on the section's TOP (which doesn't move when the card grows),
      // not its bottom — measuring bottom creates a feedback loop because the
      // card lives inside this section. Hysteresis gap avoids flicker.
      const sT = sum.getBoundingClientRect().top;
      setOpen((o) => (o ? sT < vh * 0.05 : sT < -vh * 0.05));
    };
    tick();
    window.addEventListener("scroll", tick, { passive: true });
    window.addEventListener("resize", tick);
    return () => { window.removeEventListener("scroll", tick); window.removeEventListener("resize", tick); };
  }, []);
  const metrics = [
    ["82% → 59%", "Onboarding abandonment"],
    ["22% → 45%", "Active User Rate"],
  ];
  return (
    <div
      ref={ref}
      style={{
        overflow: "hidden",
        maxHeight: open ? "360px" : "0px",
        opacity: open ? 1 : 0,
        marginTop: open ? "20px" : "0px",
        transition: "max-height .8s cubic-bezier(0.16,1,0.3,1), opacity .6s ease, margin-top .8s cubic-bezier(0.16,1,0.3,1)",
      }}>
      <div className="rounded-2xl px-7 py-7 md:px-9 md:py-8" style={{ background: "#331110", color: "#fff", transform: open ? "translateY(0) scale(1)" : "translateY(14px) scale(.93)", transformOrigin: "top center", transition: "transform .72s cubic-bezier(0.34,1.56,0.64,1) .05s" }}>
        <div className="text-[12px] uppercase tracking-[0.24em]" style={{ color: "#15D997" }}>Spoiler alert</div>
        <div className="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-7 sm:gap-10">
          {metrics.map(([num, label], i) => (
            <div key={i}>
              <div className="font-display font-normal text-[34px] md:text-[40px] leading-none tracking-tight" style={{ color: "#15D997" }}>{num}</div>
              <div className="mt-3 text-[15px] text-white/85 leading-snug">{label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function StablexCaseV2({ navigate }) {
  return (
    <div className="relative" style={{ background: "#FCFCFC", color: "#0f1a16" }}>
      <V2SectionNav />

      {/* 1 — HERO (deep brand maroon, brand mark right of the H1) */}
      <header className="relative overflow-hidden" style={{ background: "#331110", color: "#fff" }}>
        <div className="mx-auto max-w-[1080px] px-6 pt-36 pb-36">
          <Reveal delay={40}>
            <a href="https://apps.apple.com/tr/app/stablex-kripto-para-borsas%C4%B1/id1591457284" target="_blank" rel="noopener noreferrer" aria-label="View Stablex on the App Store" className="md:hidden inline-block mb-5">
              <img src={SXV2_BRAND} alt="Stablex brand" draggable="false" className="block rounded-2xl object-cover select-none" style={{ width: 72, height: 72 }} />
            </a>
          </Reveal>
          <Reveal>
            <div className="text-[14px] uppercase tracking-[0.22em] text-white/45">Stablex Crypto Trading App · 2025</div>
          </Reveal>
          <div className="mt-6 flex items-center justify-between gap-10">
            <Reveal delay={80}>
              <h1 className="font-display font-medium text-[40px] md:text-[58px] leading-[1.06] tracking-[-0.02em] max-w-[18ch]" style={{ color: "#ffffff" }}>
                The crypto exchange with demo account: <span style={{ color: "#E8001C" }}>To earn starters and pros.</span>
              </h1>
            </Reveal>
            <Reveal delay={120}>
              <a href="https://apps.apple.com/tr/app/stablex-kripto-para-borsas%C4%B1/id1591457284" target="_blank" rel="noopener noreferrer" aria-label="View Stablex on the App Store" className="hidden md:block shrink-0 transition-transform hover:-translate-y-1">
                <img src={SXV2_BRAND} alt="Stablex brand" draggable="false"
                     className="block rounded-2xl object-cover select-none"
                     style={{ width: 160, height: 160 }} />
              </a>
            </Reveal>
          </div>
        </div>
      </header>

      {/* 3 — SUMMARY CARD */}
      <section id="v2-summary" className="pt-20 pb-24">
        <V2Col>
          <Reveal>
            <div className="rounded-2xl px-7 py-7 md:px-9 md:py-8" style={{ background: "rgba(220,32,39,.05)" }}>
              <div className="text-[14px] uppercase tracking-[0.2em]" style={{ color: "rgba(15,26,22,.5)" }}>Summary</div>
              <p className="mt-4 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.85)" }}>
                The product had the backing of one of Turkey&apos;s biggest banks. They came to us for a
                redesign aimed at properly positioning their demo account. As the design lead of their
                sole agency, I owned the <strong className="font-bold" style={{ color: "#0f1a16" }}>UX design</strong> end-to-end and led the <strong className="font-bold" style={{ color: "#0f1a16" }}>Researcher</strong> and the <strong className="font-bold" style={{ color: "#0f1a16" }}>UI Designer</strong> working under me: steering the process, signing off the final decisions.
              </p>
            </div>
          </Reveal>
          <V2SpoilerCard />
        </V2Col>
      </section>
      <section id="v2-problem" className="pb-28">
        <V2Col>
          <Reveal><V2Pill>The problem</V2Pill></Reveal>
          <Reveal delay={70}>
            <h2 className="mt-6 font-display font-medium text-[28px] md:text-[36px] leading-[1.12] tracking-tight" style={{ color: "#240B0A" }}>
              2 choices at the door. Most users picked none of them.
            </h2>
          </Reveal>
          <Reveal delay={130}>
            <p className="mt-6 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.78)" }}>
              Abandonment rate was 82%. The obvious suspect was the onboarding, but the real problem was right after that. On first open, the app forced a decision: enter via demo, verify your identity now, or leave. For starters, the demo felt like a dead end with no clear path forward. For anyone who tried KYC and didn&apos;t finish, the product became inaccessible, they&apos;d neither explored nor committed. The fork was a wall with two gates, and most users walked away from all of them.
            </p>
          </Reveal>
        </V2Col>
        <div className="mx-auto px-6 max-w-[1080px] mt-12 grid grid-cols-1 sm:grid-cols-2 gap-6 items-start">
          <Reveal delay={120}>
            <figure>
              <div className="rounded-2xl overflow-hidden" style={{ background: "#F4F4F5" }}>
                <div className="flex justify-center items-end gap-4 px-5 pt-8 pb-0 overflow-hidden">
                  <V2Phone src={SXV2_BEFORE_KYC} label="before: forced fork" width="40%" style={{ marginBottom: "-12%" }} />
                  <V2Phone src={SXV2_PROB_BEFORE_2} label="old trade" width="40%" style={{ marginBottom: "-22%" }} />
                </div>
              </div>
              <figcaption className="mt-3 text-[14px]" style={{ color: "rgba(15,26,22,.5)" }}>Before, two gates, most users chose neither.</figcaption>
            </figure>
          </Reveal>
          <Reveal delay={180}>
            <figure>
              <div className="rounded-2xl overflow-hidden" style={{ background: "rgba(220,32,39,.05)" }}>
                <div className="flex justify-center items-end gap-4 px-5 pt-8 pb-0 overflow-hidden">
                  <V2Phone src={SXV2_PROB_AFTER_1} label="new home" width="40%" style={{ marginBottom: "-12%" }} />
                  <V2Phone src={SXV2_PROB_AFTER_2} label="new buy-sell" width="40%" style={{ marginBottom: "-22%" }} />
                </div>
              </div>
              <figcaption className="mt-3 text-[14px]" style={{ color: "rgba(15,26,22,.5)" }}>After, same product, two honest entry points.</figcaption>
            </figure>
          </Reveal>
        </div>
      </section>

      {/* 5 — DISCOVERY */}
      <section id="v2-discovery" className="py-24" style={{ background: "#F4F4F5" }}>
        <V2Col>
          <Reveal><V2Pill>Discovery</V2Pill></Reveal>
          <Reveal delay={70}>
            <h2 className="mt-6 font-display font-medium text-[28px] md:text-[36px] leading-[1.12] tracking-tight" style={{ color: "#240B0A" }}>
              We went in with one big question. We came out with two answers.
            </h2>
          </Reveal>
          <Reveal delay={130}>
            <p className="mt-6 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.78)" }}>
              We needed to understand how it actually behaved in the wild: <strong className="font-bold" style={{ color: "#0f1a16" }}>a genuine entry point, or just a speed bump for anyone who already knew what they wanted?</strong> So we ran 12 in-depth interviews across both groups, benchmarked local and global exchanges.
            </p>
          </Reveal>
          <div className="mt-10 space-y-5">
            {[
              {
                q: "The demo wasn't building confidence. It was absorbing it.",
                body: "Users who entered via demo practised, felt fine, and stayed. Nothing pushed them forward, and nothing told them they were ready to leave. The demo had no direction and no exit.",
                diagram: false,
                led: "demo-first onboarding with milestone-driven upgrade",
              },
              {
                q: "The fork wasn't transparency. It was decision fatigue at the worst possible moment.",
                body: "Asking users to choose between demo, KYC, and leaving, before they'd seen a single screen of the product, front-loaded the heaviest cognitive load onto the moment of least trust. Users who picked KYC and didn't finish couldn't explore; users who picked demo couldn't easily graduate.",
                led: "removing the fork entirely.",
              },
            ].map((c, i) => (
              <Reveal key={i} delay={i * 70}>
                <blockquote className="rounded-2xl px-7 py-6 md:px-8" style={{ background: "#FFFFFF" }}>
                  <p className="font-display font-medium text-[19px] md:text-[21px] leading-[1.35] tracking-tight" style={{ color: "#331110" }}>“{c.q}”</p>
                  <p className="mt-3 text-[16px] leading-[1.65]" style={{ color: "rgba(15,26,22,.65)" }}>{c.body}</p>
                  <div className="mt-4 flex flex-wrap items-center gap-x-1.5 gap-y-2">
                    <span className="inline-flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-[14px]" style={{ background: "rgba(220,32,39,.05)", color: "#0f1a16" }}>
                      led to → <strong className="font-bold">{c.led}</strong>
                    </span>
                    {c.ledNote && <span className="text-[15px]" style={{ color: "rgba(15,26,22,.5)" }}>{c.ledNote}</span>}
                  </div>
                  {c.diagram && <V2ForkDiagram />}
                </blockquote>
              </Reveal>
            ))}
          </div>
          <Reveal delay={120}>
            <V2ResearchSetup />
          </Reveal>
        </V2Col>
      </section>

      {/* 6 — DECISIONS */}
      <section id="v2-decisions" className="py-28">
        <V2Col>
          <Reveal><V2Pill>Key decisions</V2Pill></Reveal>
          <Reveal delay={70}>
            <h2 className="mt-6 font-display font-medium text-[28px] md:text-[36px] leading-[1.12] tracking-tight" style={{ color: "#240B0A" }}>
              Over six months, 3 decisions shaped everything else.
            </h2>
          </Reveal>
        </V2Col>

        <V2Decision
          n="1" title="Give the demo a direction" hidePanelMobile
          body="The demo had no direction. People practiced, felt fine, and stayed, because nothing told them they were ready to leave. We rebuilt it as a sequence of small milestones, each building toward an explicit “you could've done this for real” moment."
          influence="I defined the milestone structure and the tone of the hand-off moment, the point where the demo stops feeling like practice and starts feeling like proof."
          caption="Demo milestones building toward the real-account hand-off."
          tint="#331110"
          panel={
            <div className="flex justify-center items-end gap-8 md:gap-11 px-8 pt-12 pb-0 overflow-hidden">
              <V2Phone src={SXV2_DEMO_GAM_1} label="demo step 2" width="179px" style={{ marginBottom: "-70px" }} />
              <V2Phone src={SXV2_DEMO_GAM_2} label="tips popup" width="179px" style={{ marginBottom: "-110px" }} />
              <V2Phone src={SXV2_DEMO_GAM_3} label="demo step 5" width="179px" style={{ marginBottom: "-70px" }} />
              <V2Phone src={SXV2_DEMO_GAM_4} label="congrats popup" width="179px" style={{ marginBottom: "-110px" }} />
            </div>
          }
        />
        <V2Decision
          n="2" title="Start onboarding inside the demo"
          body="Three account levels were impossible to explain before a user had touched the product. So we stopped trying. Onboarding starts inside the demo; the ID approval upgrades the account automatically."
          influence="It was enough for me to present the research findings to the stakeholders in a quantitative manner and convince them."
          caption="From a forced choice to a guided path, each After step with its screen."
          tint="transparent"
          panel={<V2OnboardingFlow />}
        />
        <V2Decision
          n="3" title="Split Buy-Sell into Basic and Advanced"
          body="In research, starters told us the trading screen felt overwhelming, too many controls, too much risk of making a wrong move. For pros, that same density was the point: it signalled control, not chaos."
          influence="This insight from research is what led me to propose the Basic and Advanced Buy-Sell split, a pattern common in trading apps."
          caption="Basic buy, the calm default. Advanced lives one tap deeper."
          tint="#331110"
          panelMaxW="680px"
          panel={
            <div className="flex justify-center items-end gap-8 px-8 pt-12 pb-0 overflow-hidden">
              <V2Phone src={SXV2_BASIC_BUYSELL_LIGHT} label="basic buy" width="190px" style={{ marginBottom: "-80px" }} />
              <V2Phone src={SXV2_ADVANCED_BUYSELL_LIGHT} label="advanced buy-sell" width="190px" style={{ marginBottom: "-120px" }} />
            </div>
          }
        />
      </section>

      {/* 8 — FINAL DESIGN (incl. design system as sub-section) */}
      <section id="v2-final" className="py-28" style={{ background: "#F4F4F5" }}>
        <V2Col className="text-center">
          <Reveal><V2Pill>Final design</V2Pill></Reveal>
        </V2Col>
        <Reveal delay={90}>
          <V2Panel className="mt-12" tint="#FFFFFF">
            <div className="hidden md:flex justify-center items-end gap-[30px] md:gap-[38px] px-8 pt-14 pb-0 overflow-hidden">
              <V2Phone src={SXV2_FINAL_DEMO_WHITE} label="demo white" width="176px" style={{ marginBottom: "-60px" }} />
              <V2Phone src={SXV2_HOME_DARK} label="home dark" width="176px" style={{ marginBottom: "-60px" }} />
              <V2Phone src={SXV2_FINAL_QUICK_BUYSELL} label="quick buy-sell" width="176px" style={{ marginBottom: "-60px" }} />
              <V2Phone src={SXV2_FINAL_ADV_MARKET2} label="advanced market" width="176px" style={{ marginBottom: "-60px" }} />
            </div>
            <div className="md:hidden grid grid-cols-2 gap-5 p-5">
              <V2Phone src={SXV2_FINAL_DEMO_WHITE} label="demo white" width="100%" />
              <V2Phone src={SXV2_HOME_DARK} label="home dark" width="100%" />
              <V2Phone src={SXV2_FINAL_QUICK_BUYSELL} label="quick buy-sell" width="100%" />
              <V2Phone src={SXV2_FINAL_ADV_MARKET2} label="advanced market" width="100%" />
            </div>
          </V2Panel>
        </Reveal>

        {/* Design system — compact sub-section of Final design */}
        <V2Col className="mt-20">
          <Reveal>
            <h3 className="font-display font-medium text-[22px] md:text-[26px] leading-[1.15] tracking-tight" style={{ color: "#0f1a16" }}>Design system</h3>
          </Reveal>
          <Reveal delay={70}>
            <p className="mt-3 text-[19px] md:text-[20px] leading-[1.55]" style={{ color: "rgba(15,26,22,.5)" }}>
              One token-based source of truth, built on Figma Variables, two modes, eight modules, components that recolor to whatever surface they land on.
            </p>
          </Reveal>
          <Reveal delay={100}>
            <div className="mt-6 flex flex-wrap gap-2">
              {["Colors", "Grid", "Text Styles", "Icons", "Shadows", "Components", "Organisms", "Animation Assets"].map((m) => (
                <span key={m} className="inline-flex items-center whitespace-nowrap rounded-full px-3.5 py-1.5 text-[13px]"
                      style={{ background: "rgba(15,26,22,.05)", color: "rgba(15,26,22,.65)" }}>{m}</span>
              ))}
            </div>
          </Reveal>
        </V2Col>

        {/* Visual proof — the dominant element: one component, dark + light context */}
        <Reveal delay={110}>
          <V2Panel className="mt-10" tint="#FFFFFF" caption="Same component, two modes, colors resolve from tokens, not from hand-painting.">
            <div className="grid grid-cols-1 sm:grid-cols-2">
              <div className="flex items-center justify-center p-[30px]" style={{ background: "#331110" }}>
                <img src={SXV2_DS_DARK} alt="Stablex design system, components, dark mode" className="h-auto block" style={{ width: "75%" }} />
              </div>
              <div className="flex items-center justify-center p-[30px]" style={{ background: "#FFFFFF" }}>
                <img src={SXV2_DS_LIGHT} alt="Stablex design system, components, light mode" className="h-auto block" style={{ width: "75%" }} />
              </div>
            </div>
          </V2Panel>
        </Reveal>

        {/* My influence + quiet link out */}
        <V2Col className="mt-7">
          <Reveal delay={140}>
            <p className="text-[16px] leading-[1.6] rounded-lg px-4 py-3 inline-block" style={{ background: "rgba(21,217,151,.1)", color: "rgba(15,26,22,.7)" }}>
              <span className="uppercase tracking-[0.14em] text-[12px]" style={{ color: "#331110" }}>My influence · </span>
              My role here was direction, not execution, I guided the UI designer and approved every screen.
            </p>
          </Reveal>
          <Reveal delay={180}>
            <div className="mt-5 flex flex-wrap items-center gap-x-7 gap-y-2 text-[15px]">
              <a href="https://www.figma.com/design/XX87Hoov8U3LVpJInovKio/Stablex-App-Deisgn-System?node-id=648-13713&t=0VEtoxtqx5UKSQ4l-1" target="_blank" rel="noopener noreferrer"
                 className="inline-block"
                 style={{ color: "#0E8C63", textDecoration: "underline", textUnderlineOffset: "3px", textDecorationColor: "rgba(14,140,99,.4)" }}>
                View in Figma →
              </a>
              <a href="https://apps.apple.com/tr/app/stablex-kripto-para-borsas%C4%B1/id1591457284" target="_blank" rel="noopener noreferrer"
                 className="inline-block"
                 style={{ color: "#0E8C63", textDecoration: "underline", textUnderlineOffset: "3px", textDecorationColor: "rgba(14,140,99,.4)" }}>
                View in App Store →
              </a>
              <a href="https://play.google.com/store/apps/details?id=com.stablex&gl=TR" target="_blank" rel="noopener noreferrer"
                 className="inline-block"
                 style={{ color: "#0E8C63", textDecoration: "underline", textUnderlineOffset: "3px", textDecorationColor: "rgba(14,140,99,.4)" }}>
                View in Play Store →
              </a>
            </div>
          </Reveal>
        </V2Col>
      </section>
      {/* 9 — IMPACT */}
      <section id="v2-impact" className="py-28" style={{ background: "#331110", color: "#fff" }}>
        <V2Col>
          <Reveal><span className="inline-flex items-center rounded-full border border-white/25 px-3.5 py-1.5 text-[14px] uppercase tracking-[0.18em] text-white/60">Impact</span></Reveal>
          <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-10">
            {[
              ["82% → 59%", "Onboarding abandonment (demo)", "3 months post-launch · app analytics funnel · KYC completion held roughly flat, this new flow didn't affect it"],
              ["26% → 30%", "Active user rate (MAU / Total Registered Users)", "grew within the first 2 months post-launch"],
            ].map(([num, label, micro]) => (
              <Reveal key={label}>
                <div>
                  <div className="font-display font-normal text-[36px] md:text-[44px] leading-none tracking-tight" style={{ color: "#15D997" }}>{num}</div>
                  <div className="mt-3 text-[16px] text-white/85">{label}</div>
                  <div className="mt-1.5 text-[14px] leading-[1.6] text-white/45">{micro}</div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={120}>
            <div className="mt-12 rounded-2xl px-7 py-8 md:px-9" style={{ background: "rgba(255,255,255,.06)" }}>
              <div className="text-[14px] uppercase tracking-[0.2em] text-white/45">Reflections</div>
              <p className="mt-4 text-[16px] leading-[1.7] text-white/80 max-w-[60ch]">
                The 1-year active-user target is 45%&mdash;we&apos;re currently at 30% and on track, but we
                haven&apos;t reached it yet. Forecasts indicate that the gap will close within a year.
              </p>
            </div>
          </Reveal>
        </V2Col>
      </section>

      {/* 10 — BEHIND THE WORK */}
      <section className="py-24">
        <V2Col>
          <Reveal>
            <div className="rounded-2xl px-7 py-8 md:px-9" style={{ background: "rgba(220,32,39,.05)" }}>
              <div className="text-[14px] uppercase tracking-[0.2em]" style={{ color: "rgba(15,26,22,.5)" }}>Behind the work</div>
              <div className="mt-6 grid grid-cols-2 md:grid-cols-3 gap-y-6 gap-x-6 text-[16px]">
                <div>
                  <div className="text-[14px] uppercase tracking-[0.14em]" style={{ color: "#331110" }}>Role</div>
                  <div className="mt-1.5" style={{ color: "rgba(15,26,22,.85)" }}>Design Lead (process &amp; final calls) &amp; UX Designer</div>
                </div>
                <div>
                  <div className="text-[14px] uppercase tracking-[0.14em]" style={{ color: "#331110" }}>Team</div>
                  <div className="mt-1.5" style={{ color: "rgba(15,26,22,.85)" }}>Researcher · UI Designer · Project Manager · Design Lead (me)</div>
                </div>
                <div>
                  <div className="text-[14px] uppercase tracking-[0.14em]" style={{ color: "#331110" }}>Date</div>
                  <div className="mt-1.5" style={{ color: "rgba(15,26,22,.85)" }}>2024 · 6 months</div>
                </div>
              </div>
              <div className="mt-7 pt-6" style={{ borderTop: "1px solid rgba(15,26,22,.12)" }}>
                <div className="text-[14px] uppercase tracking-[0.14em]" style={{ color: "#331110" }}>What I learned</div>
                <p className="mt-2 text-[16px] leading-[1.7]" style={{ color: "rgba(15,26,22,.75)" }}>
                  Designing the mechanics that nudge and incentivize users to upgrade from a demo account
                  was a first for me. Working through those flows stretched me, it sharpened how I think
                  about motivation and timing, and honestly, I enjoyed every part of it.
                </p>
              </div>
            </div>
          </Reveal>
        </V2Col>
      </section>

      {/* 11 — FOOTER */}
      <section className="py-12" style={{ background: "#331110", color: "#fff" }}>
        <Reveal>
          <div className="w-full px-6 md:px-10">
            <div className="grid grid-cols-2 gap-8 md:flex md:items-center md:justify-between md:gap-6">
              <button onClick={() => { navigate("case/algora"); window.scrollTo({ top: 0 }); }} className="text-left shrink-0 order-2 md:order-none">
                <div className="text-[12px] uppercase tracking-[0.18em] text-white/45">Previous project</div>
                <div className="mt-1.5 font-display text-[20px] md:text-[22px] text-white">Algora</div>
              </button>
              <div className="flex flex-col items-center text-center gap-2 col-span-2 order-1 md:order-none flex-1">
                <h2 className="font-display font-normal text-[28px] md:text-[48px] leading-[1] tracking-tight">
                  Let's work <span style={{ color: "#FF5A63" }}>together</span><span style={{ color: "rgba(255,255,255,.25)" }}>.</span>
                </h2>
                <a href="mailto:tunaaldemir@gmail.com" className="mt-3 inline-block font-display text-[15px] md:text-[18px] text-white/80 hover:text-white link-underline">
                  tunaaldemir@gmail.com
                </a>
                <a href={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent) ? "tel:+31634483433" : "facetime:+31634483433"}
                   className="inline-block font-display text-[13px] md:text-[15px] text-white/45 hover:text-white/75">
                  +31 06 34 48 34 33
                </a>
                <div className="mt-3 flex items-center gap-3">
                  <a href="https://wa.me/905353130311" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" className="transition-transform hover:-translate-y-0.5">
                    <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="17" cy="17" r="17" fill="#fff"/>
                      <g transform="translate(7 7) scale(0.833)">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.892c0 2.096.549 4.142 1.595 5.945L0 24l6.335-1.652a12.062 12.062 0 005.71 1.447h.005c6.585 0 11.946-5.335 11.949-11.893a11.821 11.821 0 00-3.484-8.45" fill="#331110"/>
                      </g>
                    </svg>
                  </a>
                  <a href="https://www.linkedin.com/in/tuna-aldemir/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="transition-transform hover:-translate-y-0.5">
                    <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="17" cy="17" r="17" fill="#fff"/>
                      <path d="M12.6 13.2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-1.27 1.15h2.53v8.15h-2.53v-8.15Zm4.12 0h2.42v1.11h.04c.34-.62 1.16-1.28 2.39-1.28 2.56 0 3.03 1.64 3.03 3.78v4.54h-2.53v-4.03c0-.96-.02-2.2-1.36-2.2-1.36 0-1.57 1.04-1.57 2.13v4.1h-2.53v-8.15Z" fill="#331110"/>
                    </svg>
                  </a>
                  <a href="assets/Tuna_Aldemir_CV.pdf" target="_blank" rel="noopener noreferrer" aria-label="View CV" className="transition-transform hover:-translate-y-0.5">
                    <span className="grid place-items-center size-[34px] rounded-full" style={{ background: "#fff", color: "#331110" }}>
                      <span className="font-display font-semibold text-[13px] tracking-tight">CV</span>
                    </span>
                  </a>
                </div>
              </div>
              <button onClick={() => { navigate("case/morpara"); window.scrollTo({ top: 0 }); }} className="text-right shrink-0 order-3 md:order-none justify-self-end">
                <div className="text-[12px] uppercase tracking-[0.18em] text-white/45">Next project</div>
                <div className="mt-1.5 font-display text-[20px] md:text-[22px] text-white">Morpara</div>
              </button>
            </div>
          </div>
        </Reveal>
      </section>
    </div>
  );
}

window.StablexCaseV2 = StablexCaseV2;
