import { SectionIntro } from "@/components/section-intro";
import { features } from "@/lib/site";

export default function FeaturesPage() {
  return (
    <main className="mx-auto w-full max-w-7xl px-5 py-16 md:px-8 md:py-24">
      <SectionIntro
        eyebrow="Fitur Bizone"
        title="Satu platform untuk komunikasi, koordinasi, dan workflow bisnis"
        description="Bizone dirancang untuk membantu bisnis mengelola komunikasi dan operasional dari satu platform yang saling terhubung."
      />

      <section className="mt-14 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
        {features.map((feature, index) => (
          <article key={feature.title} className="card">
            <p className="text-sm font-bold text-[var(--accent)]">0{index + 1}</p>
            <h2 className="mt-4 font-heading text-2xl font-bold tracking-[-0.03em] text-[var(--ink)]">
              {feature.title}
            </h2>
            <p className="mt-4 text-sm leading-7 text-[var(--muted)]">{feature.description}</p>
          </article>
        ))}
      </section>
    </main>
  );
}
