export function MagazineHero() {
  return (
    <section className="relative overflow-hidden bg-[#FAFAF8] text-[#111111] py-24 px-8">
      {/* animated halftone texture */}
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.06]"
        style={{
          backgroundImage: "radial-gradient(#111 1.1px, transparent 1.4px)",
          backgroundSize: "14px 14px",
          animation: "mg-halftone 20s linear infinite",
        }}
      />

      <div className="relative mx-auto max-w-5xl">
        <div className="mb-12 flex items-start justify-between font-mono text-[11px] uppercase tracking-[0.16em] text-[#6B6B66]">
          <span>Issue Nº 042 · Spring 2026</span>
          {/* rotating wax stamp */}
          <svg viewBox="0 0 120 120" className="h-24 w-24 shrink-0" style={{ animation: "mg-spin 24s linear infinite" }}>
            <defs>
              <path id="mg-circle" d="M60,60 m-42,0 a42,42 0 1,1 84,0 a42,42 0 1,1 -84,0" fill="none" />
            </defs>
            <circle cx="60" cy="60" r="54" fill="none" stroke="#2A3D2F" strokeWidth="1" />
            <circle cx="60" cy="60" r="30" fill="#2A3D2F" />
            <text fontFamily="ui-monospace, monospace" fontSize="8.4" letterSpacing="2.4" fill="#2A3D2F">
              <textPath href="#mg-circle" startOffset="0">EST · 2026 · THE EDITORIAL QUARTERLY · </textPath>
            </text>
            <text x="60" y="64" textAnchor="middle" fontFamily="'Instrument Serif', Georgia, serif" fontSize="20" fontStyle="italic" fill="#FAFAF8">Vk</text>
          </svg>
        </div>

        <h1
          className="mb-8 font-normal italic leading-[0.95] tracking-[-0.02em]"
          style={{ fontSize: "clamp(56px, 9vw, 128px)", fontFamily: "'Instrument Serif', Georgia, serif" }}
        >
          The art of <br />
          shipping <span className="not-italic">software</span> <br />
          that{" "}
          <span className="relative inline-block text-[#2A3D2F]">
            means
            {/* gooey ink underline */}
            <svg aria-hidden viewBox="0 0 240 40" className="absolute -bottom-3 left-0 h-6 w-full overflow-visible">
              <defs>
                <filter id="mg-ink">
                  <feTurbulence type="fractalNoise" baseFrequency="0.04 0.12" numOctaves="2" seed="3" result="n">
                    <animate attributeName="baseFrequency" dur="9s" values="0.04 0.12;0.07 0.08;0.04 0.12" repeatCount="indefinite" />
                  </feTurbulence>
                  <feDisplacementMap in="SourceGraphic" in2="n" scale="9" />
                </filter>
              </defs>
              <path d="M6 22 C 70 10, 170 32, 234 16" fill="none" stroke="#2A3D2F" strokeWidth="7" strokeLinecap="round" filter="url(#mg-ink)" />
            </svg>
          </span>{" "}
          something.
        </h1>

        <div className="relative grid grid-cols-1 gap-12 border-t border-[#1111111A] pt-8 md:grid-cols-[2fr_1fr]">
          <span aria-hidden className="absolute left-0 top-0 h-px w-full origin-left bg-[#11111133]" style={{ animation: "mg-draw 3s cubic-bezier(0.22,1,0.36,1) infinite" }} />
          <p className="max-w-[58ch] text-[17px] leading-[1.6] text-[#1F1F1D]">
            A long-form essay on craft, restraint and the courage to ship work
            that doesn&apos;t apologize for its own taste. Read by 12,800
            builders, designers and quiet operators.
          </p>
          <div className="space-y-1.5 font-mono text-[12px] text-[#6B6B66]">
            <div>Words · 2,400</div>
            <div>Reading · 12 min</div>
            <div className="text-[#111111]">By the editors →</div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes mg-halftone { to { background-position: 140px 140px; } }
        @keyframes mg-spin { to { transform: rotate(360deg); } }
        @keyframes mg-draw { 0% { transform: scaleX(0); } 65%,100% { transform: scaleX(1); } }
      `}</style>
    </section>
  );
}
Magazine Hero

The art of shipping software that means something.

The art of
shipping software
that means something.
