function ScreenMock({ accent }: { accent: string }) {
  return (
    <div className="w-[460px] overflow-hidden rounded-xl border border-black/10 bg-white shadow-[0_40px_80px_-30px_rgba(15,23,42,0.45)]">
      <div className="flex items-center gap-1.5 border-b border-black/[0.06] bg-[#f6f6f7] px-3 py-2.5">
        <span className="h-2.5 w-2.5 rounded-full bg-[#ff5f57]" />
        <span className="h-2.5 w-2.5 rounded-full bg-[#febc2e]" />
        <span className="h-2.5 w-2.5 rounded-full bg-[#28c840]" />
        <span className="ml-3 h-3.5 w-44 rounded bg-black/[0.06]" />
      </div>
      <div className="grid grid-cols-[90px_1fr]">
        <div className="space-y-2 border-r border-black/[0.06] p-3">
          {[16, 11, 13, 9, 14].map((w, i) => (
            <div key={i} className="h-2 rounded bg-black/[0.07]" style={{ width: w * 4 }} />
          ))}
        </div>
        <div className="space-y-3 p-4">
          <div className="grid grid-cols-3 gap-2.5">
            <div className="h-14 rounded-lg" style={{ background: `${accent}22` }} />
            <div className="h-14 rounded-lg bg-black/[0.05]" />
            <div className="h-14 rounded-lg" style={{ background: `${accent}14` }} />
          </div>
          <div className="flex h-20 items-end gap-1.5 rounded-lg bg-black/[0.03] p-3">
            {[40, 70, 35, 85, 55, 65, 45, 75].map((h, i) => (
              <div key={i} className="flex-1 rounded-t" style={{ height: `${h}%`, background: accent, opacity: 0.55 }} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export function GlassStackHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#f5f5f3] text-[#0b0b0e] antialiased flex items-center px-10 lg:px-16">
      {/* perspective stage of tilted product screenshots, pushed right */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-y-0 right-[-6%] hidden w-[70%] items-center lg:flex"
        style={{ perspective: "1600px" }}
      >
        <div
          className="relative"
          style={{ transform: "rotateY(-26deg) rotateX(10deg) rotate(-2deg)", transformStyle: "preserve-3d" }}
        >
          <div style={{ animation: "screen-float 7s ease-in-out infinite" }}>
            <div className="absolute -left-24 -top-44 opacity-90" style={{ transform: "translateZ(-60px)" }}>
              <ScreenMock accent="#6366f1" />
            </div>
            <div className="relative" style={{ transform: "translateZ(40px)" }}>
              <ScreenMock accent="#f43f5e" />
            </div>
            <div className="absolute -bottom-40 left-28 opacity-95" style={{ transform: "translateZ(-30px)" }}>
              <ScreenMock accent="#10b981" />
            </div>
          </div>
        </div>
      </div>
      {/* fade so the headline stays crisp on the left */}
      <div aria-hidden className="absolute inset-0 bg-linear-to-r from-[#f5f5f3] via-[#f5f5f3]/85 to-transparent lg:to-[#f5f5f3]/0" />

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-10 lg:px-16 py-6">
        <span className="text-[14px] font-semibold tracking-tight">Velynkit Studio</span>
        <a href="#" className="rounded-full bg-[#0b0b0e] px-4 py-1.5 text-[12.5px] font-medium text-white">
          Start a build
        </a>
      </div>

      <div className="relative z-10 max-w-xl">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-black/10 bg-white px-3 py-1 text-[12px] text-black/55">
          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
          Trusted by 4,000+ product teams
        </div>
        <h1 className="text-[clamp(44px,5.6vw,84px)] font-bold leading-[0.96] tracking-[-0.035em]">
          The Ultimate
          <br />
          development studio
        </h1>
        <p className="mt-6 max-w-md text-[16px] leading-relaxed text-black/55">
          We build beautiful products with the latest technologies and
          frameworks — a team obsessed with the details others skip.
        </p>
        <div className="mt-9 flex items-center gap-4">
          <a href="#" className="rounded-lg bg-[#0b0b0e] px-6 py-3 text-[13px] font-medium text-white transition-transform hover:-translate-y-0.5">
            Book an intro call
          </a>
          <a href="#" className="text-[13px] font-medium text-black/60 underline-offset-4 hover:text-black hover:underline">
            See case studies →
          </a>
        </div>
      </div>

      <style>{`
        @keyframes screen-float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-18px); }
        }
      `}</style>
    </div>
  );
}
Perspective Studio Hero

The Ultimatedevelopment studio

The Ultimate
development studio
