"use client";

import Image from "next/image";
import { useLocale, useTranslations } from "next-intl";
import { FileText, MessageCircle } from "lucide-react";
import { ButtonLink } from "@/components/ui/button";
import { FadeIn } from "@/components/magicui/fade-in";
import { CONTACT_INFO } from "@/data/site-data";
import { AnimatedCounter } from "@/components/magicui/animated-counter";

/* Individual flying bird — shared keyframe + CSS custom properties */
function FlyingBird({
  size,
  top,
  delay,
  duration,
  fromX,
  toX,
  fromY,
  toY,
  opacity,
  flip,
}: {
  size: number;
  top: string;
  delay: number;
  duration: number;
  fromX: string;
  toX: string;
  fromY: string;
  toY: string;
  opacity: number;
  flip?: boolean;
}) {
  return (
    <div
      className="pointer-events-none absolute"
      style={{
        top,
        left: 0,
        width: "100%",
        height: 0,
        zIndex: 1,
      }}
    >
      <div
        className="fly-across"
        style={{
          position: "absolute",
          "--fly-from-x": fromX,
          "--fly-to-x": toX,
          "--fly-from-y": fromY,
          "--fly-to-y": toY,
          "--fly-duration": `${duration}s`,
          "--fly-delay": `${delay}s`,
          "--fly-opacity": opacity,
          opacity,
        } as React.CSSProperties}
      >
        <Image
          src="/images/walet.png"
          alt=""
          width={size}
          height={size}
          className="select-none animate-bird-flap"
          aria-hidden="true"
          style={{
            objectFit: "contain",
            filter: "brightness(0.8) sepia(0.6) saturate(1.8) hue-rotate(10deg) drop-shadow(0px 1px 2px rgba(0,0,0,0.15))",
            transform: flip ? "scaleX(-1)" : undefined,
          }}
        />
      </div>
    </div>
  );
}

function Hero() {
  const locale = useLocale();
  const t = useTranslations("hero");

  return (
    <section className="relative overflow-hidden bg-gold-bg">
      {/* Background Image with Gradient Fade */}
      <div className="absolute inset-0 z-0">
        <div className="absolute inset-0 bg-gold-bg lg:w-1/2" />
        <div className="absolute inset-y-0 right-0 w-full lg:w-[65%]">
          <Image
            src="/images/bg-hero.png"
            alt="Premium Bird's Nest Background"
            fill
            className="object-cover object-[80%_center] lg:object-left"
            priority
          />
          {/* Gradient to blend image into the solid cream color of the left side */}
          <div className="absolute inset-0 bg-gradient-to-t from-gold-bg via-gold-bg/40 to-transparent lg:bg-gradient-to-r lg:from-gold-bg lg:via-gold-bg/20 lg:to-transparent" />
        </div>
      </div>
      {/* ── Flying birds ──────────────────────────────── */}
      {/* Bird 1 — slow wide arc right to left */}
      <FlyingBird
        size={64}
        top="12%"
        delay={0}
        duration={18}
        fromX="105vw"
        toX="-10vw"
        fromY="-40px"
        toY="0px"
        opacity={0.75}
        flip
      />
      {/* Bird 2 — medium, slightly lower */}
      <FlyingBird
        size={48}
        top="28%"
        delay={5}
        duration={14}
        fromX="108vw"
        toX="-12vw"
        fromY="-20px"
        toY="20px"
        opacity={0.65}
        flip
      />
      {/* Bird 3 — small, fast, near top */}
      <FlyingBird
        size={36}
        top="6%"
        delay={9}
        duration={11}
        fromX="106vw"
        toX="-10vw"
        fromY="-30px"
        toY="10px"
        opacity={0.6}
        flip
      />
      {/* Bird 4 — right to left, mid-low */}
      <FlyingBird
        size={52}
        top="55%"
        delay={3}
        duration={20}
        fromX="105vw"
        toX="-8vw"
        fromY="-10px"
        toY="30px"
        opacity={0.55}
        flip
      />
      {/* Bird 5 — right to left, near top */}
      <FlyingBird
        size={40}
        top="18%"
        delay={12}
        duration={15}
        fromX="108vw"
        toX="-6vw"
        fromY="0px"
        toY="25px"
        opacity={0.5}
        flip
      />
      {/* Bird 6 — tiny, quick, top right area */}
      <FlyingBird
        size={30}
        top="38%"
        delay={7}
        duration={10}
        fromX="102vw"
        toX="-10vw"
        fromY="-15px"
        toY="5px"
        opacity={0.45}
        flip
      />

      <div className="relative z-10 mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8">
        <div className="grid min-h-[70vh] grid-cols-1 items-center gap-12 pt-8 pb-24 sm:pt-12 sm:pb-28 lg:pb-32 lg:grid-cols-2">

          {/* ── Left ─────────────────────────────────────── */}
          <FadeIn direction="left">
            <div className="space-y-7">
              {/* Top Label */}
              <div className="text-xs font-bold uppercase tracking-[0.25em] text-[#b3955b]">
                {t("badge")}
              </div>

              {/* Title */}
              <h1 className="font-serif text-3xl font-bold leading-[1.1] tracking-tight text-ink sm:text-5xl lg:text-6xl">
                {t("headline1")} <span className="text-gold">{t("headline2")}</span>
                {t("headline3") && (
                  <>
                    {t("and") ? ` ${t("and")}` : ""} {t("headline3")}
                  </>
                )}
              </h1>

              {/* Horizontal line under title */}
              <div className="h-px w-24 bg-[#b3955b]/40" />

              <p className="max-w-lg text-sm leading-relaxed text-zinc-700 sm:text-lg whitespace-pre-line">
                {t("subtitle")}
              </p>

              <div className="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4 pt-2">
                <ButtonLink href="#contact" className="bg-[#b3955b] px-5 sm:px-6 py-5 sm:py-6 text-[10px] sm:text-[11px] uppercase tracking-widest text-white hover:bg-[#b3955b]/90 shadow-md border-none rounded-none justify-center">
                  <FileText className="mr-2 h-4 w-4" />
                  {t("requestCatalog")}
                </ButtonLink>
                <ButtonLink
                  href={CONTACT_INFO.whatsapp}
                  target="_blank"
                  rel="noopener noreferrer"
                  variant="outline"
                  className="bg-transparent px-5 sm:px-6 py-5 sm:py-6 text-[10px] sm:text-[11px] uppercase tracking-widest text-ink hover:bg-black/5 shadow-none border border-[#b3955b]/40 rounded-none justify-center"
                >
                  <MessageCircle className="mr-2 h-4 w-4 text-ink" />
                  {t("talkToSales")}
                </ButtonLink>
              </div>

              {/* Trust Indicators Block (Stats) */}
              <div className="flex flex-wrap items-center gap-6 pt-6 sm:gap-10">

                {/* Stat 1: Years Experience */}
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[#b3955b] text-[#b3955b]">
                    <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                  </div>
                  <div>
                    <p className="font-serif text-xl font-bold text-ink leading-tight">
                      <AnimatedCounter value={27} />
                    </p>
                    <p className="text-[10px] font-medium leading-snug text-muted-foreground">Years<br />Experience</p>
                  </div>
                </div>

                {/* Stat 2: Countries */}
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[#b3955b] text-[#b3955b]">
                    <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9 9 0 100-18 9 9 0 000 18z" />
                      <path strokeLinecap="round" strokeLinejoin="round" d="M3.6 9h16.8M3.6 15h16.8M12 3v18" />
                    </svg>
                  </div>
                  <div>
                    <p className="font-serif text-xl font-bold text-ink leading-tight">
                      <AnimatedCounter value={9} />
                    </p>
                    <p className="text-[10px] font-medium leading-snug text-muted-foreground">Countries<br />Exported</p>
                  </div>
                </div>

                {/* Stat 3: Certifications */}
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[#b3955b] text-[#b3955b]">
                    <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                  </div>
                  <div>
                    <p className="font-serif text-xl font-bold text-ink leading-tight">
                      <AnimatedCounter value={20} suffix="+" />
                    </p>
                    <p className="text-[10px] font-medium leading-snug text-muted-foreground">Certifications &<br />Recognitions</p>
                  </div>
                </div>

              </div>
            </div>
          </FadeIn>

          {/* ── Right: Product Image with Table Background ────────────────────────────────────── */}
          <FadeIn direction="right" delay={200}>
            <div className="relative flex items-center justify-center lg:justify-end">
              {/* Decorative rings */}
              <div className="absolute h-[420px] w-[420px] rounded-full border border-gold/10 sm:h-[500px] sm:w-[500px]" />
              <div className="absolute h-[320px] w-[320px] rounded-full border border-gold/15 sm:h-[380px] sm:w-[380px]" />

              {/* Floating cert badges */}
              <div className="absolute left-2 top-16 z-20 rounded-xl border border-gold/15 bg-white/90 px-3 py-2 shadow-lg backdrop-blur-md sm:left-6 lg:left-8">
                <p className="text-[10px] font-bold uppercase tracking-wider text-gold">HACCP</p>
                <p className="text-[9px] text-muted">
                  {locale === "zh" ? "已认证" : locale === "id" ? "Tersertifikasi" : "Certified"}
                </p>
              </div>
              <div className="absolute right-2 top-20 z-20 rounded-xl border border-gold/15 bg-white/90 px-3 py-2 shadow-lg backdrop-blur-md sm:right-6 lg:right-8">
                <p className="text-[10px] font-bold uppercase tracking-wider text-gold">ISO</p>
                <p className="text-[9px] text-muted">22000:2018</p>
              </div>
              <div className="absolute bottom-20 left-2 z-20 rounded-xl border border-gold/15 bg-white/90 px-3 py-2 shadow-lg backdrop-blur-md sm:left-8 lg:left-12">
                <p className="text-[10px] font-bold uppercase tracking-wider text-gold">HALAL</p>
                <p className="text-[9px] text-muted">
                  {locale === "zh" ? "清真认证" : locale === "id" ? "Tersertifikasi" : "Certified"}
                </p>
              </div>

              {/* Main product image */}
              <div className="relative z-10 animate-float pt-10 flex justify-center w-full sm:scale-95 lg:scale-90">
                <div className="cursor-pointer transition-transform duration-700 hover:scale-105 w-[80%] sm:w-[90%] flex flex-col items-center">
                  <Image
                    src="/images/product.png"
                    alt="Premium Edible Bird's Nest"
                    width={700}
                    height={700}
                    className="h-auto w-full max-w-[700px] drop-shadow-2xl"
                    priority
                  />
                  {/* Subtle artificial shadow on the "table" */}
                  <div className="mt-[-30px] h-6 w-[60%] rounded-[100%] bg-black/30 blur-xl filter" />
                </div>
              </div>
            </div>
          </FadeIn>

        </div>
      </div>
    </section>
  );
}

export { Hero };