import React from 'react';

type Props = {
  eyebrow: string;
  title: string;
  description: string;
  image: string;
};

export default function MarketingPageHero({ eyebrow, title, description, image }: Props) {
  return (
    <section className="px-5 pb-8 pt-12 lg:px-8 lg:pb-12 lg:pt-16">
      <div className="mx-auto grid max-w-7xl gap-8 overflow-hidden rounded-[2rem] bg-[#F4F1E6] p-6 shadow-[0_28px_90px_rgba(31,58,45,0.08)] lg:grid-cols-[1.05fr_0.95fr] lg:p-10">
        <div className="flex flex-col justify-center">
          <p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#9FB06F]">{eyebrow}</p>
          <h1 className="font-brand-display mt-4 text-4xl leading-tight text-[#1F3A2D] md:text-6xl">{title}</h1>
          <p className="mt-6 max-w-2xl text-base leading-8 text-[#556257]">{description}</p>
        </div>
        <div className="relative min-h-[320px] overflow-hidden rounded-[1.75rem]">
          <img className="absolute inset-0 h-full w-full object-cover saturate-[0.88]" loading="eager" src={image} alt={title} />
          <div className="absolute inset-0 bg-[linear-gradient(160deg,rgba(16,33,24,0.08),rgba(36,63,48,0.22),rgba(16,33,24,0.42))]" />
          <div className="absolute inset-0 bg-gradient-to-t from-[#102118]/54 via-transparent to-transparent" />
        </div>
      </div>
    </section>
  );
}
