"use client";

import { solutions } from "@/lib/content";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

export function SolutionsTabs() {
  return (
    <Tabs defaultValue={solutions[0].id} className="w-full">
      <TabsList
        variant="line"
        className="h-auto w-full flex-wrap justify-start gap-1 rounded-none bg-transparent p-0"
      >
        {solutions.map((s) => (
          <TabsTrigger
            key={s.id}
            value={s.id}
            className="h-9 px-3 text-sm data-active:text-foreground"
          >
            {s.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {solutions.map((s) => (
        <TabsContent key={s.id} value={s.id} className="mt-10">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-primary">
            {s.label}
          </p>
          <h2 className="mt-3 max-w-3xl font-heading text-3xl leading-tight text-foreground md:text-4xl">
            {s.headline}
          </h2>
          <p className="mt-5 max-w-3xl text-base leading-relaxed text-muted-foreground">
            {s.body}
          </p>
          <ul className="mt-8 grid gap-3 sm:grid-cols-3">
            {s.outcomes.map((o) => (
              <li
                key={o}
                className="rounded-xl border border-white/10 bg-white/5 p-4 text-sm leading-relaxed text-foreground/90 backdrop-blur-xl"
              >
                {o}
              </li>
            ))}
          </ul>
        </TabsContent>
      ))}
    </Tabs>
  );
}