import Link from "next/link";
import { SectionIntro } from "@/components/section-intro";
import { benefits, features, problems, solutions } from "@/lib/site";

export default function Home() {
  return (
    <main>
      <section className="hero-shell overflow-hidden">
        <div className="hero-orb hero-orb-one" />
        <div className="hero-orb hero-orb-two" />
        <div className="mx-auto grid w-full max-w-7xl gap-10 px-5 py-16 md:px-8 md:py-24 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
          <div className="relative z-10">
            <p className="text-xs font-bold uppercase tracking-[0.26em] text-[var(--accent)]">
              Bizone • Business Operating Platform
            </p>
            <h1 className="mt-6 max-w-4xl font-heading text-5xl font-black tracking-[-0.06em] text-[var(--ink)] md:text-7xl">
              Semua bisnis dalam satu tempat.
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-[var(--muted)] md:text-xl">
              Bizone membantu bisnis mengelola komunikasi pelanggan, operasional tim, automasi alur
              kerja, kontak, dan proses bisnis dalam satu platform yang terhubung.
            </p>

            <div className="mt-10 flex flex-wrap gap-4">
              <Link href="/contact" className="button button-primary">
                Jadwalkan Demo
              </Link>
              <Link href="/features" className="button button-secondary">
                Pelajari Fitur
              </Link>
            </div>

            <p className="mt-8 max-w-xl text-sm leading-7 text-[var(--muted)]">
              Dirancang untuk bisnis yang ingin bekerja lebih rapi, lebih cepat, dan lebih terukur
              tanpa harus berpindah-pindah banyak tools.
            </p>
          </div>

          <div className="relative z-10">
            <div className="hero-panel">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="metric-card md:col-span-2">
                  <p className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--muted)]">
                    Satu platform untuk operasional bisnis modern
                  </p>
                  <p className="mt-4 text-sm leading-7 text-[var(--ink)]">
                    Banyak bisnis masih memakai terlalu banyak aplikasi terpisah untuk chat, kontak,
                    follow up, assignment tim, dan workflow. Bizone menyatukan kebutuhan itu ke
                    dalam satu sistem yang siap tumbuh.
                  </p>
                </div>
                <div className="metric-card">
                  <p className="text-4xl font-black tracking-[-0.05em] text-[var(--ink)]">1</p>
                  <p className="mt-2 text-sm leading-7 text-[var(--muted)]">
                    dashboard terpusat untuk komunikasi, workflow, dan visibilitas operasional.
                  </p>
                </div>
                <div className="metric-card bg-[linear-gradient(180deg,#103d94,#0a2f74)] text-white">
                  <p className="text-4xl font-black tracking-[-0.05em]">24/7</p>
                  <p className="mt-2 text-sm leading-7 text-white/82">
                    ritme operasional yang lebih siap dipantau oleh pemilik bisnis dan tim.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-24">
        <SectionIntro
          eyebrow="Masalah yang sering muncul"
          title="Operasional bisnis sering terasa berat karena sistemnya terpecah."
          description="Bizone hadir untuk membantu bisnis bekerja lebih terintegrasi dan terstruktur."
        />

        <div className="mt-12 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
          {problems.map((problem) => (
            <article key={problem} className="card">
              <p className="text-sm leading-7 text-[var(--ink)]">{problem}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="section-band">
        <div className="mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-24">
          <SectionIntro
            eyebrow="Fitur utama"
            title="Kapabilitas inti untuk tim yang ingin bekerja lebih rapi dan lebih cepat."
            description="Bizone menghubungkan komunikasi, data kontak, assignment, automation, dan proses bisnis dalam satu permukaan kerja."
            align="center"
          />

          <div className="mt-12 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            {features.map((feature) => (
              <article key={feature.title} className="card">
                <h2 className="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>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-24">
        <div className="grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
          <article className="card bg-[linear-gradient(180deg,#0d3a90,#08295e)] text-white">
            <p className="text-xs font-bold uppercase tracking-[0.24em] text-white/70">Kenapa Bizone</p>
            <h2 className="mt-4 font-heading text-4xl font-extrabold tracking-[-0.05em]">
              Sistem yang menyatukan komunikasi dengan pekerjaan nyata.
            </h2>
            <p className="mt-6 text-sm leading-8 text-white/82">
              Bizone tidak berhenti di inbox. Platform ini dirancang untuk membantu bisnis bergerak
              dari pesan masuk menjadi tindak lanjut, assignment, workflow, dan visibilitas hasil.
            </p>
          </article>

          <div className="grid gap-5 md:grid-cols-2">
            {benefits.map((benefit) => (
              <article key={benefit.title} className="card">
                <h3 className="font-heading text-2xl font-bold tracking-[-0.03em] text-[var(--ink)]">
                  {benefit.title}
                </h3>
                <p className="mt-4 text-sm leading-7 text-[var(--muted)]">{benefit.description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section-band">
        <div className="mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-24">
          <SectionIntro
            eyebrow="Use cases"
            title="Dipakai untuk ritme operasional yang berbeda, dari sales sampai customer service."
            description="Bizone cocok untuk tim yang bergantung pada komunikasi cepat, follow up terstruktur, dan koordinasi yang jelas."
          />

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

      <section className="mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-24">
        <div className="card grid gap-8 overflow-hidden bg-[linear-gradient(135deg,#f5fbff,#e7f8f6)] lg:grid-cols-[1fr_auto] lg:items-end">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.24em] text-[var(--accent)]">
              Tentang Bizone
            </p>
            <h2 className="mt-4 font-heading text-4xl font-extrabold tracking-[-0.05em] text-[var(--ink)]">
              Platform operasional bisnis yang menghubungkan komunikasi, koordinasi tim, dan workflow.
            </h2>
            <p className="mt-6 max-w-3xl text-sm leading-8 text-[var(--muted)]">
              Kami percaya bisnis modern membutuhkan sistem yang tidak hanya mudah digunakan, tetapi
              juga mampu menghubungkan komunikasi dengan proses operasional nyata.
            </p>
          </div>

          <div className="flex flex-wrap gap-4">
            <Link href="/about" className="button button-secondary">
              Pelajari Tentang Bizone
            </Link>
            <Link href="/contact" className="button button-primary">
              Minta Demo
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}
