import Link from 'next/link';
import Image from 'next/image';
import { Button } from '@/components/ui/button';

interface HeroProps {
  title: string;
  subtitle: string;
  ctaText: string;
  ctaHref: string;
  imageSrc: string;
  imageAlt: string;
  reverse?: boolean;
}

export function Hero({
  title,
  subtitle,
  ctaText,
  ctaHref,
  imageSrc,
  imageAlt,
  reverse = false,
}: HeroProps) {
  return (
    <div className="relative isolate overflow-hidden bg-navy">
      <div className="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:pb-24 lg:flex lg:px-6 lg:py-24">
        <div className={`mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8 ${reverse ? 'lg:order-2' : ''}`}>
          <div className="mt-16 sm:mt-20 lg:mt-12">
            <Link href="/contact" className="inline-flex space-x-6">
              <span className="rounded-full bg-teal/10 px-3 py-1 text-sm font-semibold leading-6 text-teal ring-1 ring-inset ring-teal/10">
                Book Your Consultation
              </span>
            </Link>
          </div>
          <h1 className="mt-10 text-4xl font-bold tracking-tight text-cloud sm:text-6xl">
            {title}
          </h1>
          <p className="mt-6 text-lg leading-8 text-cloud/90">
            {subtitle}
          </p>
          <div className="mt-10 flex items-center gap-x-6">
            <Button asChild size="lg">
              <Link href={ctaHref}>
                {ctaText}
              </Link>
            </Button>
            <Link href="/about" className="text-sm font-semibold leading-6 text-cloud hover:text-cloud/80 transition-colors">
              Learn more <span aria-hidden="true">→</span>
            </Link>
          </div>
        </div>
        <div className={`mx-auto mt-12 flex max-w-2xl sm:mt-16 lg:ml-8 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-20 ${reverse ? 'lg:order-1' : ''}`}>
          <div className="max-w-2xl flex-none sm:max-w-3xl lg:max-w-none">
            <Image
              src={imageSrc}
              alt={imageAlt}
              width={1200}
              height={800}
              className="w-[40rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
            />
          </div>
        </div>
      </div>
    </div>
  );
}