import { SectionIntro } from "@/components/section-intro";
import { audiences, solutions } from "@/lib/site";

export default function SolutionsPage() {
  return (
    <main className="mx-auto w-full max-w-7xl px-5 py-16 md:px-8 md:py-24">
      <SectionIntro
        eyebrow="Solusi"
        title="Dipakai untuk kebutuhan bisnis yang nyata"
        description="Bizone cocok untuk operasional yang bergantung pada komunikasi cepat, tindak lanjut terstruktur, dan koordinasi lintas tim."
      />

      <section className="mt-14 grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
        <div className="grid gap-6 md:grid-cols-2">
          {solutions.map((solution) => (
            <article key={solution.title} className="card">
              <h2 className="font-heading text-2xl font-bold tracking-[-0.03em] text-[var(--ink)]">
                {solution.title}
              </h2>
              <p className="mt-4 text-sm leading-7 text-[var(--muted)]">{solution.description}</p>
            </article>
          ))}
        </div>

        <aside className="card bg-[linear-gradient(180deg,#103d94,#0a2f74)] text-white">
          <p className="text-xs font-bold uppercase tracking-[0.24em] text-white/70">Target use cases</p>
          <h2 className="mt-4 font-heading text-3xl font-extrabold tracking-[-0.04em]">
            Cocok untuk tim yang butuh ritme operasional yang lebih rapi.
          </h2>
          <div className="mt-8 space-y-4 text-sm leading-7 text-white/82">
            {audiences.map((audience) => (
              <p key={audience} className="rounded-2xl border border-white/12 bg-white/6 px-4 py-3">
                {audience}
              </p>
            ))}
          </div>
        </aside>
      </section>
    </main>
  );
}
