App Preview Hero

export default function HeroAppPreview() {
  const bars = ["h-16", "h-24", "h-20", "h-28", "h-14", "h-32", "h-20", "h-24", "h-12", "h-28", "h-16", "h-24"];
  const nav = ["Overview", "Revenue", "Customers", "Reports", "Settings"];

  return (
    <section className="relative overflow-hidden bg-slate-50 px-6 py-20 dark:bg-slate-950 md:py-28">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute left-1/2 top-0 -z-10 h-72 w-[52rem] max-w-full -translate-x-1/2 rounded-full bg-gradient-to-b from-indigo-300 to-transparent opacity-40 blur-3xl dark:from-indigo-600 dark:opacity-30"
      />

      <div className="mx-auto max-w-2xl text-center">
        <span className="inline-flex items-center gap-1.5 rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-indigo-700 ring-1 ring-inset ring-indigo-200 dark:bg-indigo-950/60 dark:text-indigo-300 dark:ring-indigo-900">
          Analytics, reimagined
        </span>
        <h1 className="mt-6 text-4xl font-semibold tracking-tight text-slate-900 dark:text-white sm:text-5xl">
          Every metric, finally in one calm dashboard
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-lg leading-relaxed text-slate-600 dark:text-slate-400">
          Watch revenue, signups and churn update in real time, then dig into any number without exporting a single spreadsheet.
        </p>
        <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <a
            href="#"
            className="inline-flex w-full items-center justify-center rounded-lg bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-indigo-600/20 transition hover:bg-indigo-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-950 sm:w-auto"
          >
            Explore the dashboard
          </a>
          <a
            href="#"
            className="inline-flex w-full items-center justify-center rounded-lg px-6 py-3 text-sm font-semibold text-slate-700 transition hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-slate-300 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:w-auto"
          >
            See a live tour
          </a>
        </div>
      </div>

      <div className="relative mx-auto mt-16 max-w-5xl">
        <div
          role="img"
          aria-label="Preview of the analytics dashboard showing revenue, active users and a weekly chart"
          className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl shadow-slate-900/10 ring-1 ring-slate-900/5 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/40 dark:ring-white/5"
        >
          <div className="flex items-center gap-2 border-b border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
            <span className="h-3 w-3 rounded-full bg-rose-400" />
            <span className="h-3 w-3 rounded-full bg-amber-400" />
            <span className="h-3 w-3 rounded-full bg-emerald-400" />
            <div className="ml-4 hidden h-6 flex-1 items-center rounded-md bg-white px-3 text-xs text-slate-400 ring-1 ring-inset ring-slate-200 dark:bg-slate-900 dark:text-slate-500 dark:ring-slate-800 sm:flex">
              app.example.com/overview
            </div>
          </div>

          <div className="flex">
            <aside className="hidden w-48 shrink-0 border-r border-slate-200 p-4 dark:border-slate-800 md:block">
              <div className="mb-5 flex items-center gap-2">
                <span className="h-6 w-6 rounded-md bg-gradient-to-br from-indigo-500 to-violet-500" />
                <span className="h-3 w-16 rounded bg-slate-200 dark:bg-slate-700" />
              </div>
              <nav className="space-y-1">
                {nav.map((item, i) => (
                  <div
                    key={item}
                    className={
                      i === 0
                        ? "flex items-center gap-2 rounded-md bg-indigo-50 px-2.5 py-2 text-sm font-medium text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-300"
                        : "flex items-center gap-2 rounded-md px-2.5 py-2 text-sm font-medium text-slate-500 dark:text-slate-400"
                    }
                  >
                    <span className="h-3.5 w-3.5 rounded bg-current opacity-40" />
                    {item}
                  </div>
                ))}
              </nav>
            </aside>

            <div className="flex-1 p-5 sm:p-6">
              <div className="grid grid-cols-3 gap-3 sm:gap-4">
                <div className="rounded-xl border border-slate-200 p-4 dark:border-slate-800">
                  <p className="text-xs text-slate-500 dark:text-slate-400">Revenue</p>
                  <p className="mt-1 text-lg font-semibold text-slate-900 dark:text-white sm:text-2xl">£48.2k</p>
                  <p className="mt-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">+12.4%</p>
                </div>
                <div className="rounded-xl border border-slate-200 p-4 dark:border-slate-800">
                  <p className="text-xs text-slate-500 dark:text-slate-400">Active users</p>
                  <p className="mt-1 text-lg font-semibold text-slate-900 dark:text-white sm:text-2xl">9,431</p>
                  <p className="mt-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">+6.1%</p>
                </div>
                <div className="rounded-xl border border-slate-200 p-4 dark:border-slate-800">
                  <p className="text-xs text-slate-500 dark:text-slate-400">Churn</p>
                  <p className="mt-1 text-lg font-semibold text-slate-900 dark:text-white sm:text-2xl">1.8%</p>
                  <p className="mt-1 text-xs font-medium text-rose-600 dark:text-rose-400">-0.3%</p>
                </div>
              </div>

              <div className="mt-4 rounded-xl border border-slate-200 p-4 dark:border-slate-800 sm:mt-6">
                <div className="mb-4 flex items-center justify-between">
                  <span className="h-3 w-24 rounded bg-slate-200 dark:bg-slate-700" />
                  <span className="h-3 w-12 rounded bg-slate-200 dark:bg-slate-700" />
                </div>
                <div className="flex h-36 items-end gap-1.5 sm:gap-2">
                  {bars.map((h, i) => (
                    <div
                      key={i}
                      className={
                        (i === 5
                          ? "bg-gradient-to-t from-indigo-500 to-violet-400 "
                          : "bg-slate-200 dark:bg-slate-700 ") +
                        "w-full rounded-t-md " +
                        h
                      }
                    />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="absolute -bottom-6 -right-3 hidden w-56 rounded-xl border border-slate-200 bg-white p-3 shadow-xl shadow-slate-900/10 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/40 sm:block">
          <div className="flex items-center gap-3">
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="h-5 w-5">
                <path d="M20 6 9 17l-5-5" />
              </svg>
            </span>
            <div>
              <p className="text-sm font-semibold text-slate-900 dark:text-white">Goal reached</p>
              <p className="text-xs text-slate-500 dark:text-slate-400">Monthly target hit early</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}