import React from "react";
import { Link } from "react-router-dom";
import Button from "../../components/ui/button/Button";
import Badge from "../../components/ui/badge/Badge";

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 }, isPrimary: boolean) => {
    const isExternal = cta.href.startsWith("http");
    const buttonClasses = isPrimary 
      ? "shadow-lg shadow-[var(--color-primary)]/30" 
      : "border-white/30 bg-white/5 backdrop-blur-sm text-white hover:bg-white/10 hover:border-white/50";
    
    if (isExternal) {
      return (
        <Button
          as="a"
          href={cta.href}
          target="_blank"
          rel="noreferrer"
          variant={isPrimary ? "gradient" : "outline"}
          tone={isPrimary ? "brand" : "neutral"}
          shape="pill"
          size="lg"
          className={buttonClasses}
        >
          {cta.label}
        </Button>
      );
    }
    
    return (
      <Button
        as={Link}
        to={cta.href}
        variant={isPrimary ? "gradient" : "outline"}
        tone={isPrimary ? "brand" : "neutral"}
        shape="pill"
        size="lg"
        className={buttonClasses}
      >
        {cta.label}
      </Button>
    );
  };

  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
      <div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(6,147,227,0.15),transparent_50%)]" />
      <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">
          <Badge
            variant="soft"
            tone="primary"
            size="sm"
            className="uppercase tracking-[0.28em] border border-[var(--color-primary)]/20"
          >
            AI + SEO PLATFORM
          </Badge>
          <h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
            {headline}
          </h1>
          <p className="text-lg md:text-xl text-gray-300 leading-relaxed max-w-xl">
            {subheadline}
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            {renderCta(primaryCta, true)}
            {secondaryCta && renderCta(secondaryCta, false)}
          </div>
        </div>
        <div className="flex-1 w-full">
          <div className="relative rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[var(--color-primary)]/20">
            <div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10" />
            <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-gradient-to-br from-[#0d1b2a]/95 to-[#142b3f]/95 backdrop-blur-lg border border-[var(--color-primary)]/30 rounded-2xl px-6 py-4 flex flex-col gap-1 shadow-xl">
              <span className="text-xs uppercase tracking-[0.2em] text-[var(--color-primary)]">
                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;