"use client";

import { GlobeAltIcon } from "@heroicons/react/24/outline";

export function HomeUniverse() {
  return (
    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-8 text-center">
      <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 flex flex-wrap items-center justify-center gap-3">

        {/* left text */}
        <span>Explore the Mycelium</span>

        {/* optional end pill */}
        <span className="inline-flex items-center gap-2 bg-white border border-gray-300 rounded-full px-6 py-2 text-2xl font-medium shadow-sm">
          <GlobeAltIcon className="h-5 w-5 text-gray-900" />
          Universe
        </span>

      </h2>
    </section>
  );
}