import ScrollReveal from '@/components/ScrollReveal';

interface HeroStat {
  value: string;
  label: string;
}

interface ProductHeroProps {
  tag: string;
  productName: string;
  tagline: string;
  description: string;
  heroImage: string;
  heroImageAlt?: string;
  primaryCTA?: { label: string; href: string };
  secondaryCTA?: { label: string; href: string };
  inlineBadges?: string[];
  heroStats?: HeroStat[];
  breadcrumbLabel?: string;
  accentColor?: string;
}

const ProductHeroEN = ({
  tag,
  productName,
  tagline,
  description,
  heroImage,
  heroImageAlt,
  inlineBadges = [],
  heroStats = [],
  breadcrumbLabel = 'Our solutions',
  accentColor,
}: ProductHeroProps) => {
  const accent = accentColor ?? 'hsl(var(--primary))';
  const accentTint = accentColor
    ? `color-mix(in srgb, ${accentColor} 12%, transparent)`
    : 'hsl(var(--primary) / 0.1)';

  return (
    <section className="bg-cream overflow-hidden min-h-[100svh]">
      <div className="grid grid-rows-[auto_1fr] lg:grid-rows-1 grid-cols-1 lg:grid-cols-[58fr_42fr] min-h-[100svh]">
        {/* LEFT / TOP — cream + copy */}
        <div className="relative bg-cream px-5 pt-16 pb-6 sm:px-8 sm:pt-20 lg:px-14 lg:py-16 flex flex-col justify-start lg:justify-center">
          <ScrollReveal>
            <nav className="flex items-center gap-2 text-xs text-foreground/55 font-body mb-5 lg:mb-8">
              <a href="/en" className="hover:text-foreground/80 transition-colors">Home</a>
              <span className="text-foreground/35">/</span>
              <a href="/en" className="hover:text-foreground/80 transition-colors">{breadcrumbLabel}</a>
              <span className="text-foreground/35">/</span>
              <span className="text-foreground/80">{productName}</span>
            </nav>

            <div className="mb-3 lg:mb-4">
              <span
                className="inline-flex items-center rounded-full text-[11px] font-bold font-body uppercase tracking-[0.15em] px-4 py-1.5"
                style={{ backgroundColor: accentTint, color: accent }}
              >
                {tag}
              </span>
            </div>

            <h1
              className="font-satoshi font-black text-foreground leading-[0.92] mb-4 lg:mb-5"
              style={{ fontSize: 'clamp(2.75rem, 7vw, 5.5rem)', letterSpacing: '-0.035em' }}
            >
              {productName}
            </h1>

            {/* Accent bar — product dominant color */}
            <div className="flex items-start gap-3 lg:gap-4 mb-4 lg:mb-6">
              <div
                className="w-1.5 shrink-0 rounded-full self-stretch"
                style={{ backgroundColor: accent }}
              />
              <p
                className="font-satoshi text-lg sm:text-xl lg:text-2xl font-bold text-foreground/80 leading-tight"
                style={{ letterSpacing: '-0.02em' }}
              >
                {tagline}
              </p>
            </div>

            <p className="text-foreground/70 text-sm sm:text-base font-body leading-relaxed mb-5 lg:mb-7 max-w-[520px]">
              {description}
            </p>

            {inlineBadges.length > 0 && (
              <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
                {inlineBadges.map((b, i) => (
                  <span key={i} className="flex items-center gap-2 text-[11px] lg:text-xs text-foreground/65 font-body">
                    {i > 0 && <span className="w-1 h-1 rounded-full bg-foreground/25 hidden sm:block" />}
                    {b}
                  </span>
                ))}
              </div>
            )}
          </ScrollReveal>
        </div>

        {/* RIGHT / BOTTOM — navy + image + stats */}
        <div className="relative bg-navy text-white flex flex-col min-h-[42svh] lg:min-h-0">
          <div className="relative flex-1 min-h-0">
            <img
              src={heroImage}
              alt={heroImageAlt ?? `${productName} applied on an industrial roof`}
              className="absolute inset-0 w-full h-full object-cover object-center"
              loading="eager"
              fetchPriority="high"
            />
            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-navy/40" />
            <div className="absolute inset-0 bg-gradient-to-r from-navy/20 to-transparent hidden lg:block" />
          </div>

          {heroStats.length > 0 && (
            <div className="relative bg-navy px-5 py-4 sm:px-8 lg:px-10 lg:py-7">
              <ScrollReveal>
                <div
                  className="grid gap-3 lg:gap-6"
                  style={{ gridTemplateColumns: `repeat(${Math.min(heroStats.length, 3)}, 1fr)` }}
                >
                  {heroStats.map((s, i) => (
                    <div key={i} className="flex flex-col items-start">
                      <span
                        className="font-display text-white leading-none mb-1 lg:mb-1.5 font-bold"
                        style={{ fontSize: 'clamp(1.35rem, 2.4vw, 2.1rem)' }}
                      >
                        {s.value}
                      </span>
                      <span className="text-white/60 text-[10px] lg:text-xs font-body leading-tight">{s.label}</span>
                    </div>
                  ))}
                </div>
              </ScrollReveal>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

export default ProductHeroEN;