import SectionEyebrow from "./SectionEyebrow";
import NetworkGraphic from "./NetworkGraphic";

interface PageHeroProps {
  eyebrow: string;
  title: string;
  highlight?: string;
  subtitle: string;
  accent?: "blue" | "green";
  children?: React.ReactNode;
}

export default function PageHero({
  eyebrow,
  title,
  highlight,
  subtitle,
  accent = "blue",
  children,
}: PageHeroProps) {
  return (
    <section className="relative overflow-hidden border-b border-white/[0.06] px-6 pb-16 pt-32 sm:pb-20 sm:pt-40">
      <div className="pointer-events-none absolute right-0 top-0 w-[420px] max-w-[60%] opacity-70 sm:opacity-100">
        <NetworkGraphic accent={accent} className="w-full" />
      </div>
      <div className="mx-auto max-w-3xl">
        <SectionEyebrow accent={accent}>{eyebrow}</SectionEyebrow>
        <h1 className="text-balance font-display text-4xl font-medium leading-[1.1] sm:text-5xl">
          {title}{" "}
          {highlight && (
            <span
              className={accent === "green" ? "text-gradient-green" : "text-gradient-blue"}
            >
              {highlight}
            </span>
          )}
        </h1>
        <p className="mt-5 max-w-xl text-lg leading-relaxed text-ink-500">
          {subtitle}
        </p>
        {children && <div className="mt-8 flex flex-wrap gap-3">{children}</div>}
      </div>
    </section>
  );
}