Feature showcase

import {
  LuCalendarDays,
  LuChartPie,
  LuLaptop,
  LuReceipt,
  LuSparkles,
  LuUsers,
} from "react-icons/lu";
import { Card, Carousel, CarouselSlide } from "@nexera-ui/react";

const FEATURES = [
  {
    title: "Leave in two taps",
    body: "Request time off from your phone and see who else is out before you book.",
    icon: <LuCalendarDays />,
    tone: "fill-chart-1",
    tag: "Time off",
  },
  {
    title: "Payslips that explain themselves",
    body: "Every deduction comes with a plain-language note, from pension to student loan.",
    icon: <LuReceipt />,
    tone: "fill-chart-2",
    tag: "Payroll",
  },
  {
    title: "Onboarding on autopilot",
    body: "Laptops, accounts and first-week meetings are ready before day one.",
    icon: <LuLaptop />,
    tone: "fill-chart-3",
    tag: "Onboarding",
  },
  {
    title: "An org chart that stays current",
    body: "Moves, promotions and new hires update the chart the moment they are approved.",
    icon: <LuUsers />,
    tone: "fill-chart-4",
    tag: "People",
  },
  {
    title: "Headcount you can plan with",
    body: "Live cost per team and open roles, broken down by quarter and location.",
    icon: <LuChartPie />,
    tone: "fill-chart-5",
    tag: "Insights",
  },
];

/** Decorative card artwork drawn from theme tokens; replace with product screenshots. */
function Art({ tone }: { tone: string }) {
  return (
    <svg
      viewBox="0 0 320 180"
      preserveAspectRatio="xMidYMid slice"
      aria-hidden
      className="size-full"
    >
      <rect width="320" height="180" className="fill-sunken" />
      <rect x="40" y="36" width="240" height="144" rx="12" className="fill-surface" />
      <rect x="60" y="58" width="90" height="12" rx="6" className={tone} />
      <rect x="60" y="84" width="200" height="8" rx="4" className="fill-subtle" />
      <rect x="60" y="102" width="160" height="8" rx="4" className="fill-subtle" />
      <circle cx="244" cy="140" r="22" className={tone} opacity="0.6" />
    </svg>
  );
}

/** Feature showcase: a carousel of product highlights on cards. */
export default function FeatureShowcase() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <section aria-labelledby="showcase-title" className="mx-auto grid max-w-6xl gap-6">
        <header className="grid justify-items-start gap-2">
          <p className="flex items-center gap-2 text-body-small text-brand-text">
            <LuSparkles aria-hidden /> New in Northwind this autumn
          </p>
          <h2 id="showcase-title" className="text-heading-h2 text-primary">
            Everything your people team needs
          </h2>
          <p className="max-w-2xl text-body-large text-secondary">
            Five highlights from the October release, built with feedback from 300 HR teams.
          </p>
        </header>
        <Carousel
          aria-labelledby="showcase-title"
          slidesPerView={{ base: 1, md: 2, lg: 3 }}
          indicator="dots"
        >
          {FEATURES.map((feature) => (
            <CarouselSlide key={feature.title} className="h-full">
              <Card
                className="h-full"
                media={<Art tone={feature.tone} />}
                icon={feature.icon}
                title={feature.title}
                titleLevel={3}
                body={feature.body}
                meta={feature.tag}
                action={
                  <a
                    href={`#feature-${feature.tag.toLowerCase().replace(/\s+/g, "-")}`}
                    className="text-body-small text-brand-text underline underline-offset-4"
                  >
                    Learn more<span className="sr-only"> about {feature.title.toLowerCase()}</span>
                  </a>
                }
              />
            </CarouselSlide>
          ))}
        </Carousel>
      </section>
    </div>
  );
}