import Button from './ui/Button';

export default function Hero(props: {
  title: string;
  subtitle: string;
  image: string;
  ribbon?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
}) {
  return (
    <div className="bg-brand-navy text-white">
      {props.ribbon && <div className="bg-brand-red text-center text-sm py-1">{props.ribbon}</div>}
      <div className="mx-auto max-w-7xl px-4 py-12 md:py-16 grid md:grid-cols-2 gap-8 items-center">
        <div>
          <h1 className="text-3xl md:text-5xl font-bold">{props.title}</h1>
          <p className="mt-4 text-white/85">{props.subtitle}</p>
          <div className="mt-6 flex gap-3">
            <Button variant="success" href={props.primaryCta?.href ?? '/contact'}>{props.primaryCta?.label ?? 'Call Now — 24/7 Emergency Help'}</Button>
            <Button href={props.secondaryCta?.href ?? '/contact'}>{props.secondaryCta?.label ?? 'Get My Free Quote'}</Button>
          </div>
          <div className="mt-6 flex gap-3 text-xs text-white/75">
            <span className="rounded bg-white/10 px-2 py-1">Licensed</span>
            <span className="rounded bg-white/10 px-2 py-1">Insured</span>
            <span className="rounded bg-white/10 px-2 py-1">Local since 2005</span>
            <span className="rounded bg-white/10 px-2 py-1">24/7 Emergency</span>
          </div>
        </div>
        <div className="rounded-xl overflow-hidden bg-white/5">
          <img src={props.image} alt="Electrician at work" className="w-full h-auto" />
        </div>
      </div>
    </div>
  );
}