export function JobPostingCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-lg rounded-xl border border-[#1111111A] bg-white p-5 transition-all hover:border-[#111111]/30 hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)]">
        <div className="flex items-start gap-4">
          <div
            className="grid h-12 w-12 shrink-0 place-items-center rounded-lg text-white text-[18px] font-medium"
            style={{ background: "linear-gradient(135deg, #2A3D2F, #5E7F66)" }}
            aria-hidden
          >
            V
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.18em] text-[#6B6B66]">
              <span>Velynkit Studio</span>
              <span aria-hidden>·</span>
              <span>Berlin / Remote</span>
            </div>
            <h3 className="mt-1 text-[18px] font-medium tracking-tight">
              Senior Frontend Engineer
            </h3>
            <p className="mt-1 text-[13px] text-[#6B6B66] leading-relaxed">
              Ship a polished component library with us — Next.js, TypeScript,
              motion. You care about the millisecond of a hover transition.
            </p>

            {/* Pills */}
            <div className="mt-3 flex flex-wrap items-center gap-1.5">
              <Pill>Remote-friendly</Pill>
              <Pill>Full-time</Pill>
              <Pill>€80–110k</Pill>
              <Pill accent>Visa sponsorship</Pill>
            </div>
          </div>

          <button
            type="button"
            aria-label="Save"
            className="text-[#6B6B66] hover:text-[#111111] text-[15px] opacity-60 group-hover:opacity-100 transition-opacity"
          >
            ☆
          </button>
        </div>

        {/* Footer */}
        <div className="mt-5 flex items-center justify-between border-t border-[#1111111A] pt-4">
          <div className="flex items-center gap-3 text-[11.5px] text-[#6B6B66] font-mono">
            <span>Posted 3 days ago</span>
            <span aria-hidden>·</span>
            <span>42 applicants</span>
          </div>
          <a
            href="#"
            className="text-[13px] font-medium inline-flex items-center gap-1 hover:underline underline-offset-2"
          >
            Apply
            <span aria-hidden className="transition-transform group-hover:translate-x-1">
              →
            </span>
          </a>
        </div>
      </article>
    </div>
  );
}

function Pill({ children, accent }: { children: React.ReactNode; accent?: boolean }) {
  return (
    <span
      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-mono ${
        accent
          ? "bg-[#2A3D2F]/10 text-[#2A3D2F]"
          : "bg-[#F2F1EC] text-[#3B3B36] border border-[#1111111A]"
      }`}
    >
      {children}
    </span>
  );
}
Job Posting Card

Senior Frontend Engineer
