"use client"

import * as React from "react"
import { motion } from "framer-motion"
import { fadeUp, staggerContainer } from "@/lib/motion"
import { Search, TrendingUp, Folder } from "lucide-react"
import Link from "next/link"

interface SuggestionItem {
  title: string
  subtitle: string
  tag: string
  icon: string
}

interface HeroStatsItem {
  value: string
  suffix: string
  label: string
}

interface HeroData {
  badge: string
  titlePrefix: string
  titleSuffix: string
  headline: string
  description: string
  search: {
    placeholder: string
    buttonText: string
    autocompleteLabel: string
    suggestions: SuggestionItem[]
  }
  popular: {
    label: string
    chips: string[]
  }
  stats: HeroStatsItem[]
}

export function DataOneHero({ data }: { data: HeroData }) {
  const [isFocused, setIsFocused] = React.useState(false)
  const inputRef = React.useRef<HTMLInputElement>(null)

  return (
    <section className="bg-navy relative overflow-hidden">
      {/* Background pattern */}
      <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:30px_30px]" />
      
      <div className="relative max-w-[920px] mx-auto px-7 pt-15 pb-0 text-center">
        <motion.div
          initial="hidden"
          animate="visible"
          variants={staggerContainer}
          className="space-y-6 flex flex-col items-center"
        >
          {/* Badge */}
          <motion.div
            variants={fadeUp}
            className="inline-flex items-center gap-2 text-[11.5px] font-semibold tracking-widest uppercase text-accent-gold border border-accent-gold/30 rounded-full px-3.5 py-1.5"
          >
            <span className="w-1.5 h-1.5 rounded-full bg-gold animate-pulse shrink-0" />
            {data.badge}
          </motion.div>

          {/* Logo Name */}
          <motion.div
            variants={fadeUp}
            className="font-display text-[40px] tracking-[-0.5px] leading-none"
          >
            <span className="text-white">{data.titlePrefix}</span>
            <span className="text-gold">{data.titleSuffix}</span>
          </motion.div>

          {/* Headline */}
          <motion.h1
            variants={fadeUp}
            className="font-display text-[38px] md:text-[46px] leading-[1.1] tracking-[-0.5px] text-white max-w-[800px]"
            dangerouslySetInnerHTML={{ __html: data.headline }}
          />

          {/* Description */}
          <motion.p
            variants={fadeUp}
            className="text-[16px] md:text-[17px] leading-[1.65] font-light text-white/68 max-w-[620px] !mt-5.5"
          >
            {data.description}
          </motion.p>

          {/* Search bar & Autocomplete */}
          <motion.div
            variants={fadeUp}
            className="relative w-full max-w-[680px] !mt-7.5 z-30"
          >
            <div className="flex items-center bg-white rounded-[4px] shadow-[0_18px_50px_rgba(0,0,0,0.28)] overflow-visible relative border border-hairline">
              <Search className="size-5 text-navy ml-4.5 shrink-0" />
              <input
                ref={inputRef}
                type="text"
                placeholder={data.search.placeholder}
                onFocus={() => setIsFocused(true)}
                onBlur={() => setTimeout(() => setIsFocused(false), 200)}
                className="flex-1 border-none outline-none py-4 px-3.5 text-[15.5px] font-sans text-ink bg-transparent placeholder-[#9A968E]"
              />
              <button className="bg-navy hover:bg-navy/90 text-white border-none m-1.5 rounded-[3px] px-5.5 py-2.5 text-[14.5px] font-semibold cursor-pointer transition-all active:translate-y-0.5 shrink-0">
                {data.search.buttonText}
              </button>

              {/* Autocomplete Dropdown */}
              {isFocused && (
                <div className="absolute top-[calc(100%+8px)] left-0 right-0 bg-white border border-[#E2DDD6] rounded-[5px] shadow-[0_18px_50px_rgba(0,0,0,0.18)] overflow-hidden text-left z-50">
                  <div className="px-4 py-2 text-[10.5px] font-bold tracking-wider uppercase text-[#9A968E] bg-off-white border-b border-[#E2DDD6]">
                    {data.search.autocompleteLabel}
                  </div>
                  {data.search.suggestions.map((sug, idx) => (
                    <div
                      key={idx}
                      className="flex items-center gap-3 px-4 py-3 hover:bg-[#F7F6F3] border-b border-[#F0EDE8] last:border-b-0 cursor-pointer transition-colors"
                    >
                      {sug.icon === "ti-folders" ? (
                        <Folder className="size-[18px] text-gold shrink-0" />
                      ) : (
                        <TrendingUp className="size-[18px] text-navy shrink-0" />
                      )}
                      <div className="flex-1">
                        <div className="text-[13.5px] font-medium text-ink">
                          {sug.title}
                        </div>
                        <div className="text-[11.5px] text-[#9A968E]">
                          {sug.subtitle}
                        </div>
                      </div>
                      <span className={`text-[11.5px] font-bold ${sug.tag === "Open" ? "text-navy" : "text-[#1A7340]"}`}>
                        {sug.tag}
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Popular chips */}
            <div className="flex items-center justify-center gap-2 flex-wrap mt-4.5">
              <span className="text-[12.5px] text-white/50">{data.popular.label}</span>
              {data.popular.chips.map((chip, idx) => (
                <Link
                  key={idx}
                  href={`/dataone/iq-search?q=${encodeURIComponent(chip.toLowerCase())}`}
                  className="text-[12.5px] text-white bg-white/8 hover:bg-white/16 border border-white/16 rounded-full px-3.5 py-1.2 cursor-pointer transition-all hover:-translate-y-0.5 duration-200 no-underline"
                >
                  {chip}
                </Link>
              ))}
            </div>
          </motion.div>

          {/* Stats strip */}
          <motion.div
            variants={fadeUp}
            className="w-full grid grid-cols-2 md:grid-cols-4 border border-white/12 border-b-0 bg-black/18 !mt-14 text-left"
          >
            {data.stats.map((stat, idx) => (
              <div
                key={idx}
                className={`py-5 px-6 ${idx < 3 ? "border-r border-white/10" : ""}`}
              >
                <div className="font-display text-[28px] md:text-[30px] text-white leading-none">
                  {stat.value}
                  <span className="text-accent-gold">{stat.suffix}</span>
                </div>
                <div className="text-[11.5px] text-white/45 mt-1 leading-normal font-sans">
                  {stat.label}
                </div>
              </div>
            ))}
          </motion.div>

        </motion.div>
      </div>
    </section>
  )
}