import { featurePage } from "~/lib/marketing/features";
import { TextLink } from "~/ui/TextLink";
import { cn } from "~/utils/cn";
import { DisplayTitle } from "./DisplayTitle";
import { FeatureDemo } from "./FeatureDemo";

/** Landing-page section that previews one feature page: copy on one side, its live demo on the other. */
export function Spotlight({ slug, flip = false }: { slug: string; flip?: boolean }) {
  const page = featurePage(slug);
  if (!page) throw new Error(`Unknown feature page: ${slug}`);
  return (
    <div className="grid items-center gap-10 lg:grid-cols-2">
      <div className={cn("space-y-5", flip && "lg:order-2")}>
        <DisplayTitle title={page.title} />
        <p className="max-w-lg leading-7 text-kumo-subtle">{page.lede}</p>
        <ul className="grid gap-x-6 gap-y-3 sm:grid-cols-2">
          {page.highlights.slice(0, 2).map((item) => (
            <li key={item.title}>
              <p className="text-sm font-medium text-kumo-default">{item.title}</p>
              <p className="mt-1 text-sm leading-6 text-kumo-subtle">{item.body}</p>
            </li>
          ))}
        </ul>
        <TextLink to="/features/$slug" params={{ slug: page.slug }} className="inline-block text-sm">
          Read more about {page.nav.toLowerCase()}
        </TextLink>
      </div>
      <FeatureDemo demo={page.demo} className={cn(flip && "lg:order-1")} />
    </div>
  );
}