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

export default function AboutPage() {
  return (
    <main className="mx-auto w-full max-w-7xl px-5 py-16 md:px-8 md:py-24">
      <SectionIntro
        eyebrow="Tentang Bizone"
        title="Platform yang membantu bisnis bekerja dalam satu zona terintegrasi"
        description="Bizone dibangun untuk membantu bisnis mengurangi kompleksitas operasional ketika komunikasi, data, dan workflow berjalan di sistem yang terpisah."
      />

      <section className="mt-14 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
        <article className="card min-h-[420px] bg-[radial-gradient(circle_at_top_left,rgba(23,162,164,0.18),transparent_36%),linear-gradient(180deg,#ffffff,#eef6ff)]">
          <p className="text-sm leading-8 text-[var(--muted)]">
            Dengan pendekatan yang terintegrasi, Bizone membantu tim bekerja dari satu platform untuk
            mengelola interaksi, koordinasi, dan proses bisnis secara lebih efisien.
          </p>

          <div className="mt-12 grid gap-6 md:grid-cols-2">
            <div className="rounded-[1.5rem] border border-[var(--line)] bg-white/80 p-6">
              <p className="text-xs font-bold uppercase tracking-[0.22em] text-[var(--accent)]">Vision</p>
              <p className="mt-3 font-heading text-2xl font-bold tracking-[-0.03em] text-[var(--ink)]">
                Menjadi platform yang membantu bisnis menjalankan lebih banyak proses dari satu tempat yang terhubung.
              </p>
            </div>
            <div className="rounded-[1.5rem] border border-[var(--line)] bg-white/80 p-6">
              <p className="text-xs font-bold uppercase tracking-[0.22em] text-[var(--accent)]">Positioning</p>
              <p className="mt-3 text-sm leading-7 text-[var(--muted)]">
                Bizone berada di persimpangan antara komunikasi pelanggan, orkestrasi operasional, dan kolaborasi tim.
              </p>
            </div>
          </div>
        </article>

        <article className="card">
          <p className="text-xs font-bold uppercase tracking-[0.22em] text-[var(--accent)]">Mission</p>
          <div className="mt-6 space-y-4">
            {missions.map((mission) => (
              <div key={mission} className="rounded-[1.5rem] border border-[var(--line)] bg-[var(--panel-soft)] px-5 py-4">
                <p className="text-sm leading-7 text-[var(--ink)]">{mission}</p>
              </div>
            ))}
          </div>
        </article>
      </section>
    </main>
  );
}
