export function ChangelogCard() {
  const entries = [
    { tag: "added",   text: "Editorial Hero variant with masthead support" },
    { tag: "added",   text: "Soft Mono testimonial carousel" },
    { tag: "changed", text: "Pricing card tier emphasis logic" },
    { tag: "fixed",   text: "FAQ accordion focus ring on Safari" },
  ];

  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <div className="w-full max-w-md border border-[#1111111A] bg-[#FAFAF8]">
        <div className="flex items-center justify-between p-5 border-b border-[#1111111A]">
          <div>
            <div className="font-mono text-[10px] uppercase tracking-[0.16em] text-[#6B6B66]">
              Released
            </div>
            <div
              className="text-[#111111] tracking-[-0.015em] mt-1"
              style={{
                fontFamily: "'Instrument Serif', Georgia, serif",
                fontSize: 22,
              }}
            >
              v0.18 · <span className="italic">Editorial</span>
            </div>
          </div>
          <span className="font-mono text-[11px] text-[#6B6B66]">
            2026-05-24
          </span>
        </div>
        <ul className="divide-y divide-[#1111111A]">
          {entries.map((e, i) => (
            <li key={i} className="flex items-start gap-4 px-5 py-3">
              <span
                className={`font-mono text-[10px] uppercase tracking-[0.12em] w-16 shrink-0 mt-0.5 ${
                  e.tag === "added"
                    ? "text-[#2A3D2F]"
                    : e.tag === "fixed"
                    ? "text-[#a13]"
                    : "text-[#6B6B66]"
                }`}
              >
                {e.tag}
              </span>
              <span className="text-[14px] text-[#111111] leading-[1.45]">
                {e.text}
              </span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}
Changelog Card
