import { useEffect, useState } from "react";
import { ArkLogoMark } from "./ArkLogoMark";

const HERO_JPEG = "/assets/ark-library/media/jpeg/hero.jpg";

/** Hero: branded JPEG when present; otherwise gold mark + glow (previous behaviour). */
export function HeroVisual() {
  const [usePhoto, setUsePhoto] = useState(false);

  useEffect(() => {
    const im = new Image();
    im.onload = () => setUsePhoto(true);
    im.onerror = () => setUsePhoto(false);
    im.src = HERO_JPEG;
  }, []);

  if (usePhoto) {
    return (
      <div className="relative flex min-h-[220px] md:min-h-[280px] items-center justify-center md:justify-end">
        <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-3xl">
          <div className="absolute -right-8 top-1/2 h-[140%] w-[90%] -translate-y-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(212,175,55,0.18)_0%,transparent_68%)]" />
        </div>
        <img
          src={HERO_JPEG}
          alt=""
          className="relative z-10 max-h-[min(340px,52vh)] w-full max-w-lg rounded-2xl object-contain shadow-[0_0_48px_rgba(212,175,55,0.22)]"
          loading="eager"
          decoding="async"
          onError={() => setUsePhoto(false)}
        />
      </div>
    );
  }

  return (
    <div className="relative flex min-h-[220px] md:min-h-[280px] items-center justify-center md:justify-end">
      <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-3xl">
        <div className="absolute -right-8 top-1/2 h-[140%] w-[90%] -translate-y-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(212,175,55,0.22)_0%,transparent_68%)]" />
        <div className="absolute right-[12%] top-[8%] h-3 w-3 rotate-12 rounded-sm border border-ark-gold/40 bg-ark-gold/10" />
        <div className="absolute right-[22%] top-[18%] h-2 w-2 -rotate-6 rounded-sm border border-ark-gold/30" />
        <div className="absolute right-[8%] bottom-[28%] h-2.5 w-2.5 rotate-45 rounded-sm bg-ark-gold/15" />
      </div>

      <div className="relative flex flex-col items-center">
        <div className="relative drop-shadow-[0_0_40px_rgba(212,175,55,0.35)]">
          <ArkLogoMark className="h-36 w-36 md:h-44 md:w-44" />
          <div className="absolute -bottom-2 left-1/2 h-16 w-28 -translate-x-1/2 rounded-[100%] bg-gradient-to-t from-ark-gold/25 via-ark-gold/08 to-transparent blur-md" />
        </div>
        <div
          className="-mt-1 h-3 w-40 rounded-[100%] bg-gradient-to-r from-transparent via-ark-gold/35 to-transparent shadow-[0_0_24px_rgba(212,175,55,0.25)]"
          aria-hidden
        />
      </div>
    </div>
  );
}
