import Icon from "../Icon";
import { PAGES } from "@/lib/pages-defaults";
import { pick } from "@/lib/home-defaults";

export default function RandomNumberHero({ content = {} }) {
  const d = PAGES["random-number-domain-generator"].hero;
  const c = content || {};
  return (
    <section id="top" className="relative overflow-hidden">
      <div className="absolute inset-0 hero-grid pointer-events-none" />
      <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[700px] h-[700px] glow opacity-60 pointer-events-none" />
      <div className="relative max-w-7xl mx-auto px-5 lg:px-8 pt-16 pb-10 md:pt-24 md:pb-14">
        <div className="flex justify-center animate-fade-up">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-ink-200 dark:border-ink-800 bg-white/60 dark:bg-ink-900/60 backdrop-blur text-xs">
            <Icon.Layers className="w-3 h-3 text-brand-500 dark:text-brand-300" />
            <span className="text-ink-500 dark:text-ink-400">
              {pick(c.badgeLabel, d.badgeLabel)}
            </span>
            <span className="text-ink-300 dark:text-ink-700">·</span>
            <span className="font-mono font-medium text-ink-900 dark:text-ink-100">
              {pick(c.badgeDetail, d.badgeDetail)}
            </span>
          </div>
        </div>
        <h1
          className="mt-6 text-center font-semibold tracking-tight text-ink-900 dark:text-ink-50 text-[40px] leading-[1.05] sm:text-5xl md:text-6xl animate-fade-up"
          style={{ animationDelay: "40ms" }}
        >
          {pick(c.titleStart, d.titleStart)}{" "}
          <span className="font-serif italic font-normal text-brand-500 dark:text-brand-300">
            {pick(c.titleAccent, d.titleAccent)}
          </span>
        </h1>
        <p
          className="mt-5 max-w-2xl mx-auto text-center text-ink-500 dark:text-ink-400 text-[16px] md:text-lg leading-relaxed animate-fade-up"
          style={{ animationDelay: "80ms" }}
        >
          {pick(c.description, d.description)}
        </p>
      </div>
    </section>
  );
}