export function LandingDashboardPreview() {
  return (
    <div className="relative">
      <div className="overflow-hidden rounded-2xl border border-white/10 bg-[#12141a] shadow-[0_40px_100px_rgba(0,0,0,0.55)]">
        <div className="grid grid-cols-[72px_1fr]">
          <div className="border-r border-white/8 bg-black/30 px-2 py-3">
            <div className="mb-4 flex h-7 w-7 items-center justify-center rounded-md bg-[var(--archi-gold)]/20 text-[10px] font-bold text-[var(--archi-gold)]">
              A
            </div>
            <div className="space-y-2">
              {Array.from({ length: 6 }).map((_, i) => (
                <div
                  key={i}
                  className={`h-6 rounded-md ${i === 0 ? "bg-[var(--archi-gold)]/25" : "bg-white/5"}`}
                />
              ))}
            </div>
          </div>

          <div className="p-3 sm:p-4">
            <div className="mb-3 flex items-center justify-between">
              <p className="text-[11px] font-medium text-white/80">Studio dashboard</p>
              <span className="rounded-full bg-emerald-500/15 px-2 py-0.5 text-[9px] font-medium text-emerald-400">
                Isolated
              </span>
            </div>

            <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
              {["Projects", "Inquiries", "Media"].map((label) => (
                <div
                  key={label}
                  className="rounded-xl border border-white/10 bg-white/[0.03] px-2.5 py-2"
                >
                  <p className="text-[9px] text-white/40">{label}</p>
                  <div className="mt-2 h-2 w-10 rounded bg-white/10" />
                </div>
              ))}
            </div>

            <div className="mt-3 grid gap-2 sm:grid-cols-2">
              <div className="rounded-xl border border-white/10 bg-white/[0.03] p-2.5">
                <p className="mb-2 text-[10px] text-white/70">Portfolio pipeline</p>
                <div className="space-y-2">
                  {["Draft", "Review", "Published"].map((stage) => (
                    <div key={stage} className="flex items-center gap-2">
                      <span className="h-1.5 flex-1 rounded-full bg-white/10">
                        <span className="block h-full w-2/3 rounded-full bg-[var(--archi-gold)]/70" />
                      </span>
                      <span className="w-14 text-right text-[9px] text-white/45">
                        {stage}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="rounded-xl border border-white/10 bg-white/[0.03] p-2.5">
                <p className="mb-2 text-[10px] text-white/70">Tenant boundary</p>
                <ul className="space-y-2 text-[10px] text-white/55">
                  <li>Scoped queries</li>
                  <li>Scoped storage</li>
                  <li>Scoped sessions</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
