import { ArrowRight } from "lucide-react";

export interface GradientSoftHeroProps {
  eyebrow?: string;
  headline?: string;
  highlightedText?: string;
  subhead?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  imageSrc?: string;
  imageAlt?: string;
  socialProofText?: string;
  /** Default = Genius Coaching warm-white #FAFAFA */
  bgFromColor?: string;
  /** Default = soft-sage with low alpha for gradient end */
  bgToColor?: string;
  /** Default = rich-gold #C9A227 (eyebrow + gradient start) */
  accentColor?: string;
  /** Default = electric-teal #14B8A6 (gradient end) */
  secondaryAccentColor?: string;
  /** Default = charcoal #2D3748 (CTA bg + headline base) */
  ctaColor?: string;
}

export default function GradientSoftHero({
  eyebrow = "Neuroscience-Backed Transformation",
  headline = "Your Genius Is Already Here.",
  highlightedText = "Let's Remove What's Blocking It.",
  subhead = "For high-performers who've tried everything—discover the neuroscience of why you're stuck and the path to lasting freedom.",
  primaryCta = { label: "Discover Your Genius Type", href: "/quiz" },
  secondaryCta = { label: "Book a Clarity Call", href: "/contact" },
  imageSrc = "/heroes/geniuscoaching/3VQ-Image.webp",
  imageAlt = "Team collaboration and coaching success",
  socialProofText = "Join 2,000+ leaders who've discovered their genius type",
  bgFromColor = "#FAFAFA",
  bgToColor = "rgba(143, 169, 143, 0.10)",
  accentColor = "#C9A227",
  secondaryAccentColor = "#14B8A6",
  ctaColor = "#2D3748",
}: GradientSoftHeroProps) {
  return (
    <section className="relative min-h-screen flex items-center pt-20 pb-16 overflow-hidden">
      {/* Soft gradient background */}
      <div
        aria-hidden
        className="absolute inset-0"
        style={{ background: `linear-gradient(135deg, ${bgFromColor} 0%, ${bgFromColor} 40%, ${bgToColor} 100%)` }}
      />
      {/* Decorative blurs */}
      <div
        aria-hidden
        className="absolute top-1/4 right-0 w-96 h-96 rounded-full blur-3xl"
        style={{ background: accentColor, opacity: 0.06 }}
      />
      <div
        aria-hidden
        className="absolute bottom-0 left-0 w-80 h-80 rounded-full blur-3xl"
        style={{ background: secondaryAccentColor, opacity: 0.06 }}
      />

      <div className="relative mx-auto max-w-7xl w-full px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          {/* Content */}
          <div>
            <p className="font-medium mb-4" style={{ color: accentColor }}>
              {eyebrow}
            </p>
            <h1
              className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6"
              style={{ color: ctaColor }}
            >
              {headline}{" "}
              <span
                className="bg-clip-text text-transparent"
                style={{
                  backgroundImage: `linear-gradient(90deg, ${accentColor}, ${secondaryAccentColor})`,
                }}
              >
                {highlightedText}
              </span>
            </h1>
            <p
              className="text-lg md:text-xl mb-8 max-w-xl"
              style={{ color: ctaColor, opacity: 0.8 }}
            >
              {subhead}
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <a
                href={primaryCta.href}
                className="group inline-flex items-center justify-center gap-2 rounded-lg px-7 py-3.5 text-white font-semibold transition-all hover:-translate-y-0.5"
                style={{ background: ctaColor }}
              >
                {primaryCta.label}
                <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
              </a>
              <a
                href={secondaryCta.href}
                className="inline-flex items-center justify-center rounded-lg border-2 px-7 py-3.5 font-semibold transition-colors hover:bg-black/5"
                style={{ borderColor: ctaColor, color: ctaColor }}
              >
                {secondaryCta.label}
              </a>
            </div>
            <p className="mt-8 text-sm opacity-60" style={{ color: ctaColor }}>
              {socialProofText}
            </p>
          </div>
          {/* Hero image */}
          <div className="relative aspect-square rounded-2xl overflow-hidden shadow-2xl">
            <img
              src={imageSrc}
              alt={imageAlt}
              width={800}
              height={800}
              loading="eager"
              fetchPriority="high"
              decoding="async"
              className="w-full h-full object-cover"
            />
          </div>
        </div>
      </div>
    </section>
  );
}