"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { X, Sparkles } from "lucide-react";

const STORAGE_KEY = "innovations_sticky_bar_dismissed";

export default function StickyBar() {
  const [visible, setVisible] = useState(false);

  // SSR-guarded: check localStorage only in the browser
  useEffect(() => {
    const dismissed = localStorage.getItem(STORAGE_KEY);
    if (!dismissed) {
      setVisible(true);
    }
  }, []);

  function dismiss() {
    setVisible(false);
    localStorage.setItem(STORAGE_KEY, "true");
  }

  if (!visible) {
    return (
      <div className="flex min-h-[200px] flex-col items-center justify-center gap-4 p-8 text-center">
        <p className="text-sm text-muted-foreground">
          Sticky bar is dismissed.{" "}
          <button
            onClick={() => {
              localStorage.removeItem(STORAGE_KEY);
              setVisible(true);
            }}
            className="text-primary underline hover:no-underline"
          >
            Reset demo
          </button>
        </p>
      </div>
    );
  }

  return (
    <>
      {/* Sticky bar */}
      <div className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between gap-4 bg-primary px-4 py-3 sm:px-6">
        <div className="flex items-center gap-2 text-primary-foreground min-w-0">
          <Sparkles className="h-4 w-4 shrink-0 opacity-80" />
          <p className="text-sm font-medium truncate">
            <span className="font-bold">Limited time:</span> Get our free growth playbook — no strings attached.
          </p>
        </div>

        <div className="flex items-center gap-2 shrink-0">
          <Button
            size="sm"
            variant="secondary"
            className="h-7 text-xs font-semibold hidden sm:inline-flex"
            asChild
          >
            <a href="#optin">Grab it free</a>
          </Button>
          <button
            onClick={dismiss}
            aria-label="Dismiss"
            className="rounded-full p-1 text-primary-foreground/70 transition-colors hover:bg-white/20 hover:text-primary-foreground"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
      </div>

      {/* Spacer to prevent content jump */}
      <div className="h-11" />

      {/* Preview content */}
      <div className="flex min-h-[180px] items-center justify-center p-8">
        <p className="text-sm text-muted-foreground text-center max-w-xs">
          Scroll down — the bar stays pinned to the top. Dismiss it with ✕ and it won't reappear (localStorage).
        </p>
      </div>
    </>
  );
}