/* Sabancı University case study — higher-education website redesign.
   Same editorial template as the Alternatifbank / Juzdan cases (narrow text
   column, pill section markers, numbered decision tracks, summary card up
   top, "Behind the work" credits close), plus two sections unique to this
   brief: Stakeholder workshops (between Solution and Final design) and a
   3-metric Impact grid (no final numbers yet). Signature color is a
   near-black navy, per request. SU-prefixed locals keep it collision-free
   from every other case file's globals.
   No real screenshots exist yet — every [SCREEN: ...] slot from the content
   brief is a labeled placeholder panel. The Problem section has no [SCREEN]
   tag in the brief, so it has no panel here either — kept faithful to the
   given structure rather than inventing one. */

const SU_DARK = "#0A0D1C";      // signature surface — hero, impact, footer, nav dock (near-black navy)
const SU_HEAD = "#0A0D1C";      // heading color on light backgrounds (same — already near-black)
const SU_ACCENT = "#006ADA";    // bright accent — colored H1 clause, footer "together", link color (Sabancı logo blue, 2 shades lighter)
const SU_TINT = "rgba(10,13,28,.05)";   // light tint bg for cards (rgb of SU_DARK)
const SU_ACTIVE = "#242A45";    // active nav-dock pill (lighter navy)
const SU_LOGO_SRC =
  (typeof window !== "undefined" && window.__resources && window.__resources.sabanciLogo) ||
  "assets/sabanci-logo.png";
const SU_HERO_VIDEO = "assets/sabanci-hero.mp4";
const SU_SHOT_WORKSHOP = "assets/sabanci-workshop-photo.png";
const SU_VIDEO_USABILITY = "assets/sabanci-usability-tasks.mp4";
const SU_SHOT_USER_PATHS = "assets/sabanci-user-paths.png";
const SU_SHOT_IA = "assets/sabanci-ia-before-after.png";
const SU_SHOT_HOMEPAGE = "assets/sabanci-homepage-before-after.png";
const SU_SHOT_FINAL_SHOWCASE = "assets/sabanci-final-showcase.png";
const SU_WEBSITE_URL = "https://www.sabanciuniv.edu/en";
const SU_FIGMA_URL = "https://www.figma.com/file/ASb9KZefznqfOQByBoGAYJ/Sabanc%C4%B1-University-Responsive-Web?type=design&node-id=0%3A1&mode=design&t=kKUoKY8ECMiTTSPg-1";
const SU_GALLERY = [
  { src: "assets/sabanci-gallery-home-page.png", alt: "Home page", label: "Home page" },
  { src: "assets/sabanci-gallery-navigation.png", alt: "Navigation", label: "Navigation" },
  { src: "assets/sabanci-gallery-faculty-page.png", alt: "Faculty page", label: "Faculty page" },
  { src: "assets/sabanci-gallery-design-system-colors.png", alt: "Design system — colors & typography", label: "Design system" },
  { src: "assets/sabanci-gallery-design-system-grid.png", alt: "Design system — grid & components", label: "Design system" },
  { src: "assets/sabanci-gallery-design-system-nav.png", alt: "Design system — navigation & sections", label: "Design system" },
  { src: "assets/sabanci-gallery-laptop-mockup.png", alt: "Laptop mockup", label: "Mockup" },
  { src: "assets/sabanci-gallery-phone-mockup.png", alt: "Phone mockup", label: "Mockup" },
];

/* ---------- local building blocks (SU-prefixed to stay collision-free) ---------- */

function SUPill({ 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>
  );
}

function SUSectionNav() {
  const items = [
    ["su-problem", "Problem"], ["su-discovery", "Discovery"], ["su-solution", "Solution"],
    ["su-workshops", "Workshops"], ["su-final", "Final design"],
  ];
  const [active, setActive] = React.useState("su-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: SU_DARK, 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: SU_ACTIVE, 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: SU_DARK, 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: SU_ACTIVE, color: "#ffffff", fontWeight: 600 } : { color: "rgba(255,255,255,0.5)" }}>
              {label}
            </a>
          );
        })}
      </div>
    </nav>
    </React.Fragment>
  );
}

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

/* light striped placeholder for big panels — stands in for real screenshots */
function SUPlaceholder({ label, height = 360 }) {
  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>
  );
}

/* wide tinted panel that breaks out of the text column */
function SUPanel({ 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>
  );
}

/* numbered decision block — highlight line is optional (not every decision has one) */
function SUDecision({ n, title, body, note, panel, caption, tint, panelMaxW }) {
  return (
    <div className="mt-24 first:mt-16">
      <SUCol>
        <Reveal>
          <h3 className="font-display font-medium text-[24px] md:text-[30px] leading-[1.15] tracking-tight" style={{ color: "#0f1a16" }}>
            <span style={{ color: SU_DARK }}>{n}.</span> <span style={{ color: SU_DARK }}>{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>
        {note && (
          <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)" }}>
              {note}
            </p>
          </Reveal>
        )}
      </SUCol>
      <Reveal delay={120}>
        <SUPanel caption={caption} tint={tint} maxW={panelMaxW || "1080px"} className="mt-10">
          {panel}
        </SUPanel>
      </Reveal>
    </div>
  );
}

function SULightbox({ images, index, onClose, onNav }) {
  React.useEffect(() => {
    if (index == null) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") onNav(1);
      if (e.key === "ArrowLeft") onNav(-1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [index, onClose, onNav]);

  if (index == null) return null;
  const item = images[index];
  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-6" style={{ background: "rgba(10,10,10,.92)" }} onClick={onClose}>
      <button onClick={onClose} aria-label="Close" className="absolute top-6 right-6 text-white/70 hover:text-white text-[28px] leading-none">×</button>
      {images.length > 1 && (
        <button onClick={(e) => { e.stopPropagation(); onNav(-1); }} aria-label="Previous"
                className="absolute left-3 md:left-8 size-11 grid place-items-center rounded-full text-white/70 hover:text-white hover:bg-white/10 text-2xl">‹</button>
      )}
      <img src={item.src} alt={item.alt} onClick={(e) => e.stopPropagation()}
           className="max-w-full max-h-[85vh] object-contain rounded-lg select-none" draggable="false" />
      {images.length > 1 && (
        <button onClick={(e) => { e.stopPropagation(); onNav(1); }} aria-label="Next"
                className="absolute right-3 md:right-8 size-11 grid place-items-center rounded-full text-white/70 hover:text-white hover:bg-white/10 text-2xl">›</button>
      )}
      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 text-white/50 text-[12px] uppercase tracking-[0.18em]">{item.label}</div>
    </div>
  );
}

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

function SabanciCase({ navigate }) {
  const [lightboxIndex, setLightboxIndex] = React.useState(null);
  const navLightbox = (dir) => setLightboxIndex((i) => (i + dir + SU_GALLERY.length) % SU_GALLERY.length);
  return (
    <div className="relative" style={{ background: "#FCFCFC", color: "#0f1a16" }}>
      <SUSectionNav />

      {/* HERO */}
      <header className="relative overflow-hidden" style={{ background: SU_DARK, color: "#fff" }}>
        <div className="mx-auto max-w-[1080px] px-6 pt-36 pb-36">
          <Reveal>
            <div className="text-[14px] uppercase tracking-[0.22em] text-white/45">Sabancı University · Higher Education Website</div>
          </Reveal>
          <div className="mt-6 flex items-start justify-between gap-10">
            <div>
              <Reveal delay={40}>
                <a href={SU_WEBSITE_URL} target="_blank" rel="noopener noreferrer" aria-label="Visit Sabancı University website" className="md:hidden mb-5 inline-block">
                  <img src={SU_LOGO_SRC} alt="Sabancı University logo" draggable="false" className="block select-none rounded-2xl" style={{ width: 72, height: 72 }} />
                </a>
              </Reveal>
              <Reveal delay={80}>
                <h1 className="font-display font-medium text-[40px] md:text-[58px] leading-[1.06] tracking-[-0.02em] max-w-[22ch]" style={{ color: "#ffffff" }}>
                  One university, two very different visitors. <span style={{ color: SU_ACCENT }}>A site with a door for each.</span>
                </h1>
              </Reveal>
            </div>
            <Reveal delay={120}>
              <a href={SU_WEBSITE_URL} target="_blank" rel="noopener noreferrer" aria-label="Visit Sabancı University website" className="hidden md:block shrink-0 transition-transform hover:-translate-y-1">
                <img src={SU_LOGO_SRC} alt="Sabancı University logo" draggable="false"
                     className="block select-none rounded-2xl"
                     style={{ width: 160, height: 160, boxShadow: "0 30px 70px -30px rgba(0,0,0,.7)" }} />
              </a>
            </Reveal>
          </div>
        </div>
      </header>

      {/* SUMMARY */}
      <section id="su-summary" className="pt-20 pb-24">
        <SUCol>
          <Reveal>
            <div className="rounded-2xl px-7 py-7 md:px-9 md:py-8" style={{ background: SU_TINT }}>
              <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)" }}>
                Sabancı University&apos;s official website is the front door for prospective students,
                current students and staff at once. As <strong className="font-bold" style={{ color: "#0f1a16" }}>Lead UX/UI Designer</strong> I
                led the redesign with a researcher, a UX Designer and a UI Designer, from research
                through to final design, and owned the <strong className="font-bold" style={{ color: "#0f1a16" }}>design direction</strong> end
                to end. The goal was simple to say and hard to do: improve the navigation, and shorten
                the path to a program application.
              </p>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <div className="mt-10 rounded-2xl overflow-hidden" style={{ border: "3px solid #000000" }}>
              <video src={SU_HERO_VIDEO} autoPlay muted loop playsInline preload="auto" className="w-full h-auto block" />
            </div>
          </Reveal>
        </SUCol>
      </section>

      {/* PROBLEM — no [SCREEN] in the brief, so no panel here */}
      <section id="su-problem" className="pb-28">
        <SUCol>
          <Reveal><SUPill>The problem</SUPill></Reveal>
          <Reveal delay={70}>
            <h2 className="mt-6 font-display font-medium text-[28px] md:text-[36px] leading-[1.12] tracking-tight" style={{ color: SU_HEAD }}>
              A homepage built for everyone was serving no one.
            </h2>
          </Reveal>
          <Reveal delay={130}>
            <p className="mt-6 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.78)" }}>
              Prospective students, current students and staff arrived at the same pages wanting
              completely different things, and the site treated them all the same. People struggled to
              navigate, and reaching a program application took far too many steps. The real problem was
              not how it looked, it was that the site had no idea who it was talking to.
            </p>
          </Reveal>
        </SUCol>
      </section>

      {/* DISCOVERY */}
      <section id="su-discovery" className="py-24" style={{ background: "#F4F4F5" }}>
        <SUCol>
          <Reveal><SUPill>Discovery</SUPill></Reveal>
          <Reveal delay={70}>
            <h2 className="mt-6 font-display font-medium text-[28px] md:text-[36px] leading-[1.12] tracking-tight" style={{ color: SU_HEAD }}>
              We interviewed users, then watched them get lost.
            </h2>
          </Reveal>
          <Reveal delay={130}>
            <p className="mt-6 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.78)" }}>
              In-depth interviews surfaced the core personas and their goals, and usability tests showed
              exactly where people failed. Two findings stood out: visitors split into two groups with
              opposite needs, external (prospective) and internal (current), and the home page gave
              neither group any sense of direction.
            </p>
          </Reveal>
          <Reveal delay={170}>
            <p className="mt-4 text-[16px] leading-[1.65] italic" style={{ color: "rgba(15,26,22,.55)" }}>
              The reframe: the problem was not the pages, it was one path trying to serve two very
              different journeys.
            </p>
          </Reveal>
        </SUCol>
        <Reveal delay={150}>
          <SUPanel className="mt-12" tint="#D9D9D9">
            <div className="p-6 md:p-8">
              <video src={SU_VIDEO_USABILITY} autoPlay muted loop playsInline preload="auto" className="w-full h-auto block rounded-xl" />
            </div>
          </SUPanel>
        </Reveal>
      </section>

      {/* SOLUTION */}
      <section id="su-solution" className="py-28">
        <SUCol>
          <Reveal><SUPill>The solution</SUPill></Reveal>
          <Reveal delay={70}>
            <h2 className="mt-6 font-display font-medium text-[28px] md:text-[36px] leading-[1.12] tracking-tight" style={{ color: SU_HEAD }}>
              Three decisions reshaped the site.
            </h2>
          </Reveal>
        </SUCol>

        <SUDecision
          n="1" title="Navigate by persona."
          body="I split the experience into two clear paths, one for external prospective visitors and one for internal students and staff, so each group lands on a journey built for them."
          caption="External user path vs internal user path."
          tint="#FFFFFF"
          panel={
            <div className="p-4 md:p-6" style={{ background: "#E9E9EA" }}>
              <img src={SU_SHOT_USER_PATHS} alt="External user path vs internal user path" draggable="false" className="w-full h-auto block select-none rounded-xl" />
            </div>
          }
        />
        <SUDecision
          n="2" title="Optimize the information architecture."
          body="I restructured the content so the most-wanted information sat where people actually looked, cutting the number of steps to reach a program application."
          caption="IA before / after."
          tint="#F4F4F5"
          panel={
            <div className="p-4 md:p-6" style={{ background: "#E9E9EA" }}>
              <img src={SU_SHOT_IA} alt="Information architecture before / after" draggable="false" className="w-full h-auto block select-none rounded-xl" />
            </div>
          }
        />
        <SUDecision
          n="3" title="Rebuild the home page."
          body="I turned a flat landing into a set of clear entry points that route each persona to the right place from the first screen."
          caption="Home page before / after."
          tint="#FFFFFF"
          panel={
            <div className="p-4 md:p-6" style={{ background: "#E9E9EA" }}>
              <img src={SU_SHOT_HOMEPAGE} alt="Home page before / after" draggable="false" className="w-full h-auto block select-none rounded-xl" />
            </div>
          }
        />
      </section>

      {/* STAKEHOLDER WORKSHOPS */}
      <section id="su-workshops" className="py-28" style={{ background: SU_DARK }}>
        <SUCol>
          <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">Stakeholder workshops</span></Reveal>
          <Reveal delay={70}>
            <h2 className="mt-6 font-display font-medium text-[28px] md:text-[36px] leading-[1.12] tracking-tight text-white">
              Deans, brand and communications all wanted the home page. I aligned them in the room.
            </h2>
          </Reveal>
          <Reveal delay={130}>
            <p className="mt-6 text-[20px] leading-[1.7] text-white/80">
              A university homepage has many owners with competing priorities. I ran workshops to bring
              deans, brand and communications teams to a shared direction, turning conflicting requests
              into agreed decisions and holding one coherent experience.
            </p>
          </Reveal>
        </SUCol>
        <Reveal delay={150}>
          <SUPanel className="mt-12" tint={SU_DARK}>
            <img src={SU_SHOT_WORKSHOP} alt="Stakeholder workshop with deans, brand and communications teams" draggable="false" className="w-full h-auto block select-none" />
          </SUPanel>
        </Reveal>
      </section>

      {/* FINAL DESIGN */}
      <section id="su-final" className="py-28">
        <SUCol>
          <Reveal><SUPill>Final design</SUPill></Reveal>
          <Reveal delay={70}>
            <h2 className="mt-6 font-display font-medium text-[28px] md:text-[36px] leading-[1.12] tracking-tight" style={{ color: SU_HEAD }}>
              Modern and usable, on every screen.
            </h2>
          </Reveal>
          <Reveal delay={130}>
            <p className="mt-6 text-[20px] leading-[1.7]" style={{ color: "rgba(15,26,22,.78)" }}>
              The redesigned site presents the university clearly and responsively, from desktop to
              mobile.
            </p>
          </Reveal>
          <Reveal delay={160}>
            <div className="mt-2 flex flex-wrap items-center gap-x-7 gap-y-2 text-[16px]">
              <a href={SU_WEBSITE_URL} target="_blank" rel="noopener noreferrer"
                 className="inline-block"
                 style={{ color: SU_ACCENT, textDecoration: "underline", textUnderlineOffset: "3px" }}>
                Go to website →
              </a>
              <a href={SU_FIGMA_URL} target="_blank" rel="noopener noreferrer"
                 className="inline-block"
                 style={{ color: SU_ACCENT, textDecoration: "underline", textUnderlineOffset: "3px" }}>
                View in Figma →
              </a>
            </div>
          </Reveal>
        </SUCol>
        <Reveal delay={150}>
          <SUPanel className="mt-10" tint="#F4F4F5">
            <img src={SU_SHOT_FINAL_SHOWCASE} alt="Final site showcase, desktop + mobile" draggable="false" className="w-full h-auto block select-none" />
          </SUPanel>
        </Reveal>
      </section>

      {/* BEHIND THE WORK */}
      <section className="pb-24">
        <SUCol>
          <Reveal>
            <div className="rounded-2xl px-7 py-8 md:px-9" style={{ background: SU_TINT }}>
              <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: SU_DARK }}>Role</div>
                  <div className="mt-1.5" style={{ color: "rgba(15,26,22,.85)" }}>Lead UX/UI Designer (UX wireframes, research and UI Design direction, final calls)</div>
                </div>
                <div>
                  <div className="text-[14px] uppercase tracking-[0.14em]" style={{ color: SU_DARK }}>Team</div>
                  <div className="mt-1.5" style={{ color: "rgba(15,26,22,.85)" }}>Researcher, UI Designer, Project Manager, FE Developer</div>
                </div>
                <div>
                  <div className="text-[14px] uppercase tracking-[0.14em]" style={{ color: SU_DARK }}>Timeline</div>
                  <div className="mt-1.5" style={{ color: "rgba(15,26,22,.85)" }}>5 months</div>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={80}>
            <h3 className="mt-14 font-display font-medium text-[22px] md:text-[26px] leading-[1.15] tracking-tight" style={{ color: "#0f1a16" }}>Gallery</h3>
          </Reveal>
        </SUCol>
        <Reveal delay={110}>
          <SUPanel className="mt-6" tint="#FFFFFF">
            <div className="grid grid-cols-2 md:grid-cols-4" style={{ borderColor: "rgba(15,26,22,.08)" }}>
              {SU_GALLERY.map((g, i) => (
                <button key={g.src} type="button" onClick={() => setLightboxIndex(i)} aria-label={`Open ${g.alt} full size`}
                        className="group relative flex items-center justify-center p-4 md:p-5 cursor-zoom-in border-b"
                        style={{ height: 220, borderColor: "rgba(15,26,22,.08)", borderRight: (i % 4 !== 3) ? "1px solid rgba(15,26,22,.08)" : undefined }}>
                  <img src={g.src} alt={g.alt} draggable="false" className="max-w-full max-h-full object-contain select-none transition-transform duration-300 group-hover:scale-[1.04]" style={{ borderRadius: 6 }} />
                  <span className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors" />
                </button>
              ))}
            </div>
          </SUPanel>
        </Reveal>
      </section>

      {/* FOOTER */}
      <section className="py-12" style={{ background: SU_DARK, 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/juzdan"); 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">Juzdan</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: SU_ACCENT }}>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={SU_DARK}/>
                    </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={SU_DARK}/>
                  </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: SU_DARK }}>
                    <span className="font-display font-semibold text-[13px] tracking-tight">CV</span>
                  </span>
                </a>
              </div>
              </div>
              <button onClick={() => { navigate("case/alternatifbank"); 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">Alternatif Bank</div>
              </button>
            </div>
          </div>
        </Reveal>
      </section>

      <SULightbox images={SU_GALLERY} index={lightboxIndex} onClose={() => setLightboxIndex(null)} onNav={navLightbox} />
    </div>
  );
}

window.SabanciCase = SabanciCase;