import React from "react";
import { Link } from "react-router-dom";

interface HeroSectionProps {
  image: string;
  headline: string;
  subheadline: string;
  primaryCta: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
}

const HeroSection: React.FC<HeroSectionProps> = ({
  image,
  headline,
  subheadline,
  primaryCta,
  secondaryCta,
}) => {
  const renderCta = (cta: { label: string; href: string }, className: string) => {
    const isExternal = cta.href.startsWith("http");
    
    if (isExternal) {
      return (
        <a
          href={cta.href}
          className={className}
          target="_blank"
          rel="noreferrer"
        >
          {cta.label}
        </a>
      );
    }
    
    return (
      <Link to={cta.href} className={className}>
        {cta.label}
      </Link>
    );
  };

  return (
    <section className="relative overflow-hidden">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(66,133,244,0.25),_rgba(9,14,26,0.9))]" />
      <div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center">
        <div className="flex-1 flex flex-col gap-6">
          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-brand-200">
            AI + SEO PLATFORM
          </span>
          <h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
            {headline}
          </h1>
          <p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-xl">
            {subheadline}
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            {renderCta(
              primaryCta,
              "inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-6 py-3 text-sm md:text-base font-semibold transition"
            )}
            {secondaryCta && renderCta(
              secondaryCta,
              "inline-flex items-center justify-center rounded-full border border-white/20 px-6 py-3 text-sm md:text-base font-semibold text-white/80 hover:text-white hover:border-white/40 transition"
            )}
          </div>
        </div>
        <div className="flex-1 w-full">
          <div className="relative rounded-3xl border border-white/10 bg-white/5 shadow-[0_0_60px_rgba(88,166,255,0.1)]">
            <div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-white/10 via-transparent to-white/0 pointer-events-none" />
            <img
              src={`/marketing/images/${image}`}
              alt="Igny8 dashboard preview"
              className="w-full h-full object-cover rounded-3xl"
            />
            <div className="absolute bottom-6 left-6 bg-slate-950/70 backdrop-blur-lg border border-white/10 rounded-2xl px-6 py-4 flex flex-col gap-1">
              <span className="text-xs uppercase tracking-[0.2em] text-white/50">
                End-to-end automation
              </span>
              <span className="text-lg font-semibold text-white">
                Keywords ➝ Ideas ➝ Tasks ➝ Content ➝ Images
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeroSection;