import { Playfair_Display } from "next/font/google";

const playfair = Playfair_Display({
  subsets: ["latin"],
  weight: ["700", "900"],
  display: "swap",
});

/* ─── Marker Squiggle ─── */
function MarkerSquiggle() {
  return (
    <svg
      width="90"
      height="150"
      viewBox="0 0 90 150"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{ position: "absolute", right: "195px", top: "-14px" }}
    >
      <defs>
        <filter id="marker-rough" x="-15%" y="-15%" width="130%" height="130%">
          <feTurbulence
            type="turbulence"
            baseFrequency="0.035"
            numOctaves="5"
            seed="2"
            result="noise"
          />
          <feDisplacementMap
            in="SourceGraphic"
            in2="noise"
            scale="4"
            xChannelSelector="R"
            yChannelSelector="G"
          />
        </filter>
      </defs>
      <g filter="url(#marker-rough)">
        <path
          d="
            M66 4
            C60 16, 36 26, 28 38
            C20 50, 48 54, 58 62
            C68 70, 42 88, 32 100
            C24 108, 38 118, 54 126

            L48 132
            C34 122, 18 112, 28 102
            C36 92, 62 74, 52 66
            C42 58, 16 52, 24 40
            C30 30, 56 18, 62 8
            Z
          "
          fill="#242424"
        />
      </g>
    </svg>
  );
}

/* ─── Medium Banner ─── */
export default function MediumBanner() {
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        maxWidth: "1200px",
        padding: "48px 56px",
        overflow: "hidden",
        backgroundColor: "#F4F0EB",
        backgroundImage: `
          linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px)
        `,
        backgroundSize: "24px 24px",
        border: "1px solid rgba(0,0,0,0.08)",
      }}
    >
      <MarkerSquiggle />

      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: "40px",
        }}
      >
        {/* Left: text content */}
        <div style={{ flex: "1 1 auto", minWidth: 0 }}>
          {/* Yellow highlight strip — one block, slight tilt */}
          <div
            style={{
              display: "inline-block",
              backgroundColor: "#f7c948",
              backgroundImage:
                'url("https://transparenttextures.com/patterns/45-degree-fabric-dark.png")',
              padding: "10px 16px",
              transform: "rotate(-0.7deg)",
            }}
          >
            <h1
              className={playfair.className}
              style={{
                fontSize: "clamp(48px, 6vw, 76px)",
                fontWeight: 900,
                lineHeight: 1.05,
                letterSpacing: "-0.02em",
                color: "#1a1a1a",
                margin: 0,
              }}
            >
              Find your next
              <br />
              rabbit hole.
            </h1>
          </div>

          {/* Blue highlight strip — different tilt, offset right */}
          <div
            style={{
              display: "inline-block",
              backgroundColor: "#a8d8ea",
              backgroundImage:
                'url("https://transparenttextures.com/patterns/45-degree-fabric-dark.png")',
              padding: "8px 14px",
              transform: "rotate(1.3deg)",
              marginTop: "6px",
              marginLeft: "24px",
            }}
          >
            <p
              className={playfair.className}
              style={{
                fontSize: "clamp(18px, 2.5vw, 22px)",
                fontWeight: 700,
                lineHeight: 1.35,
                color: "#1a1a1a",
                margin: 0,
              }}
            >
              Medium members get
              <br />
              access to everything.
            </p>
          </div>
        </div>

        {/* Right: CTA button */}
        <div style={{ flexShrink: 0 }}>
          <button
            style={{
              fontFamily: "'Inter', 'Helvetica Neue', sans-serif",
              fontSize: "20px",
              fontWeight: 500,
              color: "#ffffff",
              backgroundColor: "#1a1a1a",
              border: "none",
              borderRadius: "9999px",
              padding: "18px 40px",
              cursor: "pointer",
              whiteSpace: "nowrap",
              letterSpacing: "-0.01em",
            }}
          >
            Upgrade today
          </button>
        </div>
      </div>
    </div>
  );
}
Medium Banner

Find your nextrabbit hole.

Find your next
rabbit hole.
