Hero Agent

"use client";

import { type CSSProperties } from "react";
import { ArrowRight, Sparkles } from "lucide-react";
import { motion, type Variants } from "motion/react";

import { ProductMock } from "@/registry/ui/product-mock";

// Self-contained theme — see the family convention: accent via a local
// `--brand`, display font loaded by the block itself (no project config).
const DISPLAY_FONT = '"Pixelify Sans", ui-sans-serif, system-ui, sans-serif';
const display: CSSProperties = { fontFamily: DISPLAY_FONT };

const container: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.14, delayChildren: 0.1 } },
};
const item: Variants = {
  hidden: { opacity: 0, y: 20, filter: "blur(16px)" },
  show: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.8, ease: [0.6, 0.9, 0.9, 1] },
  },
};

/**
 * Marketing hero for an AI/agent product — a badge, a staggered de-blurring
 * display headline, dual CTAs, and a live product dashboard below, over a soft
 * illustrated backdrop. Self-contained theme (amber accent via `brand`, Pixelify
 * display font loaded by the block); light-mode. Composes the `product-mock`
 * component. Swap `backgroundImage` for your own art (or "" to disable it).
 */
export function HeroAgent({
  brand = "#FF4701",
  backgroundImage = "/hero5.webp",
}: {
  brand?: string;
  /** URL of the backdrop art. Pass "" for a plain background. */
  backgroundImage?: string;
}) {
  return (
    <section
      className="relative overflow-hidden bg-[#f7f7f3] bg-cover bg-center bg-no-repeat text-neutral-950"
      style={{
        ["--brand" as string]: brand,
        ...(backgroundImage ? { backgroundImage: `url('${backgroundImage}')` } : {}),
      }}
    >
      {/* Self-contained display font — hoisted + deduped by React 19. */}
      {/* eslint-disable-next-line @next/next/no-page-custom-font */}
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap"
      />

      {/* white focus wash so the headline stays legible over the art */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.04)_0%,rgba(255,255,255,0.1)_24%,rgba(255,255,255,0.16)_54%,rgba(255,255,255,0.22)_78%,rgba(255,255,255,0.32)_100%)]"
      />

      <motion.div
        variants={container}
        initial="hidden"
        animate="show"
        className="relative mx-auto flex w-full max-w-6xl flex-col items-center px-5 pt-24 pb-16 text-center sm:px-8 sm:pt-28"
      >
        <motion.div
          variants={item}
          className="inline-flex items-center gap-2 rounded-full border border-black/10 bg-white/70 px-4 py-2 text-sm font-medium text-[#1f2937] backdrop-blur-md"
        >
          <Sparkles className="h-4 w-4 text-[var(--brand)]" />
          Autonomous SEO — built for modern search.
        </motion.div>

        <motion.h1
          variants={item}
          style={display}
          className="mx-auto mt-8 max-w-4xl text-4xl leading-[1.05] font-semibold tracking-tight text-balance sm:text-6xl lg:text-7xl"
        >
          Stop Doing SEO
          <br />
          Let It Run Itself
        </motion.h1>

        <motion.p
          variants={item}
          className="mx-auto mt-5 max-w-xl text-pretty text-base leading-7 text-black/70 sm:text-lg"
        >
          An AI system that finds opportunities, creates content, fixes technical
          issues, and gets you cited in AI search — automatically.
        </motion.p>

        <motion.div
          variants={item}
          className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row"
        >
          <a
            href="#start"
            className="group relative inline-flex h-11 items-center gap-1.5 overflow-hidden rounded-lg bg-neutral-950 px-5 text-sm font-medium text-white transition hover:bg-neutral-800"
          >
            <span className="pointer-events-none absolute inset-y-1 -left-10 w-10 rounded-full bg-white/40 opacity-0 blur-md transition-all duration-500 ease-out group-hover:left-[calc(100%+0.5rem)] group-hover:opacity-100" />
            <span className="relative z-10">Start now</span>
            <ArrowRight className="relative z-10 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
          </a>
          <a
            href="#how-it-works"
            className="inline-flex h-11 items-center justify-center rounded-lg border border-black/10 bg-white/70 px-5 text-sm font-medium text-[#141414] backdrop-blur-md transition hover:bg-white"
          >
            See how it works
          </a>
        </motion.div>

        <motion.p variants={item} className="mt-3 text-xs text-black/55">
          Live now. Join teams already running SEO on autopilot.
        </motion.p>

        <motion.div variants={item} className="mt-10 w-full sm:mt-14">
          <ProductMock brand={brand} className="mx-auto max-w-4xl" />
        </motion.div>
      </motion.div>
    </section>
  );
}