import type { LucideIcon } from "lucide-react";

export function PageHero({ eyebrow, title, description, icon: Icon }: { eyebrow: string; title: string; description: string; icon: LucideIcon }) {
  return (
    <section className="relative overflow-hidden border-b border-emerald-950/10 bg-[#edf3ef]">
      <div className="market-grid absolute inset-0 opacity-60" />
      <div className="relative mx-auto max-w-[1240px] px-5 py-16 sm:py-20 lg:px-8">
        <div className="mb-7 flex size-14 items-center justify-center rounded-2xl bg-[#0a5a3c] text-white shadow-[0_12px_30px_rgba(10,90,60,.2)]"><Icon className="size-7" /></div>
        <p className="eyebrow">{eyebrow}</p>
        <h1 className="mt-3 max-w-4xl text-[clamp(2.4rem,6vw,4.8rem)] font-black leading-[1.22] tracking-[-.045em] text-[#092f22]">{title}</h1>
        <p className="mt-6 max-w-3xl text-lg leading-9 text-[#536d63]">{description}</p>
      </div>
    </section>
  );
}