Hero Creative

// Editorial hero: large italic serif headline, short pitch with a button,
// and a staggered strip of three photos underneath.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Props = {
  heading?: string;
  intro?: string;
  cta?: { label: string; href: string };
  images?: { src: string; alt: string }[];
};

const img = (id: string) => `https://images.unsplash.com/photo-${id}?w=900&q=80&auto=format&fit=crop`;

const DEFAULT_IMAGES = [
  { src: img("1555988776-c3f17e5cb789"), alt: "Pink umbrellas suspended over a street" },
  { src: img("1496365597860-f19cab8ecdaf"), alt: "Mint-green building facade" },
  { src: img("1622179662825-3ae0a26f1b26"), alt: "Red rooftop against a blue sky" },
];

export default function HeroCreative({
  heading = "Beautiful websites for ambitious businesses.",
  intro = "We craft conversion-focused websites for brands that want to stand out and be found.",
  cta = { label: "Start a project →", href: "#" },
  images = DEFAULT_IMAGES,
}: Props) {
  return (
    <section className="flex min-h-screen flex-col justify-between bg-stone-50 px-6 pb-16 pt-32 font-sans antialiased md:px-12 lg:px-20">
      <div className="mx-auto w-full max-w-7xl">
        <div className="mb-20 flex flex-col justify-between gap-8 md:flex-row md:items-end">
          <h1 className="max-w-3xl font-serif text-[clamp(48px,7vw,110px)] italic leading-[0.9] tracking-[-0.02em] text-stone-900">{heading}</h1>
          <div className="md:mb-2 md:max-w-xs">
            <p className="mb-6 text-lg leading-relaxed text-stone-500">{intro}</p>
            <a href={cta.href} className="inline-block bg-stone-900 px-6 py-3.5 font-mono text-xs uppercase tracking-widest text-white transition-colors duration-200 hover:bg-stone-700">
              {cta.label}
            </a>
          </div>
        </div>

        <div className="grid grid-cols-3 items-start gap-4">
          {images.map((image, i) => (
            <img key={image.src} src={image.src} alt={image.alt} className={`w-full rounded-xl object-cover ${i === 1 ? "h-48" : "h-64"}`} />
          ))}
        </div>
      </div>
    </section>
  );
}