export function SectionTitle({
  eyebrow,
  title,
  subtitle,
}: {
  eyebrow?: string;
  title: string;
  subtitle?: string;
}) {
  return (
    <div className="max-w-2xl space-y-3">
      {eyebrow ? (
        <p className="text-xs uppercase tracking-[0.25em] text-cyan-neon/90">
          {eyebrow}
        </p>
      ) : null}
      <h1 className="text-3xl font-semibold tracking-tight text-white sm:text-4xl">
        <span className="bg-gradient-to-r from-cyan-neon via-purple-neon to-cyan-neon bg-clip-text text-transparent">
          {title}
        </span>
      </h1>
      {subtitle ? (
        <p className="leading-relaxed text-muted">{subtitle}</p>
      ) : null}
    </div>
  );
}