export function BubbleHero() {
  const bars = [42, 64, 38, 78, 56, 88, 70];
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#f3f1ec] text-[#1a1a17] antialiased flex items-center px-6 lg:px-10 py-12">
      <div className="mx-auto grid w-full max-w-6xl grid-cols-2 gap-4 md:grid-cols-4 md:grid-rows-3">
        {/* headline tile */}
        <div className="col-span-2 row-span-2 flex flex-col justify-between rounded-3xl bg-white p-8 shadow-[0_2px_0_rgba(0,0,0,0.04)] md:col-span-2 md:row-span-3">
          <span className="inline-flex w-fit items-center gap-2 rounded-full bg-[#eef0e9] px-3 py-1 text-[12px] text-[#5b6b4f]">
            <span className="h-1.5 w-1.5 rounded-full bg-[#7c9a6a]" style={{ animation: "bn-pulse 2s ease-in-out infinite" }} /> Now in public beta
          </span>
          <h1 className="my-6 font-normal leading-[0.98] tracking-[-0.02em]" style={{ fontSize: "clamp(40px, 5vw, 76px)", fontFamily: "'Instrument Serif', Georgia, serif" }}>
            Soft systems for <span className="italic text-[#7c9a6a]">serious</span> software.
          </h1>
          <div className="flex flex-wrap gap-3">
            <a href="#" className="rounded-full bg-[#1a1a17] px-5 py-3 text-[13px] font-medium text-white transition-transform hover:-translate-y-0.5">Start building</a>
            <a href="#" className="rounded-full border border-black/12 px-5 py-3 text-[13px] font-medium">Manifesto</a>
          </div>
        </div>

        {/* live chart tile */}
        <div className="flex flex-col justify-between rounded-3xl bg-[#dfe7d6] p-6">
          <div className="text-[13px] font-medium text-[#56603f]">Weekly active</div>
          <div className="flex h-16 items-end gap-1.5">
            {bars.map((h, i) => (
              <span key={i} className="flex-1 rounded-t bg-[#7c9a6a]" style={{ height: `${h}%`, transformOrigin: "bottom", animation: `bn-bar 2.4s ease-in-out ${i * 0.12}s infinite` }} />
            ))}
          </div>
        </div>

        {/* flowing gradient + blob tile */}
        <div className="relative overflow-hidden rounded-3xl p-6" style={{ background: "linear-gradient(130deg,#f7d9c4,#e7c3da 50%,#cdb8e6)", backgroundSize: "200% 200%", animation: "bn-flow 9s ease-in-out infinite" }}>
          <svg viewBox="0 0 120 120" className="absolute -bottom-6 -right-6 h-28 w-28 opacity-70">
            <path fill="rgba(255,255,255,0.45)">
              <animate attributeName="d" dur="8s" repeatCount="indefinite" values="M90,62Q84,86,60,90Q36,94,24,70Q12,46,32,30Q52,14,74,26Q96,38,90,62Z;M94,60Q86,88,60,92Q34,96,22,70Q10,44,32,28Q54,12,76,26Q98,40,94,60Z;M90,62Q84,86,60,90Q36,94,24,70Q12,46,32,30Q52,14,74,26Q96,38,90,62Z" />
            </path>
          </svg>
          <div className="relative text-[13px] font-medium text-[#5a4a52]">Tokens</div>
          <div className="relative mt-1 text-[15px] leading-snug text-[#3d2f36]">Muted, monochrome by default.</div>
        </div>

        {/* swatches tile */}
        <div className="flex items-center gap-2 rounded-3xl bg-white p-6">
          {["#e8e4dc", "#d9dedb", "#cdd6cb", "#bfc7bd", "#1a1a17"].map((c, i) => (
            <span key={i} className="h-10 flex-1 rounded-xl" style={{ background: c, animation: `bn-swatch 3s ease-in-out ${i * 0.2}s infinite` }} />
          ))}
        </div>

        {/* small CTA tile */}
        <div className="col-span-2 flex items-center justify-between rounded-3xl bg-[#1a1a17] p-6 text-white md:col-span-1">
          <div className="text-[13px] leading-snug text-white/75">Confidence over noise.</div>
          <span className="text-[20px]" style={{ animation: "bn-arrow 1.8s ease-in-out infinite" }}>→</span>
        </div>
      </div>

      <style>{`
        @keyframes bn-bar { 0%,100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
        @keyframes bn-flow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        @keyframes bn-swatch { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
        @keyframes bn-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
        @keyframes bn-arrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
      `}</style>
    </div>
  );
}
Pastel Bento Hero

Soft systems for serious software.
