export function EventDateCard() {
  return (
    <div className="bg-[#F2F1EC] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group relative w-full max-w-md overflow-hidden rounded-xl border border-[#1111111A] bg-white p-5 transition-all duration-500 hover:-translate-y-0.5 hover:shadow-[0_30px_60px_-30px_rgba(17,17,17,0.2)]">
        <div className="flex items-start gap-5">
          {/* Date block */}
          <div className="relative shrink-0 overflow-hidden rounded-lg border border-[#1111111A]">
            <div className="bg-[#C0392B] text-white text-center py-1 px-3 font-mono text-[10px] uppercase tracking-[0.18em]">
              Jun
            </div>
            <div
              className="grid place-items-center bg-white pt-1.5 pb-2.5 px-4"
              style={{ minWidth: 72 }}
            >
              <span
                className="text-[40px] leading-none"
                style={{ fontFamily: "var(--font-instrument-serif), Georgia, serif" }}
              >
                14
              </span>
              <span className="mt-1 font-mono text-[10px] uppercase tracking-[0.18em] text-[#6B6B66]">
                Sat
              </span>
            </div>
            <div className="bg-[#FBFAF6] border-t border-[#1111111A] py-1 px-3 text-center font-mono text-[9.5px] uppercase tracking-[0.18em] text-[#6B6B66]">
              19:30
            </div>
          </div>

          {/* Details */}
          <div className="flex-1 min-w-0">
            <span className="inline-flex items-center gap-1.5 rounded-full bg-amber-100 text-amber-800 px-2 py-0.5 text-[10px] font-mono uppercase tracking-[0.16em]">
              <span className="h-1.5 w-1.5 rounded-full bg-amber-500" />
              Filling fast · 12 left
            </span>
            <h3
              className="mt-2 text-[22px] leading-[1.1]"
              style={{
                fontFamily: "var(--font-instrument-serif), Georgia, serif",
                letterSpacing: "-0.02em",
              }}
            >
              Studio open house — <em className="text-[#6B6B66]">Vol. 04</em>
            </h3>
            <div className="mt-2 space-y-1 text-[12.5px] text-[#3B3B36]">
              <p className="flex items-center gap-2">
                <span aria-hidden className="text-[#6B6B66]">⌖</span>
                Velynkit Studio, Linienstraße 142
              </p>
              <p className="flex items-center gap-2">
                <span aria-hidden className="text-[#6B6B66]">☕</span>
                Talks, demos, natural wine
              </p>
            </div>

            {/* Avatars + actions */}
            <div className="mt-4 flex items-center justify-between">
              <div className="flex items-center">
                {["#2A3D2F", "#5E60CE", "#D97706", "#6B6B66"].map((c, i) => (
                  <span
                    key={i}
                    className="grid h-6 w-6 -ml-1.5 first:ml-0 place-items-center rounded-full text-white text-[9px] font-mono ring-2 ring-white"
                    style={{ background: c }}
                  >
                    {String.fromCharCode(65 + i)}
                  </span>
                ))}
                <span className="ml-2 text-[11.5px] text-[#6B6B66]">+ 64 going</span>
              </div>
              <button
                type="button"
                className="rounded-md bg-[#111111] text-white text-[12px] font-medium px-3 py-1.5 hover:bg-[#1F1F1D] transition-colors"
              >
                RSVP
              </button>
            </div>
          </div>
        </div>
      </article>
    </div>
  );
}
Event Date Card

Studio open house — Vol. 04
