"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { X } from "lucide-react";

export default function AnnouncementBar() {
  const [mounted, setMounted] = useState(false);
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    try {
      const isDismissed = localStorage.getItem("vwg-partnership-bar-dismissed") === "true";
      setDismissed(isDismissed);
    } catch {
      // localStorage may fail in private mode or SSR
    }
    setMounted(true);
  }, []);

  const handleDismiss = () => {
    setDismissed(true);
    try {
      localStorage.setItem("vwg-partnership-bar-dismissed", "true");
    } catch {
      // Ignore
    }
  };

  if (!mounted || dismissed) {
    return null;
  }

  return (
    <aside
      aria-label="Partnership Announcement"
      className="w-full bg-brand-gold text-brand-dark text-xs sm:text-sm py-2 px-4 shadow-xs transition-all duration-300"
    >
      <div className="container max-w-7xl mx-auto flex items-center justify-between gap-3">
        <div className="flex-1 text-center truncate">
          <span className="font-semibold tracking-wide text-brand-dark">
            Strategic Partnership Opportunity — Develop Vietnam Wedding Guide
          </span>
          <Link
            href="/partnership"
            className="underline underline-offset-4 decoration-brand-dark/50 hover:decoration-brand-dark text-brand-dark font-bold ml-2 transition-colors inline-flex items-center gap-1"
          >
            <span>Learn More</span>
            <span aria-hidden="true">&rarr;</span>
          </Link>
        </div>

        <button
          type="button"
          onClick={handleDismiss}
          aria-label="Dismiss partnership announcement"
          className="text-brand-dark/70 hover:text-brand-dark transition-colors p-1 rounded-full shrink-0 cursor-pointer"
        >
          <X className="w-3.5 h-3.5" />
        </button>
      </div>
    </aside>
  );
}