const SUGGESTIONS = [
  { label: "What is Negoptim?",                    category: "Product" },
  { label: "How does promotion management work?",  category: "Features" },
  { label: "What is the Égalim law?",              category: "Regulatory" },
  { label: "How can ULiT help retailers?",         category: "Solutions" },
  { label: "What are the main platform features?", category: "Platform" },
  { label: "How do supplier negotiations work?",   category: "Commercial" },
];

const CATEGORY_COLORS: Record<string, string> = {
  Product:    "#8FD15E",
  Features:   "#47C3A6",
  Regulatory: "#C7D92F",
  Solutions:  "#14B7CC",
  Platform:   "#47C3A6",
  Commercial: "#8FD15E",
};

interface SuggestedQuestionsProps {
  onSelect: (question: string) => void;
}

export default function SuggestedQuestions({ onSelect }: SuggestedQuestionsProps) {
  return (
    <div className="w-full max-w-2xl mx-auto">
      <p className="text-[11px] text-[#94A3B8] uppercase tracking-[0.18em] text-center mb-4 font-semibold">
        Suggested questions
      </p>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
        {SUGGESTIONS.map(({ label, category }) => {
          const color = CATEGORY_COLORS[category] ?? "#47C3A6";
          return (
            <button
              key={label}
              onClick={() => onSelect(label)}
              className="group text-left bg-white border border-[#E8EDF2] rounded-xl px-4 py-3.5 hover:border-[#47C3A6] hover:shadow-md hover:-translate-y-0.5 transition-all duration-200"
            >
              <div className="flex items-start gap-3">
                <div
                  className="w-1.5 h-1.5 rounded-full mt-[7px] flex-shrink-0"
                  style={{ background: color }}
                />
                <div className="min-w-0 flex-1">
                  <span className="text-[10px] font-semibold uppercase tracking-wider"
                        style={{ color }}>
                    {category}
                  </span>
                  <p className="text-[14px] text-[#334155] group-hover:text-[#1E293B] leading-snug mt-1 transition-colors">
                    {label}
                  </p>
                </div>
                <svg
                  width="14" height="14" viewBox="0 0 16 16" fill="none"
                  className="flex-shrink-0 mt-1 text-[#CBD5E1] opacity-0 group-hover:opacity-100 group-hover:text-[#47C3A6] transition-all duration-200"
                >
                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}