"use client";

import { motion } from "framer-motion";
import { ArrowRight, Megaphone } from "lucide-react";
import { Button } from "@/components/ui/button";
import NavbarLogoLeft from "@/registry/navbars/logo-left/component";

export default function AnnouncementBarHero() {
  return (
    <>
      {/* Announcement Banner — stays pinned to the top of the viewport */}
      <div className="sticky top-0 z-50 bg-gradient-to-r from-primary via-violet-600 to-fuchsia-600 text-white">
        <div className="container mx-auto px-4 py-2.5 flex items-center justify-center gap-2 text-sm font-medium">
          <Megaphone className="w-4 h-4 shrink-0" />
          <span>
            <strong>Free site review + custom performance audit</strong> —
            limited slots this month
          </span>
          <a
            href="#"
            className="underline underline-offset-2 font-semibold hover:no-underline ml-1 hidden sm:inline"
          >
            Claim yours →
          </a>
        </div>
      </div>

      <NavbarLogoLeft />

      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-background">
        {/* Background decoration */}
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] h-[600px] bg-gradient-to-b from-primary/8 to-transparent rounded-full blur-3xl" />
        </div>

        <div className="relative z-10 container mx-auto px-6 text-center max-w-3xl">
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, ease: "easeOut" }}
            className="flex flex-col items-center gap-6"
          >
            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight text-foreground leading-[1.05]">
              Your website should move as fast as{" "}
              <span className="bg-gradient-to-r from-primary to-fuchsia-500 bg-clip-text text-transparent">
                your ideas.
              </span>
            </h1>

            <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl leading-relaxed">
              We rebuild WordPress sites on modern, AI-native infrastructure —
              so you can launch new pages, offers, and experiments the same
              day you think of them. Faster. Safer. Actually yours.
            </p>

            <div className="flex flex-col sm:flex-row items-center gap-3 pt-2">
              <Button size="lg" className="gap-2 text-base">
                Get my free site review
                <ArrowRight className="w-4 h-4" />
              </Button>
              <Button asChild size="lg" variant="outline" className="text-base">
                <a href="#how-it-works">See how it works</a>
              </Button>
            </div>

            <p className="text-sm text-muted-foreground">
              10-day migrations · 30-day rollback guarantee · Zero lock-in, ever
            </p>

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